use Trans as much as possible to ease lingui upgrade to 4.0

This commit is contained in:
Athou
2023-05-08 12:36:58 +02:00
parent 3d1a1cd033
commit 8b5735f521
27 changed files with 159 additions and 122 deletions

View File

@@ -15,7 +15,7 @@ const useStyles = createStyles(() => ({
},
}))
function Section(props: { title: string; icon: React.ReactNode; children: React.ReactNode }) {
function Section(props: { title: React.ReactNode; icon: React.ReactNode; children: React.ReactNode }) {
const { classes } = useStyles()
return (
<Box my="xl">
@@ -38,7 +38,7 @@ function NextUnreadBookmarklet() {
return (
<Box>
<CategorySelect value={categoryId} onChange={c => c && setCategoryId(c)} withAll description={t`Category`} />
<CategorySelect value={categoryId} onChange={c => c && setCategoryId(c)} withAll description={<Trans>Category</Trans>} />
<NativeSelect
data={[
{ value: "desc", label: t`Newest first` },
@@ -46,7 +46,7 @@ function NextUnreadBookmarklet() {
]}
value={order}
onChange={e => setOrder(e.target.value)}
description={t`Order`}
description={<Trans>Order</Trans>}
/>
<Trans>Drag link to bookmark bar</Trans>
<span> </span>
@@ -58,6 +58,7 @@ function NextUnreadBookmarklet() {
}
const bitcoinAddress = <Code>{Constants.bitcoinWalletAddress}</Code>
export function AboutPage() {
const version = useAppSelector(state => state.server.serverInfos?.version)
const revision = useAppSelector(state => state.server.serverInfos?.gitCommit)
@@ -65,7 +66,7 @@ export function AboutPage() {
return (
<Container size="xl">
<SimpleGrid cols={2} breakpoints={[{ maxWidth: Constants.layout.mobileBreakpoint, cols: 1 }]}>
<Section title={t`About`} icon={<TbHelp size={24} />}>
<Section title={<Trans>About</Trans>} icon={<TbHelp size={24} />}>
<Box>
<Trans>
CommaFeed version {version} ({revision})
@@ -119,7 +120,7 @@ export function AboutPage() {
<Trans>For those of you who prefer bitcoin, here is the address: {bitcoinAddress}</Trans>
</Box>
</Section>
<Section title={t`Goodies`} icon={<TbPuzzle size={24} />}>
<Section title={<Trans>Goodies</Trans>} icon={<TbPuzzle size={24} />}>
<List>
<List.Item>
<Trans>Browser extentions</Trans>
@@ -161,10 +162,10 @@ export function AboutPage() {
</List.Item>
</List>
</Section>
<Section title={t`Keyboard shortcuts`} icon={<TbKeyboard size={24} />}>
<Section title={<Trans>Keyboard shortcuts</Trans>} icon={<TbKeyboard size={24} />}>
<KeyboardShortcutsHelp />
</Section>
<Section title={t`REST API`} icon={<TbRocket size={24} />}>
<Section title={<Trans>REST API</Trans>} icon={<TbRocket size={24} />}>
<Anchor onClick={() => dispatch(redirectToApiDocumentation())}>
<Trans>Go to the API documentation.</Trans>
</Anchor>

View File

@@ -1,4 +1,4 @@
import { t, Trans } from "@lingui/macro"
import { Trans } from "@lingui/macro"
import { Anchor, Box, Button, Code, Container, Divider, Group, Input, NumberInput, Stack, Text, TextInput, Title } from "@mantine/core"
import { useForm } from "@mantine/form"
import { openConfirmModal } from "@mantine/modals"
@@ -48,7 +48,7 @@ export function CategoryDetailsPage() {
const openDeleteCategoryModal = () => {
const categoryName = category?.name
return openConfirmModal({
title: t`Delete Category`,
title: <Trans>Delete Category</Trans>,
children: (
<Text size="sm">
<Trans>
@@ -56,7 +56,7 @@ export function CategoryDetailsPage() {
</Trans>
</Text>
),
labels: { confirm: t`Confirm`, cancel: t`Cancel` },
labels: { confirm: <Trans>Confirm</Trans>, cancel: <Trans>Cancel</Trans> },
confirmProps: { color: "red" },
onConfirm: () => deleteCategory.execute({ id: +id }),
})
@@ -91,7 +91,7 @@ export function CategoryDetailsPage() {
<form onSubmit={form.onSubmit(modifyCategory.execute)}>
<Stack>
<Title order={3}>{category.name}</Title>
<Input.Wrapper label={t`Generated feed url`}>
<Input.Wrapper label={<Trans>Generated feed url</Trans>}>
<Box>
{apiKey && (
<Anchor
@@ -108,14 +108,14 @@ export function CategoryDetailsPage() {
{editable && (
<>
<TextInput label={t`Name`} {...form.getInputProps("name")} required />
<TextInput label={<Trans>Name</Trans>} {...form.getInputProps("name")} required />
<CategorySelect
label={t`Parent Category`}
label={<Trans>Parent Category</Trans>}
{...form.getInputProps("parentId")}
clearable
withoutCategoryIds={[id]}
/>
<NumberInput label={t`Position`} {...form.getInputProps("position")} required min={0} />
<NumberInput label={<Trans>Position</Trans>} {...form.getInputProps("position")} required min={0} />
</>
)}

View File

@@ -1,4 +1,4 @@
import { t, Trans } from "@lingui/macro"
import { Trans } from "@lingui/macro"
import { Anchor, Box, Button, Code, Container, Divider, Group, Input, NumberInput, Stack, Text, TextInput, Title } from "@mantine/core"
import { useForm } from "@mantine/form"
import { openConfirmModal } from "@mantine/modals"
@@ -47,6 +47,7 @@ function FilteringExpressionDescription() {
</div>
)
}
export function FeedDetailsPage() {
const { id } = useParams()
if (!id) throw Error("id required")
@@ -75,7 +76,7 @@ export function FeedDetailsPage() {
const openUnsubscribeModal = () => {
const feedName = feed?.name
return openConfirmModal({
title: t`Unsubscribe`,
title: <Trans>Unsubscribe</Trans>,
children: (
<Text size="sm">
<Trans>
@@ -83,7 +84,7 @@ export function FeedDetailsPage() {
</Trans>
</Text>
),
labels: { confirm: t`Confirm`, cancel: t`Cancel` },
labels: { confirm: <Trans>Confirm</Trans>, cancel: <Trans>Cancel</Trans> },
confirmProps: { color: "red" },
onConfirm: () => unsubscribe.execute({ id: +id }),
})
@@ -112,34 +113,34 @@ export function FeedDetailsPage() {
<form onSubmit={form.onSubmit(modifyFeed.execute)}>
<Stack>
<Title order={3}>{feed.name}</Title>
<Input.Wrapper label={t`Feed URL`}>
<Input.Wrapper label={<Trans>Feed URL</Trans>}>
<Box>
<Anchor href={feed.feedUrl} target="_blank" rel="noreferrer">
{feed.feedUrl}
</Anchor>
</Box>
</Input.Wrapper>
<Input.Wrapper label={t`Website`}>
<Input.Wrapper label={<Trans>Website</Trans>}>
<Box>
<Anchor href={feed.feedLink} target="_blank" rel="noreferrer">
{feed.feedLink}
</Anchor>
</Box>
</Input.Wrapper>
<Input.Wrapper label={t`Last refresh`}>
<Input.Wrapper label={<Trans>Last refresh</Trans>}>
<Box>
<RelativeDate date={feed.lastRefresh} />
</Box>
</Input.Wrapper>
<Input.Wrapper label={t`Last refresh message`}>
<Box>{feed.message ?? t`N/A`}</Box>
<Input.Wrapper label={<Trans>Last refresh message</Trans>}>
<Box>{feed.message ?? <Trans>N/A</Trans>}</Box>
</Input.Wrapper>
<Input.Wrapper label={t`Next refresh`}>
<Input.Wrapper label={<Trans>Next refresh</Trans>}>
<Box>
<RelativeDate date={feed.nextRefresh} />
</Box>
</Input.Wrapper>
<Input.Wrapper label={t`Generated feed url`}>
<Input.Wrapper label={<Trans>Generated feed url</Trans>}>
<Box>
{apiKey && (
<Anchor href={`rest/feed/entriesAsFeed?id=${feed.id}&apiKey=${apiKey}`} target="_blank" rel="noreferrer">
@@ -150,11 +151,11 @@ export function FeedDetailsPage() {
</Box>
</Input.Wrapper>
<TextInput label={t`Name`} {...form.getInputProps("name")} required />
<CategorySelect label={t`Category`} {...form.getInputProps("categoryId")} clearable />
<NumberInput label={t`Position`} {...form.getInputProps("position")} required min={0} />
<TextInput label={<Trans>Name</Trans>} {...form.getInputProps("name")} required />
<CategorySelect label={<Trans>Category</Trans>} {...form.getInputProps("categoryId")} clearable />
<NumberInput label={<Trans>Position</Trans>} {...form.getInputProps("position")} required min={0} />
<TextInput
label={t`Filtering expression`}
label={<Trans>Filtering expression</Trans>}
description={<FilteringExpressionDescription />}
{...form.getInputProps("filter")}
/>

View File

@@ -1,4 +1,4 @@
import { t, Trans } from "@lingui/macro"
import { Trans } from "@lingui/macro"
import { ActionIcon, Anchor, Box, Center, Divider, Group, Title, useMantineTheme } from "@mantine/core"
import { useViewportSize } from "@mantine/hooks"
import { Constants } from "app/constants"
@@ -77,7 +77,7 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {
<FeedEntries />
{!hasMore && <Divider my="xl" label={t`No more entries`} labelPosition="center" />}
{!hasMore && <Divider my="xl" label={<Trans>No more entries</Trans>} labelPosition="center" />}
</Box>
)
}

View File

@@ -1,4 +1,4 @@
import { t, Trans } from "@lingui/macro"
import { Trans } from "@lingui/macro"
import { Anchor, Box, Button, Container, Group, Input, Stack, Title } from "@mantine/core"
import { Constants } from "app/constants"
@@ -16,7 +16,7 @@ export function TagDetailsPage() {
<Container>
<Stack>
<Title order={3}>{id}</Title>
<Input.Wrapper label={t`Generated feed url`}>
<Input.Wrapper label={<Trans>Generated feed url</Trans>}>
<Box>
{apiKey && (
<Anchor