ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add translation keys (#246)

Browse Source 
* Fix i18n tsc issue

"t" can return null by default.
This was already disabled in the config, but it had no effect on tsc.

* Fix translation in "DefaultNavBar"

key was missing and since this is a constant the translation wouldn't update in case the language got changed after first load.

* Enable typing for i18n translation keys

* Add translation keys
This commit is contained in:
schroda
2023-03-23 13:59:32 +01:00
committed by GitHub
parent 8c129f2e08
commit d58bd6cd92
56 changed files with 1030 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/navbar/DefaultNavBar.tsx
View File

@@ -31,56 +31,54 @@ import { createPortal } from 'react-dom';
import useBackTo from 'util/useBackTo';
import DesktopSideBar from 'components/navbar/navigation/DesktopSideBar';
import MobileBottomBar from 'components/navbar/navigation/MobileBottomBar';
// import { useTranslation } from 'react-i18next';
import { t } from 'i18next';
import { NavbarItem } from 'typings';
const navbarItems: Array<NavbarItem> = [
{
path: '/library',
title: t('DefaultNavBar.navbarItems.Library'),
title: 'library.title',
SelectedIconComponent: CollectionsBookmarkIcon,
IconComponent: CollectionsOutlinedBookmarkIcon,
show: 'both',
},
{
path: '/updates',
title: 'Updates',
title: 'updates.title',
SelectedIconComponent: NewReleasesIcon,
IconComponent: NewReleasesOutlinedIcon,
show: 'both',
},
{
path: '/extensions',
title: 'Extensions',
title: 'extension.title',
SelectedIconComponent: ExtensionIcon,
IconComponent: ExtensionOutlinedIcon,
show: 'desktop',
},
{
path: '/sources',
title: 'Sources',
title: 'source.title',
SelectedIconComponent: ExploreIcon,
IconComponent: ExploreOutlinedIcon,
show: 'desktop',
},
{
path: '/browse',
title: 'Browse',
title: 'global.label.browse',
SelectedIconComponent: ExploreIcon,
IconComponent: ExploreOutlinedIcon,
show: 'mobile',
},
{
path: '/downloads',
title: 'Downloads',
title: 'download.title',
SelectedIconComponent: GetAppIcon,
IconComponent: GetAppOutlinedIcon,
show: 'both',
},
{
path: '/settings',
title: 'Settings',
title: 'settings.title',
SelectedIconComponent: SettingsIcon,
IconComponent: SettingsIcon,
show: 'both',
@@ -88,7 +86,6 @@ const navbarItems: Array<NavbarItem> = [
];
export default function DefaultNavBar() {
// const { t } = useTranslation();
const { title, action, override } = useContext(NavBarContext);
const backTo = useBackTo();

18
src/components/navbar/ReaderNavBar.tsx
View File

@@ -26,6 +26,7 @@ import { styled } from '@mui/system';
import useBackTo from 'util/useBackTo';
import ReaderSettingsOptions from 'components/reader/ReaderSettingsOptions';
import { IChapter, IManga, IMangaCard, IReaderSettings } from 'typings';
import { useTranslation } from 'react-i18next';
const Root = styled('div')(({ theme }) => ({
top: 0,
@@ -121,6 +122,7 @@ interface IProps {
}
export default function ReaderNavBar(props: IProps) {
const { t } = useTranslation();
const history = useHistory();
const backTo = useBackTo();
const location = useLocation<{
@@ -230,7 +232,7 @@ export default function ReaderNavBar(props: IProps) {
},
}}
>
<ListItemText primary="Reader Settings" />
<ListItemText primary={t('reader.settings.title.reader_settings')} />
<ListItemSecondaryAction>
<IconButton
edge="start"
@@ -258,7 +260,7 @@ export default function ReaderNavBar(props: IProps) {
<Divider sx={{ my: 1, mx: 2 }} />
<Navigation>
<PageNavigation>
<span>Currently on page</span>
<span>{t('reader.page_info.label.currently_on_page')}</span>
<FormControl size="small" sx={{ margin: '0 5px' }} disabled={chapter.pageCount === -1}>
<Select
MenuProps={MenuProps}
@@ -278,11 +280,11 @@ export default function ReaderNavBar(props: IProps) {
))}
</Select>
</FormControl>
<span>{`of ${chapter.pageCount}`}</span>
<span>{t('reader.page_info.label.of_max_pages', { maxPages: chapter.pageCount })}</span>
</PageNavigation>
<ChapterNavigation>
<IconButton
title="Previous Chapter"
title={t('reader.button.previous_chapter')}
sx={{ gridArea: 'pre' }}
disabled={chapter.index <= 1}
onClick={() => {
@@ -317,14 +319,14 @@ export default function ReaderNavBar(props: IProps) {
.map((ignoreValue, index) => (
// eslint-disable-next-line max-len
// eslint-disable-next-line react/no-array-index-key
<MenuItem key={`Chapter#${index + 1}`} value={index + 1}>{`Chapter ${
index + 1
}`}</MenuItem>
<MenuItem key={`Chapter#${index + 1}`} value={index + 1}>{`${t(
'chapter.title',
)} ${index + 1}`}</MenuItem>
))}
</Select>
</FormControl>
<IconButton
title="Next Chapter"
title={t('reader.button.next_chapter')}
sx={{ gridArea: 'next' }}
disabled={chapter.index < 1 || chapter.index >= chapter.chapterCount}
onClick={() => {

13
src/components/navbar/action/CategorySelect.tsx
View File

@@ -16,6 +16,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
import FormGroup from '@mui/material/FormGroup';
import client, { useQuery } from 'util/client';
import { ICategory } from 'typings';
import { useTranslation } from 'react-i18next';
interface IProps {
open: boolean;
@@ -24,6 +25,8 @@ interface IProps {
}
export default function CategorySelect(props: IProps) {
const { t } = useTranslation();
const { open, setOpen, mangaId } = props;
const { data: mangaCategoriesData, mutate } = useQuery<ICategory[]>(`/api/v1/manga/${mangaId}/category`);
@@ -65,14 +68,14 @@ export default function CategorySelect(props: IProps) {
maxWidth="xs"
open={open}
>
<DialogTitle>Set categories</DialogTitle>
<DialogTitle>{t('category.title.set_categories')}</DialogTitle>
<DialogContent dividers>
<FormGroup>
{allCategories.length === 0 && (
<span>
No categories found!
{t('category.error.no_categories_found.label.info')}
<br />
You should make some from settings.
{t('category.error.no_categories_found.label.hint')}
</span>
)}
{allCategories.map((category) => (
@@ -92,10 +95,10 @@ export default function CategorySelect(props: IProps) {
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleCancel} color="primary">
Cancel
{t('global.button.cancel')}
</Button>
<Button onClick={handleOk} color="primary">
Ok
{t('global.button.ok')}
</Button>
</DialogActions>
</Dialog>

9
src/components/navbar/action/LangSelect.tsx
View File

@@ -18,6 +18,7 @@ import { List, ListItemSecondaryAction, ListItemText } from '@mui/material';
import ListItem from '@mui/material/ListItem';
import { langCodeToName } from 'util/language';
import cloneObject from 'util/cloneObject';
import { useTranslation } from 'react-i18next';
function removeAll(firstList: any[], secondList: any[]) {
secondList.forEach((item) => {
@@ -38,6 +39,8 @@ interface IProps {
}
export default function LangSelect(props: IProps) {
const { t } = useTranslation();
const { shownLangs, setShownLangs, allLangs, forcedLangs } = props;
// hold a copy and only sate state on parent when OK pressed, improves performance
const [mShownLangs, setMShownLangs] = useState(removeAll(cloneObject(shownLangs), forcedLangs!));
@@ -85,7 +88,7 @@ export default function LangSelect(props: IProps) {
maxWidth="xs"
open={open}
>
<DialogTitle>Enabled Languages</DialogTitle>
<DialogTitle>{t('global.language.title.enabled_languages')}</DialogTitle>
<DialogContent dividers sx={{ padding: 0 }}>
<List>
{allLangs.map((lang) => (
@@ -104,10 +107,10 @@ export default function LangSelect(props: IProps) {
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleCancel} color="primary">
Cancel
{t('global.button.cancel')}
</Button>
<Button onClick={handleOk} color="primary">
Ok
{t('global.button.ok')}
</Button>
</DialogActions>
</Dialog>

4
src/components/navbar/navigation/DesktopSideBar.tsx
View File

@@ -11,6 +11,7 @@ import { Link, useLocation } from 'react-router-dom';
import { styled } from '@mui/system';
import { useTheme } from '@mui/material/styles';
import { NavbarItem } from 'typings';
import { useTranslation } from 'react-i18next';
const SideNavBarContainer = styled('div')(({ theme }) => ({
height: '100vh',
@@ -29,6 +30,7 @@ interface IProps {
}
export default function DesktopSideBar({ navBarItems }: IProps) {
const { t } = useTranslation();
const location = useLocation();
const theme = useTheme();
@@ -48,7 +50,7 @@ export default function DesktopSideBar({ navBarItems }: IProps) {
<Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
<ListItem disableRipple button key={title}>
<ListItemIcon sx={{ minWidth: '0' }}>
<Tooltip placement="right" title={title}>
<Tooltip placement="right" title={t(title)}>
{iconFor(path, IconComponent, SelectedIconComponent)}
</Tooltip>
</ListItemIcon>

4
src/components/navbar/navigation/MobileBottomBar.tsx
View File

@@ -11,6 +11,7 @@ import { styled, Box } from '@mui/system';
import { Link as RRDLink, useLocation } from 'react-router-dom';
import { useTheme } from '@mui/material/styles';
import { NavbarItem } from 'typings';
import { useTranslation } from 'react-i18next';
const BottomNavContainer = styled('div')(({ theme }) => ({
bottom: 0,
@@ -38,6 +39,7 @@ interface IProps {
}
export default function MobileBottomBar({ navBarItems }: IProps) {
const { t } = useTranslation();
const location = useLocation();
const theme = useTheme();
@@ -68,7 +70,7 @@ export default function MobileBottomBar({ navBarItems }: IProps) {
: 'grey.600',
}}
>
{title}
{t(title)}
</Box>
</Box>
</ListItem>