fix hardcoded values

Author: medyo

src/features/devtoCard/components/DevtoCard.tsx

@@ -60,15 +60,15 @@ export function DevtoCard({ withAds, meta }: CardPropsType) {
   const HeaderTitle = () => {
     return (
       <div style={{ display: 'inline-block', margin: 0, padding: 0 }}>
-        <span> DevTo </span>
+        <span> {meta.label} </span>
         <SelectableCard
           isLanguage={true}
           tagId={DT_MENU_LANGUAGE_ID}
           selectedTag={selectedTag}
           setSelectedTag={setSelectedTag}
           fallbackTag={GLOBAL_TAG}
           cardSettings={cardsSettings?.devto?.language}
-          trackEvent={(tag: Tag) => trackCardLanguageSelect('Devto', tag.value)}
+          trackEvent={(tag: Tag) => trackCardLanguageSelect(meta.analyticsTag, tag.value)}
           data={userSelectedTags.map((tag) => ({
             label: tag.label,
             value: tag.value,

src/features/freecodecampCard/components/FreecodecampCard.tsx

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

src/features/githubCard/components/GithubCard.tsx

@@ -94,7 +94,7 @@ export function GithubCard({ meta, withAds }: CardPropsType) {
           setSelectedTag={setSelectedTag}
           fallbackTag={GLOBAL_TAG}
           cardSettings={cardsSettings?.repos?.language}
-          trackEvent={(tag: Tag) => trackCardLanguageSelect('Github', tag.value)}
+          trackEvent={(tag: Tag) => trackCardLanguageSelect(meta.analyticsTag, tag.value)}
           data={userSelectedTags.map((tag) => ({
             label: tag.label,
             value: tag.value,
@@ -106,7 +106,9 @@ export function GithubCard({ meta, withAds }: CardPropsType) {
           selectedTag={selectedDateRange}
           setSelectedTag={setSelectedDateRange}
           fallbackTag={dateRanges[0]}
-          trackEvent={(tag: DateRangeType) => trackCardDateRangeSelect('Github', tag.value)}
+          trackEvent={(tag: DateRangeType) =>
+            trackCardDateRangeSelect(meta.analyticsTag, tag.value)
+          }
           cardSettings={cardsSettings?.repos?.dateRange}
           data={dateRanges}
         />

src/features/hashnodeCard/components/HashnodeCard.tsx

@@ -21,7 +21,7 @@ export function HashnodeCard({ withAds, meta }: CardPropsType) {
     if (selectedTag) {
       setCardSettings(meta.label.toLowerCase(), { language: selectedTag.label })
     }
-  }, [selectedTag])
+  }, [selectedTag, meta.label, setCardSettings])
 
   const getQueryTags = () => {
     if (!selectedTag) {
@@ -60,15 +60,15 @@ export function HashnodeCard({ withAds, meta }: CardPropsType) {
   const HeaderTitle = () => {
     return (
       <div style={{ display: 'inline-block', margin: 0, padding: 0 }}>
-        <span> Hashnode </span>
+        <span> {meta.label} </span>
         <SelectableCard
           isLanguage={true}
           tagId={HN_MENU_LANGUAGE_ID}
           selectedTag={selectedTag}
           setSelectedTag={setSelectedTag}
           fallbackTag={GLOBAL_TAG}
           cardSettings={cardsSettings?.hashnode?.language}
-          trackEvent={(tag: Tag) => trackCardLanguageSelect('Hashnode', tag.value)}
+          trackEvent={(tag: Tag) => trackCardLanguageSelect(meta.analyticsTag, tag.value)}
           data={userSelectedTags.map((tag) => ({
             label: tag.label,
             value: tag.value,

src/features/mediumCard/components/MediumCard.tsx

@@ -60,15 +60,15 @@ export function MediumCard({ meta, withAds }: CardPropsType) {
   const HeaderTitle = () => {
     return (
       <div style={{ display: 'inline-block', margin: 0, padding: 0 }}>
-        <span> Medium </span>
+        <span> {meta.label} </span>
         <SelectableCard
           isLanguage={true}
           tagId={MEDIUM_MENU_LANGUAGE_ID}
           selectedTag={selectedTag}
           setSelectedTag={setSelectedTag}
           fallbackTag={GLOBAL_TAG}
           cardSettings={cardsSettings?.medium?.language}
-          trackEvent={(tag: Tag) => trackCardLanguageSelect('Medium', tag.value)}
+          trackEvent={(tag: Tag) => trackCardLanguageSelect(meta.analyticsTag, tag.value)}
           data={userSelectedTags.map((tag) => ({
             label: tag.label,
             value: tag.value,