Merge pull request #15 from JS-GitRepo/feature/contentDisplay

More Navigation Tweaking

Author: JS-GitRepo

src/App.css

@@ -11,6 +11,7 @@
   max-height: 100%;
   width: 100%;
   text-align: center;
+  background-color: rgb(250, 250, 250);
 }
 
 .material-symbols-outlined {

src/App.tsx

@@ -1,11 +1,8 @@
 import "./App.css";
-import { Route, Router, Routes } from "react-router-dom";
-import LandingPage from "./components/LandingPage";
+import { Route, Routes } from "react-router-dom";
 import HomeView from "./components/HomeView";
 import WIPDisclaimer from "./components/WIPDisclaimer";
-import HomeViewHeader from "./components/HomeViewHeader";
 import ErrorNotFound from "./components/ErrorNotFound";
-import HomeViewContent from "./components/HomeViewContent";
 
 // 9-28-22
 // Refactoring routes, and general way this 'web app' works. Making HomeView the default route, with a 'modal' over it which will be Landing Page. Instead of all this weird routing form Landing Page to Homeview, landing page will be an overlay that exists within HomeView, that is only present when the user is at /landing. Thinking of actually making the LandingPage an option for "HomeViewContent" that steels the entire viewport, so that HomeView is always there behind it.
@@ -19,25 +16,16 @@ function App() {
     <div className='App'>
       <Routes>
         <Route path='/' element={<HomeView />}>
-          <Route
-            path='/:landingOrHome'
-            element={<HomeViewContent currentContent={"Deerfall"} />}>
-            <Route
-              path=':category1'
-              element={<HomeViewContent currentContent={"Deerfall"} />}>
-              <Route
-                path=':gameOrWeb'
-                element={<HomeViewContent currentContent={"Deerfall"} />}>
-                <Route
-                  path=':project'
-                  element={<HomeViewContent currentContent={"Deerfall"} />}
-                />
+          <Route path='/:landingOrHome' element={<HomeView />}>
+            <Route path=':category1' element={<HomeView />}>
+              <Route path=':gameOrWeb' element={<HomeView />}>
+                <Route path=':project' element={<HomeView />} />
               </Route>
             </Route>
           </Route>
-          <Route path='404NotFound' element={<ErrorNotFound />} />
-          <Route path='*' element={<ErrorNotFound />} />
         </Route>
+        <Route path='404NotFound' element={<ErrorNotFound />} />
+        <Route path='*' element={<ErrorNotFound />} />
       </Routes>
       <WIPDisclaimer />
     </div>

src/components/HomeView.tsx

@@ -1,11 +1,12 @@
 import "./styles/HomeView.css";
-import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useContext, useEffect, useState } from "react";
 import HomeViewHeader from "./HomeViewHeader";
 import HomeViewFooter from "./HomeViewFooter";
 import AppContext from "../contexts/AppContext";
 import AppConfig from "../AppConfig.json";
 import LandingPage from "./LandingPage";
+import HomeViewContent from "./HomeViewContent";
 
 interface Props {}
 
@@ -19,88 +20,106 @@ const HomeView = ({}: Props) => {
   const param2_Opts = ["portfolio", "blog", "introduction", "intro"];
   const param3_Opts = ["gamedev", "webdev"];
   const param4_Opts = AppConfig.projectURL_Params;
-  // useStates for Interfacing with URL Params
   const [param1, setParam1] = useState<string>("");
   const [param2, setParam2] = useState<string>("");
   const [param3, setParam3] = useState<string>("");
   const [param4, setParam4] = useState<string>("");
-  const [allParamsObj, setAllParamsObj] = useState<any>({
+  const [allParamsArray, setAllParamsArray] = useState<string[]>([
     param1,
     param2,
     param3,
     param4,
-  });
-  const setParamsArray = [setParam1, setParam2, setParam3, setParam4];
+  ]);
+  const paramStateSet = [setParam1, setParam2, setParam3, setParam4];
   // check if this is the landing page
   const [isLanding, setIsLanding] = useState<boolean>(false);
   // - - - - CONTEXT - - - -
   const { hueRotation, setHueDuration } = useContext(AppContext);
   // - - - - - TITLES AND TEXT - - - - -
-  const [currentContent, setCurrentContent] = useState<string>("Deerfall");
-  const [title, setTitle] = useState<string>("Dev Blog");
   const [subtitle, setSubtitle] = useState<string>("Welcome! ");
   const [subEmoji, setSubEmoji] = useState<string>(" 🙂");
   // - - - - - PROJECTS - - - - -
-  const gameDevProjList = ["Deerfall"];
-  const webDevProjList = ["MediaMatchup"];
+  const gameDevProjList = ["deerfall"];
+  const webDevProjList = ["mediamatchup"];
 
   // - - - - - FUNCTIONS - - - - -
-  const checkURL = () => {
+
+  const validateURL = () => {
+    // INITIAL SEGMENT VALIDATION
+    let tempParams = allParamsArray;
     let URLSegments = [landingOrHome, category1, gameOrWeb, project];
     let paramArray = [param1_Opts, param2_Opts, param3_Opts, param4_Opts];
+    // checks for landing page
     if (location.pathname === "/") {
+      tempParams = [""];
       navigate("/landing");
       setIsLanding(true);
-    } else if (location.pathname === "/landing") {
+    } else if (landingOrHome === "landing") {
+      tempParams = ["/landing"];
       setIsLanding(true);
     }
+    // loops through each segment and validates it individually
     for (let i = 0; i < URLSegments.length; i++) {
       if (URLSegments[i]) {
         let found = paramArray[i].find((item) => item === URLSegments[i]);
         if (found === undefined) {
           navigate("/404NotFound");
         } else {
-          setParamsArray[i](found);
+          // setParamsArray[i](found);
+          paramStateSet[i](found);
+          tempParams[i] = found;
         }
       }
     }
+    // Sets Default Project if none is selected in this category
+    let isGameDev = tempParams[2] === "gamedev";
+    let isWebDev = tempParams[2] === "webdev";
+    let isGameDevProj = gameDevProjList.includes(tempParams[3]);
+    let isWebDevProj = webDevProjList.includes(tempParams[3]);
+
+    if (isGameDev && !isGameDevProj) {
+      setParam4(gameDevProjList[0]);
+      tempParams[3] = gameDevProjList[0];
+    } else if (isWebDev && !isWebDevProj) {
+      setParam4(webDevProjList[0]);
+      tempParams[3] = webDevProjList[0];
+    }
+
+    let construct_URL = `/${tempParams[0]}/${tempParams[1]}/${tempParams[2]}/${tempParams[3]}`;
+    let isSame_URL = construct_URL === location.pathname;
+    let isIntroduction_URL = tempParams[1] === "introduction";
+
+    if (tempParams[3] && !isSame_URL && !isIntroduction_URL) {
+      navigate(construct_URL, { replace: true });
+    }
   };
 
   // - - - - - useEffects - - - - -
   useEffect(() => {
-    setAllParamsObj({ param1, param2, param3, param4 });
-  }, [param1, param2, param3, param4]);
-
-  useEffect(() => {
+    validateURL();
     if (!isLanding) {
-      checkURL();
       if (hueRotation != AppConfig.hueAnimDuration_Slow) {
         setHueDuration(AppConfig.hueAnimDuration_Slow);
       }
     }
-    console.log(category1);
   }, [location]);
 
+  // Necessary to update props. Otherwise, props are always a step behind.
+  useEffect(() => {
+    setAllParamsArray([param1, param2, param3, param4]);
+  }, [param1, param2, param3, param4]);
+
   // - - - - - JSX - - - - -
   return (
     <div className='HomeView'>
-      {isLanding ? (
-        <LandingPage
-          setIsLanding={setIsLanding}
-          setParamsArray={setParamsArray}
-        />
-      ) : (
-        ""
-      )}
+      {isLanding ? <LandingPage setIsLanding={setIsLanding} /> : ""}
       <HomeViewHeader
         subtitle={subtitle}
         subEmoji={subEmoji}
-        currentContent={currentContent}
-        allParamsObj={allParamsObj}
-        isLanding={isLanding}
+        allParams={allParamsArray}
       />
-      <Outlet />
-      <HomeViewFooter currentContent={"deerfall"} allParamsObj={allParamsObj} />
+      <HomeViewContent currentContent={param4} />
+      <HomeViewFooter allParams={allParamsArray} />
     </div>
   );
 };

src/components/HomeViewContent.tsx

@@ -3,25 +3,27 @@ import { animated, useTransition } from "react-spring";
 import "./styles/HomeViewContent.css";
 import Deerfall from "./projects/Deerfall";
 import MediaMatchup from "./projects/MediaMatchup";
+import { useNavigate } from "react-router-dom";
 
 interface Props {
-  currentContent: string;
+  currentContent: string | undefined;
 }
 
 const HomeViewContent = ({ currentContent }: Props) => {
   // - - - - States - - - -
   // toggleQueue false = projQueue1, toggleQueue true = projQueue2
   const [toggleQueue, setToggleQueue] = useState(false);
+  const navigate = useNavigate();
   // - - - - Projects - - - -
   const allProjList = {
-    Deerfall: <Deerfall isPortfolio={true} />,
-    MediaMatchup: <MediaMatchup isPortfolio={true} />,
+    deerfall: <Deerfall isPortfolio={true} />,
+    mediamatchup: <MediaMatchup isPortfolio={true} />,
   };
   const gameDevProjList = {
-    Deerfall: <Deerfall isPortfolio={true} />,
+    deerfall: <Deerfall isPortfolio={true} />,
   };
   const webDevProjList = {
-    MediaMatchup: <MediaMatchup isPortfolio={true} />,
+    mediamatchup: <MediaMatchup isPortfolio={true} />,
   };
   const [currProjArray, setCurrProjArray] = useState<JSX.Element[]>([]);
   // - - - - Transitions - - - -
@@ -34,7 +36,9 @@ const HomeViewContent = ({ currentContent }: Props) => {
   });
 
   useEffect(() => {
-    setCurrProjArray([eval(`allProjList.${currentContent}`)]);
+    if (currentContent) {
+      setCurrProjArray([eval(`allProjList.${currentContent}`)]);
+    }
   }, [currentContent]);
 
   return (

src/components/HomeViewFooter.tsx

@@ -5,16 +5,10 @@ import AppContext from "../contexts/AppContext";
 import "./styles/HomeViewFooter.css";
 
 interface Props {
-  currentContent: string;
-  allParamsObj: {
-    param1: string;
-    param2: string;
-    param3: string;
-    param4: string;
-  };
+  allParams: string[];
 }
 
-const HomeViewFooter = ({ currentContent, allParamsObj }: Props) => {
+const HomeViewFooter = ({ allParams }: Props) => {
   const currentYear = new Date();
   const { hueRotation } = useContext(AppContext);
 
@@ -23,15 +17,15 @@ const HomeViewFooter = ({ currentContent, allParamsObj }: Props) => {
       <div className='project-nav-ctr'>
         <div className='project-nav'>
           <span className='material-symbols-outlined'>chevron_left</span>
-          <h2>{currentContent}</h2>
+          <h2>{allParams[3]}</h2>
           <span className='material-symbols-outlined'>chevron_right</span>
         </div>
 
         <div className='nav-ctr'>
           <ul>
             <li>
               <NavLink
-                to={`/${allParamsObj.param1}/portfolio/${allParamsObj.param3}`}
+                to={`/${allParams[0]}/portfolio/${allParams[2]}`}
                 className={({ isActive }) =>
                   isActive ? "highlighted-link" : ""
                 }>
@@ -40,7 +34,7 @@ const HomeViewFooter = ({ currentContent, allParamsObj }: Props) => {
             </li>
             <li>
               <NavLink
-                to={`/${allParamsObj.param1}/blog/${allParamsObj.param3}`}
+                to={`/${allParams[0]}/blog/${allParams[2]}`}
                 className={({ isActive }) =>
                   isActive ? "highlighted-link" : ""
                 }>
@@ -49,7 +43,7 @@ const HomeViewFooter = ({ currentContent, allParamsObj }: Props) => {
             </li>
             <li>
               <NavLink
-                to={`/${allParamsObj.param1}/introduction`}
+                to={`/${allParams[0]}/introduction`}
                 className={({ isActive }) =>
                   isActive ? "highlighted-link" : ""
                 }>