From 21acbd5f4882c346cd5b7e4fc9b2047d0807e382 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Fri, 29 Mar 2024 18:57:52 +0100 Subject: [PATCH] Fix/tracking updating score (#682) * Use SelectSetting for updating track score * Create custom Select component --- src/components/atoms/Select.tsx | 19 ++++++++ src/components/navbar/ReaderNavBar.tsx | 7 +-- .../reader/ReaderSettingsOptions.tsx | 2 +- src/components/settings/DeviceSetting.tsx | 9 ++-- src/components/settings/SelectSetting.tsx | 13 +----- src/components/tracker/TrackerActiveCard.tsx | 43 +++++++++++-------- src/screens/Settings.tsx | 4 +- 7 files changed, 53 insertions(+), 44 deletions(-) create mode 100644 src/components/atoms/Select.tsx diff --git a/src/components/atoms/Select.tsx b/src/components/atoms/Select.tsx new file mode 100644 index 00000000..84f99d20 --- /dev/null +++ b/src/components/atoms/Select.tsx @@ -0,0 +1,19 @@ +/* + * Copyright (C) Contributors to the Suwayomi project + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +import { Select as MuiSelect, SelectVariants } from '@mui/material'; + +export const Select = ({ + children, + maxSelectionHeightPx = 250, + ...props +}: React.ComponentProps> & { maxSelectionHeightPx?: number }) => ( + MenuProps={{ PaperProps: { style: { maxHeight: maxSelectionHeightPx } } }} {...props}> + {children} + +); diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx index 990e4d26..c506c26c 100644 --- a/src/components/navbar/ReaderNavBar.tsx +++ b/src/components/navbar/ReaderNavBar.tsx @@ -18,7 +18,7 @@ import { useLocation, useNavigate } from 'react-router-dom'; import Slide from '@mui/material/Slide'; import Fade from '@mui/material/Fade'; import Zoom from '@mui/material/Zoom'; -import { Divider, FormControl, MenuItem, Select, styled, Tooltip } from '@mui/material'; +import { Divider, FormControl, MenuItem, styled, Tooltip } from '@mui/material'; import ListItem from '@mui/material/ListItem'; import ListItemText from '@mui/material/ListItemText'; import Collapse from '@mui/material/Collapse'; @@ -27,6 +27,7 @@ import { AllowedMetadataValueTypes, ChapterOffset, IReaderSettings, TChapter, TM import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions'; import { useBackButton } from '@/util/useBackButton.ts'; import { useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx'; +import { Select } from '@/components/atoms/Select.tsx'; const Root = styled('div')({ zIndex: 10, @@ -101,8 +102,6 @@ const ChapterNavigation = styled('div')({ }, }); -const MenuProps = { PaperProps: { style: { maxHeight: 150 } } }; - const OpenDrawerButton = styled(IconButton)(({ theme }) => ({ position: 'fixed', top: 0 + 20, @@ -280,7 +279,6 @@ export function ReaderNavBar(props: IProps) { disabled={disableChapterNavButtons || chapter.pageCount === -1} > = 1 ? `${chapter.sourceOrder}` : ''} displayEmpty onChange={({ target: { value: selectedChapter } }) => { diff --git a/src/components/reader/ReaderSettingsOptions.tsx b/src/components/reader/ReaderSettingsOptions.tsx index d0303f62..b858c14d 100644 --- a/src/components/reader/ReaderSettingsOptions.tsx +++ b/src/components/reader/ReaderSettingsOptions.tsx @@ -7,12 +7,12 @@ */ import { List, ListItem, ListItemText, Switch } from '@mui/material'; -import Select from '@mui/material/Select'; import MenuItem from '@mui/material/MenuItem'; import { useTranslation } from 'react-i18next'; import { AllowedMetadataValueTypes, IReaderSettings } from '@/typings'; import { NumberSetting } from '@/components/settings/NumberSetting.tsx'; import { isHorizontalReaderType } from '@/components/reader/Page.tsx'; +import { Select } from '@/components/atoms/Select.tsx'; interface IProps extends IReaderSettings { setSettingValue: (key: keyof IReaderSettings, value: AllowedMetadataValueTypes, persist?: boolean) => void; diff --git a/src/components/settings/DeviceSetting.tsx b/src/components/settings/DeviceSetting.tsx index d123a5d4..60ff3afa 100644 --- a/src/components/settings/DeviceSetting.tsx +++ b/src/components/settings/DeviceSetting.tsx @@ -6,7 +6,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { List, ListItem, ListItemText, MenuItem, Select } from '@mui/material'; +import { List, ListItem, ListItemText, MenuItem } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { useContext, useEffect } from 'react'; import { updateMetadataServerSettings, useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts'; @@ -15,6 +15,7 @@ import { makeToast } from '@/components/util/Toast.tsx'; import { MutableListSetting } from '@/components/settings/MutableListSetting.tsx'; import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx'; import { ActiveDevice, DEFAULT_DEVICE } from '@/util/device.ts'; +import { Select } from '@/components/atoms/Select.tsx'; export const DeviceSetting = () => { const { t } = useTranslation(); @@ -75,11 +76,7 @@ export const DeviceSetting = () => { primary={t('settings.device.active_device.label.title')} secondary={t('settings.device.active_device.label.description')} /> - setActiveDevice(device)}> {devices.map((device) => ( {device} diff --git a/src/components/settings/SelectSetting.tsx b/src/components/settings/SelectSetting.tsx index 587b057f..4732c9cc 100644 --- a/src/components/settings/SelectSetting.tsx +++ b/src/components/settings/SelectSetting.tsx @@ -6,17 +6,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { - Button, - Dialog, - DialogTitle, - FormControl, - ListItemText, - MenuItem, - Select, - Stack, - Typography, -} from '@mui/material'; +import { Button, Dialog, DialogTitle, FormControl, ListItemText, MenuItem, Stack, Typography } from '@mui/material'; import DialogContent from '@mui/material/DialogContent'; import DialogActions from '@mui/material/DialogActions'; import ListItemButton from '@mui/material/ListItemButton'; @@ -25,6 +15,7 @@ import { useTranslation } from 'react-i18next'; import DialogContentText from '@mui/material/DialogContentText'; import InfoIcon from '@mui/icons-material/Info'; import { TranslationKey } from '@/typings.ts'; +import { Select } from '@/components/atoms/Select.tsx'; export type SelectSettingValueDisplayInfo = { text: TranslationKey | string; diff --git a/src/components/tracker/TrackerActiveCard.tsx b/src/components/tracker/TrackerActiveCard.tsx index 0e212d80..c360bffb 100644 --- a/src/components/tracker/TrackerActiveCard.tsx +++ b/src/components/tracker/TrackerActiveCard.tsx @@ -28,6 +28,7 @@ import { } from '@mui/material'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import PopupState, { bindDialog, bindMenu, bindTrigger } from 'material-ui-popup-state'; +import { useMemo } from 'react'; import { requestManager } from '@/lib/requests/RequestManager.ts'; import { Trackers, TTrackRecord, UNSET_DATE } from '@/lib/data/Trackers.ts'; import { ListPreference } from '@/components/sourceConfiguration/ListPreference.tsx'; @@ -37,6 +38,7 @@ import { makeToast } from '@/components/util/Toast.tsx'; import { Menu } from '@/components/menu/Menu'; import { CARD_STYLING } from '@/components/tracker/constants.ts'; import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx'; +import { SelectSetting, SelectSettingValue } from '@/components/settings/SelectSetting.tsx'; const TrackerActiveLink = ({ children, url }: { children: React.ReactNode; url: string }) => ( @@ -198,6 +200,8 @@ const TrackerActiveCardInfoRow = ({ children }: { children: React.ReactNode }) = ); +const isUnsetScore = (score: string | number): boolean => !Math.trunc(Number(score)); + export const TrackerActiveCard = ({ trackRecord: { tracker, ...trackRecord }, onClick, @@ -207,6 +211,20 @@ export const TrackerActiveCard = ({ }) => { const { t } = useTranslation(); + const isScoreUnset = isUnsetScore(trackRecord.displayScore); + const currentScore = isScoreUnset ? tracker.scores[0] : trackRecord.displayScore; + + const selectSettingValues = useMemo( + () => + tracker.scores.map( + (score) => + [score, { text: isUnsetScore(score) ? '-' : score }] satisfies SelectSettingValue< + TTrackRecord['tracker']['scores'][number] + >, + ), + [tracker.scores], + ); + const updateTrackerBind = (patch: Parameters[1]) => { requestManager .updateTrackerBind(trackRecord.id, patch) @@ -245,25 +263,12 @@ export const TrackerActiveCard = ({ handleUpdate={(lastChapterRead) => updateTrackerBind({ lastChapterRead })} /> - - updateTrackerBind({ - scoreString: - newScore === 0 - ? tracker.scores[0] - : tracker.scores.find((score) => Number(score) === newScore), - }) - } + + settingName={t('tracking.track_record.label.score')} + defaultValue={tracker.scores[0]} + value={currentScore} + values={selectSettingValues} + handleChange={(score) => updateTrackerBind({ scoreString: score })} /> diff --git a/src/screens/Settings.tsx b/src/screens/Settings.tsx index c32e9e99..a101a877 100644 --- a/src/screens/Settings.tsx +++ b/src/screens/Settings.tsx @@ -17,7 +17,7 @@ import ListItem from '@mui/material/ListItem'; import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; import Switch from '@mui/material/Switch'; -import { Link, ListItemButton, MenuItem, Select } from '@mui/material'; +import { Link, ListItemButton, MenuItem } from '@mui/material'; import { useTranslation } from 'react-i18next'; import LanguageIcon from '@mui/icons-material/Language'; import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined'; @@ -37,6 +37,7 @@ import { NavBarContext } from '@/components/context/NavbarContext.tsx'; import { NumberSetting } from '@/components/settings/NumberSetting.tsx'; import { requestManager } from '@/lib/requests/RequestManager.ts'; import { makeToast } from '@/components/util/Toast.tsx'; +import { Select } from '@/components/atoms/Select.tsx'; export function Settings() { const { t, i18n } = useTranslation(); @@ -143,7 +144,6 @@ export function Settings() { } />