fix first run analytics events

Author: medyo

src/cards/DevToCard.js

@@ -74,7 +74,6 @@ function DevToCard({ analyticsTag, label, icon, withAds }) {
 
   useEffect(() => {
     if (selectedLanguage) {
-      trackCardLanguageChange('Devto', selectedLanguage.value)
       dispatcher({
         type: 'setCardSettings',
         value: { card: label.toLowerCase(), language: selectedLanguage.label },
@@ -141,6 +140,7 @@ function DevToCard({ analyticsTag, label, icon, withAds }) {
           setSelectedTag={setSelectedLanguage}
           fallbackTag={GLOBAL_TAG}
           cardSettings={cardsSettings?.devto?.language}
+          trackEvent={(tag) => trackCardLanguageChange('Devto', tag.value)}
           data={userSelectedTags.map((tag) => ({
             label: tag.label,
             value: tag.value,

src/cards/HashNodeCard.js

@@ -74,7 +74,6 @@ function HashNodeCard({ analyticsTag, label, icon, withAds }) {
 
   useEffect(() => {
     if (selectedLanguage) {
-      trackCardLanguageChange('Hashnode', selectedLanguage.value)
       dispatcher({
         type: 'setCardSettings',
         value: { card: label, language: selectedLanguage.label.toLowerCase() },
@@ -132,6 +131,7 @@ function HashNodeCard({ analyticsTag, label, icon, withAds }) {
           tagId={HN_MENU_LANGUAGE_ID}
           selectedTag={selectedLanguage}
           setSelectedTag={setSelectedLanguage}
+          trackEvent={(tag) => trackCardLanguageChange('Hashnode', tag.value)}
           fallbackTag={GLOBAL_TAG}
           cardSettings={cardsSettings?.hashnode?.language}
           data={userSelectedTags.map((tag) => ({

src/cards/ReposCard.js

@@ -69,7 +69,6 @@ function ReposCard({ analyticsTag, label, icon, withAds }) {
 
   useEffect(() => {
     if (selectedLanguage) {
-      trackCardLanguageChange('Repos', selectedLanguage.value)
       dispatcher({
         type: 'setCardSettings',
         value: { card: 'repos', language: selectedLanguage.label },
@@ -80,7 +79,6 @@ function ReposCard({ analyticsTag, label, icon, withAds }) {
 
   useEffect(() => {
     if (selectedDateRange) {
-      trackCardLanguageChange('Repos', selectedDateRange.value)
       dispatcher({
         type: 'setCardSettings',
         value: { card: 'repos', dateRange: selectedDateRange.value },
@@ -137,6 +135,7 @@ function ReposCard({ analyticsTag, label, icon, withAds }) {
           setSelectedTag={setSelectedLanguage}
           fallbackTag={GLOBAL_TAG}
           cardSettings={cardsSettings?.repos?.language}
+          trackEvent={(tag) => trackCardLanguageChange('Repos', tag.value)}
           data={userSelectedTags.map((tag) => ({
             label: tag.label,
             value: tag.value,
@@ -152,6 +151,7 @@ function ReposCard({ analyticsTag, label, icon, withAds }) {
               value: Object.keys(dateRangeMapper)[0],
               label: Object.values(dateRangeMapper)[0],
             }}
+            trackEvent={(tag) => trackCardLanguageChange('Repos', tag.value)}
             cardSettings={cardsSettings?.repos?.dateRange}
             data={Object.keys(dateRangeMapper).map((tag) => ({
               label: dateRangeMapper[tag],

src/components/SelectableCard.js

@@ -10,6 +10,7 @@ function SelectableCard({
   fallbackTag,
   selectedTag,
   setSelectedTag,
+  trackEvent,
   isLanguage = false,
 }) {
   const preferences = useContext(PreferencesContext)
@@ -58,6 +59,9 @@ function SelectableCard({
       setSelectedDropDownItem={(item) => {
         const tag = findTagByValue(item.value)
         if (tag) {
+          if (trackEvent) {
+            trackEvent(tag)
+          }
           setSelectedTag(tag)
         }
       }}