feat: better date handling

src/app/(admin)/admin/[section]/[id]/page.tsx

@@ -6,8 +6,6 @@ import EditButton from "@/components/buttons/EditButton";
 import { getExperienceById } from "@/models/experience.server";
 import { getProjectById } from "@/models/project.server";
 
-export const dynamic = "force-dynamic";
-
 const SECTIONS = {
 	projects: {
 		getData: getProjectById,

src/app/(admin)/admin/[section]/error.tsx

@@ -0,0 +1,30 @@
+"use client"; // Error components must be Client Components
+
+import { useEffect } from "react";
+
+export default function Error({
+	error,
+	reset,
+}: {
+	error: Error & { digest?: string };
+	reset: () => void;
+}) {
+	useEffect(() => {
+		// Log the error to an error reporting service
+		console.error(error);
+	}, [error]);
+
+	return (
+		<div className="col-span-7 w-full h-full flex flex-col gap-2 justify-center items-center">
+			<h2>Something went wrong!</h2>
+			<button
+				onClick={
+					// Attempt to recover by trying to re-render the segment
+					() => reset()
+				}
+			>
+				Try again
+			</button>
+		</div>
+	);
+}

src/app/(admin)/admin/[section]/layout.tsx

@@ -8,8 +8,6 @@ import {
 import { createProject, getAllProjects } from "@/models/project.server";
 import NavItem from "../NavItem";
 
-export const dynamic = "force-dynamic";
-
 const SECTIONS = {
 	projects: {
 		getData: () => getAllProjects(),

src/app/(admin)/admin/[section]/page.tsx

@@ -1,3 +1,3 @@
 export default async function Page() {
-	return <div>Home Page</div>;
+	return null;
 }

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

@@ -0,0 +1,30 @@
+"use client"; // Error components must be Client Components
+
+import { useEffect } from "react";
+
+export default function Error({
+	error,
+	reset,
+}: {
+	error: Error & { digest?: string };
+	reset: () => void;
+}) {
+	useEffect(() => {
+		// Log the error to an error reporting service
+		console.error(error);
+	}, [error]);
+
+	return (
+		<div className="col-span-10 w-full h-full flex flex-col gap-2 justify-center items-center">
+			<h2>Something went wrong!</h2>
+			<button
+				onClick={
+					// Attempt to recover by trying to re-render the segment
+					() => reset()
+				}
+			>
+				Try again
+			</button>
+		</div>
+	);
+}

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

@@ -2,6 +2,9 @@ import Header from "./Header";
 import NavItem from "./NavItem";
 import Download from "./Download";
 
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
 export default function Layout({ children }: { children: React.ReactNode }) {
 	return (
 		<div className="mx-auto h-full flex flex-col gap-4 p-4">

src/app/(admin)/admin/messages/page.tsx

@@ -1,3 +1,3 @@
 export default async function Page() {
-	return <div>Home Page</div>;
+	return null;
 }

src/app/(auth)/login/page.tsx

@@ -5,9 +5,25 @@ import { useFormState } from "react-dom";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import loginAction from "./action.server";
+import { createAdminSession } from "@/app/session.server";
+import { usePathname, useRouter } from "next/navigation";
 
 export default function Page() {
+	const router = useRouter();
+	const pathname = usePathname();
+
+	async function loginAction(p: any, formData: FormData) {
+		const password = String(formData.get("password"));
+
+		try {
+			await createAdminSession(password, "/admin");
+		} catch (error) {
+			return { error: String(error) };
+		}
+
+		router.push(pathname);
+	}
+
 	// @ts-ignore
 	const [state, formAction] = useFormState(loginAction, {});
 

src/app/(index)/Projects.tsx

@@ -10,11 +10,11 @@ export default function Projects({ projects }: { projects: Project[] }) {
 		() =>
 			projects.sort((a, b) => {
 				// sort by year, most recent first
-				if (a.year > b.year) return -1;
-				if (a.year < b.year) return 1;
+				if (a.date.getFullYear() > b.date.getFullYear()) return -1;
+				if (a.date.getFullYear() < b.date.getFullYear()) return 1;
 				// sort by month, most recent first
-				if (a.month > b.month) return -1;
-				if (a.month < b.month) return 1;
+				if (a.date.getMonth() > b.date.getMonth()) return -1;
+				if (a.date.getMonth() < b.date.getMonth()) return 1;
 				// sort by favorite
 				if (a.favorite && !b.favorite) return -1;
 				if (!a.favorite && b.favorite) return 1;

src/components/Forms/ExperienceForm.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useFormState } from "react-dom";
-import { redirect, usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -11,6 +11,7 @@ import Submit from "../buttons/SubmitButton";
 import { updateExperience } from "@/models/experience.server";
 
 export default function ExperienceForm({ data }: { data: Experience }) {
+	const router = useRouter();
 	const pathname = usePathname();
 
 	async function handleExperienceFormSubmit(p: any, formData: FormData) {
@@ -48,7 +49,7 @@ export default function ExperienceForm({ data }: { data: Experience }) {
 			return { error: "Failed to send message." };
 		}
 
-		redirect(pathname);
+		router.push(pathname);
 	}
 
 	// @ts-ignore

src/components/Forms/ProjectForm.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useFormState } from "react-dom";
-import { redirect, usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -11,17 +11,24 @@ import { updateProject } from "@/models/project.server";
 import { Label } from "@/components/ui/label";
 
 export default function ProjectForm({ data }: { data: Project }) {
+	const router = useRouter();
 	const pathname = usePathname();
 
 	const handleProjectFormSubmit = async (p: any, formData: FormData) => {
 		const id = Number(formData.get("id"));
 		if (!id) return { error: "Invalid id." };
 
+		const date = new Date(
+			Number(formData.get("year")),
+			Number(formData.get("month")) - 1
+		);
+
+		console.log(date);
+
 		try {
 			await updateProject({
 				id,
-				year: Number(formData.get("year")),
-				month: Number(formData.get("month")),
+				date,
 				company: String(formData.get("company")),
 				client: String(formData.get("client")),
 				title: String(formData.get("title")),
@@ -41,7 +48,7 @@ export default function ProjectForm({ data }: { data: Project }) {
 			return { error: "Failed to send message." };
 		}
 
-		redirect(pathname);
+		router.push(pathname);
 	};
 
 	// @ts-ignore
@@ -70,24 +77,24 @@ export default function ProjectForm({ data }: { data: Project }) {
 				</div>
 				<div>
 					<Label>Link</Label>
-					<Input
-						required
-						name="href"
-						defaultValue={data.href ?? ""}
-					/>
+					<Input name="href" defaultValue={data.href ?? ""} />
 				</div>
 				<div className="flex gap-4 justify-between">
 					<div className="w-full">
 						<Label>Month</Label>
 						<Input
 							required
 							name="month"
-							defaultValue={data.month}
+							defaultValue={new Date(data.date).getMonth() + 1}
 						/>
 					</div>
 					<div className="w-full">
 						<Label>Year</Label>
-						<Input required name="year" defaultValue={data.year} />
+						<Input
+							required
+							name="year"
+							defaultValue={new Date(data.date).getFullYear()}
+						/>
 					</div>
 				</div>
 				<div>

src/components/Views/ProjectView.tsx

@@ -2,6 +2,7 @@ import Markdown from "@/components/Markdown";
 import { Label } from "@/components/ui/label";
 
 export default function ProjectView({ data }: { data: Project }) {
+	const date = new Date(data.date);
 	return (
 		<div className="flex w-full flex-col gap-2">
 			<div className="w-1/2 pb-4">
@@ -11,7 +12,7 @@ export default function ProjectView({ data }: { data: Project }) {
 				</p>
 				<p className="text-secondary-foreground">{data.client}</p>
 				<p>
-					{data.month}/{data.year}
+					{date.getMonth() + 1}/{date.getFullYear()}
 				</p>
 			</div>
 			{data.href && (

src/components/cards/ProjectCard.tsx

@@ -56,7 +56,8 @@ export default function ProjectCard({ project }: { project: Project }) {
 							</p>
 						</div>
 						<div className="text-neutral-500 dark:text-neutral-400">
-							{project.month}/{project.year}
+							{new Date(project.date).getMonth() + 1}/
+							{new Date(project.date).getFullYear()}
 						</div>
 					</div>
 

src/globals.d.ts

@@ -14,10 +14,7 @@ type Experience = {
 
 type Project = {
 	id: number;
-	/** Year of completion */
-	year: number;
-	/** Month of completion */
-	month: number;
+	date: Date;
 	/** Where I worked when I built the project */
 	company: string;
 	/** Who the project was built for */

src/models/about.server.ts

@@ -2,6 +2,7 @@
 
 import { invariant } from "@/lib/utils";
 import { kv } from "@vercel/kv";
+import { revalidatePath } from "next/cache";
 
 export async function getAbout(): Promise<About> {
 	const value = await kv.get<About>("about");
@@ -11,4 +12,5 @@ export async function getAbout(): Promise<About> {
 
 export async function updateAbout(a: About) {
 	await kv.set("about", JSON.stringify(a));
+	revalidatePath("/");
 }

src/models/contact.server.ts

@@ -3,11 +3,13 @@
 import { invariant } from "@/lib/utils";
 import { kv } from "@vercel/kv";
 import { addIdToList, getAllIds, removeIdFromList } from "./helpers";
+import { revalidatePath } from "next/cache";
 
 export async function createContact(contact: Contact): Promise<number> {
 	const key = `contact-${contact.id}`;
 	await kv.set(key, JSON.stringify(contact));
 	const id = await addIdToList("contact-ids", contact.id);
+	revalidatePath("/");
 	return id;
 }
 
@@ -42,4 +44,5 @@ export async function deleteContact(id: number): Promise<void> {
 	const key = `contact-${id}`;
 	await kv.del(key);
 	await removeIdFromList("contact-ids", id);
+	revalidatePath("/");
 }

src/models/experience.server.ts

@@ -3,19 +3,20 @@
 import { invariant } from "@/lib/utils";
 import { kv } from "@vercel/kv";
 import { addIdToList, getAllIds } from "./helpers";
+import { revalidatePath } from "next/cache";
 
-function stringify(e: Experience): string {
-	return JSON.stringify({
+const stringify = (e: Experience): string =>
+	JSON.stringify({
 		...e,
 		startDate: e.startDate.toDateString(),
 		endDate: e.endDate ? e.endDate.toDateString() : null,
 	});
-}
 
 export async function createExperience(data: Experience): Promise<number> {
 	const key = `experience-${data.id}`;
 	await kv.set(key, stringify(data));
 	const id = await addIdToList("experience-ids", data.id);
+	revalidatePath("/");
 	return id;
 }
 
@@ -70,4 +71,5 @@ export async function getAllExperiences(
 export async function updateExperience(e: Experience) {
 	const key = `experience-${e.id}`;
 	await kv.set(key, stringify(e));
+	revalidatePath("/");
 }