implement logs upload and viewing
This commit is contained in:
NerfedJabolo
parent
5a2c2d2e69
commit
8c8256a995
5 changed files with 272 additions and 0 deletions
123
app/(auth)/admin/changelogs/page.tsx
Normal file
123
app/(auth)/admin/changelogs/page.tsx
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
'use client';
|
||||
|
||||
import React 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, UploadDropzone } from '@/lib/uploadthing';
|
||||
import { logsSchema } from '@/lib/validations/validation';
|
||||
|
||||
const AdminPage = () => {
|
||||
const form = useForm<z.infer<typeof logsSchema>>({
|
||||
resolver: zodResolver(logsSchema),
|
||||
});
|
||||
|
||||
const onSubmit: SubmitHandler<z.infer<typeof logsSchema>> = async (data) => {
|
||||
const response = await fetch('/api/uploadlogs', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
form.reset();
|
||||
console.log('Upload successful');
|
||||
alert('Uploaded');
|
||||
} else {
|
||||
console.error('Upload failed');
|
||||
alert('Upload Failed');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="admin-page" className="wrapper container">
|
||||
<h1 className="text-3xl font-bold py-6">Admin Upload Section</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'}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminPage;
|
||||
105
app/(root)/changelogs/page.tsx
Normal file
105
app/(root)/changelogs/page.tsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Download } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface Download {
|
||||
_id: string;
|
||||
date: string;
|
||||
fileName: string;
|
||||
version: string;
|
||||
fileSize: string;
|
||||
downloadLink: string;
|
||||
}
|
||||
|
||||
const DownloadPage: React.FC = () => {
|
||||
const [downloads, setDownloads] = useState<Download[]>([]);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const fetchDownloads = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/logs', {
|
||||
method: 'GET',
|
||||
});
|
||||
if (response.ok) {
|
||||
const data: Download[] = await response.json();
|
||||
setDownloads(data);
|
||||
} else {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
} catch (error: any) {
|
||||
setError(error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchDownloads();
|
||||
|
||||
const interval = setInterval(() => {
|
||||
fetchDownloads();
|
||||
}, 10000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
id="download"
|
||||
className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
|
||||
>
|
||||
<h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
|
||||
Downloads
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground text-start mb-4">
|
||||
Get all the latest version of SVRJS download and compiled Files here!
|
||||
</p>
|
||||
{error && <p className="text-red-500">{error}</p>}
|
||||
<Table>
|
||||
<TableCaption>A list of all available downloads.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[150px]">Date</TableHead>
|
||||
<TableHead>File Name</TableHead>
|
||||
<TableHead>Version</TableHead>
|
||||
<TableHead>File Size</TableHead>
|
||||
<TableHead className="text-right">Download Link</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{downloads
|
||||
.slice(0, 10)
|
||||
.reverse()
|
||||
.map((download) => (
|
||||
<TableRow key={download._id}>
|
||||
<TableCell className="font-medium">{download.date}</TableCell>
|
||||
<TableCell>{download.fileName}</TableCell>
|
||||
<TableCell>{download.version}</TableCell>
|
||||
<TableCell className="text-left">{download.fileSize}</TableCell>
|
||||
<TableCell className="flex items-center justify-end">
|
||||
<Link href={download.downloadLink}>
|
||||
<Button variant={'ghost'} className="">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Download
|
||||
</Button>
|
||||
</Link>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default DownloadPage;
|
||||
17
app/api/logs/route.ts
Normal file
17
app/api/logs/route.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import clientPromise from '@/lib/db';
|
||||
|
||||
// Handler for GET requests
|
||||
export async function GET(req: NextRequest) {
|
||||
try {
|
||||
const client = await clientPromise;
|
||||
const db = client.db('downloadsDatabase');
|
||||
const downloads = await db.collection('logs').find().toArray();
|
||||
return NextResponse.json(downloads, { status: 200 });
|
||||
} catch (error) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch logs' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
20
app/api/uploadlogs/route.ts
Normal file
20
app/api/uploadlogs/route.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { NextResponse } from 'next/server';
|
||||
import clientPromise from '@/lib/db';
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const body = await request.json();
|
||||
const { fileName, version, downloadLink, fileSize } = body;
|
||||
|
||||
const client = await clientPromise;
|
||||
const db = client.db('downloadsDatabase');
|
||||
|
||||
const result = await db.collection('logs').insertOne({
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
fileName,
|
||||
version,
|
||||
downloadLink,
|
||||
fileSize,
|
||||
});
|
||||
|
||||
return NextResponse.json({ success: true, id: result.insertedId });
|
||||
}
|
||||
|
|
@ -13,3 +13,10 @@ export const modsSchema = z.object({
|
|||
downloadLink: z.string().url().nonempty(),
|
||||
fileSize: z.string().nonempty(),
|
||||
});
|
||||
|
||||
export const logsSchema = z.object({
|
||||
fileName: z.string().nonempty(),
|
||||
version: z.string().nonempty(),
|
||||
downloadLink: z.string().url().nonempty(),
|
||||
fileSize: z.string().nonempty(),
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue