Added anki tags selector to settings drawer

src/hooks/useAnki/useAnki.ts

@@ -6,8 +6,10 @@ import { useTranslation } from "react-i18next"
 import { CreateAnkiCardParams } from "api/hooks/useCreateAnkiCard/types.ts"
 import useGetAnkiDecks from "api/hooks/useGetAnkiDecks"
 import useCreateAnkiDeck from "api/hooks/useCreateAnkiDeck"
+import { useSettingsContext } from "modules/Settings/context/useSettingsContext.ts"
 
 const useAnki = (): AnkiResponse => {
+  const { anki } = useSettingsContext()
   const { fireToast } = useToastContext()
   const { data: decks } = useGetAnkiDecks()
   const { mutateAsync: createDeck } = useCreateAnkiDeck()
@@ -16,7 +18,7 @@ const useAnki = (): AnkiResponse => {
 
   const createAnkiDeck = useCallback(async () => {
     try {
-      await createDeck({ deck: 'Japanese::Nyusu' })
+      await createDeck({ deck: anki.deckName })
 
       fireToast({
         type: 'success',
@@ -28,10 +30,10 @@ const useAnki = (): AnkiResponse => {
         message: t('create-deck.toast.error')
       })
     }
-  }, [createDeck, fireToast, t])
+  }, [anki.deckName, createDeck, fireToast, t])
 
   const createCard = useCallback(async (args: CreateAnkiCardParams) => {
-    if (decks && !decks.includes('Japanese::Nyusu')) {
+    if (decks && !decks.includes(anki.deckName)) {
       await createAnkiDeck()
     }
 
@@ -49,7 +51,7 @@ const useAnki = (): AnkiResponse => {
       })
     }
 
-  }, [decks, createAnkiDeck, createCardApi, fireToast, t])
+  }, [decks, anki.deckName, createAnkiDeck, createCardApi, fireToast, t])
 
   return {
     createCard

src/locales/en/translation.json

@@ -124,7 +124,12 @@
     "anki": {
       "heading": "Anki",
       "deck": {
-        "label": "Deck Name"
+        "label": "Deck Name",
+        "help": "Cannot be empty."
+      },
+      "tags": {
+        "label": "Tags",
+        "help": "Must be comma separated"
       }
     }
   },

src/locales/jp/translation.json

@@ -117,7 +117,12 @@
     "anki": {
       "heading": "アンキ",
       "deck": {
-        "label": "デッキ名"
+        "label": "デッキ名",
+        "help": "空は不可"
+      },
+      "tags": {
+        "label": "タグ",
+        "help": "カンマ区切り"
       }
     }
   },

src/modules/Newspaper/components/AnkiArticle/AnkiArticle.tsx

@@ -3,16 +3,18 @@ import useAnki from "hooks/useAnki"
 import { Button, CircularProgress } from "@mui/material"
 import { AnkiArticleProps } from "modules/Newspaper/components/AnkiArticle/types.ts"
 import { useCallback, useState } from "react"
+import { useSettingsContext } from "modules/Settings/context/useSettingsContext.ts"
 
 export const AnkiArticle = ({ article }: AnkiArticleProps) => {
   const { createCard } = useAnki()
+  const { anki } = useSettingsContext()
   const [loading, setLoading] = useState(false)
 
   const handleCreateCard = useCallback(() => {
     setLoading(true)
     createCard({
       note: {
-        deckName: 'Japanese::Nyusu',
+        deckName: anki.deckName,
         modelName: 'Basic',
         fields: {
           Back: {
@@ -24,14 +26,14 @@ export const AnkiArticle = ({ article }: AnkiArticleProps) => {
             source: article.link
           }
         },
-        tags: ['nyusu']
+        tags: anki.tags
       }
     }).then(() => {
       setLoading(false)
     }).catch(e => {
       console.debug(e)
     })
-  }, [article.link, article.title, createCard])
+  }, [anki.deckName, anki.tags, article.link, article.title, createCard])
 
   return (
     <div className={styles.article}>

src/modules/Settings/components/AnkiDeckSelector/AnkiDeckSelector.tsx

@@ -1,26 +1,39 @@
 import { TextField } from "@mui/material"
 import { useTranslation } from "react-i18next"
 import { useSettingsContext } from "modules/Settings/context/useSettingsContext.ts"
-import { ChangeEvent, useCallback } from "react"
+import { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react"
 
 const AnkiDeckSelector = () => {
-  const { anki ,setAnkiSettings } = useSettingsContext()
-  const { t } = useTranslation('translation', { keyPrefix: 'settings.anki' })
+  const { anki, setAnkiSettings } = useSettingsContext()
+  const [value, setValue] = useState(anki.deckName)
+  const { t } = useTranslation('translation', { keyPrefix: 'settings.anki.deck' })
 
   const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setAnkiSettings({
-      ...anki,
-      deckName: e.target.value
-    })
-  }, [anki, setAnkiSettings])
+    setValue(e.target.value)
+  }, [])
+
+  const error = useMemo(() => {
+    return value.length <= 0
+  }, [value.length])
+
+  useEffect(() => {
+    if (!error) {
+      setAnkiSettings({
+        ...anki,
+        deckName: value
+      })
+    }
+  }, [anki, error, setAnkiSettings, value])
 
   return (
     <div>
       <TextField
-        value={anki.deckName}
-        label={t('deck.label')}
+        value={value}
+        error={error}
+        label={t('label')}
         onChange={handleChange}
         id='anki-deck-name-selector'
+        helperText={error ? t('help') : ''}
         data-testid='anki-deck-name-selector'
       />
     </div>

src/modules/Settings/components/AnkiTagsSelector/AnkiTagsSelector.tsx

@@ -0,0 +1,43 @@
+import { TextField } from "@mui/material"
+import { useSettingsContext } from "modules/Settings/context/useSettingsContext.ts"
+import { useTranslation } from "react-i18next"
+import { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react"
+
+const AnkiTagsSelector = () => {
+  const { anki, setAnkiSettings } = useSettingsContext()
+  const [value, setValue] = useState(anki.tags.join(','))
+  const { t } = useTranslation('translation', { keyPrefix: 'settings.anki.tags' })
+
+  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value)
+  }, [])
+
+  const error = useMemo(() => {
+    return !/^([a-zA-Z0-9]+,?\s*)+$/.test(value)
+  }, [value])
+
+  useEffect(() => {
+    if (!error) {
+      setAnkiSettings({
+        ...anki,
+        tags: value.trim().split(',')
+      })
+    }
+  }, [anki, error, setAnkiSettings, value])
+
+  return (
+    <div>
+      <TextField
+        value={value}
+        error={error}
+        label={t('label')}
+        helperText={t('help')}
+        onChange={handleChange}
+        id='anki-deck-tags-selector'
+        data-testid='anki-deck-tags-selector'
+      />
+    </div>
+  )
+}
+
+export default AnkiTagsSelector

src/modules/Settings/components/AnkiTagsSelector/index.ts

@@ -0,0 +1 @@
+export { default } from './AnkiTagsSelector.tsx'

src/modules/Settings/components/SettingsDrawer/SettingsDrawer.module.scss

@@ -16,6 +16,10 @@
   margin-bottom: 10px;
   display: flex;
   flex-direction: column;
+
+  >div {
+    margin-bottom: 20px;
+  }
 }
 
 .heading {

src/modules/Settings/components/SettingsDrawer/SettingsDrawer.tsx

@@ -2,10 +2,11 @@ import { Drawer } from "@mui/material"
 import styles from './SettingsDrawer.module.scss'
 import { useTranslation } from "react-i18next"
 import { useSettingsContext } from "modules/Settings/context/useSettingsContext.ts"
-import { SourcesSelector } from "modules/Settings/components/SourcesSelector/SourcesSelector.tsx"
+import SourcesSelector from "modules/Settings/components/SourcesSelector"
 import LanguageControls from "modules/Settings/components/LanguageControls"
 import FontSelector from "modules/Settings/components/FontSelector"
 import AnkiDeckSelector from "modules/Settings/components/AnkiDeckSelector"
+import AnkiTagsSelector from "modules/Settings/components/AnkiTagsSelector"
 
 const SettingsDrawer = () => {
   const { open, setOpen } = useSettingsContext()
@@ -55,6 +56,7 @@ const SettingsDrawer = () => {
           </p>
 
           <AnkiDeckSelector />
+          <AnkiTagsSelector />
         </div>
       </div>
     </Drawer>

src/modules/Settings/components/SourcesSelector/SourcesSelector.tsx

@@ -44,3 +44,5 @@ export const SourcesSelector = () => {
     </div>
   )
 }
+
+export default SourcesSelector

src/modules/Settings/components/SourcesSelector/index.ts

@@ -0,0 +1 @@
+export { default } from './SourcesSelector.tsx'