Merge pull request #98 from medyo/hotfix/card-selector

fix default selected cards

Author: Chouikane

src/features/cards/components/devtoCard/DevtoCard.tsx

@@ -19,7 +19,7 @@ export function DevtoCard({ withAds, meta }: CardPropsType) {
 
   useEffect(() => {
     if (selectedTag) {
-      setCardSettings(meta.label.toLowerCase(), { language: selectedTag.label })
+      setCardSettings(meta.value, { language: selectedTag.label })
     }
   }, [selectedTag, meta, setCardSettings])
 

src/features/cards/components/freecodecampCard/FreecodecampCard.tsx

@@ -19,9 +19,9 @@ export function FreecodecampCard({ meta, withAds }: CardPropsType) {
 
   useEffect(() => {
     if (selectedTag) {
-      setCardSettings(meta.label.toLowerCase(), { language: selectedTag.label })
+      setCardSettings(meta.value, { language: selectedTag.label })
     }
-  }, [meta.label, setCardSettings, selectedTag])
+  }, [meta.value, setCardSettings, selectedTag])
 
   const getQueryTags = () => {
     if (!selectedTag) {
@@ -67,7 +67,7 @@ export function FreecodecampCard({ meta, withAds }: CardPropsType) {
           selectedTag={selectedTag}
           setSelectedTag={setSelectedTag}
           fallbackTag={GLOBAL_TAG}
-          cardSettings={cardsSettings?.devto?.language}
+          cardSettings={cardsSettings?.freecodecamp?.language}
           trackEvent={(tag: Tag) => trackCardLanguageSelect(meta.analyticsTag, tag.value)}
           data={userSelectedTags.map((tag) => ({
             label: tag.label,

src/features/cards/components/githubCard/GithubCard.tsx

@@ -24,22 +24,30 @@ const dateRanges: DateRangeType[] = [
   { label: 'the month', value: 'monthly' },
 ]
 
+const getInitialDateRange = (value: string | undefined) => {  
+  let initialDateRange = dateRanges.find((t) => t.value === value)
+  if (initialDateRange) return initialDateRange
+  return dateRanges[0]
+}
+
 export function GithubCard({ meta, withAds }: CardPropsType) {
   const { userSelectedTags, cardsSettings, setCardSettings } = useUserPreferences()
   const [selectedTag, setSelectedTag] = useState<Tag>()
-  const [selectedDateRange, setSelectedDateRange] = useState<DateRangeType>(dateRanges[0])
+  const [selectedDateRange, setSelectedDateRange] = useState<DateRangeType>(
+    getInitialDateRange(cardsSettings?.github?.dateRange)
+  )
 
   useEffect(() => {
     if (selectedTag) {
-      setCardSettings(meta.label.toLowerCase(), { language: selectedTag.label })
+      setCardSettings(meta.value, { language: selectedTag.label })
     }
-  }, [meta.label, selectedTag, setCardSettings])
+  }, [meta.value, selectedTag, setCardSettings])
 
   useEffect(() => {
     if (selectedDateRange) {
-      setCardSettings(meta.label.toLowerCase(), { language: selectedDateRange.value })
+      setCardSettings(meta.value, { ...cardsSettings.github, dateRange: selectedDateRange.value })
     }
-  }, [meta.label, selectedDateRange, setCardSettings])
+  }, [meta.value, selectedDateRange, setCardSettings])
 
   const getQueryTags = () => {
     if (!selectedTag) {
@@ -59,7 +67,7 @@ export function GithubCard({ meta, withAds }: CardPropsType) {
     tags: getQueryTags(),
     dateRange: selectedDateRange.value,
     config: {
-      enabled: !!selectedTag?.githubValues,
+      enabled: !!selectedTag?.githubValues
     },
   })
 
@@ -93,7 +101,7 @@ export function GithubCard({ meta, withAds }: CardPropsType) {
           selectedTag={selectedTag}
           setSelectedTag={setSelectedTag}
           fallbackTag={GLOBAL_TAG}
-          cardSettings={cardsSettings?.repos?.language}
+          cardSettings={cardsSettings?.github?.language}
           trackEvent={(tag: Tag) => trackCardLanguageSelect(meta.analyticsTag, tag.value)}
           data={userSelectedTags.map((tag) => ({
             label: tag.label,
@@ -109,7 +117,7 @@ export function GithubCard({ meta, withAds }: CardPropsType) {
           trackEvent={(tag: DateRangeType) =>
             trackCardDateRangeSelect(meta.analyticsTag, tag.value)
           }
-          cardSettings={cardsSettings?.repos?.dateRange}
+          cardSettings={cardsSettings?.github?.dateRange}
           data={dateRanges}
         />
       </div>

src/features/cards/components/hashnodeCard/HashnodeCard.tsx

@@ -19,9 +19,9 @@ export function HashnodeCard({ withAds, meta }: CardPropsType) {
 
   useEffect(() => {
     if (selectedTag) {
-      setCardSettings(meta.label.toLowerCase(), { language: selectedTag.label })
+      setCardSettings(meta.value, { language: selectedTag.label })
     }
-  }, [selectedTag, meta.label, setCardSettings])
+  }, [selectedTag, meta.value, setCardSettings])
 
   const getQueryTags = () => {
     if (!selectedTag) {

src/features/cards/components/mediumCard/MediumCard.tsx

@@ -19,7 +19,7 @@ export function MediumCard({ meta, withAds }: CardPropsType) {
 
   useEffect(() => {
     if (selectedTag) {
-      setCardSettings(meta.label.toLowerCase(), { language: selectedTag.label })
+      setCardSettings(meta.value, { language: selectedTag.label })
     }
   }, [selectedTag, meta, setCardSettings])