refactor: update ConferencesCard and ConferenceItem components for improved tag handling and rendering

Author: medyo

src/features/cards/components/conferencesCard/ConferenceItem.tsx

@@ -102,9 +102,9 @@ const ConferencesItem = ({ item, index, analyticsTag }: BaseItemPropsType<Confer
                     ? `Ongoing, ${conferenceDate}`
                     : `${conferenceDate}`}
                 </span>
-              </div>
-              <div className="rowDetails">
-                <ColoredLanguagesBadge languages={[item.tag]} />
+                <span className="rowItem">
+                  <ColoredLanguagesBadge languages={item.tags} />
+                </span>
               </div>
             </>
           ) : (

src/features/cards/components/conferencesCard/ConferencesCard.tsx

@@ -1,23 +1,21 @@
-import { useMemo } from 'react'
 import { Card } from 'src/components/Elements'
 import { ListConferenceComponent } from 'src/components/List/ListConferenceComponent'
-import { useUserPreferences } from 'src/stores/preferences'
 import { CardPropsType, Conference } from 'src/types'
 import { useGetConferences } from '../../api/getConferences'
+import { useSelectedTags } from '../../hooks/useSelectedTags'
+import { CardHeader } from '../CardHeader'
 import { CardSettings } from '../CardSettings'
 import ConferenceItem from './ConferenceItem'
 
+const GLOBAL_TAG = { label: 'Global', value: 'tech' }
 export function ConferencesCard(props: CardPropsType) {
   const { meta } = props
-  const cardSettings = useUserPreferences((state) => state.cardsSettings?.[meta.value])
-  const { userSelectedTags } = useUserPreferences()
-
-  const selectedTag = useMemo(() => {
-    return userSelectedTags.find((lang) => lang.value === cardSettings?.language)
-  }, [userSelectedTags, cardSettings])
-
+  const { queryTags, selectedTag, cardSettings } = useSelectedTags({
+    source: meta.value,
+    fallbackTag: GLOBAL_TAG,
+  })
   const { isLoading, data: results } = useGetConferences({
-    tags: selectedTag ? [selectedTag.value] : userSelectedTags.map((tag) => tag.value),
+    tags: queryTags.map((tag) => tag.value),
   })
 
   const renderItem = (item: Conference, index: number) => (
@@ -27,6 +25,9 @@ export function ConferencesCard(props: CardPropsType) {
   return (
     <Card
       {...props}
+      titleComponent={
+        <CardHeader label={meta.label} fallbackTag={GLOBAL_TAG} selectedTag={selectedTag} />
+      }
       settingsComponent={
         <CardSettings
           url={meta.link}