don't use lingui before it's initialized

Athou · Feb 1, 2025 · ebb4e52 · ebb4e52
1 parent 1ddfdfb
commit ebb4e52
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/commafeed-client/src/app/constants.ts b/commafeed-client/src/app/constants.ts
@@ -1,21 +1,18 @@
-import { t } from "@lingui/core/macro"
 import type { IconType } from "react-icons"
 import { FaAt } from "react-icons/fa"
 import { SiBuffer, SiFacebook, SiGmail, SiInstapaper, SiPocket, SiTumblr, SiX } from "react-icons/si"
 import type { Category, Entry, SharingSettings } from "./types"
 
-const categories: Record<string, Category> = {
+const categories: Record<string, Omit<Category, "name">> = {
     all: {
         id: "all",
-        name: t`All`,
         expanded: false,
         children: [],
         feeds: [],
         position: 0,
     },
     starred: {
         id: "starred",
-        name: t`Starred`,
         expanded: false,
         children: [],
         feeds: [],

diff --git a/commafeed-client/src/pages/app/CategoryDetailsPage.tsx b/commafeed-client/src/pages/app/CategoryDetailsPage.tsx
@@ -1,3 +1,5 @@
+import { msg } from "@lingui/core/macro"
+import { useLingui } from "@lingui/react"
 import { Trans } from "@lingui/react/macro"
 import { Anchor, Box, Button, Code, Container, Divider, Group, Input, NumberInput, Stack, Text, TextInput, Title } from "@mantine/core"
 import { useForm } from "@mantine/form"
@@ -19,14 +21,15 @@ import { useParams } from "react-router-dom"
 
 export function CategoryDetailsPage() {
     const { id = Constants.categories.all.id } = useParams()
+    const { _ } = useLingui()
 
     const apiKey = useAppSelector(state => state.user.profile?.apiKey)
     const dispatch = useAppDispatch()
 
     const query = useAsync(async () => await client.category.getRoot(), [])
     const category =
         id === Constants.categories.starred.id
-            ? Constants.categories.starred
+            ? { ...Constants.categories.starred, name: _(msg`Starred`) }
             : query.result && flattenCategoryTree(query.result.data).find(c => c.id === id)
 
     const form = useForm<CategoryModificationRequest>()
@@ -63,14 +66,14 @@ export function CategoryDetailsPage() {
     }
 
     useEffect(() => {
-        if (!category) return
+        if (!category?.id) return
         setValues({
             id: +category.id,
             name: category.name,
             parentId: category.parentId,
             position: category.position,
         })
-    }, [setValues, category])
+    }, [setValues, category?.id, category?.name, category?.parentId, category?.position])
 
     const editable = id !== Constants.categories.all.id && id !== Constants.categories.starred.id
     if (!category) return <Loader />