route intercept fixes

cdleveille · May 31, 2024 · 954075b · 954075b
1 parent dac2ceb
commit 954075b
Show file tree

Hide file tree

Showing 17 changed files with 104 additions and 83 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,9 +1,6 @@
 /** @type {import('next').NextConfig} */
 
 const nextConfig = {
-	experimental: {
-		reactCompiler: true
-	},
 	images: {
 		remotePatterns: [
 			{

diff --git a/package.json b/package.json
@@ -14,18 +14,17 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
-    "babel-plugin-react-compiler": "^0.0.0-experimental-592953e-20240517",
-    "next": "^14.3.0-canary.86",
-    "react": "^19.0.0-rc-6f23540c7d-20240528",
-    "react-dom": "^19.0.0-rc-6f23540c7d-20240528"
+    "next": "^14.2.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "npm:types-react@rc",
-    "@types/react-dom": "npm:types-react-dom@rc",
+    "@types/node": "20.3.1",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.18",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "prettier": "^3.2.5",
-    "typescript": "^5"
+    "typescript": "^5.1.3"
   }
 }
diff --git a/src/app/@disc-detail/(.)[name_slug]/page.tsx b/src/app/@disc-detail/(.)[name_slug]/page.tsx
diff --git a/src/app/@modal/(.)[name_slug]/page.tsx b/src/app/@modal/(.)[name_slug]/page.tsx
@@ -0,0 +1,5 @@
+import { DiscDetail } from "@components";
+
+export default function DiscDetailPage({ params: { name_slug } }: { params: { name_slug: string } }) {
+	return <DiscDetail name_slug={name_slug} />;
+}
diff --git a/src/app/@modal/default.tsx b/src/app/@modal/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+	return null;
+}
diff --git a/src/app/[name_slug]/page.tsx b/src/app/[name_slug]/page.tsx
@@ -1,13 +1,5 @@
-"use client";
-
-import { useContext } from "react";
-
-import { DiscContext, DiscDetail } from "@components";
+import { DiscDetail } from "@components";
 
 export default function DiscDetailPage({ params: { name_slug } }: { params: { name_slug: string } }) {
-	const { discs, setDiscDetail } = useContext(DiscContext);
-	const disc = discs.find(disc => disc.name_slug === name_slug);
-	if (!disc) return null;
-	setDiscDetail(disc);
-	return <DiscDetail />;
+	return <DiscDetail name_slug={name_slug} />;
 }
diff --git a/src/app/default.tsx b/src/app/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+	return null;
+}
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -14,6 +14,10 @@ body {
 	overflow-x: hidden;
 }
 
+a {
+	text-decoration: none;
+}
+
 main {
 	display: flex;
 	flex-direction: column;
@@ -86,13 +90,12 @@ h1 {
 	font-weight: 500;
 }
 
-.overlay {
-	position: fixed;
+.modal {
 	top: 0;
 	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, 0.5);
+	width: 100vw;
+	height: 100vh;
+	z-index: 1000;
 	display: flex;
 	justify-content: center;
 	align-items: center;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,20 +5,49 @@ import { Inter } from "next/font/google";
 import { DiscContextProvider } from "@components";
 import { useApi } from "@hooks";
 
+import type { Metadata } from "next";
+
 const inter = Inter({ subsets: ["latin"] });
 
 export default async function RootLayout({
-	children
+	children,
+	modal
 }: Readonly<{
 	children: React.ReactNode;
+	modal: React.ReactNode;
 }>) {
 	const { getDiscs } = useApi();
 	const discs = await getDiscs();
 	return (
 		<html lang="en">
 			<body className={inter.className}>
-				<DiscContextProvider discs={discs}>{children}</DiscContextProvider>
+				<DiscContextProvider discs={discs}>
+					{modal}
+					{children}
+				</DiscContextProvider>
 			</body>
 		</html>
 	);
 }
+
+export const metadata: Metadata = {
+	title: "DiscIt",
+	description: "A responsive disc golf disc search engine.",
+	authors: { name: "Chris Leveille", url: "https://www.cdleveille.net" },
+	publisher: "Chris Leveille",
+	openGraph: {
+		title: "DiscIt",
+		description: "A responsive disc golf disc search engine.",
+		type: "website",
+		emails: "cdleveille@gmail.com",
+		url: "https://discit.vercel.app",
+		images: {
+			url: "https://github.com/cdleveille/discit/assets/1410481/ce638b92-5142-4b1c-814a-5240e3cf8fde",
+			secureUrl: "https://github.com/cdleveille/discit/assets/1410481/ce638b92-5142-4b1c-814a-5240e3cf8fde",
+			type: "image/png",
+			alt: "DiscIt",
+			width: 256,
+			height: 256
+		}
+	}
+};
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,3 @@
-import type { Metadata } from "next";
-
 import { Home } from "@components";
 
 export default function HomePage() {
@@ -9,25 +7,3 @@ export default function HomePage() {
 		</main>
 	);
 }
-
-export const metadata: Metadata = {
-	title: "DiscIt",
-	description: "A responsive disc golf disc search engine.",
-	authors: { name: "Chris Leveille", url: "https://www.cdleveille.net" },
-	publisher: "Chris Leveille",
-	openGraph: {
-		title: "DiscIt",
-		description: "A responsive disc golf disc search engine.",
-		type: "website",
-		emails: "cdleveille@gmail.com",
-		url: "https://discit.vercel.app",
-		images: {
-			url: "https://github.com/cdleveille/discit/assets/1410481/ce638b92-5142-4b1c-814a-5240e3cf8fde",
-			secureUrl: "https://github.com/cdleveille/discit/assets/1410481/ce638b92-5142-4b1c-814a-5240e3cf8fde",
-			type: "image/png",
-			alt: "DiscIt",
-			width: 256,
-			height: 256
-		}
-	}
-};
diff --git a/src/components/Disc.tsx b/src/components/Disc.tsx
@@ -1,20 +1,18 @@
 "use client";
 
-import { useContext, useState } from "react";
+import Link from "next/link";
+import { useState } from "react";
 
-import { DiscContext } from "@components";
 import { Stack } from "@mui/material";
 import { hexToRgba } from "@util";
 
 import type { DiscProps } from "@types";
-
 export const Disc = ({ disc }: DiscProps) => {
 	const [isHovered, setIsHovered] = useState(false);
 
-	const { setDiscDetail } = useContext(DiscContext);
-
 	const {
 		name,
+		name_slug,
 		brand,
 		category,
 		stability,
@@ -30,10 +28,11 @@ export const Disc = ({ disc }: DiscProps) => {
 
 	return (
 		<div className="disc-container">
-			<div
+			<Link
+				href={`/${name_slug}`}
+				passHref
 				className="disc"
 				style={{ color, backgroundColor, border: `5px solid ${borderColor}` }}
-				onClick={() => setDiscDetail(disc)}
 				onMouseEnter={() => setIsHovered(true)}
 				onMouseLeave={() => setIsHovered(false)}
 			>
@@ -50,7 +49,7 @@ export const Disc = ({ disc }: DiscProps) => {
 						</Stack>
 					)}
 				</Stack>
-			</div>
+			</Link>
 		</div>
 	);
 };
diff --git a/src/components/DiscDetail.tsx b/src/components/DiscDetail.tsx
@@ -3,13 +3,14 @@
 import Image from "next/image";
 import { useContext } from "react";
 
-import { DiscContext } from "@components";
+import { DiscContext, Modal } from "@components";
 import { hexToRgba } from "@util";
 
-export const DiscDetail = () => {
-	const { discDetail, setDiscDetail } = useContext(DiscContext);
-
-	if (!discDetail) return null;
+import type { DiscDetailProps } from "@types";
+export const DiscDetail = ({ name_slug }: DiscDetailProps) => {
+	const { discs } = useContext(DiscContext);
+	const disc = discs.find(disc => disc.name_slug === name_slug);
+	if (!disc) return null;
 
 	const {
 		name,
@@ -23,12 +24,12 @@ export const DiscDetail = () => {
 		pic,
 		color,
 		background_color: backgroundColor
-	} = discDetail;
+	} = disc;
 
 	const borderColor = hexToRgba(color, 0.25);
 
 	return (
-		<div className="overlay" onClick={() => setDiscDetail(null)}>
+		<Modal>
 			<div
 				className="disc-detail"
 				onClick={e => e.stopPropagation()}
@@ -48,6 +49,6 @@ export const DiscDetail = () => {
 					<Image src={pic} alt={name} width={400} height={340} className="disc-detail-img" />
 				</div>
 			</div>
-		</div>
+		</Modal>
 	);
 };
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ClerkProvider } from "@clerk/nextjs";
-import { DiscCount, DiscDetail, DiscGrid, Filters, Header, ScrollToTop } from "@components";
+import { DiscCount, DiscGrid, Filters, Header, ScrollToTop } from "@components";
 import { config } from "@services";
 
 export const Home = () => {
@@ -11,7 +11,6 @@ export const Home = () => {
 			<Filters />
 			<DiscCount />
 			<DiscGrid />
-			<DiscDetail />
 			<ScrollToTop />
 		</ClerkProvider>
 	);

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { Modal as MuiModal } from "@mui/material";
+
+import type { ModalProps } from "@types";
+
+export function Modal({ children }: ModalProps) {
+	const router = useRouter();
+	const onClose = () => router.back();
+	return (
+		<MuiModal open={true}>
+			<div className="modal" onClick={onClose}>
+				{children}
+			</div>
+		</MuiModal>
+	);
+}
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -7,4 +7,5 @@ export * from "./DiscGrid";
 export * from "./Filters";
 export * from "./Header";
 export * from "./Home";
+export * from "./Modal";
 export * from "./ScrollToTop";
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -66,3 +66,11 @@ export type HomeProps = {
 export type DiscProps = {
 	disc: Disc;
 };
+
+export type DiscDetailProps = {
+	name_slug: string;
+};
+
+export type ModalProps = {
+	children: React.ReactNode;
+};