refactor: frontend components consolidation

2025-12-10 12:10:51 +01:00 · 2025-11-01 17:49:40 +01:00
parent 18115b374c
commit 3befa127d7
30 changed files with 483 additions and 449 deletions
--- a/apps/client/app/modules/backups/routes/backup-details.tsx
+++ b/apps/client/app/modules/backups/routes/backup-details.tsx
@@ -0,0 +1,158 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { Link, useParams } from "react-router";
+import { toast } from "sonner";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent } from "~/components/ui/card";
+import {
+	upsertBackupScheduleMutation,
+	getBackupScheduleOptions,
+	runBackupNowMutation,
+} from "~/api-client/@tanstack/react-query.gen";
+import { parseError } from "~/lib/errors";
+import { getCronExpression } from "~/utils/utils";
+import { CreateScheduleForm, type BackupScheduleFormValues } from "../components/create-schedule-form";
+import { ScheduleSummary } from "../components/schedule-summary";
+
+export default function ScheduleDetailsPage() {
+	const { scheduleId } = useParams<{ scheduleId: string }>();
+	const queryClient = useQueryClient();
+	const [isEditMode, setIsEditMode] = useState(false);
+
+	const { data: schedule, isLoading: loadingSchedule } = useQuery({
+		...getBackupScheduleOptions({
+			path: { scheduleId: scheduleId || "" },
+		}),
+	});
+
+	console.log("Schedule Details:", schedule);
+
+	const upsertSchedule = useMutation({
+		...upsertBackupScheduleMutation(),
+		onSuccess: () => {
+			toast.success("Backup schedule saved successfully");
+			queryClient.invalidateQueries({ queryKey: ["listBackupSchedules"] });
+			queryClient.invalidateQueries({ queryKey: ["getBackupSchedule", scheduleId] });
+			setIsEditMode(false);
+		},
+		onError: (error) => {
+			toast.error("Failed to save backup schedule", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const runBackupNow = useMutation({
+		...runBackupNowMutation(),
+		onSuccess: () => {
+			toast.success("Backup started successfully");
+			queryClient.invalidateQueries({ queryKey: ["getBackupSchedule", scheduleId] });
+		},
+		onError: (error) => {
+			toast.error("Failed to start backup", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const handleSubmit = (formValues: BackupScheduleFormValues) => {
+		if (!schedule) return;
+
+		const cronExpression = getCronExpression(formValues.frequency, formValues.dailyTime, formValues.weeklyDay);
+
+		const retentionPolicy: Record<string, number> = {};
+		if (formValues.keepLast) retentionPolicy.keepLast = formValues.keepLast;
+		if (formValues.keepHourly) retentionPolicy.keepHourly = formValues.keepHourly;
+		if (formValues.keepDaily) retentionPolicy.keepDaily = formValues.keepDaily;
+		if (formValues.keepWeekly) retentionPolicy.keepWeekly = formValues.keepWeekly;
+		if (formValues.keepMonthly) retentionPolicy.keepMonthly = formValues.keepMonthly;
+		if (formValues.keepYearly) retentionPolicy.keepYearly = formValues.keepYearly;
+
+		upsertSchedule.mutate({
+			body: {
+				volumeId: schedule.volumeId,
+				repositoryId: formValues.repositoryId,
+				enabled: schedule.enabled,
+				cronExpression,
+				retentionPolicy: Object.keys(retentionPolicy).length > 0 ? retentionPolicy : undefined,
+			},
+		});
+	};
+
+	const handleToggleEnabled = (enabled: boolean) => {
+		if (!schedule) return;
+
+		upsertSchedule.mutate({
+			body: {
+				volumeId: schedule.volumeId,
+				repositoryId: schedule.repositoryId,
+				enabled,
+				cronExpression: schedule.cronExpression,
+				retentionPolicy: schedule.retentionPolicy || undefined,
+			},
+		});
+	};
+
+	const handleRunBackupNow = () => {
+		if (!schedule) return;
+
+		runBackupNow.mutate({
+			path: {
+				scheduleId: schedule.id.toString(),
+			},
+		});
+	};
+
+	if (loadingSchedule && !schedule) {
+		return (
+			<div className="container mx-auto p-4 sm:p-8">
+				<Card>
+					<CardContent className="py-12 text-center">
+						<p className="text-muted-foreground">Loading...</p>
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	if (!schedule) {
+		return (
+			<div className="container mx-auto p-4 sm:p-8">
+				<Card>
+					<CardContent className="py-12 text-center">
+						<p className="text-muted-foreground">Schedule not found</p>
+						<Button asChild className="mt-4">
+							<Link to="/backup-jobs">Back to Backup Jobs</Link>
+						</Button>
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	if (!isEditMode) {
+		return (
+			<div className="container mx-auto p-4 sm:p-8">
+				<ScheduleSummary
+					handleToggleEnabled={handleToggleEnabled}
+					handleRunBackupNow={handleRunBackupNow}
+					repository={schedule.repository}
+					setIsEditMode={setIsEditMode}
+					schedule={schedule}
+					volume={schedule.volume}
+				/>
+			</div>
+		);
+	}
+
+	return (
+		<div className="container mx-auto p-4 sm:p-8 space-y-4">
+			<div className="flex justify-end">
+				<Button variant="outline" onClick={() => setIsEditMode(false)}>
+					Cancel
+				</Button>
+			</div>
+			<CreateScheduleForm volume={schedule.volume} initialValues={schedule} onSubmit={handleSubmit} />
+		</div>
+	);
+}