track add/remove source/language

Author: medyo

src/components/Elements/ChipsSet/ChipsSet.tsx

@@ -16,13 +16,16 @@ const Chip = ({ option, onSelect, active = false }: ChipProps) => {
     </button>
   )
 }
-type ChangeAction = 'ADD' | 'REMOVE'
+type ChangeAction = {
+  option: Option
+  action: 'ADD' | 'REMOVE'
+}
 type ChipsSetProps = {
   options: Option[]
   className?: string
   defaultValues?: string[]
   canSelectMultiple?: boolean
-  onChange?: (action: ChangeAction, options: Option[]) => void
+  onChange?: (changes: ChangeAction, options: Option[]) => void
 }
 
 export const ChipsSet = ({
@@ -43,7 +46,10 @@ export const ChipsSet = ({
       setSelectedChips(newVal)
       onChange &&
         onChange(
-          'REMOVE',
+          {
+            option,
+            action: 'REMOVE',
+          },
           options.filter((opt) => newVal.some((selectedVal) => selectedVal === opt.value))
         )
     } else {
@@ -57,7 +63,10 @@ export const ChipsSet = ({
       setSelectedChips(newVal)
       onChange &&
         onChange(
-          'ADD',
+          {
+            option,
+            action: 'ADD',
+          },
           options.filter((opt) => newVal.some((selectedVal) => selectedVal === opt.value))
         )
     }

src/features/settings/components/SourceSettings.tsx

@@ -1,13 +1,14 @@
 import { ChipsSet } from 'src/components/Elements'
 import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout/SettingsContentLayout'
 import { SUPPORTED_CARDS } from 'src/config/supportedCards'
+import { trackSourceAdd, trackSourceRemove } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { SelectedCard } from 'src/types'
 import { RssSetting } from './RssSetting'
 
 export const SourceSettings = () => {
   const { cards, setCards, userCustomCards } = useUserPreferences()
-  console.log('new cards', cards)
+
   const mergedSources = [
     ...SUPPORTED_CARDS.map((source) => {
       return {
@@ -41,7 +42,7 @@ export const SourceSettings = () => {
           canSelectMultiple={true}
           options={mergedSources}
           defaultValues={defaultValues}
-          onChange={(_, selectedChips) => {
+          onChange={(changes, selectedChips) => {
             const selectedValues = selectedChips.map((chip) => chip.value)
 
             const cards = (selectedValues
@@ -56,6 +57,12 @@ export const SourceSettings = () => {
               }) || []) as SelectedCard[]
 
             setCards(cards)
+
+            if (changes.action == 'ADD') {
+              trackSourceAdd(changes.option.value)
+            } else {
+              trackSourceRemove(changes.option.value)
+            }
           }}
         />
         <hr />

src/features/settings/components/TopicSettings.tsx

@@ -1,6 +1,7 @@
 import { ChipsSet } from 'src/components/Elements'
 import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout/SettingsContentLayout'
 import { Tag, useRemoteConfigStore } from 'src/features/remoteConfig'
+import { trackLanguageAdd, trackLanguageRemove } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 
 export const TopicSettings = () => {
@@ -25,12 +26,18 @@ export const TopicSettings = () => {
         canSelectMultiple={true}
         options={tags}
         defaultValues={userSelectedTags.map((tag) => tag.value)}
-        onChange={(_, selectedChips) => {
+        onChange={(changes, selectedChips) => {
           const selectedTags =
             (selectedChips
               .map((tag) => supportedTags.find((st) => st.value === tag.value))
               .filter(Boolean) as Tag[]) || []
           setTags(selectedTags)
+
+          if (changes.action == 'ADD') {
+            trackLanguageAdd(changes.option.value)
+          } else {
+            trackLanguageRemove(changes.option.value)
+          }
         }}
       />
     </SettingsContentLayout>