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(),
|
downloadLink: z.string().url().nonempty(),
|
||||||
fileSize: z.string().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