bags init

src/actions/bag.ts

@@ -0,0 +1,14 @@
+"use server";
+
+import { API } from "@services";
+
+import type { CreateBagParams, AddDiscToBagParams, RemoveDiscFromBagParams, DeleteBagParams } from "@types";
+
+export const createBag = async ({ userId, bagName }: CreateBagParams) => API.createBag({ userId, bagName });
+
+export const addDiscToBag = async ({ bagId, discId }: AddDiscToBagParams) => API.addDiscToBag({ bagId, discId });
+
+export const removeDiscFromBag = async ({ bagId, discId }: RemoveDiscFromBagParams) =>
+	API.removeDiscFromBag({ bagId, discId });
+
+export const deleteBag = async ({ bagId }: DeleteBagParams) => API.deleteBag({ bagId });

src/actions/index.ts

@@ -0,0 +1 @@
+export * from "./bag";

src/app/@modal/(.)[name_slug]/page.tsx → src/app/@discModal/(.)disc/[name_slug]/page.tsx

@@ -1,9 +1,9 @@
-import { DiscDetail, DiscModal } from "@components";
+import { DiscDetail, Modal } from "@components";
 
 export default function DiscDetailModal({ params: { name_slug } }: { params: { name_slug: string } }) {
 	return (
-		<DiscModal>
+		<Modal>
 			<DiscDetail name_slug={name_slug} hideNavButtons />
-		</DiscModal>
+		</Modal>
 	);
 }

src/app/@newBagModal/(.)bag/new/page.tsx

@@ -0,0 +1,9 @@
+import { Modal, NewBag } from "@components";
+
+export default function NewBagModal() {
+	return (
+		<Modal>
+			<NewBag backOnSubmit />
+		</Modal>
+	);
+}

src/app/@newBagModal/default.tsx

@@ -0,0 +1,5 @@
+import { DiscNotFound } from "@components";
+
+export default function Default() {
+	return <DiscNotFound />;
+}

src/app/@signInModal/(.)sign-in/page.tsx

@@ -0,0 +1,9 @@
+import { Modal, SignIn } from "@components";
+
+export default function SignInModal() {
+	return (
+		<Modal>
+			<SignIn />
+		</Modal>
+	);
+}

src/app/@signInModal/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+	return null;
+}

src/app/bag/new/page.tsx

@@ -0,0 +1,12 @@
+import { NewBag, UserButton } from "@components";
+
+export default function NewBagPage() {
+	return (
+		<>
+			<UserButton />
+			<div className="absolute-centered">
+				<NewBag />
+			</div>
+		</>
+	);
+}

src/app/bag/page.tsx

@@ -0,0 +1,3 @@
+export default function BagPage() {
+	return null;
+}

src/app/[name_slug]/page.tsx → src/app/disc/[name_slug]/page.tsx

@@ -7,9 +7,5 @@ export const generateStaticParams = async () => {
 };
 
 export default function DiscDetailPage({ params: { name_slug } }: { params: { name_slug: string } }) {
-	return (
-		<main>
-			<DiscDetail name_slug={name_slug} hideNavButtons />
-		</main>
-	);
+	return <DiscDetail name_slug={name_slug} hideNavButtons />;
 }

src/app/globals.css

@@ -9,8 +9,21 @@
 	user-select: none;
 }
 
+html {
+	overflow-y: scroll;
+}
+
+body {
+	padding: 0.5rem;
+}
+
 a {
 	text-decoration: none;
+	color: #0000ee;
+}
+
+a:visited {
+	color: #0000ee;
 }
 
 h1 {
@@ -54,6 +67,13 @@ h1 {
 	justify-content: center;
 }
 
+.disc-grid-bag {
+	color: #757575;
+	font-size: 1.25rem;
+	font-weight: 500;
+	margin-top: 2rem;
+}
+
 .disc-container {
 	display: flex;
 	justify-content: center;
@@ -100,8 +120,8 @@ h1 {
 	justify-content: center;
 	align-items: center;
 	text-align: center;
-	width: 100%;
-	height: 100%;
+	width: 100vw;
+	height: 100vh;
 }
 
 .disc-detail {
@@ -174,7 +194,7 @@ h1 {
 	flex-direction: row;
 	flex-wrap: wrap;
 	justify-content: center;
-	margin-bottom: 2rem;
+	margin-bottom: 1.5rem;
 	row-gap: 1rem;
 	column-gap: 0.5rem;
 }
@@ -183,10 +203,16 @@ h1 {
 	width: 20rem;
 }
 
+.disc-count-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 9.5rem;
+}
+
 .disc-count {
 	font-size: 1.25rem;
 	font-weight: 500;
-	margin-bottom: 1rem;
 }
 
 .disc-count:hover {
@@ -206,3 +232,39 @@ h1 {
 .disabled {
 	pointer-events: none;
 }
+
+.controls {
+	margin-bottom: 1rem;
+}
+
+.add-bag-btn {
+	margin-left: 0.5rem;
+	margin-right: 0.5rem;
+	width: 40px;
+}
+
+.selected-view {
+	background-color: rgba(221, 221, 221, 0.6);
+	outline: 2px solid #757575;
+	border-radius: 50%;
+	pointer-events: none;
+}
+
+.add-bag {
+	background-color: white;
+	width: calc(100vw - 2rem);
+	max-width: 32rem;
+	padding: 3rem 1rem 3rem 1rem;
+	border-radius: 1rem;
+	border: 2px solid #757575;
+	min-width: 240px;
+}
+
+.add-bag-title {
+	font-size: 2.5rem;
+	font-weight: 600;
+}
+
+.error {
+	color: red;
+}

src/app/layout.tsx

@@ -2,72 +2,40 @@ import "./globals.css";
 
 import { Inter } from "next/font/google";
 
+import { ClerkProvider } from "@clerk/nextjs";
 import { DiscContextProvider } from "@components";
+import { METADATA, VIEWPORT } from "@constants";
 import { API } from "@services";
 
-import type { Metadata, Viewport } from "next";
-
 const inter = Inter({ subsets: ["latin"] });
 
 export default async function RootLayout({
 	children,
-	modal
+	discModal,
+	signInModal,
+	newBagModal
 }: Readonly<{
 	children: React.ReactNode;
-	modal: React.ReactNode;
+	discModal: React.ReactNode;
+	signInModal: React.ReactNode;
+	newBagModal: React.ReactNode;
 }>) {
-	const discs = await API.getDiscs();
+	const [discs, bags] = await Promise.all([API.getDiscs(), API.getBags({ userId: undefined })]);
 	return (
-		<DiscContextProvider discs={discs}>
-			<html lang="en">
-				<body className={inter.className}>
-					{children}
-					{modal}
-				</body>
-			</html>
-		</DiscContextProvider>
+		<ClerkProvider>
+			<DiscContextProvider discs={discs} bags={bags}>
+				<html lang="en">
+					<body className={inter.className}>
+						{children}
+						{discModal}
+						{signInModal}
+						{newBagModal}
+					</body>
+				</html>
+			</DiscContextProvider>
+		</ClerkProvider>
 	);
 }
 
-export const viewport: Viewport = {
-	themeColor: "#ffffff"
-};
-
-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",
-	manifest: "/manifest.json",
-	icons: [
-		"/icons/icon512-maskable.png",
-		"/icons/icon512.png",
-		"/icons/icon384.png",
-		"/icons/icon256.png",
-		"/icons/icon192-maskable.png",
-		"/icons/icon192.png",
-		"/icons/apple-icon.png",
-		"/icons/icon152.png",
-		"/icons/icon144.png",
-		"/icons/icon128.png",
-		"/icons/icon96.png",
-		"/icons/icon72.png",
-		"/icons/icon32.png",
-		"/icons/icon16.png"
-	],
-	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
-		}
-	}
-};
+export const metadata = METADATA;
+export const viewport = VIEWPORT;

src/app/page.tsx

@@ -1,19 +1,15 @@
 "use client";
 
-import { ClerkProvider } from "@clerk/nextjs";
-import { DiscCount, DiscGrid, Filters, Header, ScrollToTop } from "@components";
-import { config } from "@services";
+import { Controls, DiscGrid, Filters, Header, ScrollToTop } from "@components";
 
 export default function HomePage() {
 	return (
-		<ClerkProvider publishableKey={config.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>
-			<main className="flex-column-center">
-				<Header />
-				<Filters />
-				<DiscCount />
-				<DiscGrid />
-				<ScrollToTop />
-			</main>
-		</ClerkProvider>
+		<div className="flex-column-center">
+			<Header />
+			<Filters />
+			<Controls />
+			<DiscGrid />
+			<ScrollToTop />
+		</div>
 	);
 }

src/app/sign-in/page.tsx

@@ -0,0 +1,9 @@
+import { SignIn } from "@components";
+
+export default function SignInPage() {
+	return (
+		<div className="absolute-centered">
+			<SignIn />
+		</div>
+	);
+}

src/components/Auth.tsx

@@ -1,27 +1,25 @@
 "use client";
 
-import { useState } from "react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
 
-import { SignedIn, SignedOut, SignIn, UserButton } from "@clerk/nextjs";
+import { SignedIn, SignedOut, SignIn as ClerkSignIn, UserButton as ClerkUserButton } from "@clerk/nextjs";
+import { useDiscContext } from "@hooks";
 import Icon from "@mui/icons-material/AccountCircle";
-import { IconButton, Modal } from "@mui/material";
-
-export const Auth = () => {
-	const [showSignIn, setShowSignIn] = useState(false);
+import { IconButton } from "@mui/material";
 
+export const UserButton = () => {
 	return (
 		<>
 			<SignedOut>
-				<IconButton
-					aria-label="sign-in"
-					onClick={() => setShowSignIn(true)}
-					sx={{ width: "3rem", height: "3rem" }}
-				>
-					<Icon color="disabled" sx={{ fontSize: "57px" }} />
-				</IconButton>
+				<Link href="/sign-in">
+					<IconButton aria-label="sign-in" sx={{ width: "3rem", height: "3rem" }}>
+						<Icon color="disabled" sx={{ fontSize: "57px" }} />
+					</IconButton>
+				</Link>
 			</SignedOut>
 			<SignedIn>
-				<UserButton
+				<ClerkUserButton
 					appearance={{
 						elements: {
 							userButtonAvatarBox: {
@@ -54,11 +52,14 @@ export const Auth = () => {
 					}}
 				/>
 			</SignedIn>
-			<Modal open={showSignIn} onClose={() => setShowSignIn(false)}>
-				<div className="absolute-centered">
-					<SignIn routing="hash" />
-				</div>
-			</Modal>
 		</>
 	);
 };
+
+export const SignIn = () => {
+	const searchParams = useSearchParams();
+	const redirect = searchParams.get("redirect");
+	const redirectUrl = redirect ? `${decodeURI(redirect)}` : "";
+	const { view } = useDiscContext();
+	return <ClerkSignIn routing="hash" forceRedirectUrl={redirectUrl || `/${view === "bags" ? "?view=bags" : ""}`} />;
+};