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

Reduce requested tracker data in queries

Browse Source
This commit is contained in:
schroda
2024-07-04 22:00:39 +02:00
parent 7556ea9b38
commit 83be995fb8
20 changed files with 289 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/library/LibraryOptionsPanel.tsx
View File

@@ -19,6 +19,8 @@ import { GridLayout, useLibraryOptionsContext } from '@/components/context/Libra
import { OptionsTabs } from '@/components/molecules/OptionsTabs';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { Trackers } from '@/lib/data/Trackers.ts';
import { GetTrackersSettingsQuery } from '@/lib/graphql/generated/graphql.ts';
import { GET_TRACKERS_SETTINGS } from '@/lib/graphql/queries/TrackerQuery.ts';
const TITLES: { [key in 'filter' | 'sort' | 'display']: TranslationKey } = {
filter: 'global.label.filter',
@@ -44,7 +46,7 @@ export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
const { t } = useTranslation();
const { options, setOptions } = useLibraryOptionsContext();
const trackerList = requestManager.useGetTrackerList();
const trackerList = requestManager.useGetTrackerList<GetTrackersSettingsQuery>(GET_TRACKERS_SETTINGS);
const loggedInTrackers = Trackers.getLoggedIn(trackerList.data?.trackers.nodes ?? []);
const handleFilterChange = <T extends keyof LibraryOptions>(key: T, value: LibraryOptions[T]) => {

4
src/components/manga/TrackMangaButton.tsx
View File

@@ -18,12 +18,14 @@ import { TrackManga } from '@/components/tracker/TrackManga.tsx';
import { Trackers } from '@/lib/data/Trackers.ts';
import { TManga } from '@/typings.ts';
import { CustomIconButton } from '@/components/atoms/CustomIconButton.tsx';
import { GetTrackersSettingsQuery } from '@/lib/graphql/generated/graphql.ts';
import { GET_TRACKERS_SETTINGS } from '@/lib/graphql/queries/TrackerQuery.ts';
export const TrackMangaButton = ({ manga }: { manga: TManga }) => {
const { t } = useTranslation();
const navigate = useNavigate();
const trackerList = requestManager.useGetTrackerList();
const trackerList = requestManager.useGetTrackerList<GetTrackersSettingsQuery>(GET_TRACKERS_SETTINGS);
const mangaTrackers = manga.trackRecords.nodes;
const loggedInTrackers = Trackers.getLoggedIn(trackerList.data?.trackers.nodes ?? []);

4
src/components/tracker/SettingsTrackerCard.tsx
View File

@@ -24,9 +24,9 @@ import Button from '@mui/material/Button';
import { PasswordTextField } from '@/components/atoms/PasswordTextField.tsx';
import { makeToast } from '@/components/util/Toast.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { TBaseTracker, Trackers } from '@/lib/data/Trackers.ts';
import { Trackers, TTrackerSearch } from '@/lib/data/Trackers.ts';
export const SettingsTrackerCard = ({ tracker }: { tracker: TBaseTracker }) => {
export const SettingsTrackerCard = ({ tracker }: { tracker: TTrackerSearch }) => {
const { t } = useTranslation();
const [loginTrackerCredentials, { loading: isCredentialLoginInProgress }] =

6
src/components/tracker/TrackManga.tsx
View File

@@ -19,6 +19,8 @@ import { TrackerCard, TrackerMode } from '@/components/tracker/TrackerCard.tsx';
import { TManga } from '@/typings.ts';
import { makeToast } from '@/components/util/Toast.tsx';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
import { GetTrackersBindQuery } from '@/lib/graphql/generated/graphql.ts';
import { GET_TRACKERS_BIND } from '@/lib/graphql/queries/TrackerQuery.ts';
const getTrackerMode = (id: number, trackersInUse: number[], searchModeForTracker?: number): TrackerMode => {
if (id === searchModeForTracker) {
@@ -38,7 +40,9 @@ export const TrackManga = ({ manga }: { manga: Pick<TManga, 'id' | 'trackRecords
const [searchModeForTracker, setSearchModeForTracker] = useState<number>();
const trackerList = requestManager.useGetTrackerList({ notifyOnNetworkStatusChange: true });
const trackerList = requestManager.useGetTrackerList<GetTrackersBindQuery>(GET_TRACKERS_BIND, {
notifyOnNetworkStatusChange: true,
});
const mangaTrackers = manga.trackRecords.nodes;
const loggedInTrackers = Trackers.getLoggedIn(trackerList.data?.trackers.nodes ?? []);

32
src/components/tracker/TrackerActiveCard.tsx
View File

@@ -29,7 +29,7 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
import PopupState, { bindDialog, bindMenu, bindTrigger } from 'material-ui-popup-state';
import { useMemo, useState } from 'react';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { Trackers, TTrackRecord, UNSET_DATE } from '@/lib/data/Trackers.ts';
import { Trackers, TTrackerBind, TTrackRecordBind, UNSET_DATE } from '@/lib/data/Trackers.ts';
import { ListPreference } from '@/components/sourceConfiguration/ListPreference.tsx';
import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
import { DateSetting } from '@/components/settings/DateSetting.tsx';
@@ -39,6 +39,7 @@ import { CARD_STYLING } from '@/components/tracker/constants.ts';
import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
import { SelectSetting, SelectSettingValue } from '@/components/settings/SelectSetting.tsx';
import { CheckboxInput } from '@/components/atoms/CheckboxInput';
import { TrackRecordType } from '@/lib/graphql/generated/graphql.ts';
const TrackerActiveLink = ({ children, url }: { children: React.ReactNode; url: string }) => (
<Link href={url} rel="noreferrer" target="_blank" underline="none" color="inherit">
@@ -46,12 +47,16 @@ const TrackerActiveLink = ({ children, url }: { children: React.ReactNode; url:
</Link>
);
type TTrackerActive = Pick<TTrackerBind, 'id' | 'name' | 'icon' | 'supportsTrackDeletion'>;
type TTrackRecordActive = Pick<TTrackRecordBind, 'id' | 'remoteUrl' | 'title'>;
const TrackerActiveRemoveBind = ({
trackRecord: { tracker, ...trackRecord },
trackerRecordId,
tracker,
onClick,
onClose,
}: {
trackRecord: TTrackRecord;
trackerRecordId: TrackRecordType['id'];
tracker: TTrackerActive;
onClick: () => void;
onClose: () => void;
}) => {
@@ -62,7 +67,7 @@ const TrackerActiveRemoveBind = ({
const removeBind = () => {
onClose();
requestManager
.unbindTracker(trackRecord.id, removeRemoteTracking)
.unbindTracker(trackerRecordId, removeRemoteTracking)
.response.then(() => makeToast(t('manga.action.track.remove.label.success'), 'success'))
.catch(() => makeToast(t('manga.action.track.remove.label.error'), 'error'));
};
@@ -137,10 +142,12 @@ const TrackerActiveRemoveBind = ({
};
const TrackerActiveHeader = ({
trackRecord: { tracker, ...trackRecord },
trackRecord,
tracker,
openSearch,
}: {
trackRecord: TTrackRecord;
trackRecord: TTrackRecordActive;
tracker: TTrackerActive;
openSearch: () => void;
}) => {
const { t } = useTranslation();
@@ -182,7 +189,8 @@ const TrackerActiveHeader = ({
</TrackerActiveLink>,
<TrackerActiveRemoveBind
key={`tracker-active-menu-item-remove-${tracker.id}`}
trackRecord={{ tracker, ...trackRecord }}
trackerRecordId={trackRecord.id}
tracker={tracker}
onClick={() => setHideMenu(true)}
onClose={onClose}
/>,
@@ -205,10 +213,12 @@ const TrackerActiveCardInfoRow = ({ children }: { children: React.ReactNode }) =
const isUnsetScore = (score: string | number): boolean => !Math.trunc(Number(score));
export const TrackerActiveCard = ({
trackRecord: { tracker, ...trackRecord },
trackRecord,
tracker,
onClick,
}: {
trackRecord: TTrackRecord;
trackRecord: TTrackRecordBind;
tracker: TTrackerBind;
onClick: () => void;
}) => {
const { t } = useTranslation();
@@ -221,7 +231,7 @@ export const TrackerActiveCard = ({
tracker.scores.map(
(score) =>
[score, { text: isUnsetScore(score) ? '-' : score }] satisfies SelectSettingValue<
TTrackRecord['tracker']['scores'][number]
TTrackerBind['scores'][number]
>,
),
[tracker.scores],
@@ -236,7 +246,7 @@ export const TrackerActiveCard = ({
return (
<Card sx={CARD_STYLING}>
<CardContent sx={{ padding: 0 }}>
<TrackerActiveHeader trackRecord={{ tracker, ...trackRecord }} openSearch={onClick} />
<TrackerActiveHeader trackRecord={trackRecord} tracker={tracker} openSearch={onClick} />
<Card>
<CardContent sx={{ padding: '0' }}>
<Box sx={{ padding: 1 }}>

7
src/components/tracker/TrackerCard.tsx
View File

@@ -6,10 +6,10 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { TBaseTracker, TTrackRecord } from '@/lib/data/Trackers.ts';
import { TrackerUntrackedCard } from '@/components/tracker/TrackerUntrackedCard.tsx';
import { TrackerSearch } from '@/components/tracker/TrackerSearch.tsx';
import { TrackerActiveCard } from '@/components/tracker/TrackerActiveCard.tsx';
import { TTrackerBind, TTrackRecordBind } from '@/lib/data/Trackers.ts';
export enum TrackerMode {
UNTRACKED,
@@ -24,9 +24,9 @@ export const TrackerCard = ({
mode,
setSearchMode,
}: {
tracker: TBaseTracker;
tracker: TTrackerBind;
mangaId: number;
trackRecord?: TTrackRecord;
trackRecord?: TTrackRecordBind;
mode: TrackerMode;
setSearchMode: (id?: number) => void;
}) => {
@@ -51,6 +51,7 @@ export const TrackerCard = ({
return (
<TrackerActiveCard
tracker={tracker}
trackRecord={trackRecord!}
onClick={() => {
setSearchMode(tracker.id);

4
src/components/tracker/TrackerMangaCard.tsx
View File

@@ -23,10 +23,10 @@ import parseHtml from 'html-react-parser';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import sanitizeHtml from 'sanitize-html';
import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
import { TrackerManga } from '@/lib/data/Trackers.ts';
import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
import { Metadata } from '@/components/atoms/Metadata.tsx';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
import { TTrackerManga } from '@/lib/data/Trackers.ts';
const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => (
<Stack direction="row" gap="5px" justifyContent="space-between">
@@ -101,7 +101,7 @@ export const TrackerMangaCard = ({
selected,
onSelect,
}: {
manga: TrackerManga;
manga: TTrackerManga;
selected: boolean;
onSelect: () => void;
}) => {

4
src/components/tracker/TrackerSearch.tsx
View File

@@ -24,7 +24,7 @@ import Typography from '@mui/material/Typography';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
import { TBaseTracker, Tracker } from '@/lib/data/Trackers.ts';
import { Tracker, TTrackerBase } from '@/lib/data/Trackers.ts';
import { SearchTextField } from '@/components/atoms/SearchTextField.tsx';
import { makeToast } from '@/components/util/Toast.tsx';
import { TrackerMangaCard } from '@/components/tracker/TrackerMangaCard.tsx';
@@ -39,7 +39,7 @@ export const TrackerSearch = ({
trackedId,
}: {
mangaId: number;
tracker: TBaseTracker;
tracker: Pick<TTrackerBase, 'id'>;
closeSearchMode: () => void;
trackedId?: string;
}) => {

10
src/components/tracker/TrackerUntrackedCard.tsx
View File

@@ -13,10 +13,16 @@ import Button from '@mui/material/Button';
import { useTranslation } from 'react-i18next';
import Stack from '@mui/material/Stack';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { TBaseTracker } from '@/lib/data/Trackers.ts';
import { CARD_STYLING } from '@/components/tracker/constants.ts';
import { TTrackerBase } from '@/lib/data/Trackers.ts';
export const TrackerUntrackedCard = ({ tracker, onClick }: { tracker: TBaseTracker; onClick: () => void }) => {
export const TrackerUntrackedCard = ({
tracker,
onClick,
}: {
tracker: Pick<TTrackerBase, 'name' | 'icon'>;
onClick: () => void;
}) => {
const { t } = useTranslation();
return (