tutorials clean-up

PankratzLab · Oct 30, 2023 · 6ffd917 · 6ffd917
1 parent ff16241
commit 6ffd917
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 105 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -9,19 +9,24 @@ import Video from "./assets/pages/tutorials/Video";
 import "./assets/styles/index.scss";
 import { Route, Routes } from "react-router-dom";
 import Body from "./assets/pages/documentation/Body";
+import VideoThumbnails from "./assets/pages/tutorials/VideoThumbnails";
 
 export default function App() {
   return (
     <>
       <Navbar />
       <Routes>
-        <Route path={"/"} element={<Home />} />
-        <Route path={"/download"} element={<Download />} />
-        <Route path={"/features"} element={<Features />} />
-        <Route path={"/tutorials/:tutorialsId"} element={<Tutorials />} />
-        <Route path={"/tutorials/:tutorialsId/:tutorialsId"} element={<Video />} />
-        <Route path={"/documentation"} element={<Documentation />}>
-          <Route path=":id" element={<Body />}/>
+        <Route path="/" element={<Home />} />
+        <Route path="/download" element={<Download />} />
+        <Route path="/features" element={<Features />} />
+        <Route path="/tutorials" element={<Tutorials />}>
+          <Route path=":id" element={<VideoThumbnails />} />
+        </Route>
+        <Route path="/tutorials/:id">
+          <Route path=":id" element={<Video />} />
+        </Route>
+        <Route path="/documentation" element={<Documentation />}>
+          <Route path=":id" element={<Body />} />
         </Route>
       </Routes>
     </>

diff --git a/src/assets/pages/tutorials/Sidebar.jsx b/src/assets/pages/tutorials/Sidebar.jsx
@@ -1,30 +1,26 @@
 import React, { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { motion, useAnimation } from "framer-motion";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
 
-export default function Sidebar({ sidebar, setCategory, category, height }) {
+export default function Sidebar({ sidebarItems, setCategory, height }) {
   const controls = useAnimation();
-  const [matches, setMatches] = useState(false);
   const [collapsed, setCollapsed] = useState(false);
-  useEffect(() => {
-    setCollapsed(matches);
-    const query = `(min-width: 768px)`;
-    const media = window.matchMedia(query);
-    if (media.matches !== matches) {
-      setMatches(media.matches);
-    }
-    const listener = () => setMatches(media.matches);
-    window.addEventListener("resize", listener);
-    return () => window.removeEventListener("resize", listener);
-  }, [matches, category]);
+  const mediaQuery = useMediaQuery("md");
+  const {id} = useParams()
 
   useEffect(() => {
-    controls.start({ x: collapsed ? 0 : "-232px" });
-  }, [collapsed]);
+    controls.start({ x: mediaQuery ? 0 : "-232px" });
+    setCollapsed(mediaQuery);
+  }, [mediaQuery]);
 
+  const handleSidebar = () => {
+    setCollapsed(!collapsed);
+    controls.start({ x: collapsed ? "-232px" : 0 });
+  };
 
   return (
-    <div className="sidebar" style={{height: collapsed && matches ? "auto" : height}}>
+    <div className="sidebar" style={{ height: height }}>
       <motion.div
         animate={controls}
         transition={{ ease: [0.35, 0.17, 0.3, 0.86] }}
@@ -33,24 +29,24 @@ export default function Sidebar({ sidebar, setCategory, category, height }) {
         <Link
           to={`/tutorials/All`}
           onClick={() => setCategory("All")}
-          className={category === "All" ? "active" : ""}
+          className={id === "All" ? "active" : ""}
         >
           All
         </Link>
-        {sidebar.map((e, i) => {
+        {sidebarItems.map((e, i) => {
           return (
             <Link
               to={`/tutorials/${Object.keys(e)[0]}`}
               key={i}
               onClick={() => setCategory(e)}
-              className={category === e ? "active" : ""}
+              className={id === Object.keys(e)[0] ? "active" : ""}
             >
               {Object.keys(e)[0]}
             </Link>
           );
         })}
-        {!matches && (
-          <div className="expand-button" onClick={() => setCollapsed(!collapsed)}>
+        {!mediaQuery && (
+          <div className="expand-button" onClick={() => handleSidebar()}>
             <svg
               id="a"
               xmlns="http://www.w3.org/2000/svg"

diff --git a/src/assets/pages/tutorials/Video.jsx b/src/assets/pages/tutorials/Video.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import { Link } from "react-router-dom";
 import { motion } from "framer-motion";
 import Footer from "../../../assets/components/Footer"
@@ -64,7 +64,7 @@ export default function Video() {
           </div>
         </aside>
         <motion.div
-          key={content.src}
+          key={content?.src}
           initial={{ y: 200, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ y: { ease: [0.01, 0.83, 0, 0.99] }, duration: 0.5 }}
@@ -74,9 +74,9 @@ export default function Video() {
             {content.title} <span className="category">{paths[0]}</span>
           </h1>
           <video controls ref={videoRef}>
-            <source src={`/Tutorials/videos/${content.src}`} type="video/mp4" />
+            <source src={`/Tutorials/videos/${content?.src}`} type="video/mp4" />
           </video>
-          <p>{content.summary}</p>
+          <p>{content?.summary}</p>
         </motion.div>
       </main>
       <Footer />

diff --git a/src/assets/pages/tutorials/VideoThumbnails.jsx b/src/assets/pages/tutorials/VideoThumbnails.jsx
@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import { Link } from "react-router-dom";
+import { useParams } from "react-router-dom";
+
+export default function VideoThumbnails() {
+  const { id } = useParams();
+  const [allContent, setAllContent] = useState([]);
+  const [currentContent, setCurrentContent] = useState([]);
+
+  const fetchAll = async () => {
+    const data = await fetch("/Tutorials/toc.json");
+    const res = await data.json();
+    res.map((e) => {
+      //add category to items
+      Object.values(e)[0].map((r) => {
+        r.category = Object.keys(e)[0];
+      });
+
+      const parsedData = (prev) => {
+        return [...prev, ...Object.values(e)[0]];
+      };
+      setAllContent(parsedData);
+    });
+  };
+
+  useEffect(() => {
+    if (allContent.length === 0) {
+      fetchAll();
+      return;
+    }
+    if (id === "All") {
+      setCurrentContent(allContent);
+      return;
+    }
+    setCurrentContent(allContent.filter((e) => e.category === id));
+  }, [id, allContent]);
+
+  return currentContent?.map((e, i) => {
+    return (
+      <motion.div
+        key={i}
+        initial={{ y: 100, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        exit={{
+          y: 50,
+          opacity: 0,
+          transition: { ease: "easeIn" },
+        }}
+        transition={{ delay: i * 0.05, y: { ease: [0.01, 0.83, 0, 0.99] } }}
+        className="thumbnail-container"
+      >
+        <Link to={`/tutorials/${e.category}/${e.title}`}>
+          <div
+            className="thumbnail"
+            style={{
+              backgroundImage: `url(/Tutorials/videos/${e.src.slice(0, -4) + ".jpg"})`,
+              backgroundSize: "cover",
+            }}
+          ></div>
+          <div className="title">{e.title}</div>
+        </Link>
+      </motion.div>
+    );
+  });
+}
diff --git a/src/assets/pages/tutorials/index.jsx b/src/assets/pages/tutorials/index.jsx
@@ -1,113 +1,55 @@
 import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import { AnimatePresence, motion } from "framer-motion";
+import { Outlet } from "react-router-dom";
+import { AnimatePresence } from "framer-motion";
 import Footer from "../../../assets/components/Footer";
 import Sidebar from "./Sidebar";
 import useMeasure from "react-use-measure";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
 
 export default function index() {
-  const [sidebar, setSidebar] = useState([]);
+  const [sidebarItems, setSidebarItems] = useState([]);
   const [data, setData] = useState([]);
-  const [content, setContent] = useState([]);
   const [category, setCategory] = useState("All");
 
   useEffect(() => {
     (async () => {
       const data = await fetch("/Tutorials/toc.json");
       const res = await data.json();
-      setSidebar(res);
+      setSidebarItems(res);
 
       res.map((e) => {
-        Object.values(e)[0].map((r) => {
-          r.category = Object.keys(e)[0];
-        });
         const parsedData = (prev) => {
           return [...prev, ...Object.values(e)[0]];
         };
         setData(parsedData);
-        setContent(parsedData);
       });
     })();
   }, []);
 
-  useEffect(() => {
-    window.scrollTo(0, 0);
-    if (category === "All") {
-      setContent(data);
-      return;
-    } else {
-      setContent(Object.values(category)[0]);
-    }
-  }, [category]);
-
   let [ref, { height }] = useMeasure();
 
   const mediaQuery = useMediaQuery("md");
-  const handleMediaQuery = (big, small) => {
-    let sizeSelect = mediaQuery;
-    if (sizeSelect) {
-      return big;
-    } else {
-      return small;
-    }
-  };
+  const header = (
+    <header className={`tutorials ${mediaQuery ? "" : "mobile-header"}`}>
+      <h1>Browse Tutorials</h1>
+      <div className="dividing-line"></div>
+    </header>
+  );
 
   return (
     <>
-      {handleMediaQuery(
-        <header className="tutorials">
-          <h1>Browse Tutorials</h1>
-          <div className="dividing-line"></div>
-        </header>,
-        null
-      )}
-
+      {mediaQuery && header}
       <main className="tutorials">
         <Sidebar
-          sidebar={sidebar}
+          sidebarItems={sidebarItems}
           category={category}
           setCategory={setCategory}
           height={height}
         />
-        {handleMediaQuery(
-          null,
-          <header className="tutorials mobile-header">
-            <h1>Browse Tutorials</h1>
-            <div className="dividing-line"></div>
-          </header>
-        )}
+        {!mediaQuery && header}
         <div className="content" ref={ref}>
           <AnimatePresence>
-            {content.map((e, i) => {
-              return (
-                <motion.div
-                  key={i}
-                  initial={{ y: 100, opacity: 0 }}
-                  animate={{ y: 0, opacity: 1 }}
-                  exit={{
-                    y: 50,
-                    opacity: 0,
-                    transition: { ease: "easeIn" },
-                  }}
-                  transition={{ delay: i * 0.05, y: { ease: [0.01, 0.83, 0, 0.99] } }}
-                  className="thumbnail-container"
-                >
-                  <Link to={`/tutorials/${e.category}/${e.title}`}>
-                    <div
-                      className="thumbnail"
-                      style={{
-                        backgroundImage: `url(/Tutorials/videos/${
-                          e.src.slice(0, -4) + ".jpg"
-                        })`,
-                        backgroundSize: "cover",
-                      }}
-                    ></div>
-                    <div className="title">{e.title}</div>
-                  </Link>
-                </motion.div>
-              );
-            })}
+            <Outlet />
           </AnimatePresence>
         </div>
       </main>