From 99b46b0439bfd3ef636a586842c8e5d10aa3d4eb Mon Sep 17 00:00:00 2001
From: Markus Nyman <markus@nyman.dev>
Date: Sun, 12 Nov 2023 00:52:22 +0200
Subject: [PATCH] home section to own component

---
 dance-app/src/App.tsx                    |   2 +-
 dance-app/src/components/Leaderboard.tsx |  68 ++++++-------
 dance-app/src/sections/home.tsx          |  97 ++++++++++++++++++
 dance-app/src/sections/landing.tsx       | 121 +----------------------
 4 files changed, 134 insertions(+), 154 deletions(-)
 create mode 100644 dance-app/src/sections/home.tsx

diff --git a/dance-app/src/App.tsx b/dance-app/src/App.tsx
index 2a6843e..241f4ae 100644
--- a/dance-app/src/App.tsx
+++ b/dance-app/src/App.tsx
@@ -55,7 +55,7 @@ function App() {
           }}
         >
           <MainDrawerLayout>
-            <LandingPage pb={pb} />
+            <LandingPage />
           </MainDrawerLayout>
         </Box>
       </ThemeProvider>
diff --git a/dance-app/src/components/Leaderboard.tsx b/dance-app/src/components/Leaderboard.tsx
index 0d8b3db..c9da852 100644
--- a/dance-app/src/components/Leaderboard.tsx
+++ b/dance-app/src/components/Leaderboard.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import Loader from "./Loader";
-import PocketBase from "pocketbase";
 import "../Leaderboard.css";
-import {Card, CardContent, CardMedia, Stack, Typography} from "@mui/material";
+import { Card, CardContent, CardMedia, Stack, Typography } from "@mui/material";
+import pb from "../pocketBase";
 
 interface VideoData {
   id: string;
@@ -20,25 +20,17 @@ interface User {
   email: string;
   name: string;
 }
-interface LeaderboardProps {
-  pb: PocketBase;
-}
 
-function Leaderboard({ pb }: LeaderboardProps) {
+function Leaderboard() {
   const [isLoading, setIsLoading] = useState(true);
   const [videos, setVideos] = useState<VideoData[]>([]);
 
   useEffect(() => {
-    const getVideos = async () => {
-      const newVideos = await pb
-        .collection("videos")
-        .getFullList<VideoData>({ expand: "user" });
-      console.log(newVideos);
-      setVideos(newVideos);
-      setIsLoading(false);
-    };
-    getVideos();
-  }, [pb]);
+    pb.collection("videos")
+      .getFullList<VideoData>({ expand: "user" })
+      .then((newVideos) => setVideos(newVideos))
+      .then(() => setIsLoading(false));
+  }, []);
 
   if (isLoading) {
     return <Loader />;
@@ -57,26 +49,30 @@ function Leaderboard({ pb }: LeaderboardProps) {
             Todays high scores
           </Typography>
         </div>
-        {scoredVideos.map(({ id, collectionId, video, tier, score, expand }) => (
-          <Card key={id} padding-top="10" >
-            <CardMedia
-              component="video"
-              src={`https://junctionb.nyman.dev/api/files/${collectionId}/${id}/${video}`}
-              width={120}
-              autoPlay
-              muted
-              loop
-             />
-            <CardContent>
-              <Typography gutterBottom variant="h4">Tier {tier}</Typography>
-              <Typography variant="body2">
-                {expand?.user?.name}
-                {': '}
-                <b>{score}</b>
-              </Typography>
-            </CardContent>
-          </Card>
-        ))}
+        {scoredVideos.map(
+          ({ id, collectionId, video, tier, score, expand }) => (
+            <Card key={id} padding-top="10">
+              <CardMedia
+                component="video"
+                src={`https://junctionb.nyman.dev/api/files/${collectionId}/${id}/${video}`}
+                width={120}
+                autoPlay
+                muted
+                loop
+              />
+              <CardContent>
+                <Typography gutterBottom variant="h4">
+                  Tier {tier}
+                </Typography>
+                <Typography variant="body2">
+                  {expand?.user?.name}
+                  {": "}
+                  <b>{score}</b>
+                </Typography>
+              </CardContent>
+            </Card>
+          ),
+        )}
       </Stack>
     </div>
   );
diff --git a/dance-app/src/sections/home.tsx b/dance-app/src/sections/home.tsx
new file mode 100644
index 0000000..f42afda
--- /dev/null
+++ b/dance-app/src/sections/home.tsx
@@ -0,0 +1,97 @@
+import { Container, Typography, Button, Grid } from "@mui/material";
+import RecordingPage from "./recording";
+import { useEffect, useState } from "react";
+import pb from "../pocketBase";
+
+export interface RefVideo {
+  id: string;
+  collectionId: string;
+  tier: string;
+  video: string;
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export enum Tier {
+  Tier1 = 1,
+  Tier2 = 2,
+  Tier3 = 3,
+  Tier4 = 4,
+  Tier5 = 5,
+}
+
+const HomeSection = () => {
+  const [selectedTier, setSelectedTier] = useState<Tier | null>(null);
+  const handleButtonClick = (tier: Tier) => setSelectedTier(tier);
+  const [refVideos, setRefVideos] = useState<RefVideo[]>([]);
+
+  useEffect(() => {
+    pb.collection("source_videos")
+      .getFullList<RefVideo>()
+      .then((videos) => setRefVideos(videos));
+  }, []);
+
+  return (
+    <>
+      {selectedTier ? (
+        <RecordingPage
+          refVideo={refVideos.find(
+            (video) => video.tier === selectedTier.toString(),
+          )}
+          pb={pb}
+          goBack={setSelectedTier}
+        />
+      ) : (
+        <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>
+      )}
+    </>
+  );
+};
+
+export default HomeSection;
diff --git a/dance-app/src/sections/landing.tsx b/dance-app/src/sections/landing.tsx
index a2ce473..3ae7147 100644
--- a/dance-app/src/sections/landing.tsx
+++ b/dance-app/src/sections/landing.tsx
@@ -1,124 +1,11 @@
-import { useContext, useEffect, useState } from "react";
-import { Container, Typography, Button, Grid } from "@mui/material";
-import PocketBase from "pocketbase";
-import RecordingPage from "./recording";
+import { useContext } from "react";
 import { PageContext } from "../context/PageContext";
 import Leaderboard from "../components/Leaderboard";
-import { AuthContext } from "../context/AuthContext";
+import HomeSection from "./home";
 
-interface LandingProps {
-  pb: PocketBase;
-}
-
-export interface RefVideo {
-  id: string;
-  collectionId: string;
-  tier: string;
-  video: string;
-}
-
-// eslint-disable-next-line react-refresh/only-export-components
-export enum Tier {
-  Tier1 = 1,
-  Tier2 = 2,
-  Tier3 = 3,
-  Tier4 = 4,
-  Tier5 = 5,
-}
-
-const LandingPage = ({ pb }: LandingProps) => {
+const LandingPage = () => {
   const page = useContext(PageContext);
-  const [selectedTier, setSelectedTier] = useState<Tier | null>(null);
-  const [refVideos, setRefVideos] = useState<RefVideo[]>([]);
-  const { user } = useContext(AuthContext);
-
-  useEffect(() => {
-    if (user?.token !== "") {
-    }
-  }, [user]);
-
-  useEffect(() => {
-    const getRefVideos = async () => {
-      const videos = await pb
-        .collection("source_videos")
-        .getFullList<RefVideo>();
-      setRefVideos(videos);
-    };
-    getRefVideos();
-  }, []);
-
-  const handleButtonClick = (tier: Tier) => {
-    setSelectedTier(tier);
-  };
-
-  return (
-    <>
-      {page === "home" ? (
-        <>
-          {selectedTier ? (
-            <RecordingPage
-              refVideo={refVideos.find(
-                (video) => video.tier === selectedTier.toString(),
-              )}
-              pb={pb}
-              goBack={setSelectedTier}
-            />
-          ) : (
-            <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 pb={pb} />
-      )}
-    </>
-  );
+  return page === "home" ? <HomeSection /> : <Leaderboard />;
 };
 
 export default LandingPage;