diff --git a/app/client/modules/backups/components/schedule-mirrors-config.tsx b/app/client/modules/backups/components/schedule-mirrors-config.tsx index 759d6754..f4c82653 100644 --- a/app/client/modules/backups/components/schedule-mirrors-config.tsx +++ b/app/client/modules/backups/components/schedule-mirrors-config.tsx @@ -1,4 +1,4 @@ -import { useMutation, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query"; +import { useMutation, useQuery, useSuspenseQuery } from "@tanstack/react-query"; import { Copy, Plus, RefreshCw, Trash2 } from "lucide-react"; import { useEffect, useMemo, useState } from "react"; import { toast } from "sonner"; @@ -22,7 +22,6 @@ import { getScheduleMirrorsOptions, getMirrorCompatibilityOptions, getMirrorSyncStatusOptions, - getMirrorSyncStatusQueryKey, updateScheduleMirrorsMutation, syncMirrorMutation, } from "~/client/api-client/@tanstack/react-query.gen"; @@ -32,10 +31,10 @@ import { RepositoryIcon } from "~/client/components/repository-icon"; import { StatusDot } from "~/client/components/status-dot"; import { ByteSize } from "~/client/components/bytes-size"; import { useServerEvents } from "~/client/hooks/use-server-events"; -import { format, formatDistanceToNow } from "date-fns"; import { cn } from "~/client/lib/utils"; import type { GetScheduleMirrorsResponse } from "~/client/api-client"; import { Link } from "@tanstack/react-router"; +import { useTimeFormat } from "~/client/lib/datetime"; type Props = { scheduleShortId: string; @@ -69,14 +68,29 @@ const buildAssignments = (mirrors: GetScheduleMirrorsResponse) => ); export const ScheduleMirrorsConfig = ({ scheduleShortId, primaryRepositoryId, repositories, initialData }: Props) => { - const queryClient = useQueryClient(); + const { formatDateTime, formatTimeAgo } = useTimeFormat(); const [assignments, setAssignments] = useState>(() => buildAssignments(initialData)); const [hasChanges, setHasChanges] = useState(false); const [isAddingNew, setIsAddingNew] = useState(false); const [syncDialogMirrorId, setSyncDialogMirrorId] = useState(null); const [selectedSnapshotIds, setSelectedSnapshotIds] = useState>(new Set()); + const [syncDialogOpen, setSyncDialogOpen] = useState(false); const { addEventListener } = useServerEvents(); + const closeSyncDialog = () => { + setSyncDialogOpen(false); + setTimeout(() => { + setSyncDialogMirrorId(null); + setSelectedSnapshotIds(new Set()); + }, 300); + }; + + const openSyncDialog = (mirrorShortId: string) => { + setSyncDialogOpen(true); + setSelectedSnapshotIds(new Set()); + setSyncDialogMirrorId(mirrorShortId); + }; + const { data: currentMirrors } = useSuspenseQuery({ ...getScheduleMirrorsOptions({ path: { shortId: scheduleShortId } }), }); @@ -106,17 +120,11 @@ export const ScheduleMirrorsConfig = ({ scheduleShortId, primaryRepositoryId, re const { data: syncStatus, isLoading: isSyncStatusLoading } = useQuery({ ...getMirrorSyncStatusOptions({ - path: { shortId: scheduleShortId, mirrorShortId: syncDialogMirrorId! }, + path: { shortId: scheduleShortId, mirrorShortId: syncDialogMirrorId ?? "" }, }), enabled: syncDialogMirrorId !== null, }); - useEffect(() => { - if (syncStatus?.missingSnapshots) { - setSelectedSnapshotIds(new Set(syncStatus.missingSnapshots.map((s) => s.short_id))); - } - }, [syncStatus]); - const toggleSnapshotSelection = (shortId: string) => { setSelectedSnapshotIds((prev) => { const next = new Set(prev); @@ -142,7 +150,7 @@ export const ScheduleMirrorsConfig = ({ scheduleShortId, primaryRepositoryId, re ...syncMirrorMutation(), onSuccess: () => { toast.success("Full sync started"); - setSyncDialogMirrorId(null); + closeSyncDialog(); }, onError: (error) => { toast.error("Failed to start sync", { @@ -195,11 +203,6 @@ export const ScheduleMirrorsConfig = ({ scheduleShortId, primaryRepositoryId, re }); return next; }); - queryClient.removeQueries({ - queryKey: getMirrorSyncStatusQueryKey({ - path: { shortId: scheduleShortId, mirrorShortId: event.repositoryId }, - }), - }); }, { signal: abortController.signal }, ); @@ -289,7 +292,7 @@ export const ScheduleMirrorsConfig = ({ scheduleShortId, primaryRepositoryId, re return "Syncing..."; } if (assignment.lastCopyAt) { - return formatDistanceToNow(new Date(assignment.lastCopyAt), { addSuffix: true }); + return formatTimeAgo(assignment.lastCopyAt); } return "Never"; }; @@ -307,6 +310,8 @@ export const ScheduleMirrorsConfig = ({ scheduleShortId, primaryRepositoryId, re return "Never copied"; }; + const selectedMirrorRepo = repositories.find((r) => r.shortId === syncDialogMirrorId); + return ( @@ -443,14 +448,14 @@ export const ScheduleMirrorsConfig = ({ scheduleShortId, primaryRepositoryId, re - Sync all snapshots + Sync more snapshots