Filter | Next.js | Page 1

daring frost Apr 21, 2024, 11:37 AM

#

Hi I have a next js project where I use tailwind for css. I have a main filter when I click on it the background will be grey and the color of the font changes to gold. Moreover if the filter has subfilter they will be shown below. Now the main filter works as expected but when the subfilter is shown and when I click on them it does not change the font and the background but it is aplied as I see it in the URL. Below you will find the filterButtons function.
export default function FilterButtons({
categories,
subCategories,
buttonNames,
buttonSubNames,
}: FilterButtonsProps) {
const router = useRouter();
const locale = useLocale();
const searchParams = useSearchParams();
const newParams = new URLSearchParams(searchParams.toString());
const [clickedCategory, setClickedCategory] = useState<string | null>(null);
const [clickedSubCategory, setClickedSubCategory] = useState<string | null>(
null
);
const handleFilter = useCallback(
(category: string, subCategory?: string) => {
const currentCategory = newParams.get('category');
const currentSubCategory = newParams.get('subcategory');
if (
currentCategory === category &&
(!subCategory || currentSubCategory === subCategory)
) {
newParams.delete('category');
newParams.delete('subcategory');
setClickedCategory(null);
setClickedSubCategory(null);
} else {
newParams.set('category', category);
if (subCategory) {
newParams.set('subcategory', subCategory); // Set 'subcategory' in the URL
setClickedSubCategory(subCategory);
} else {
newParams.delete('subcategory');
setClickedSubCategory(null);
}
setClickedCategory(category); // Set clicked category
}
newParams.set('page', '1');
router.push(createUrl(locale + '/products', newParams));
},
[newParams, router, locale]
);

quaint kindleBOT Apr 21, 2024, 11:37 AM

#

Hi @daring frost. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the provided code, it seems like you're correctly setting the state for both the main category and subcategory when they're clicked. However, you didn't provide the part of your code where you're applying the CSS classes based on whether a category or subcategory is clicked.

In order to change the font and background color when a subcategory is clicked, you should apply a conditional class to the subcategory button based on whether it's the currently clicked subcategory. You can use the clickedSubCategory state for this.

Here's a general example of how you might do this with Tailwind CSS:

{subCategories.map((subCategory) => (
  <button
    onClick={() => handleFilter(category, subCategory)}
    className={`${
      clickedSubCategory === subCategory ? 'bg-gray-500 text-gold' : ''
    }`}
  >
    {subCategory}
  </button>
))}

In this example, the bg-gray-500 text-gold classes would be applied to the button when it's the currently clicked subcategory, changing its background to gray and its text to gold. You should replace 'bg-gray-500 text-gold' with the actual classes you want to apply.

Please note that this is a general example and might need to be adjusted based on the rest of your code and your exact requirements.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@daring frost kapa.ai is still learning and improving, please let us know how it did by reacting below

daring frost Apr 21, 2024, 11:38 AM

#

Here is the part with applying the css @quaint kindle
return (
<div className="flex flex-col items-start">
<div className="flex flex-wrap justify-center gap-2 md:border-b-[1px] md:border-white">
{categories.map((category) => (
<button
key={category}
onClick={() => handleFilter(category)}
className={md:rounded-lg px-6 md:px-4 py-4 text-md shadow-md transition duration-300 border-b-[1px] border-white md:border-none ${ clickedCategory === category ? 'bg-buttongrey text-gold' : 'bg-golden-gradient text-transparent bg-clip-text' }}
>
{buttonNames[category].map((name) => (
<span key={name}>{name}</span>
))}
</button>
))}
</div>
{clickedCategory && subCategories[clickedCategory] && (
<div className="flex flex-row gap-1 border-b-[1px] border-white">
{subCategories[clickedCategory].map((subCategory) => (
<button
key={subCategory}
onClick={() => handleFilter(clickedCategory, subCategory)}
className={rounded-lg px-4 py-2 shadow-md text-sm transition duration-300 ${ clickedSubCategory === subCategory ? 'bg-buttongrey text-gold' : 'bg-golden-gradient text-transparent bg-clip-text' }}
>
{buttonSubNames[subCategory].map((name) => (
<span key={name}>{name}</span>
))}
</button>
))}
</div>
)}
</div>
);
}

quaint kindleBOT Apr 21, 2024, 11:38 AM

#

Let me check the knowledge base for you. One moment! :books:

#

Based on the provided code, it seems like you're correctly applying the CSS classes based on whether a category or subcategory is clicked.

The bg-buttongrey text-gold classes are applied when a category or subcategory is the currently clicked one, which should change its background to grey and its text to gold. The bg-golden-gradient text-transparent bg-clip-text classes are applied otherwise.

If the subcategory buttons are not changing their appearance when clicked, there might be an issue with the CSS classes you're using. Here are a few things you could check:

Make sure the bg-buttongrey, text-gold, bg-golden-gradient, and bg-clip-text classes are defined in your Tailwind CSS configuration. If they're custom classes, you might need to add them to your configuration.
Check if there's any other CSS that could be overriding the classes you're applying to the subcategory buttons.
Make sure the handleFilter function is correctly setting the clickedSubCategory state when a subcategory is clicked.

If you're still having issues, it might be helpful to inspect the subcategory buttons using your browser's developer tools. This could help you see if the classes are being applied correctly and if there's any other CSS that could be affecting the buttons' appearance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@daring frost kapa.ai is still learning and improving, please let us know how it did by reacting below

daring frost Apr 21, 2024, 11:40 AM

#

@quaint kindle you have now the filter function and how I apply the css and as I mentioned it before it is not working as I would want it. Because when I click on the main filter the css is applied correctly when I do it for the subfilter I do not get any change on the subfilter so no css is being applied. I can see the subfilter in the url but the css is not being applied.

quaint kindleBOT Apr 21, 2024, 11:40 AM

#

Let me check the knowledge base for you. One moment! :books:

#

Based on the provided code, it seems like you're correctly applying the CSS classes based on whether a category or subcategory is clicked.

The bg-buttongrey text-gold classes are applied when a category or subcategory is the currently clicked one, which should change its background to grey and its text to gold. The bg-golden-gradient text-transparent bg-clip-text classes are applied otherwise.

If the subcategory buttons are not changing their appearance when clicked, there might be an issue with the CSS classes you're using. Here are a few things you could check:

Make sure the bg-buttongrey, text-gold, bg-golden-gradient, and bg-clip-text classes are defined in your Tailwind CSS configuration. If they're custom classes, you might need to add them to your configuration.
Check if there's any other CSS that could be overriding the classes you're applying to the subcategory buttons.
Make sure the handleFilter function is correctly setting the clickedSubCategory state when a subcategory is clicked.

If you're still having issues, it might be helpful to inspect the subcategory buttons using your browser's developer tools. This could help you see if the classes are being applied correctly and if there's any other CSS that could be affecting the buttons' appearance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@daring frost kapa.ai is still learning and improving, please let us know how it did by reacting below

daring frost Apr 21, 2024, 11:45 AM

#

@quaint kindle there is also a different error when I click on the subfilter a second time it deletes the whole filters but only the one main filter is shown but it should show all of them it should only delete the subfilter since the main is still clicked

quaint kindleBOT Apr 21, 2024, 11:45 AM

#

Let me check the knowledge base for you. One moment! :books:

#

Based on the provided handleFilter function, it seems like clicking a subcategory a second time will indeed remove both the category and subcategory from the URL parameters. This is because the function checks if the current category and subcategory match the ones being clicked, and if they do, it removes both:

if (
  currentCategory === category &&
  (!subCategory || currentSubCategory === subCategory)
) {
  newParams.delete('category'); 
  newParams.delete('subcategory'); 
  setClickedCategory(null); 
  setClickedSubCategory(null); 
}

If you want to only remove the subcategory when a subcategory is clicked a second time, you could modify this check to only remove the subcategory if one is provided:

if (
  currentCategory === category &&
  (!subCategory || currentSubCategory === subCategory)
) {
  if (subCategory) {
    newParams.delete('subcategory'); 
    setClickedSubCategory(null); 
  } else {
    newParams.delete('category'); 
    setClickedCategory(null); 
  }
}

With this change, clicking a subcategory a second time should only remove the subcategory from the URL parameters, while clicking a category a second time should remove the category as before.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@daring frost kapa.ai is still learning and improving, please let us know how it did by reacting below

daring frost Apr 21, 2024, 11:47 AM

#

@quaint kindle its still not working
const handleFilter = useCallback(
(category: string, subCategory?: string) => {
const currentCategory = newParams.get('category');
const currentSubCategory = newParams.get('subcategory');

  if (
    currentCategory === category &&
    (!subCategory || currentSubCategory === subCategory)
  ) {
    if (subCategory) {
      newParams.delete('subcategory');
      setClickedSubCategory(null);
    } else {
      newParams.delete('category');
      setClickedCategory(null);
    }
  } else {
    newParams.set('category', category);
    if (subCategory) {
      newParams.set('subcategory', subCategory); // Set 'subcategory' in the URL
      setClickedSubCategory(subCategory); // Set clicked subcategory when it's defined
    } else {
      newParams.delete('subcategory'); // Delete 'subcategory' from the URL when a new main category is clicked
      setClickedSubCategory(null); // Reset clicked subcategory when a new main category is clicked
    }
    setClickedCategory(category); // Set clicked category
  }

  newParams.set('page', '1'); // Reset page number to 1

  router.push(createUrl(locale + '/products', newParams));
},
[newParams, router, locale]

)

quaint kindleBOT Apr 21, 2024, 11:47 AM

#

Let me check the knowledge base for you. One moment! :books:

#

Based on the updated handleFilter function, it seems like you're correctly handling the deletion of the subcategory when it's clicked a second time. However, if it's still not working as expected, there might be an issue elsewhere in your code.

Here are a few things you could check:

Make sure the handleFilter function is being called with the correct arguments when a subcategory is clicked. You should be passing the main category as the first argument and the subcategory as the second argument.
Check if there's any other code that could be modifying the URL parameters or the clickedCategory and clickedSubCategory states.
Make sure the createUrl function is correctly creating the URL with the updated parameters.
Try logging the newParams object, the clickedCategory and clickedSubCategory states, and the arguments passed to handleFilter to see if they're what you expect.

If you're still having issues, it might be helpful to provide more context or a more complete example of your code. This could help identify any other potential issues.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@daring frost kapa.ai is still learning and improving, please let us know how it did by reacting below

daring frost Apr 21, 2024, 12:02 PM

#

@quaint kindle There is one last issue with the main filter when I onclick it I see the url reset but I don't see the other filters it just showes me the one

quaint kindleBOT Apr 21, 2024, 12:02 PM

#

Let me check the knowledge base for you. One moment! :books:

#

Based on the provided handleFilter function, when a main category is clicked a second time, it should remove the category from the URL parameters and show all filters again:

if (
  currentCategory === category &&
  (!subCategory || currentSubCategory === subCategory)
) {{
  if (subCategory) {{
    newParams.delete('subcategory');
    setClickedSubCategory(null);
  }} else {{
    newParams.delete('category');
    setClickedCategory(null);
  }}
}}

If only the clicked category is being shown after it's clicked a second time, there might be an issue with how you're rendering the filters.

Here are a few things you could check:

Make sure you're correctly rendering all categories and subcategories, not just the ones that are currently selected.
Check if there's any other code that could be modifying the list of filters that are shown.
Try logging the list of filters that are being rendered to see if it's what you expect.

If you're still having issues, it might be helpful to provide more context or a more complete example of your code. This could help identify any other potential issues.

#Filter

Please note that this is a general example and might need to be adjusted based on the rest of your code and your exact requirements.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you're still having issues, it might be helpful to inspect the subcategory buttons using your browser's developer tools. This could help you see if the classes are being applied correctly and if there's any other CSS that could be affecting the buttons' appearance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you're still having issues, it might be helpful to inspect the subcategory buttons using your browser's developer tools. This could help you see if the classes are being applied correctly and if there's any other CSS that could be affecting the buttons' appearance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

With this change, clicking a subcategory a second time should only remove the subcategory from the URL parameters, while clicking a category a second time should remove the category as before.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you're still having issues, it might be helpful to provide more context or a more complete example of your code. This could help identify any other potential issues.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you're still having issues, it might be helpful to provide more context or a more complete example of your code. This could help identify any other potential issues.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: