Implement binding manga to tracker

src/components/tracker/SettingsTrackerCard.tsx

@@ -21,10 +21,10 @@ import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import { PasswordTextField } from '@/components/atoms/PasswordTextField.tsx';
 import { makeToast } from '@/components/util/Toast.tsx';
-import { GetTrackersQuery } from '@/lib/graphql/generated/graphql.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { TBaseTracker } from '@/lib/data/Trackers.ts';
 
-export const SettingsTrackerCard = ({ tracker }: { tracker: GetTrackersQuery['trackers']['nodes'][number] }) => {
+export const SettingsTrackerCard = ({ tracker }: { tracker: TBaseTracker }) => {
     const { t } = useTranslation();
 
     const [loginTrackerCredentials, { loading: isCredentialLoginInProgress }] =
@@ -64,20 +64,23 @@ export const SettingsTrackerCard = ({ tracker }: { tracker: GetTrackersQuery['tr
         }
     };
 
+    const onClick = (openPopup: () => void) => {
+        if (!isOAuthLogin) {
+            openPopup();
+            return;
+        }
+
+        handleLogin();
+    };
+
     return (
         <PopupState variant="popover" popupId="tracker-dialog">
             {(popupState) => (
                 <>
                     <ListItemButton
                         {...bindTrigger(popupState)}
-                        onClick={() => {
-                            if (!isOAuthLogin) {
-                                popupState.open();
-                                return;
-                            }
-
-                            handleLogin();
-                        }}
+                        onClick={() => onClick(popupState.open)}
+                        onTouchStart={() => onClick(popupState.open)}
                     >
                         <ListItemAvatar sx={{ paddingRight: '20px' }}>
                             <Avatar

src/components/tracker/TrackManga.tsx

@@ -0,0 +1,93 @@
+/*
+ * 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 { useNavigate } from 'react-router-dom';
+import { Box } from '@mui/material';
+import { useMemo, useState } from 'react';
+import DialogContent from '@mui/material/DialogContent';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { Trackers } from '@/lib/data/Trackers.ts';
+import { TrackerCard, TrackerMode } from '@/components/tracker/TrackerCard.tsx';
+import { TManga } from '@/typings.ts';
+
+const getTrackerMode = (id: number, trackersInUse: number[], searchModeForTracker?: number): TrackerMode => {
+    if (id === searchModeForTracker) {
+        return TrackerMode.SEARCH;
+    }
+
+    if (trackersInUse.includes(id)) {
+        return TrackerMode.INFO;
+    }
+
+    return TrackerMode.UNTRACKED;
+};
+
+export const TrackManga = ({ manga }: { manga: TManga }) => {
+    const navigate = useNavigate();
+
+    const [searchModeForTracker, setSearchModeForTracker] = useState<number>();
+
+    const trackerList = requestManager.useGetTrackerList();
+    const mangaTrackers = manga.trackRecords.nodes;
+
+    const loggedInTrackers = Trackers.getLoggedIn(trackerList.data?.trackers.nodes ?? []);
+    const trackersInUse = Trackers.getLoggedIn(Trackers.getTrackers(mangaTrackers));
+    const trackersInUseIds = Trackers.getIds(trackersInUse);
+
+    const isSearchActive = searchModeForTracker !== undefined;
+    const OptionalDialogContent = useMemo(() => (isSearchActive ? Box : DialogContent), [isSearchActive]);
+
+    const trackerComponents = useMemo(
+        () =>
+            loggedInTrackers.map((tracker) => {
+                const mode = getTrackerMode(tracker.id, trackersInUseIds, searchModeForTracker);
+                const trackRecord = Trackers.getTrackRecordFor(tracker, manga.trackRecords.nodes);
+
+                const isSearchForTracker = mode === TrackerMode.SEARCH;
+                if (isSearchActive && !isSearchForTracker) {
+                    return null;
+                }
+
+                return (
+                    <TrackerCard
+                        key={tracker.id}
+                        tracker={tracker}
+                        mangaId={manga.id}
+                        trackRecord={trackRecord}
+                        mode={mode}
+                        setSearchMode={(id) => setSearchModeForTracker(id)}
+                    />
+                );
+            }),
+        [trackersInUseIds, searchModeForTracker, manga.id],
+    );
+
+    if (trackerList.error) {
+        return <EmptyView message={trackerList.error.message ?? trackerList.error} />;
+    }
+
+    if (trackerList.loading) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (!loggedInTrackers) {
+        navigate('/settings/trackingSettings');
+    }
+
+    if (!isSearchActive) {
+        return (
+            <OptionalDialogContent sx={{ '.MuiPaper-root:last-child .MuiCardContent-root': { paddingBottom: '0' } }}>
+                {trackerComponents}
+            </OptionalDialogContent>
+        );
+    }
+
+    return trackerComponents;
+};

src/components/tracker/TrackerCard.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 { TBaseTracker, TTrackRecord } from '@/lib/data/Trackers.ts';
+import { TrackerUntrackedCard } from '@/components/tracker/TrackerUntrackedCard.tsx';
+import { TrackerSearch } from '@/components/tracker/TrackerSearch.tsx';
+import { TManga } from '@/typings.ts';
+
+export enum TrackerMode {
+    UNTRACKED,
+    SEARCH,
+    INFO,
+}
+
+export const TrackerCard = ({
+    tracker,
+    mangaId,
+    trackRecord,
+    mode,
+    setSearchMode,
+}: {
+    tracker: TBaseTracker;
+    mangaId: number;
+    trackRecord?: TTrackRecord;
+    mode: TrackerMode;
+    setSearchMode: (id?: number) => void;
+}) => {
+    if (mode === TrackerMode.UNTRACKED) {
+        return <TrackerUntrackedCard tracker={tracker} onClick={() => setSearchMode(tracker.id)} />;
+    }
+
+    if (mode === TrackerMode.SEARCH) {
+        return (
+            <TrackerSearch
+                mangaId={mangaId}
+                tracker={tracker}
+                trackedId={trackRecord?.remoteId}
+                closeSearchMode={() => setSearchMode(undefined)}
+            />
+        );
+    }
+
+    return 'tracked';
+};

src/components/tracker/TrackerMangaCard.tsx

@@ -0,0 +1,175 @@
+/*
+ * 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 Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import {
+    Box,
+    CardActionArea,
+    CardMedia,
+    Collapse,
+    Link,
+    Stack,
+    Typography,
+    useMediaQuery,
+    useTheme,
+} from '@mui/material';
+import { useLayoutEffect, useRef, useState } from 'react';
+import parseHtml from 'html-react-parser';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
+import { TrackerManga } from '@/lib/data/Trackers.ts';
+
+const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => (
+    <Stack direction="row" gap="5px" justifyContent="space-between">
+        <Typography variant="h5" component="h1">
+            {title}
+        </Typography>
+        {selected && <CheckCircleIcon color="primary" />}
+    </Stack>
+);
+
+const TrackerMangaCardInfo = ({ title, value }: { title: string; value: string }) => (
+    <Stack direction="row" gap="5px" flexWrap="wrap">
+        <Typography variant="body1">{title}</Typography>
+        <Typography variant="body1" color="text.secondary">
+            {value}
+        </Typography>
+    </Stack>
+);
+
+const SUMMARY_COLLAPSED_SIZE = 50;
+const TrackerMangaCardSummary = ({ summary }: { summary: string }) => {
+    const { t } = useTranslation();
+
+    const summaryRef = useRef<HTMLParagraphElement>(null);
+
+    const [isSummaryExpanded, setIsSummaryExpanded] = useState(false);
+    const [showSummaryExpandButton, setShowSummaryExpandButton] = useState(false);
+
+    const summaryCollapsedSize = showSummaryExpandButton ? SUMMARY_COLLAPSED_SIZE : 0;
+
+    useLayoutEffect(() => {
+        const shouldCollapseSummary = (summaryRef.current?.clientHeight ?? 0) > SUMMARY_COLLAPSED_SIZE;
+
+        setShowSummaryExpandButton(shouldCollapseSummary);
+        setIsSummaryExpanded(!shouldCollapseSummary);
+    }, []);
+
+    return (
+        <>
+            {summary.length && (
+                <Collapse collapsedSize={summaryCollapsedSize} in={isSummaryExpanded}>
+                    <Typography ref={summaryRef} variant="body1" component="p">
+                        {parseHtml(summary)}
+                    </Typography>
+                </Collapse>
+            )}
+            {summary.length && showSummaryExpandButton && (
+                <Button
+                    component="div"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        setIsSummaryExpanded(!isSummaryExpanded);
+                    }}
+                    onTouchStart={(e) => e.stopPropagation()}
+                    onMouseDown={(e) => e.stopPropagation()}
+                >
+                    {t(isSummaryExpanded ? 'global.button.show_less' : 'global.button.show_more')}
+                </Button>
+            )}
+        </>
+    );
+};
+
+const TrackerMangaCardLink = ({ children, url }: { children: React.ReactNode; url: string }) => (
+    <Link
+        href={url}
+        rel="noreferrer"
+        target="_blank"
+        underline="none"
+        color="inherit"
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+    >
+        {children}
+    </Link>
+);
+
+export const TrackerMangaCard = ({
+    manga,
+    selected,
+    onSelect,
+}: {
+    manga: TrackerManga;
+    selected: boolean;
+    onSelect: () => void;
+}) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
+
+    return (
+        <Card
+            sx={{
+                marginBottom: '15px',
+                '&:last-child': { marginBottom: '60px' },
+            }}
+        >
+            <CardActionArea onClick={onSelect}>
+                <CardContent sx={{ padding: '0', borderRadius: 'inherit' }}>
+                    <Box
+                        sx={{
+                            padding: '10px',
+                            border: '3px solid',
+                            borderRadius: 'inherit',
+                            borderColor: selected ? theme.palette.primary.main : 'transparent',
+                        }}
+                    >
+                        <Stack direction="row" gap="15px" marginBottom="15px">
+                            <CardMedia
+                                sx={{
+                                    aspectRatio: '225/350',
+                                    minWidth: '100px',
+                                    width: '150px',
+                                    borderRadius: '4px',
+                                    overflow: 'hidden',
+                                }}
+                            >
+                                <TrackerMangaCardLink url={manga.trackingUrl}>
+                                    <SpinnerImage
+                                        alt={manga.title}
+                                        src={manga.coverUrl}
+                                        spinnerStyle={{ width: '100%', height: '100%' }}
+                                        imgStyle={{
+                                            width: '100%',
+                                            height: isMobileWidth ? undefined : '100%',
+                                            maxHeight: '100%',
+                                            objectFit: 'cover',
+                                        }}
+                                    />
+                                </TrackerMangaCardLink>
+                            </CardMedia>
+                            <Stack direction="column" sx={{ width: '100%' }}>
+                                <TrackerMangaCardLink url={manga.trackingUrl}>
+                                    <TrackerMangaCardTitle title={manga.title} selected={selected} />
+                                </TrackerMangaCardLink>
+                                <TrackerMangaCardInfo title={t('global.label.type')} value={manga.publishingType} />
+                                <TrackerMangaCardInfo title={t('global.label.started')} value={manga.startDate} />
+                                <TrackerMangaCardInfo title={t('manga.label.status')} value={manga.publishingStatus} />
+                            </Stack>
+                        </Stack>
+                        <TrackerMangaCardSummary summary={manga.summary} />
+                    </Box>
+                </CardContent>
+            </CardActionArea>
+        </Card>
+    );
+};

src/components/tracker/TrackerSearch.tsx

@@ -0,0 +1,153 @@
+/*
+ * 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 Button from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import { List, Stack } from '@mui/material';
+import { useEffect, useMemo, useState } from 'react';
+import IconButton from '@mui/material/IconButton';
+import ArrowBack from '@mui/icons-material/ArrowBack';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { TBaseTracker } 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';
+
+export const TrackerSearch = ({
+    mangaId,
+    tracker,
+    closeSearchMode,
+    trackedId,
+}: {
+    mangaId: number;
+    tracker: TBaseTracker;
+    closeSearchMode: () => void;
+    trackedId?: string;
+}) => {
+    const { t } = useTranslation();
+
+    // can't be undefined, since this can only be opened from the manga screen
+    const manga = requestManager.useGetManga(mangaId);
+
+    const [searchString, setSearchString] = useState<string>(manga.data!.manga.title);
+    const [tmpSearchString, setTmpSearchString] = useState(searchString);
+
+    const [selectedTrackerRemoteId, setSelectedTrackerRemoteId] = useState<string | undefined>(trackedId);
+
+    const trackerSearch = requestManager.useTrackerSearch(tracker.id, searchString, { addAbortSignal: true });
+    const searchResults = trackerSearch.data?.searchTracker.trackSearches ?? [];
+
+    const hasResults = !!searchResults.length;
+
+    useEffect(() => {
+        setSelectedTrackerRemoteId(trackedId);
+
+        return () =>
+            trackerSearch.abortRequest(new Error(`MangaTrackerSearchCard(${tracker.id}, ${mangaId}): search changed`));
+    }, [searchString]);
+
+    const [bindTracker, bindTrackerMutation] = requestManager.useBindTracker();
+
+    const showTrackButton =
+        useMemo(
+            () =>
+                !!selectedTrackerRemoteId &&
+                !!searchResults.find((searchResult) => searchResult.remoteId === selectedTrackerRemoteId),
+            [selectedTrackerRemoteId, searchResults],
+        ) &&
+        !trackerSearch.loading &&
+        !trackerSearch.error;
+
+    const trackManga = () => {
+        if (selectedTrackerRemoteId === undefined) {
+            return;
+        }
+
+        bindTracker({ variables: { mangaId, remoteId: selectedTrackerRemoteId, trackerId: tracker.id } })
+            .then(() => {
+                makeToast(t('manga.action.track.add.label.success'), 'success');
+                closeSearchMode();
+            })
+            .catch(() => makeToast(t('manga.action.track.add.label.error'), 'error'));
+    };
+
+    return (
+        <>
+            <DialogTitle sx={{ padding: '15px' }}>
+                <Stack direction="row" gap="10px" alignItems="center">
+                    <IconButton onClick={closeSearchMode}>
+                        <ArrowBack />
+                    </IconButton>
+                    <SearchTextField
+                        sx={{ width: '100%' }}
+                        variant="standard"
+                        value={tmpSearchString}
+                        onChange={(e) => setTmpSearchString(e.target.value)}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                                setSearchString(tmpSearchString);
+                            }
+                        }}
+                        onCancel={() => setTmpSearchString('')}
+                    />
+                </Stack>
+            </DialogTitle>
+            <DialogContent dividers sx={{ padding: '15px', height: '100vh' }}>
+                {!trackerSearch.loading && !trackerSearch.error && !hasResults && (
+                    <EmptyView message={t('manga.error.label.no_mangas_found')} />
+                )}
+                {trackerSearch.loading && <LoadingPlaceholder />}
+                {trackerSearch.error && !trackerSearch.loading && (
+                    <EmptyView
+                        message={t('global.error.label.failed_to_load_data')}
+                        messageExtra={trackerSearch.error.message ?? trackerSearch.error}
+                    />
+                )}
+                <List sx={{ padding: 0 }}>
+                    {hasResults &&
+                        searchResults.map((trackerManga) => (
+                            <TrackerMangaCard
+                                key={trackerManga.id}
+                                manga={trackerManga}
+                                selected={trackerManga.remoteId === selectedTrackerRemoteId}
+                                onSelect={() => setSelectedTrackerRemoteId(trackerManga.remoteId)}
+                            />
+                        ))}
+                </List>
+                {showTrackButton && (
+                    <Stack
+                        direction="row"
+                        justifyContent="center"
+                        sx={{
+                            position: 'absolute',
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            paddingBottom: '15px',
+                        }}
+                    >
+                        <Button
+                            disabled={bindTrackerMutation.loading}
+                            size="large"
+                            color="primary"
+                            variant="contained"
+                            onClick={trackManga}
+                            sx={{ width: '75%' }}
+                        >
+                            {t('manga.action.track.add.label.action')}
+                        </Button>
+                    </Stack>
+                )}
+            </DialogContent>
+        </>
+    );
+};

src/components/tracker/TrackerUntrackedCard.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import { Stack } from '@mui/material';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { TBaseTracker } from '@/lib/data/Trackers.ts';
+
+export const TrackerUntrackedCard = ({ tracker, onClick }: { tracker: TBaseTracker; onClick: () => void }) => {
+    const { t } = useTranslation();
+
+    return (
+        <Card sx={{ backgroundColor: 'transparent', boxShadow: 'unset', backgroundImage: 'unset' }}>
+            <CardContent sx={{ padding: '0' }}>
+                <Stack direction="row" gap="25px">
+                    <Avatar
+                        alt={`${tracker.name}`}
+                        src={requestManager.getValidImgUrlFor(tracker.icon)}
+                        variant="rounded"
+                        sx={{ width: 64, height: 64 }}
+                    />
+                    <Button sx={{ flexGrow: '1' }} onClick={onClick}>
+                        {t('tracking.action.button.add_tracking')}
+                    </Button>
+                </Stack>
+            </CardContent>
+        </Card>
+    );
+};