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

61
src/components/molecules/DownloadStateIndicator.tsx
View File

@@ -10,40 +10,53 @@ import { CircularProgress } from '@mui/material';
import Typography from '@mui/material/Typography';
import { Box } from '@mui/system';
import React from 'react';
import { IDownloadChapter } from 'typings';
import { useTranslation } from 'react-i18next';
import { IDownloadChapter, TranslationKey } from 'typings';
interface DownloadStateIndicatorProps {
download: IDownloadChapter;
}
const DownloadStateIndicator: React.FC<DownloadStateIndicatorProps> = ({ download }) => (
<Box
sx={{
position: 'relative',
display: 'inline-flex',
width: '50px',
justifyContent: 'center',
}}
>
{download.progress !== 0 && <CircularProgress variant="determinate" value={download.progress * 100} />}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const DOWNLOAD_STATE_TO_TRANSLATION_KEY_MAP: { [state in IDownloadChapter['state']]: TranslationKey } = {
Downloading: 'download.state.label.downloading',
Error: 'download.state.label.error',
Finished: 'download.state.label.finished',
Queued: 'download.state.label.queued',
} as const;
const DownloadStateIndicator: React.FC<DownloadStateIndicatorProps> = ({ download }) => {
const { t } = useTranslation();
return (
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
position: 'relative',
display: 'inline-flex',
width: '50px',
justifyContent: 'center',
}}
>
<Typography variant="caption" component="div" color="text.secondary">
{download.progress !== 0 && `${Math.round(download.progress * 100)}%`}
{download.progress === 0 && download.state}
</Typography>
{download.progress !== 0 && <CircularProgress variant="determinate" value={download.progress * 100} />}
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography variant="caption" component="div" color="text.secondary">
{download.progress !== 0 && `${Math.round(download.progress * 100)}%`}
{download.progress === 0 && t(DOWNLOAD_STATE_TO_TRANSLATION_KEY_MAP[download.state])}
</Typography>
</Box>
</Box>
</Box>
);
);
};
export default DownloadStateIndicator;