svrjs-nextjs-website/app/(auth)/admin/downloads/page.tsx
2024-07-18 00:03:43 +05:30

251 lines
6.2 KiB
TypeScript

"use client";
import React, { useEffect, useState } from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { UploadButton } from "@/lib/uploadthing";
import { downloadSchema } from "@/lib/validations/validation";
import { useToast } from "@/components/ui/use-toast";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
interface DownloadEntry {
_id: string;
fileName: string;
version: string;
downloadLink: string;
fileSize: string;
}
const DownloadsPage = () => {
const { toast } = useToast();
const [downloads, setDownloads] = useState<DownloadEntry[]>([]);
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const form = useForm<z.infer<typeof downloadSchema>>({
resolver: zodResolver(downloadSchema),
defaultValues: {
fileName: "",
version: "",
downloadLink: "",
fileSize: "",
},
});
const fetchDownloads = async () => {
try {
const response = await fetch("/api/downloads", {
method: "GET",
});
if (response.ok) {
const data: DownloadEntry[] = await response.json();
setDownloads(data);
} else {
throw new Error(`HTTP error! status: ${response.status}`);
}
} catch (error: any) {
setError(error.message || "Failed to fetch downloads");
}
};
useEffect(() => {
fetchDownloads();
const interval = setInterval(() => {
fetchDownloads();
}, 10000);
return () => clearInterval(interval);
}, []);
const onSubmit: SubmitHandler<z.infer<typeof downloadSchema>> = async (
data
) => {
setLoading(true);
const response = await fetch("/api/upload", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
if (response.ok) {
form.reset();
fetchDownloads();
setLoading(false);
toast({ description: "Download Successfully Updated" });
} else {
console.error("Upload failed");
setLoading(false);
toast({ description: "Uploading Failed", variant: "destructive" });
}
};
const deleteDownload = async (id: string) => {
try {
const response = await fetch(`/api/delete/downloads/${id}`, {
method: "DELETE",
});
if (response.ok) {
fetchDownloads();
} else {
throw new Error(`HTTP error! status: ${response.status}`);
}
} catch (error: any) {
setError(error.message || "Failed to delete download");
}
};
return (
<section id="downloads-page" className="wrapper container">
<h1 className="text-3xl font-bold py-6">Downloads Form</h1>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="fileName"
render={({ field }) => (
<FormItem>
<FormLabel>File Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="version"
render={({ field }) => (
<FormItem>
<FormLabel>Version</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="downloadLink"
render={({ field }) => (
<FormItem>
<FormLabel>Download Link</FormLabel>
<UploadButton
endpoint="imageUploader"
onClientUploadComplete={(res) => {
field.onChange(res[0].url);
}}
onUploadError={(error: Error) => {
alert(`ERROR! ${error.message}`);
}}
/>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="fileSize"
render={({ field }) => (
<FormItem>
<FormLabel>File Size</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
className="w-full text-lg rounded-full"
size={"lg"}
disabled={loading}
>
Submit
</Button>
</form>
</Form>
{/* Section to list and delete downloads */}
<section id="downloads-list" className="py-16 md:py-24">
<h2 className="text-3xl md:text-4xl font-bold">Existing Downloads</h2>
{error && <p className="text-red-500">{error}</p>}
<Table className="w-full mt-4 border-muted">
<TableHeader>
<TableRow>
<TableHead className="border-b px-4 py-2">File Name</TableHead>
<TableHead className="border-b px-4 py-2">Version</TableHead>
<TableHead className="border-b px-4 py-2">
Download Link
</TableHead>
<TableHead className="border-b px-4 py-2">File Size</TableHead>
<TableHead className="border-b px-4 py-2">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{downloads
.slice()
.reverse()
.map((download) => (
<TableRow key={download._id}>
<TableCell className="border-b px-4 py-2">
{download.fileName}
</TableCell>
<TableCell className="border-b px-4 py-2">
{download.version}
</TableCell>
<TableCell className="border-b px-4 py-2">
<a
href={download.downloadLink}
target="_blank"
rel="noopener noreferrer"
>
{download.downloadLink}
</a>
</TableCell>
<TableCell className="border-b px-4 py-2">
{download.fileSize}
</TableCell>
<TableCell className="border-b px-4 py-2">
<Button
variant={"destructive"}
onClick={() => deleteDownload(download._id)}
>
Delete
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</section>
</section>
);
};
export default DownloadsPage;