Feature/cleanup files (#528)

* Move menu components into new dir * Move chapter components into new dir * Extract menu helper functions * Move "SelectionFAB" to "collection" dir * Move debounce hook to global utils dir * Rename manga "hooks" to "useRefreshManga"
2023-12-30 14:30:04 +01:00
parent ecea80f41e
commit edc2a62a76
20 changed files with 109 additions and 96 deletions
--- a/src/components/chapter/ChapterOptions.tsx
+++ b/src/components/chapter/ChapterOptions.tsx
@@ -0,0 +1,112 @@
+/*
+ * 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 { RadioGroup } from '@mui/material';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ChapterListOptions, ChapterOptionsReducerAction, TranslationKey } from '@/typings.ts';
+import { RadioInput } from '@/components/atoms/RadioInput.tsx';
+import { SortRadioInput } from '@/components/atoms/SortRadioInput.tsx';
+import { ThreeStateCheckboxInput } from '@/components/atoms/ThreeStateCheckboxInput.tsx';
+import { OptionsTabs } from '@/components/molecules/OptionsTabs.tsx';
+import { SORT_OPTIONS } from '@/components/chapter/util.tsx';
+
+interface IProps {
+    open: boolean;
+    onClose: () => void;
+    options: ChapterListOptions;
+    optionsDispatch: React.Dispatch<ChapterOptionsReducerAction>;
+}
+
+const TITLES: { [key in 'filter' | 'sort' | 'display']: TranslationKey } = {
+    filter: 'global.label.filter',
+    sort: 'global.label.sort',
+    display: 'global.label.display',
+};
+
+export const ChapterOptions: React.FC<IProps> = ({ open, onClose, options, optionsDispatch }) => {
+    const { t } = useTranslation();
+
+    return (
+        <OptionsTabs<'filter' | 'sort' | 'display'>
+            open={open}
+            onClose={onClose}
+            minHeight={150}
+            tabs={['filter', 'sort', 'display']}
+            tabTitle={(key) => t(TITLES[key])}
+            tabContent={(key) => {
+                if (key === 'filter') {
+                    return (
+                        <>
+                            <ThreeStateCheckboxInput
+                                label={t('global.filter.label.unread')}
+                                checked={options.unread}
+                                onChange={(c) =>
+                                    optionsDispatch({
+                                        type: 'filter',
+                                        filterType: 'unread',
+                                        filterValue: c,
+                                    })
+                                }
+                            />
+                            <ThreeStateCheckboxInput
+                                label={t('global.filter.label.downloaded')}
+                                checked={options.downloaded}
+                                onChange={(c) =>
+                                    optionsDispatch({
+                                        type: 'filter',
+                                        filterType: 'downloaded',
+                                        filterValue: c,
+                                    })
+                                }
+                            />
+                            <ThreeStateCheckboxInput
+                                label={t('global.filter.label.bookmarked')}
+                                checked={options.bookmarked}
+                                onChange={(c) =>
+                                    optionsDispatch({
+                                        type: 'filter',
+                                        filterType: 'bookmarked',
+                                        filterValue: c,
+                                    })
+                                }
+                            />
+                        </>
+                    );
+                }
+                if (key === 'sort') {
+                    return SORT_OPTIONS.map(([mode, label]) => (
+                        <SortRadioInput
+                            key={mode}
+                            label={t(label)}
+                            checked={options.sortBy === mode}
+                            sortDescending={options.reverse}
+                            onClick={() =>
+                                mode !== options.sortBy
+                                    ? optionsDispatch({ type: 'sortBy', sortBy: mode })
+                                    : optionsDispatch({ type: 'sortReverse' })
+                            }
+                        />
+                    ));
+                }
+                if (key === 'display') {
+                    return (
+                        <RadioGroup
+                            onChange={() => optionsDispatch({ type: 'showChapterNumber' })}
+                            value={options.showChapterNumber}
+                        >
+                            <RadioInput label={t('chapter.option.display.label.source_title')} value={false} />
+                            <RadioInput label={t('chapter.option.display.label.chapter_number')} value />
+                        </RadioGroup>
+                    );
+                }
+                return null;
+            }}
+        />
+    );
+};