Single page

client/.env

@@ -0,0 +1 @@
+VITE_CLERK_PUBLISHABLE_KEY=pk_test_ZW5kbGVzcy1kb2dmaXNoLTE4LmNsZXJrLmFjY291bnRzLmRldiQ

client/.gitignore

@@ -6,6 +6,8 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+.env
+
 
 node_modules
 dist

client/package.json

@@ -11,13 +11,15 @@
     "format": "prettier --write \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
-    "axios": "^1.5.1",
+    "@clerk/clerk-react": "^4.26.1",
     "@types/uuid": "^9.0.4",
+    "axios": "^1.5.1",
+    "dotenv": "^16.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",
-    "vite-plugin-svgr": "^3.2.0",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "vite-plugin-svgr": "^3.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

client/src/App.tsx

@@ -1,27 +1,77 @@
-import HomePage from "./pages/home/HomePage";
-
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes, useNavigate } from "react-router-dom";
 import Layout from "./components/Layout";
 import HallOfFame from "./pages/hallOfFame/HallOfFame";
 import ErrorPage from "./pages/error/Error";
+import FlavorPage from "./pages/flavor_page/FlavorPage";
+import HomePage from "./pages/home/HomePage";
 import useSetLocalStorage from "./hooks/UseLocalStorage";
 import { LocalStorageContext } from "./context/DataContext";
 
-//todo: replace temp with homepage
-export default function App() {
-  const [storage, setStorage] = useSetLocalStorage(null, "Test");
-
+import {
+  ClerkProvider,
+  SignedIn,
+  SignedOut,
+  RedirectToSignIn,
+  SignIn,
+  SignUp,
+} from "@clerk/clerk-react";
+
+if (!import.meta.env.VITE_CLERK_PUBLISHABLE_KEY) {
+  throw new Error("Missing Publishable Key");
+}
+const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
+
+function ClerkProviderWithRoutes() {
+  const navigate = useNavigate();
   return (
-    <LocalStorageContext.Provider value={storage}>
-    <BrowserRouter>
+    <ClerkProvider publishableKey={clerkPubKey} navigate={(to) => navigate(to)}>
       <Layout>
         <Routes>
-          <Route path="/" element={<HomePage />}  />
-          <Route path="hall-of-fame" element={<HallOfFame/>}/>
+          <Route
+            path="/"
+            element={
+              <>
+                <HomePage />
+              </>
+            }
+          />
+          <Route
+            path="/sign-in/*"
+            element={<SignIn routing="path" path="/sign-in" />}
+          />
+          <Route
+            path="/sign-up/*"
+            element={<SignUp routing="path" path="/sign-up" />}
+          />
+          <Route path="/hall-of-fame" element={<HallOfFame />} />
+          <Route path="flavor/:flavor" element={<FlavorPage />} />
+          <Route
+            path="/create"
+            element={
+              <>
+                <SignedIn>
+                  <div>Create a Flavor Page </div>
+                </SignedIn>
+                <SignedOut>
+                  <RedirectToSignIn />
+                </SignedOut>
+              </>
+            }
+          />
           <Route path="*" element={<ErrorPage />} />
         </Routes>
       </Layout>
-    </BrowserRouter>
+    </ClerkProvider>
+  );
+}
+export default function App() {
+  const [storage, setStorage] = useSetLocalStorage(null, "Test");
+
+  return (
+    <LocalStorageContext.Provider value={storage}>
+      <BrowserRouter>
+        <ClerkProviderWithRoutes />
+      </BrowserRouter>
     </LocalStorageContext.Provider>
-  )
+  );
 }

client/src/Components/Header.tsx

@@ -3,18 +3,21 @@ import { Link } from "react-router-dom";
 import IceCreamLogo from "./IceCreamLogo";
 import CartPage from "../pages/cart/CartPage";
 import styles from "./header.module.css";
-
+import LogIn from "./LogIn";
 
 export default function IceCreamHeader() {
   const [currentPagePath, setCurrentPagePath] = useState<string>("/");
-  
+
   function handleSetStarPage(path: string) {
-    setCurrentPagePath(path)
+    setCurrentPagePath(path);
   }
 
   return (
     <header className={styles["header-container"]}>
-      <Link to="/" onClick={() => handleSetStarPage("/")}><IceCreamLogo />Randomice</Link>
+      <Link to="/" onClick={() => handleSetStarPage("/")}>
+        <IceCreamLogo />
+        Randomice
+      </Link>
       <nav>
         <ul className={styles["nav-container"]}>
           <NavOption
@@ -32,7 +35,8 @@ export default function IceCreamHeader() {
         </ul>
       </nav>
       <div className={styles["header-end"]}>
-        <button className={styles["login-button"]}>login/logout</button>
+        <LogIn />
+        <></>
         <CartPage />
       </div>
     </header>
@@ -49,8 +53,13 @@ interface NavOptionProps {
 function NavOption(props: NavOptionProps) {
   return (
     <li className={styles["nav-item"]}>
-      <Link to={props.destinationUrl} onClick={() => props.setCurrentPagePath(props.destinationUrl)}>{props.currentPagePath === props.destinationUrl ? "*" : ""} 
-        {props.destinationPage}</Link>
+      <Link
+        to={props.destinationUrl}
+        onClick={() => props.setCurrentPagePath(props.destinationUrl)}
+      >
+        {props.currentPagePath === props.destinationUrl ? "*" : ""}
+        {props.destinationPage}
+      </Link>
     </li>
   );
 }