feat: save/upload data

Author: jedwards1230

src/app/(admin)/admin/Download.tsx

@@ -8,13 +8,13 @@ import { getAllProjects } from "@/models/project.server";
 
 export default function Download() {
 	const getData = async () => {
-		const [about, projects, experience, messages] = await Promise.all([
+		const [about, projects, experiences, messages] = await Promise.all([
 			await getAbout(),
 			await getAllProjects(),
 			await getAllExperiences(),
 			await getAllMessages(),
 		]);
-		return { about, projects, experience, messages };
+		return { about, projects, experiences, messages };
 	};
 
 	const saveData = async () => {

src/app/(admin)/admin/Upload.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { uploadData } from "@/models/upload.server";
+import { ChangeEvent, useState } from "react";
+
+export default function Upload() {
+	const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
+	const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+		const target = event.target as HTMLInputElement;
+		if (!target.files) return;
+		const file = target.files[0];
+		setSelectedFile(file);
+	};
+
+	const handleUpload = async () => {
+		if (selectedFile) {
+			const reader = new FileReader();
+
+			reader.onload = async e => {
+				const text = e.target?.result;
+				if (!text) return;
+				if (typeof text !== "string") return;
+				try {
+					const json = JSON.parse(text);
+					uploadData(json); // Call the uploadData function with the parsed JSON
+				} catch (error) {
+					console.error("Error parsing JSON:", error);
+				}
+			};
+
+			reader.readAsText(selectedFile);
+		}
+	};
+
+	return (
+		<>
+			<Input type="file" onChange={handleFileChange} accept=".json" />
+			<Button variant="link" onClick={handleUpload}>
+				Upload Data
+			</Button>
+		</>
+	);
+}

src/app/(admin)/admin/layout.tsx

@@ -1,6 +1,7 @@
 import Header from "./Header";
 import NavItem from "./NavItem";
 import Download from "./Download";
+import Upload from "./Upload";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
@@ -25,7 +26,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 							<div className="h-px bg-border my-2 mx-4"></div>
 							<NavItem to="/admin/messages">Messages</NavItem>
 						</div>
-						<Download />
+						<div className="flex flex-col gap-2">
+							<Download />
+							<Upload />
+						</div>
 					</div>
 					{children}
 				</div>

src/models/upload.server.ts

@@ -0,0 +1,43 @@
+"use server";
+
+import { updateAbout } from "@/models/about.server";
+import { createContact } from "@/models/contact.server";
+import { createExperience } from "@/models/experience.server";
+import { createProject } from "@/models/project.server";
+
+export async function uploadData({
+	about,
+	projects,
+	experiences,
+	messages,
+}: {
+	about: About;
+	projects: Project[];
+	experiences: Experience[];
+	messages: Contact[];
+}) {
+	// Upload projects
+	for (const project of projects) {
+		await createProject({
+			...project,
+			date: new Date(project.date),
+		});
+	}
+
+	// Upload experiences
+	for (const experience of experiences) {
+		await createExperience({
+			...experience,
+			startDate: new Date(experience.startDate),
+			endDate: experience.endDate ? new Date(experience.endDate) : null,
+		});
+	}
+
+	// Upload contacts
+	for (const contact of messages) {
+		await createContact(contact);
+	}
+
+	// Set About data
+	await updateAbout(about);
+}