Trigger refresh only when initially open the track component (#704)

Due to triggering the refresh in the TrackerActiveCard it was triggered everytime this component got rendered, which was also the case when closing the track search

src/components/tracker/TrackManga.tsx

@@ -8,14 +8,16 @@
 
 import { useNavigate } from 'react-router-dom';
 import { Box } from '@mui/material';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import DialogContent from '@mui/material/DialogContent';
+import { useTranslation } from 'react-i18next';
 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';
+import { makeToast } from '@/components/util/Toast.tsx';
 
 const getTrackerMode = (id: number, trackersInUse: number[], searchModeForTracker?: number): TrackerMode => {
     if (id === searchModeForTracker) {
@@ -30,6 +32,7 @@ const getTrackerMode = (id: number, trackersInUse: number[], searchModeForTracke
 };
 
 export const TrackManga = ({ manga }: { manga: Pick<TManga, 'id' | 'trackRecords'> }) => {
+    const { t } = useTranslation();
     const navigate = useNavigate();
 
     const [searchModeForTracker, setSearchModeForTracker] = useState<number>();
@@ -44,6 +47,12 @@ export const TrackManga = ({ manga }: { manga: Pick<TManga, 'id' | 'trackRecords
     const isSearchActive = searchModeForTracker !== undefined;
     const OptionalDialogContent = useMemo(() => (isSearchActive ? Box : DialogContent), [isSearchActive]);
 
+    useEffect(() => {
+        Promise.all(manga.trackRecords.nodes.map((trackRecord) => requestManager.fetchTrackBind(trackRecord.id))).catch(
+            () => makeToast(t('tracking.error.label.could_not_fetch_track_info'), 'error'),
+        );
+    }, [manga.id]);
+
     const trackerComponents = useMemo(
         () =>
             loggedInTrackers.map((tracker) => {

src/components/tracker/TrackerActiveCard.tsx

@@ -29,7 +29,7 @@ import {
 } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PopupState, { bindDialog, bindMenu, bindTrigger } from 'material-ui-popup-state';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } 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';
@@ -235,12 +235,6 @@ export const TrackerActiveCard = ({
             .response.catch(() => makeToast(t('global.error.label.failed_to_save_changes'), 'error'));
     };
 
-    useEffect(() => {
-        requestManager
-            .fetchTrackBind(trackRecord.id)
-            .response.catch(() => makeToast(t('tracking.error.label.could_not_fetch_track_info'), 'error'));
-    }, [trackRecord.id]);
-
     return (
         <Card sx={CARD_STYLING}>
             <CardContent sx={{ padding: 0 }}>