leaderboard and fucking shit prolly works idk

dance-app/src/App.tsx

@@ -7,6 +7,7 @@ import { ThemeProvider } from "@emotion/react";
 import { Box, createTheme, CssBaseline } from "@mui/material";
 import Login from "./sections/login";
 import LandingPage from "./sections/landing";
+import MainDrawerLayout from "./layouts/MainDrawerLayout";
 
 const theme = createTheme({
   typography: {
@@ -56,7 +57,9 @@ function App() {
           }}
         >
           {auth.token !== "" ? (
-            <LandingPage />
+            <MainDrawerLayout>
+              <LandingPage />
+            </MainDrawerLayout>
           ) : (
             <Login setAuth={setAuth} pb={pb} />
           )}

dance-app/src/components/Drawer.tsx

@@ -1,10 +1,12 @@
 import { Box, Button, useTheme } from "@mui/material";
-import { FC, useState } from "react";
+import { FC } from "react";
 import "../Drawer.css";
 import { makeStyles } from "@mui/styles";
+import { Pages } from "../context/PageContext";
 
 interface DrawerProps {
-  onSwitch: () => void;
+  view: Pages;
+  setView: (view: Pages) => void;
 }
 
 const useStyles = makeStyles(() => ({
@@ -27,44 +29,30 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const MenuItems = {
-  Home: "Home",
-  Leaderboard: "Leaderboard",
-} as const;
-
-const Drawer: FC<DrawerProps> = ({ onSwitch }) => {
-  const [selected, setSelected] = useState<keyof typeof MenuItems>(
-    MenuItems.Home,
-  );
+const Drawer: FC<DrawerProps> = ({ view, setView }) => {
   const theme = useTheme();
   const classes = useStyles(theme);
 
-  const toggle = (item: keyof typeof MenuItems) => {
-    onSwitch();
-    setSelected(item);
+  const toggle = (item: Pages) => {
+    setView(item);
   };
 
   return (
     <Box className={classes.box}>
       <div className="drawer">
         <div className={classes.drawerItems}>
-          <Button
-            className={classes.buttons}
-            onClick={() => toggle(MenuItems.Home)}
-          >
-            {MenuItems.Home}
+          <Button className={classes.buttons} onClick={() => toggle("home")}>
+            home
           </Button>
           <Button
             className={classes.buttons}
-            onClick={() => toggle(MenuItems.Leaderboard)}
+            onClick={() => toggle("leaderboard")}
           >
-            {MenuItems.Leaderboard}
+            leaderboard
           </Button>
         </div>
         <div
-          className={`drawer-slider  ${
-            selected === MenuItems.Leaderboard ? "right" : ""
-          }`}
+          className={`drawer-slider  ${view === "leaderboard" ? "right" : ""}`}
         />
       </div>
     </Box>

dance-app/src/components/LoginForm.tsx

@@ -41,9 +41,6 @@ const LoginForm = ({ setAuth, pb }: LoginProps) => {
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    // Perform login logic here, e.g., send data to the server
-    console.log("Username:", username);
-    console.log("Password:", password);
 
     const authData = await pb
       .collection("users")

dance-app/src/context/PageContext.tsx

@@ -1,5 +1,6 @@
 import { createContext } from "react";
 
-export const defaultPageContext = "home";
+export type Pages = "home" | "leaderboard";
+export const defaultPageContext: Pages = "home";
 
-export const PageContext = createContext<string>(defaultPageContext);
+export const PageContext = createContext<Pages>(defaultPageContext);

dance-app/src/layouts/MainDrawerLayout.tsx

@@ -1,4 +1,3 @@
-import { CssBaseline } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import Drawer from "../components/Drawer";
 import { useState } from "react";
@@ -29,13 +28,10 @@ const useStyles = makeStyles(() => ({
 const MainDrawerLayout = ({ children }: MainDrawerLayoutProps) => {
   const [view, setView] = useState<"home" | "leaderboard">(defaultPageContext);
   const classes = useStyles();
-
   return (
     <PageContext.Provider value={view}>
       <div className={classes.root}>
-        <Drawer
-          onSwitch={() => setView(view === "home" ? "leaderboard" : "home")}
-        />
+        <Drawer view={view} setView={setView} />
         <main>{children}</main>
       </div>
     </PageContext.Provider>

dance-app/src/sections/landing.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Container, Typography, Button, Grid } from "@mui/material";
 import PocketBase from "pocketbase";
-import MainDrawerLayout from "../layouts/MainDrawerLayout";
 import RecordingPage from "./recording";
+import { PageContext } from "../context/PageContext";
+import Leaderboard from "../components/Leaderboard";
 
 // interface LandingProps {
 //   pb: PocketBase;
@@ -26,6 +27,7 @@ enum Tier {
 const pb = new PocketBase("https://junctionb.nyman.dev");
 
 const LandingPage = () => {
+  const page = useContext(PageContext);
   const [selectedTier, setSelectedTier] = useState<Tier | null>(null);
   const [refVideos, setRefVideos] = useState<RefVideo[]>([]);
 
@@ -44,64 +46,70 @@ const LandingPage = () => {
   };
 
   return (
-    <MainDrawerLayout>
-      {selectedTier ? (
-        <RecordingPage
-          refVideo={refVideos.find(
-            (video) => video.tier === selectedTier.toString(),
+    <>
+      {page === "home" ? (
+        <>
+          {selectedTier ? (
+            <RecordingPage
+              refVideo={refVideos.find(
+                (video) => video.tier === selectedTier.toString(),
+              )}
+            />
+          ) : (
+            <Container maxWidth="md">
+              <Grid
+                container
+                spacing={3}
+                alignItems="center"
+                justifyContent="center"
+                style={{ height: "100vh" }}
+              >
+                <Grid item xs={12}>
+                  <Typography variant="h2" color="info" gutterBottom>
+                    Ur fat!
+                  </Typography>
+                  <Typography variant="subtitle1" color="info">
+                    Explore our amazing features!
+                  </Typography>
+                </Grid>
+                <Grid item xs={12} md={4}>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    fullWidth
+                    onClick={() => handleButtonClick(Tier.Tier1)}
+                  >
+                    Tier 1
+                  </Button>
+                </Grid>
+                <Grid item xs={12} md={4}>
+                  <Button
+                    variant="contained"
+                    color="secondary"
+                    fullWidth
+                    onClick={() => handleButtonClick(Tier.Tier2)}
+                  >
+                    Tier 2
+                  </Button>
+                </Grid>
+                <Grid item xs={12} md={4}>
+                  <Button
+                    variant="contained"
+                    color="info"
+                    fullWidth
+                    onClick={() => handleButtonClick(Tier.Tier3)}
+                  >
+                    Tier 3
+                  </Button>
+                </Grid>
+              </Grid>
+            </Container>
           )}
-        />
+        </>
       ) : (
-        <Container maxWidth="md">
-          <Grid
-            container
-            spacing={3}
-            alignItems="center"
-            justifyContent="center"
-            style={{ height: "100vh" }}
-          >
-            <Grid item xs={12}>
-              <Typography variant="h2" color="info" gutterBottom>
-                Ur fat!
-              </Typography>
-              <Typography variant="subtitle1" color="info">
-                Explore our amazing features!
-              </Typography>
-            </Grid>
-            <Grid item xs={12} md={4}>
-              <Button
-                variant="contained"
-                color="primary"
-                fullWidth
-                onClick={() => handleButtonClick(Tier.Tier1)}
-              >
-                Tier 1
-              </Button>
-            </Grid>
-            <Grid item xs={12} md={4}>
-              <Button
-                variant="contained"
-                color="secondary"
-                fullWidth
-                onClick={() => handleButtonClick(Tier.Tier2)}
-              >
-                Tier 2
-              </Button>
-            </Grid>
-            <Grid item xs={12} md={4}>
-              <Button
-                variant="contained"
-                color="info"
-                fullWidth
-                onClick={() => handleButtonClick(Tier.Tier3)}
-              >
-                Tier 3
-              </Button>
-            </Grid>
-          </Grid>
-        </Container>
+        <Leaderboard />
       )}
-    </MainDrawerLayout>
+    </>
   );
 };
 

dance-app/src/sections/login.tsx

@@ -1,4 +1,4 @@
-import { Container, Box, CssBaseline } from "@mui/material";
+import { Container, Box } from "@mui/material";
 import LoginForm from "../components/LoginForm";
 import PocketBase, { RecordAuthResponse, RecordModel } from "pocketbase";
 import Logo from "../components/logo";