replace t` with msg` to fix labels not being translated correctly

This commit is contained in:
Athou
2024-08-03 12:59:51 +02:00
parent 6c7e2ea847
commit de80aa6bb3
13 changed files with 69 additions and 40 deletions

View File

@@ -1,4 +1,5 @@
import { msg, t } from "@lingui/macro"
import { msg } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { Group, Indicator, Popover, TagsInput } from "@mantine/core"
import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/entries/thunks"
import { useAppDispatch, useAppSelector } from "app/store"
@@ -18,6 +19,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
const mobile = useMobile()
const { spacing } = useActionButton()
const dispatch = useAppDispatch()
const { _ } = useLingui()
const readStatusButtonClicked = async () =>
await dispatch(
@@ -75,7 +77,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
</Popover.Target>
<Popover.Dropdown>
<TagsInput
placeholder={t`Tags`}
placeholder={_(msg`Tags`)}
data={tags}
value={props.entry.tags}
onChange={onTagsChange}

View File

@@ -1,4 +1,5 @@
import { Trans, t } from "@lingui/macro"
import { Trans, msg } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { Box, Button, Group, Stack, TextInput } from "@mantine/core"
import { useForm } from "@mantine/form"
import { client, errorToStrings } from "app/client"
@@ -13,6 +14,7 @@ import { CategorySelect } from "./CategorySelect"
export function AddCategory() {
const dispatch = useAppDispatch()
const { _ } = useLingui()
const form = useForm<AddCategoryRequest>()
@@ -33,7 +35,7 @@ export function AddCategory() {
<form onSubmit={form.onSubmit(addCategory.execute)}>
<Stack>
<TextInput label={<Trans>Category</Trans>} placeholder={t`Category`} {...form.getInputProps("name")} required />
<TextInput label={<Trans>Category</Trans>} placeholder={_(msg`Category`)} {...form.getInputProps("name")} required />
<CategorySelect label={<Trans>Parent</Trans>} {...form.getInputProps("parentId")} clearable />
<Group justify="center">
<Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>

View File

@@ -1,4 +1,5 @@
import { t } from "@lingui/macro"
import { msg } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { Select, type SelectProps } from "@mantine/core"
import type { ComboboxItem } from "@mantine/core/lib/components/Combobox/Combobox.types"
import { Constants } from "app/constants"
@@ -13,6 +14,8 @@ type CategorySelectProps = Partial<SelectProps> & {
export function CategorySelect(props: CategorySelectProps) {
const rootCategory = useAppSelector(state => state.tree.rootCategory)
const { _ } = useLingui()
const categories = rootCategory && flattenCategoryTree(rootCategory)
const categoriesById = categories?.reduce((map, c) => {
map.set(c.id, c)
@@ -43,7 +46,7 @@ export function CategorySelect(props: CategorySelectProps) {
.sort((c1, c2) => c1.label.localeCompare(c2.label))
if (props.withAll) {
selectData?.unshift({
label: t`All`,
label: _(msg`All`),
value: Constants.categories.all.id,
})
}

View File

@@ -1,4 +1,5 @@
import { Trans, t } from "@lingui/macro"
import { Trans, msg } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { Box, Button, FileInput, Group, Stack } from "@mantine/core"
import { isNotEmpty, useForm } from "@mantine/form"
import { client, errorToStrings } from "app/client"
@@ -11,10 +12,11 @@ import { TbFileImport } from "react-icons/tb"
export function ImportOpml() {
const dispatch = useAppDispatch()
const { _ } = useLingui()
const form = useForm<{ file: File }>({
validate: {
file: isNotEmpty(t`OPML file is required`),
file: isNotEmpty(_(msg`OPML file is required`)),
},
})
@@ -38,7 +40,7 @@ export function ImportOpml() {
<FileInput
label={<Trans>OPML file</Trans>}
leftSection={<TbFileImport />}
placeholder={t`OPML file`}
placeholder={_(msg`OPML file`)}
description={
<Trans>
An opml file is an XML file containing feed URLs and categories. You can get an OPML file by exporting your

View File

@@ -1,4 +1,5 @@
import { msg, t } from "@lingui/macro"
import { msg } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { Box, Center, CloseButton, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core"
import { useForm } from "@mantine/form"
import { reloadEntries, search, selectNextEntry, selectPreviousEntry } from "app/entries/thunks"
@@ -57,10 +58,11 @@ export function Header() {
const searchFromStore = useAppSelector(state => state.entries.search)
const { isBrowserExtensionPopup, openSettingsPage, openAppInNewTab } = useBrowserExtension()
const dispatch = useAppDispatch()
const { _ } = useLingui()
const searchForm = useForm<{ search: string }>({
validate: {
search: value => (value.length > 0 && value.length < 3 ? t`Search requires at least 3 characters` : null),
search: value => (value.length > 0 && value.length < 3 ? _(msg`Search requires at least 3 characters`) : null),
},
})
const { setValues } = searchForm
@@ -133,7 +135,7 @@ export function Header() {
<Popover.Dropdown>
<form onSubmit={searchForm.onSubmit(async values => await dispatch(search(values.search)))}>
<TextInput
placeholder={t`Search`}
placeholder={_(msg`Search`)}
{...searchForm.getInputProps("search")}
leftSection={<TbSearch size={iconSize} />}
rightSection={<CloseButton onClick={async () => await (searchFromStore && dispatch(search("")))} />}

View File

@@ -1,4 +1,5 @@
import { Trans, t } from "@lingui/macro"
import { Trans, msg } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { Divider, Group, Radio, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
import type { ComboboxData } from "@mantine/core/lib/components/Combobox/Combobox.types"
import { Constants } from "app/constants"
@@ -33,6 +34,7 @@ export function DisplaySettings() {
const mobileFooter = useAppSelector(state => state.user.settings?.mobileFooter)
const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
const dispatch = useAppDispatch()
const { _ } = useLingui()
const scrollModeOptions: Record<ScrollMode, ReactNode> = {
always: <Trans>Always</Trans>,
@@ -43,19 +45,19 @@ export function DisplaySettings() {
const displayModeData: ComboboxData = [
{
value: "always",
label: t`Always`,
label: _(msg`Always`),
},
{
value: "on_desktop",
label: t`On desktop`,
label: _(msg`On desktop`),
},
{
value: "on_mobile",
label: t`On mobile`,
label: _(msg`On mobile`),
},
{
value: "never",
label: t`Never`,
label: _(msg`Never`),
},
]

View File

@@ -1,4 +1,5 @@
import { Trans, t } from "@lingui/macro"
import { Trans, msg } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { Anchor, Box, Button, Checkbox, Divider, Group, Input, PasswordInput, Stack, Text, TextInput } from "@mantine/core"
import { useForm } from "@mantine/form"
import { openConfirmModal } from "@mantine/modals"
@@ -19,10 +20,11 @@ interface FormData extends ProfileModificationRequest {
export function ProfileSettings() {
const profile = useAppSelector(state => state.user.profile)
const dispatch = useAppDispatch()
const { _ } = useLingui()
const form = useForm<FormData>({
validate: {
newPasswordConfirmation: (value, values) => (value !== values.newPassword ? t`Passwords do not match` : null),
newPasswordConfirmation: (value, values) => (value !== values.newPassword ? _(msg`Passwords do not match`) : null),
},
})
const { setValues } = form

View File

@@ -1,4 +1,5 @@
import { Trans, t } from "@lingui/macro"
import { Trans, msg } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { TextInput } from "@mantine/core"
import { Spotlight, type SpotlightActionData, spotlight } from "@mantine/spotlight"
import { redirectToFeed } from "app/redirect/thunks"
@@ -14,6 +15,8 @@ export interface TreeSearchProps {
export function TreeSearch(props: TreeSearchProps) {
const dispatch = useAppDispatch()
const { _ } = useLingui()
const actions: SpotlightActionData[] = props.feeds
.map(f => ({
id: `${f.id}`,
@@ -31,7 +34,7 @@ export function TreeSearch(props: TreeSearchProps) {
return (
<>
<TextInput
placeholder={t`Search`}
placeholder={_(msg`Search`)}
leftSection={searchIcon}
rightSectionWidth={100}
styles={{
@@ -50,7 +53,7 @@ export function TreeSearch(props: TreeSearchProps) {
shortcut="mod+k"
searchProps={{
leftSection: searchIcon,
placeholder: t`Search`,
placeholder: _(msg`Search`),
}}
nothingFound={<Trans>Nothing found</Trans>}
/>

View File

@@ -1,4 +1,5 @@
import { t } from "@lingui/macro"
import { msg } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { useAppSelector } from "app/store"
interface Step {
@@ -11,22 +12,23 @@ export const useAppLoading = () => {
const settings = useAppSelector(state => state.user.settings)
const rootCategory = useAppSelector(state => state.tree.rootCategory)
const tags = useAppSelector(state => state.user.tags)
const { _ } = useLingui()
const steps: Step[] = [
{
label: t`Loading settings...`,
label: _(msg`Loading settings...`),
done: !!settings,
},
{
label: t`Loading profile...`,
label: _(msg`Loading profile...`),
done: !!profile,
},
{
label: t`Loading subscriptions...`,
label: _(msg`Loading subscriptions...`),
done: !!rootCategory,
},
{
label: t`Loading tags...`,
label: _(msg`Loading tags...`),
done: !!tags,
},
]

View File

@@ -1,4 +1,5 @@
import { Trans, t } from "@lingui/macro"
import { Trans, msg } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { Anchor, Box, Container, List, NativeSelect, SimpleGrid, Title } from "@mantine/core"
import { Constants } from "app/constants"
import { redirectToApiDocumentation } from "app/redirect/thunks"
@@ -36,6 +37,8 @@ function Section(props: { title: React.ReactNode; icon: React.ReactNode; childre
function NextUnreadBookmarklet() {
const [categoryId, setCategoryId] = useState(Constants.categories.all.id)
const [order, setOrder] = useState("desc")
const { _ } = useLingui()
const baseUrl = window.location.href.substring(0, window.location.href.lastIndexOf("#"))
const href = `javascript:window.location.href='${baseUrl}next?category=${categoryId}&order=${order}&t='+new Date().getTime();`
@@ -44,8 +47,8 @@ function NextUnreadBookmarklet() {
<CategorySelect value={categoryId} onChange={c => c && setCategoryId(c)} withAll description={<Trans>Category</Trans>} />
<NativeSelect
data={[
{ value: "desc", label: t`Newest first` },
{ value: "asc", label: t`Oldest first` },
{ value: "desc", label: _(msg`Newest first`) },
{ value: "asc", label: _(msg`Oldest first`) },
]}
value={order}
onChange={e => setOrder(e.target.value)}

View File

@@ -1,4 +1,5 @@
import { Trans, t } from "@lingui/macro"
import { Trans, msg } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { Anchor, Box, Button, Center, Container, Group, Paper, PasswordInput, Stack, TextInput, Title } from "@mantine/core"
import { useForm } from "@mantine/form"
import { client, errorToStrings } from "app/client"
@@ -13,6 +14,7 @@ import { Link } from "react-router-dom"
export function LoginPage() {
const serverInfos = useAppSelector(state => state.server.serverInfos)
const dispatch = useAppDispatch()
const { _ } = useLingui()
const form = useForm<LoginRequest>({
initialValues: {
@@ -43,7 +45,7 @@ export function LoginPage() {
<Stack>
<TextInput
label={<Trans>User Name or E-mail</Trans>}
placeholder={t`User Name or E-mail`}
placeholder={_(msg`User Name or E-mail`)}
{...form.getInputProps("name")}
description={
serverInfos?.demoAccountEnabled ? <Trans>Try out CommaFeed with the demo account: demo/demo</Trans> : ""
@@ -54,7 +56,7 @@ export function LoginPage() {
/>
<PasswordInput
label={<Trans>Password</Trans>}
placeholder={t`Password`}
placeholder={_(msg`Password`)}
{...form.getInputProps("password")}
size="md"
required

View File

@@ -1,4 +1,5 @@
import { Trans, t } from "@lingui/macro"
import { Trans, msg } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { Anchor, Box, Button, Center, Container, Group, Paper, Stack, TextInput, Title } from "@mantine/core"
import { useForm } from "@mantine/form"
import { client, errorToStrings } from "app/client"
@@ -11,6 +12,7 @@ import { Link } from "react-router-dom"
export function PasswordRecoveryPage() {
const [message, setMessage] = useState("")
const { _ } = useLingui()
const form = useForm<PasswordResetRequest>({
initialValues: {
@@ -20,7 +22,7 @@ export function PasswordRecoveryPage() {
const recoverPassword = useAsyncCallback(client.user.passwordReset, {
onSuccess: () => {
setMessage(t`An email has been sent if this address was registered. Check your inbox.`)
setMessage(_(msg`An email has been sent if this address was registered. Check your inbox.`))
},
})
@@ -54,7 +56,7 @@ export function PasswordRecoveryPage() {
<TextInput
type="email"
label={<Trans>E-mail</Trans>}
placeholder={t`E-mail`}
placeholder={_(msg`E-mail`)}
{...form.getInputProps("email")}
size="md"
required

View File

@@ -1,4 +1,5 @@
import { Trans, t } from "@lingui/macro"
import { Trans, msg } from "@lingui/macro"
import { useLingui } from "@lingui/react"
import { Anchor, Box, Button, Center, Container, Group, Paper, PasswordInput, Stack, TextInput, Title } from "@mantine/core"
import { useForm } from "@mantine/form"
import { client, errorToStrings } from "app/client"
@@ -13,6 +14,7 @@ import { Link } from "react-router-dom"
export function RegistrationPage() {
const serverInfos = useAppSelector(state => state.server.serverInfos)
const dispatch = useAppDispatch()
const { _ } = useLingui()
const form = useForm<RegistrationRequest>({
initialValues: {
@@ -37,7 +39,7 @@ export function RegistrationPage() {
</Title>
{serverInfos && !serverInfos.allowRegistrations && (
<Box mb="md">
<Alert messages={[t`Registrations are closed on this CommaFeed instance`]} />
<Alert messages={[_(msg`Registrations are closed on this CommaFeed instance`)]} />
</Box>
)}
{serverInfos?.allowRegistrations && (
@@ -54,14 +56,14 @@ export function RegistrationPage() {
<TextInput
type="email"
label={<Trans>E-mail address</Trans>}
placeholder={t`E-mail address`}
placeholder={_(msg`E-mail address`)}
{...form.getInputProps("email")}
size="md"
required
/>
<PasswordInput
label={<Trans>Password</Trans>}
placeholder={t`Password`}
placeholder={_(msg`Password`)}
{...form.getInputProps("password")}
size="md"
required