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

Make "value" prop of setting components required

Browse Source
This commit is contained in:
schroda
2024-04-28 01:01:36 +02:00
parent f1ec97b0e6
commit ee0bf3c1e0
14 changed files with 87 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/settings/NumberSetting.tsx
View File

@@ -28,7 +28,7 @@ import { SxProps, Theme } from '@mui/material/styles';
type BaseProps = {
settingTitle: string;
settingValue?: string;
settingValue: string;
settingIcon?: React.ReactNode;
value: number;
defaultValue?: number;
@@ -117,7 +117,7 @@ export const NumberSetting = ({
{settingIcon ? <ListItemIcon>{settingIcon}</ListItemIcon> : null}
<ListItemText
primary={settingTitle}
secondary={settingValue ?? t('global.label.loading')}
secondary={settingValue}
sx={sx}
secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
/>

8
src/components/settings/SelectSetting.tsx
View File

@@ -36,15 +36,13 @@ export const SelectSetting = <SettingValue extends string | number>({
settingName,
dialogDescription,
value,
defaultValue,
values,
handleChange,
disabled = false,
}: {
settingName: string;
dialogDescription?: string;
value?: SettingValue;
defaultValue: SettingValue;
value: SettingValue;
values: SelectSettingValue<SettingValue>[];
handleChange: (value: SettingValue) => void;
disabled?: boolean;
@@ -52,7 +50,7 @@ export const SelectSetting = <SettingValue extends string | number>({
const { t } = useTranslation();
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [dialogValue, setDialogValue] = useState(value ?? defaultValue);
const [dialogValue, setDialogValue] = useState(value);
const valueDisplayText = useMemo(() => values.find(([key]) => key === value)?.[1]?.text, [value]);
const dialogValueDisplayInfo = useMemo(() => values.find(([key]) => key === dialogValue)![1], [dialogValue]);
@@ -67,7 +65,7 @@ export const SelectSetting = <SettingValue extends string | number>({
const closeDialog = (resetValue: boolean = true) => {
if (resetValue) {
setDialogValue(value ?? defaultValue);
setDialogValue(value);
}
setIsDialogOpen(false);

10
src/components/settings/TimeSetting.tsx
View File

@@ -28,14 +28,14 @@ export const TimeSetting = ({
handleChange,
}: {
settingName: string;
value?: string;
value: string;
defaultValue: string;
handleChange: (path: string) => void;
}) => {
const { t, i18n } = useTranslation();
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [dialogValue, setDialogValue] = useState(value ?? defaultValue);
const [dialogValue, setDialogValue] = useState(value);
const [locale, setLocale] = useState('en');
@@ -58,7 +58,7 @@ export const TimeSetting = ({
setIsDialogOpen(false);
if (resetValue) {
setDialogValue(value ?? defaultValue);
setDialogValue(value);
}
},
[value],
@@ -87,9 +87,7 @@ export const TimeSetting = ({
<ListItemButton onClick={() => setIsDialogOpen(true)}>
<ListItemText
primary={settingName}
secondary={
value ? dayjs(value, 'HH:mm').locale(currentLocale).format('LT') : t('global.label.loading')
}
secondary={dayjs(value, 'HH:mm').locale(currentLocale).format('LT')}
secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
/>
</ListItemButton>

9
src/components/settings/downloads/DeleteChaptersWhileReadingSetting.tsx
View File

@@ -42,11 +42,7 @@ const CHAPTERS_TO_DELETE_SELECT_VALUES: SelectSettingValue<(typeof CHAPTERS_TO_D
CHAPTERS_TO_DELETE_TO_TRANSLATION_KEY[chapterToDelete],
]);
const getNormalizedChapterToDelete = (chapterToDelete?: number | boolean) => {
if (chapterToDelete === undefined) {
return undefined;
}
const getNormalizedChapterToDelete = (chapterToDelete: number | boolean) => {
const isMigrationVersion0 = typeof chapterToDelete === 'boolean';
if (isMigrationVersion0) {
return Number(chapterToDelete);
@@ -59,7 +55,7 @@ export const DeleteChaptersWhileReadingSetting = ({
chapterToDelete,
handleChange,
}: {
chapterToDelete?: number;
chapterToDelete: number;
handleChange: (chapterToDelete: number) => void;
}) => {
const { t } = useTranslation();
@@ -70,7 +66,6 @@ export const DeleteChaptersWhileReadingSetting = ({
<SelectSetting
settingName={t('download.settings.delete_chapters.while_reading.label.title')}
value={normalizedChapterToDelete}
defaultValue={0}
values={CHAPTERS_TO_DELETE_SELECT_VALUES}
handleChange={handleChange}
/>

12
src/components/settings/downloads/DownloadAheadSetting.tsx
View File

@@ -56,14 +56,10 @@ export const DownloadAheadSetting = ({
</ListItem>
<NumberSetting
settingTitle={t('download.settings.download_ahead.label.unread_chapters_to_download')}
settingValue={
downloadAheadLimit !== undefined
? t('download.settings.download_ahead.label.value', {
chapters: currentDownloadAheadLimit,
count: currentDownloadAheadLimit,
})
: undefined
}
settingValue={t('download.settings.download_ahead.label.value', {
chapters: currentDownloadAheadLimit,
count: currentDownloadAheadLimit,
})}
value={currentDownloadAheadLimit}
minValue={MIN_LIMIT}
maxValue={MAX_LIMIT}

10
src/components/settings/globalUpdate/GlobalUpdateSettingsInterval.tsx
View File

@@ -61,13 +61,9 @@ export const GlobalUpdateSettingsInterval = ({
</ListItem>
<NumberSetting
settingTitle={t('library.settings.global_update.auto_update.interval.label.title')}
settingValue={
autoUpdateIntervalHours !== undefined
? t('library.settings.global_update.auto_update.interval.label.value', {
hours: currentAutoUpdateIntervalHours,
})
: undefined
}
settingValue={t('library.settings.global_update.auto_update.interval.label.value', {
hours: currentAutoUpdateIntervalHours,
})}
value={currentAutoUpdateIntervalHours}
minValue={MIN_INTERVAL_HOURS}
maxValue={MAX_INTERVAL_HOURS}

12
src/components/settings/text/TextSetting.tsx
View File

@@ -9,16 +9,14 @@
import ListItemText from '@mui/material/ListItemText';
import ListItemButton from '@mui/material/ListItemButton';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { TextSettingDialog, TextSettingDialogProps } from '@/components/settings/text/TextSettingDialog.tsx';
export type TextSettingProps = Omit<TextSettingDialogProps, 'isDialogOpen' | 'setIsDialogOpen'> & {
disabled?: boolean;
};
export type TextSettingProps = Omit<TextSettingDialogProps, 'isDialogOpen' | 'setIsDialogOpen' | 'value'> &
Required<Pick<TextSettingDialogProps, 'value'>> & {
disabled?: boolean;
};
export const TextSetting = (props: TextSettingProps) => {
const { t } = useTranslation();
const [isDialogOpen, setIsDialogOpen] = useState(false);
const { settingName, value, isPassword = false, disabled = false } = props;
@@ -28,7 +26,7 @@ export const TextSetting = (props: TextSettingProps) => {
<ListItemButton disabled={disabled} onClick={() => setIsDialogOpen(true)}>
<ListItemText
primary={settingName}
secondary={isPassword ? value?.replace(/./g, '*') : value ?? t('global.label.loading')}
secondary={isPassword ? value.replace(/./g, '*') : value}
secondaryTypographyProps={{
sx: { display: 'flex', flexDirection: 'column', wordWrap: 'break-word' },
}}

10
src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx
View File

@@ -67,13 +67,9 @@ export const WebUIUpdateIntervalSetting = ({
</ListItem>
<NumberSetting
settingTitle={t('settings.webui.auto_update.label.interval')}
settingValue={
updateCheckInterval !== undefined
? t('library.settings.global_update.auto_update.interval.label.value', {
hours: currentUpdateCheckInterval,
})
: undefined
}
settingValue={t('library.settings.global_update.auto_update.interval.label.value', {
hours: currentUpdateCheckInterval,
})}
value={currentUpdateCheckInterval}
minValue={MIN_VALUE}
maxValue={MAX_VALUE}