allow to filter reddit card by language

Author: medyo

src/config/index.tsx

@@ -179,6 +179,7 @@ export const GLOBAL_TAG = {
   devtoValues: ['programming'],
   hashnodeValues: ['programming'],
   mediumValues: ['programming'],
+  redditValues: ['programming'],
   freecodecampValues: ['programming'],
 }
 export const MY_LANGUAGES_TAG = {
@@ -188,6 +189,7 @@ export const MY_LANGUAGES_TAG = {
   devtoValues: ['myLangs'],
   hashnodeValues: ['myLangs'],
   mediumValues: ['myLangs'],
+  redditValues: ['myLangs'],
   freecodecampValues: ['myLangs'],
 }
 export const MAX_ITEMS_PER_CARD = 50

src/features/cards/components/redditCard/RedditCard.tsx

@@ -5,13 +5,37 @@ import { Article, CardPropsType } from 'src/types'
 import { useUserPreferences } from 'src/stores/preferences'
 import { getCardTagsValue } from 'src/utils/DataEnhancement'
 import ArticleItem from './ArticleItem'
+import { useState, useEffect } from 'react'
+import { Tag } from 'src/features/remoteConfig'
+import { GLOBAL_TAG, MY_LANGUAGES_TAG } from 'src/config'
+import SelectableCard from 'src/components/SelectableCard'
+import { trackCardLanguageSelect } from 'src/lib/analytics'
+
+const REDDIT_MENU_LANGUAGE_ID = 'REDDIT_MENU_LANGUAGE_ID'
 
 export function RedditCard({ withAds, meta }: CardPropsType) {
-  const { userSelectedTags } = useUserPreferences()
+  const { userSelectedTags, cardsSettings, setCardSettings } = useUserPreferences()
+  const [selectedTag, setSelectedTag] = useState<Tag>()
+
+  useEffect(() => {
+    if (selectedTag) {
+      setCardSettings(meta.value, { language: selectedTag.label })
+    }
+  }, [selectedTag, meta, setCardSettings])
+
+  const getQueryTags = () => {
+    if (!selectedTag) {
+      return []
+    }
 
-  const tags = getCardTagsValue(userSelectedTags, 'redditValues')
+    if (selectedTag.value === MY_LANGUAGES_TAG.redditValues[0]) {
+      return getCardTagsValue(userSelectedTags, 'redditValues') || []
+    }
+    return selectedTag.redditValues || []
+  }
 
-  const results = useGetRedditArticles({ tags })
+  console.log('getQueryTags()', getQueryTags())
+  const results = useGetRedditArticles({ tags: getQueryTags() })
 
   const getIsLoading = () => results.some((result) => result.isLoading)
 
@@ -25,11 +49,38 @@ export function RedditCard({ withAds, meta }: CardPropsType) {
   }
 
   const renderItem = (item: Article, index: number) => (
-    <ArticleItem item={item} key={`re-${index}`} index={index} analyticsTag={meta.analyticsTag} />
+    <ArticleItem
+      item={item}
+      key={`md-${index}`}
+      index={index}
+      selectedTag={selectedTag}
+      analyticsTag={meta.analyticsTag}
+    />
   )
 
+  const HeaderTitle = () => {
+    return (
+      <div style={{ display: 'inline-block', margin: 0, padding: 0 }}>
+        <span> {meta.label} </span>
+        <SelectableCard
+          isLanguage={true}
+          tagId={REDDIT_MENU_LANGUAGE_ID}
+          selectedTag={selectedTag}
+          setSelectedTag={setSelectedTag}
+          fallbackTag={GLOBAL_TAG}
+          cardSettings={cardsSettings?.reddit?.language}
+          trackEvent={(tag: Tag) => trackCardLanguageSelect(meta.analyticsTag, tag.value)}
+          data={userSelectedTags.map((tag) => ({
+            label: tag.label,
+            value: tag.value,
+          }))}
+        />
+      </div>
+    )
+  }
+
   return (
-    <Card card={meta}>
+    <Card card={meta} titleComponent={<HeaderTitle />}>
       <ListComponent
         items={getData()}
         isLoading={getIsLoading()}