feat: add clearCardSettingsLanguages action and update UserTags component to handle 'all' tag click

Author: medyo

src/components/Elements/UserTags/UserTags.tsx

@@ -1,33 +1,65 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
+import { FaGlobe } from 'react-icons/fa'
 import { TiPlus } from 'react-icons/ti'
 import { Link } from 'react-router-dom'
 import { useUserPreferences } from 'src/stores/preferences'
 import { useShallow } from 'zustand/shallow'
 
 export const UserTags = () => {
-  const { cards, userSelectedTags, cardsSettings, setCardSettings } = useUserPreferences(
-    useShallow((state) => ({
-      cards: state.cards,
-      userSelectedTags: state.userSelectedTags,
-      cardsSettings: state.cardsSettings,
-      setCardSettings: state.setCardSettings,
-    }))
-  )
+  const { cards, userSelectedTags, cardsSettings, setCardSettings, clearCardSettingsLanguages } =
+    useUserPreferences(
+      useShallow((state) => ({
+        cards: state.cards,
+        userSelectedTags: state.userSelectedTags,
+        cardsSettings: state.cardsSettings,
+        setCardSettings: state.setCardSettings,
+        clearCardSettingsLanguages: state.clearCardSettingsLanguages,
+      }))
+    )
 
-  const onTagClicked = useCallback((tagValue: string) => {
-    cards.forEach((card) => {
-      setCardSettings(card.name, {
-        ...cardsSettings[card.id],
-        language: tagValue,
+  const onTagClicked = useCallback(
+    (tagValue: string) => {
+      if (tagValue === 'all') {
+        clearCardSettingsLanguages()
+        return
+      }
+
+      cards.forEach((card) => {
+        setCardSettings(card.name, {
+          ...cardsSettings[card.id],
+          language: tagValue,
+        })
       })
-    })
-  }, [])
+    },
+    [cards, cardsSettings, setCardSettings]
+  )
+
+  const tagsList = useMemo(() => {
+    const tags = userSelectedTags.map((tag) => ({
+      label: tag.label,
+      value: tag.value,
+      icon: undefined,
+    }))
+
+    if (tags.length === 0) {
+      return tags
+    }
+
+    return [
+      {
+        label: 'All',
+        value: 'all',
+        icon: <FaGlobe className="tagIcon" />,
+      },
+      ...tags,
+    ]
+  }, [userSelectedTags])
 
   return (
     <div className="tags">
-      {userSelectedTags.map((tag, index) => (
+      {tagsList.map((tag, index) => (
         <button key={index} className="tag tagHoverable" onClick={() => onTagClicked(tag.value)}>
-          {tag.label}
+          {tag.icon} {tag.label}
         </button>
       ))}
       <Link to="/settings/topics" className="tag tagHoverable" aria-label="Open settings">

src/stores/preferences.ts

@@ -51,6 +51,7 @@ type UserPreferencesStoreActions = {
   unfollowTag: (tag: Tag) => void
   setMaxVisibleCards: (maxVisibleCards: number) => void
   setCardSettings: (card: string, settings: CardSettingsType) => void
+  clearCardSettingsLanguages: () => void
   setOccupation: (occupation: string | null) => void
   markOnboardingAsCompleted: () => void
   setUserCustomCards: (cards: SupportedCardType[]) => void
@@ -106,6 +107,15 @@ export const useUserPreferences = create(
             [card]: { ...state.cardsSettings[card], ...settings },
           },
         })),
+      clearCardSettingsLanguages: () =>
+        set((state) => ({
+          cardsSettings: Object.fromEntries(
+            Object.entries(state.cardsSettings).map(([card, settings]) => [
+              card,
+              { ...settings, language: undefined },
+            ])
+          ),
+        })),
       markOnboardingAsCompleted: () =>
         set(() => ({
           onboardingCompleted: true,

src/types/index.ts

@@ -143,7 +143,7 @@ export type BaseItemPropsType<
 }
 
 export type CardSettingsType = {
-  language: string
+  language?: string
   sortBy: string
   dateRange?: string
 }