fix: refactor SourceSettings component to use useMemo for mergedSources and add confirm delete modal functionality

Author: medyo

src/features/settings/components/SourceSettings.tsx

@@ -1,40 +1,73 @@
-import { ChipsSet } from 'src/components/Elements'
+import { useMemo, useState } from 'react'
+import { ChipsSet, ConfirmModal } 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 { Option, SelectedCard } from 'src/types'
 import { RssSetting } from './RssSetting'
 
 export const SourceSettings = () => {
-  const { cards, setCards, userCustomCards } = useUserPreferences()
+  const { cards, setCards, userCustomCards, setUserCustomCards } = useUserPreferences()
+  const [confirmDelete, setConfirmDelete] = useState<{
+    showModal: boolean
+    option?: Option
+  }>({
+    showModal: false,
+    option: undefined,
+  })
 
-  const mergedSources = [
-    ...SUPPORTED_CARDS.map((source) => {
-      return {
-        label: source.label,
-        value: source.value,
-        icon: source.icon,
-      }
-    }),
-    ...userCustomCards.map((source) => {
-      return {
-        label: source.label,
-        value: source.value,
-        icon: <img src={source.icon as string} alt="" />,
-      }
-    }),
-  ].sort((a, b) => (a.label > b.label ? 1 : -1))
+  const mergedSources = useMemo(() => {
+    return [
+      ...SUPPORTED_CARDS.map((source) => {
+        return {
+          label: source.label,
+          value: source.value,
+          icon: source.icon,
+        }
+      }),
+      ...userCustomCards.map((source) => {
+        return {
+          label: source.label,
+          value: source.value,
+          removeable: true,
+          icon: <img src={source.icon as string} alt="" />,
+        }
+      }),
+    ].sort((a, b) => (a.label > b.label ? 1 : -1))
+  }, [userCustomCards])
 
   return (
     <SettingsContentLayout
       title="Sources"
       description={`Your feed will be tailored by following the sources you are interested in.`}>
       <>
+        <ConfirmModal
+          showModal={confirmDelete.showModal}
+          title={`Confirm delete source: ${confirmDelete.option?.label}`}
+          description={`Are you sure you want to delete ${confirmDelete.option?.label} source? This action cannot be undone.`}
+          onClose={() =>
+            setConfirmDelete({
+              showModal: false,
+              option: undefined,
+            })
+          }
+          onConfirm={() => {
+            const newUserCards = userCustomCards.filter(
+              (card) => card.value !== confirmDelete.option?.value
+            )
+            console.log('newUserCards', userCustomCards, newUserCards)
+            setUserCustomCards(newUserCards)
+            setConfirmDelete({ showModal: false, option: undefined })
+          }}
+        />
         <ChipsSet
           canSelectMultiple={true}
           options={mergedSources}
           defaultValues={cards.map((source) => source.name)}
+          onRemove={(option) => {
+            setConfirmDelete({ showModal: true, option: option })
+          }}
           onChange={(changes, selectedChips) => {
             const selectedValues = selectedChips.map((chip) => chip.value)