Extract tracker search track button

src/modules/tracker/components/TrackerSearch.tsx

@@ -35,7 +35,59 @@ import { MangaType } from '@/lib/graphql/generated/graphql.ts';
 import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
-import { Tracker, TTrackerBase } from '@/modules/tracker/Tracker.types.ts';
+import { Tracker, TrackerIdInfo, TTrackerBase } from '@/modules/tracker/Tracker.types.ts';
+
+const TrackButton = ({
+    mangaId,
+    selectedTrackerRemoteId,
+    trackerId,
+    closeSearchMode,
+}: {
+    trackerId: TrackerIdInfo['id'];
+    mangaId: MangaIdInfo['id'];
+    selectedTrackerRemoteId: string | undefined;
+    closeSearchMode: () => void;
+}) => {
+    const { t } = useTranslation();
+    const [bindTracker, bindTrackerMutation] = requestManager.useBindTracker();
+
+    const trackManga = () => {
+        if (selectedTrackerRemoteId === undefined) {
+            return;
+        }
+
+        bindTracker({ variables: { mangaId, remoteId: selectedTrackerRemoteId, trackerId } })
+            .then(() => {
+                makeToast(t('manga.action.track.add.label.success'), 'success');
+                closeSearchMode();
+            })
+            .catch((e) => makeToast(t('manga.action.track.add.label.error'), 'error', getErrorMessage(e)));
+    };
+
+    return (
+        <Stack
+            direction="row"
+            sx={{
+                justifyContent: 'center',
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                bottom: 0,
+                paddingBottom: DIALOG_PADDING,
+            }}
+        >
+            <Button
+                disabled={bindTrackerMutation.loading}
+                size="large"
+                variant="contained"
+                onClick={trackManga}
+                sx={{ width: '75%' }}
+            >
+                {t('manga.action.track.add.label.action')}
+            </Button>
+        </Stack>
+    );
+};
 
 export const TrackerSearch = ({
     manga,
@@ -72,8 +124,6 @@ export const TrackerSearch = ({
             trackerSearch.abortRequest(new Error(`MangaTrackerSearchCard(${tracker.id}, ${manga.id}): search changed`));
     }, [searchString]);
 
-    const [bindTracker, bindTrackerMutation] = requestManager.useBindTracker();
-
     const showTrackButton =
         useMemo(
             () =>
@@ -82,19 +132,6 @@ export const TrackerSearch = ({
             [selectedTrackerRemoteId, searchResults],
         ) && !hasError;
 
-    const trackManga = () => {
-        if (selectedTrackerRemoteId === undefined) {
-            return;
-        }
-
-        bindTracker({ variables: { mangaId: manga.id, remoteId: selectedTrackerRemoteId, trackerId: tracker.id } })
-            .then(() => {
-                makeToast(t('manga.action.track.add.label.success'), 'success');
-                closeSearchMode();
-            })
-            .catch((e) => makeToast(t('manga.action.track.add.label.error'), 'error', getErrorMessage(e)));
-    };
-
     return (
         <>
             <DialogTitle sx={{ padding: DIALOG_PADDING }}>
@@ -179,27 +216,12 @@ export const TrackerSearch = ({
                         ))}
                 </List>
                 {showTrackButton && (
-                    <Stack
+                    <TrackButton
-                        direction="row"
+                        mangaId={manga.id}
-                        sx={{
+                        trackerId={tracker.id}
-                            justifyContent: 'center',
+                        closeSearchMode={closeSearchMode}
-                            position: 'absolute',
+                        selectedTrackerRemoteId={selectedTrackerRemoteId}
-                            left: 0,
+                    />
-                            right: 0,
-                            bottom: 0,
-                            paddingBottom: DIALOG_PADDING,
-                        }}
-                    >
-                        <Button
-                            disabled={bindTrackerMutation.loading}
-                            size="large"
-                            variant="contained"
-                            onClick={trackManga}
-                            sx={{ width: '75%' }}
-                        >
-                            {t('manga.action.track.add.label.action')}
-                        </Button>
-                    </Stack>
                 )}
             </DialogContent>
         </>