refactor: use correct namings

This commit is contained in:
Nicolas Meienberger
2025-11-02 16:05:22 +01:00
parent 3befa127d7
commit 8f447ac58d
10 changed files with 505 additions and 53 deletions

View File

@@ -1,5 +1,5 @@
import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useId, useState } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { Link, useParams } from "react-router";
import { toast } from "sonner";
import { Button } from "~/components/ui/button";
@@ -15,13 +15,13 @@ import { CreateScheduleForm, type BackupScheduleFormValues } from "../components
import { ScheduleSummary } from "../components/schedule-summary";
export default function ScheduleDetailsPage() {
const { scheduleId } = useParams<{ scheduleId: string }>();
const queryClient = useQueryClient();
const { id } = useParams<{ id: string }>();
const [isEditMode, setIsEditMode] = useState(false);
const formId = useId();
const { data: schedule, isLoading: loadingSchedule } = useQuery({
...getBackupScheduleOptions({
path: { scheduleId: scheduleId || "" },
path: { scheduleId: id || "" },
}),
});
@@ -31,8 +31,6 @@ export default function ScheduleDetailsPage() {
...upsertBackupScheduleMutation(),
onSuccess: () => {
toast.success("Backup schedule saved successfully");
queryClient.invalidateQueries({ queryKey: ["listBackupSchedules"] });
queryClient.invalidateQueries({ queryKey: ["getBackupSchedule", scheduleId] });
setIsEditMode(false);
},
onError: (error) => {
@@ -46,7 +44,6 @@ export default function ScheduleDetailsPage() {
...runBackupNowMutation(),
onSuccess: () => {
toast.success("Backup started successfully");
queryClient.invalidateQueries({ queryKey: ["getBackupSchedule", scheduleId] });
},
onError: (error) => {
toast.error("Failed to start backup", {
@@ -117,42 +114,41 @@ export default function ScheduleDetailsPage() {
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>
<Card>
<CardContent className="py-12 text-center">
<p className="text-muted-foreground">Not found</p>
<Button className="mt-4">
<Link to="/backups">Back to backups</Link>
</Button>
</CardContent>
</Card>
);
}
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>
<ScheduleSummary
handleToggleEnabled={handleToggleEnabled}
handleRunBackupNow={handleRunBackupNow}
repository={schedule.repository}
setIsEditMode={setIsEditMode}
schedule={schedule}
volume={schedule.volume}
/>
);
}
return (
<div className="container mx-auto p-4 sm:p-8 space-y-4">
<div className="flex justify-end">
<div>
<CreateScheduleForm volume={schedule.volume} initialValues={schedule} onSubmit={handleSubmit} formId={formId} />
<div className="flex justify-end mt-4 gap-2">
<Button type="submit" className="ml-auto" variant="primary" form={formId} loading={upsertSchedule.isPending}>
Update schedule
</Button>
<Button variant="outline" onClick={() => setIsEditMode(false)}>
Cancel
</Button>
</div>
<CreateScheduleForm volume={schedule.volume} initialValues={schedule} onSubmit={handleSubmit} />
</div>
);
}

View File

@@ -63,13 +63,15 @@ export default function Backups({ loaderData }: Route.ComponentProps) {
<div className="container mx-auto space-y-6">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{schedules.map((schedule) => (
<Link key={schedule.id} to={`/backup-jobs/${schedule.id}`}>
<Link key={schedule.id} to={`/backups/${schedule.id}`}>
<Card key={schedule.id} className="flex flex-col">
<CardHeader className="pb-3">
<div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-2 flex-1 min-w-0">
<HardDrive className="h-5 w-5 text-muted-foreground flex-shrink-0" />
<CardTitle className="text-lg truncate">Volume #{schedule.volumeId}</CardTitle>
<CardTitle className="text-lg truncate">
Volume <span className="text-strong-accent">{schedule.volume.name}</span>
</CardTitle>
</div>
<Badge variant={schedule.enabled ? "default" : "secondary"} className="flex-shrink-0">
{schedule.enabled ? "Active" : "Paused"}
@@ -77,7 +79,7 @@ export default function Backups({ loaderData }: Route.ComponentProps) {
</div>
<CardDescription className="flex items-center gap-2 mt-2">
<Database className="h-4 w-4" />
<span className="truncate">{schedule.repositoryId}</span>
<span className="truncate">{schedule.repository.name}</span>
</CardDescription>
</CardHeader>
<CardContent className="flex-1 space-y-4">
@@ -102,7 +104,7 @@ export default function Backups({ loaderData }: Route.ComponentProps) {
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">Status</span>
<Badge
variant={schedule.lastBackupStatus === "success" ? "default" : "destructive"}
variant={schedule.lastBackupStatus === "success" ? "primary" : "destructive"}
className="text-xs"
>
{schedule.lastBackupStatus}