While trying to use param4 (/:project) to link to the default project associated with a category (web dev or gamedev), I realized using the parameter in the link will always link to whatever the current param is, even though state sets things properly immediately after for displaying the project name and other elements of the param. What this means is I will HAVE to handle this navigation programattically (at least I believe). Working on handling the check and navigating properly if this is the case.

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

@@ -6,6 +6,7 @@ import HomeViewFooter from "./HomeViewFooter";
 import AppContext from "../contexts/AppContext";
 import AppConfig from "../AppConfig.json";
 import LandingPage from "./LandingPage";
+import HomeViewContent from "./HomeViewContent";
 
 interface Props {}
 
@@ -36,24 +37,50 @@ const HomeView = ({}: Props) => {
   // - - - - 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"];
+  const [currentContent, setCurrentContent] = useState<string | undefined>();
 
   // - - - - - FUNCTIONS - - - - -
-  const checkURL = () => {
+  const checkDefaultProject = () => {
+    let isGameDev = param3 === "gamedev";
+    let isWebDev = param3 === "webdev";
+    let isGameDevProj = gameDevProjList.includes(param4);
+    let isWebDevProj = webDevProjList.includes(param4);
+    // checks location and
+    if (isGameDev && !isGameDevProj) {
+      setParam4(gameDevProjList[0]);
+    } else if (isWebDev && !isWebDevProj) {
+      setParam4(webDevProjList[0]);
+    }
+  };
+
+  const checkProjectParams = () => {
+    let construct_URL = `/${param1}/${param2}/${param3}/${param4}`;
+    // booleans
+    let projectIsCurrent_URL = param4 === project;
+    let isSame_URL = construct_URL === location.pathname;
+    let isIntroduction_URL = param2 === "introduction";
+
+    if (param4 && !projectIsCurrent_URL && !isSame_URL && !isIntroduction_URL) {
+      navigate(construct_URL);
+    }
+  };
+
+  const validateURL = () => {
     let URLSegments = [landingOrHome, category1, gameOrWeb, project];
     let paramArray = [param1_Opts, param2_Opts, param3_Opts, param4_Opts];
+    // verifies if this should be the landing page
     if (location.pathname === "/") {
       navigate("/landing");
       setIsLanding(true);
     } else if (location.pathname === "/landing") {
       setIsLanding(true);
     }
+    // compares segments of the URL against valid options
     for (let i = 0; i < URLSegments.length; i++) {
       if (URLSegments[i]) {
         let found = paramArray[i].find((item) => item === URLSegments[i]);
@@ -67,20 +94,31 @@ const HomeView = ({}: Props) => {
   };
 
   // - - - - - useEffects - - - - -
-  useEffect(() => {
-    setAllParamsObj({ param1, param2, param3, param4 });
-  }, [param1, param2, param3, param4]);
-
   useEffect(() => {
     if (!isLanding) {
-      checkURL();
+      validateURL();
       if (hueRotation != AppConfig.hueAnimDuration_Slow) {
         setHueDuration(AppConfig.hueAnimDuration_Slow);
       }
     }
-    console.log(category1);
+    console.log("- - - - - - - -");
+
+    console.log(`individual params: /${param1}/${param2}/${param3}/${param4}`);
+    console.log(
+      `params object: /${allParamsObj.param1}/${allParamsObj.param2}/${allParamsObj.param3}/${allParamsObj.param4}`
+    );
+    console.log(`current URL: ${location.pathname}`);
+    console.log("- - - - - - - -");
   }, [location]);
 
+  useEffect(() => {
+    setAllParamsObj({ param1, param2, param3, param4 });
+  }, [param1, param2, param3, param4]);
+
+  useEffect(() => {
+    checkDefaultProject();
+  }, [allParamsObj]);
+
   // - - - - - JSX - - - - -
   return (
     <div className='HomeView'>
@@ -95,12 +133,11 @@ const HomeView = ({}: Props) => {
       <HomeViewHeader
         subtitle={subtitle}
         subEmoji={subEmoji}
-        currentContent={currentContent}
-        allParamsObj={allParamsObj}
+        allParams={allParamsObj}
         isLanding={isLanding}
       />
-      <Outlet />
-      <HomeViewFooter currentContent={"deerfall"} allParamsObj={allParamsObj} />
+      <HomeViewContent currentContent={param4} />
+      <HomeViewFooter allParams={allParamsObj} />
     </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,15 @@ import AppContext from "../contexts/AppContext";
 import "./styles/HomeViewFooter.css";
 
 interface Props {
-  currentContent: string;
-  allParamsObj: {
+  allParams: {
     param1: string;
     param2: string;
     param3: string;
     param4: string;
   };
 }
 
-const HomeViewFooter = ({ currentContent, allParamsObj }: Props) => {
+const HomeViewFooter = ({ allParams }: Props) => {
   const currentYear = new Date();
   const { hueRotation } = useContext(AppContext);
 
@@ -23,15 +22,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.param4}</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.param1}/portfolio/${allParams.param3}`}
                 className={({ isActive }) =>
                   isActive ? "highlighted-link" : ""
                 }>
@@ -40,7 +39,7 @@ const HomeViewFooter = ({ currentContent, allParamsObj }: Props) => {
             </li>
             <li>
               <NavLink
-                to={`/${allParamsObj.param1}/blog/${allParamsObj.param3}`}
+                to={`/${allParams.param1}/blog/${allParams.param3}`}
                 className={({ isActive }) =>
                   isActive ? "highlighted-link" : ""
                 }>
@@ -49,7 +48,7 @@ const HomeViewFooter = ({ currentContent, allParamsObj }: Props) => {
             </li>
             <li>
               <NavLink
-                to={`/${allParamsObj.param1}/introduction`}
+                to={`/${allParams.param1}/introduction`}
                 className={({ isActive }) =>
                   isActive ? "highlighted-link" : ""
                 }>

src/components/HomeViewHeader.tsx

@@ -7,9 +7,8 @@ import "./styles/HomeViewHeader.css";
 interface Props {
   subtitle: string;
   subEmoji: string;
-  currentContent: string;
   isLanding: boolean;
-  allParamsObj: {
+  allParams: {
     param1: string;
     param2: string;
     param3: string;
@@ -20,22 +19,21 @@ interface Props {
 const HomeViewHeader = ({
   subtitle,
   subEmoji,
-  currentContent,
   isLanding,
-  allParamsObj,
+  allParams,
 }: Props) => {
   // GENERAL
   const { hueRotation } = useContext(AppContext);
   const [isIntro, setIsIntro] = useState<boolean>(false);
   const [ignored, forceUpdate] = useReducer((x) => x + 1, 0);
 
   useEffect(() => {
-    if (allParamsObj.param2 === "introduction") {
+    if (allParams.param2 === "introduction") {
       setIsIntro(true);
     } else {
       setIsIntro(false);
     }
-  }, [allParamsObj.param2]);
+  }, [allParams.param2]);
 
   useEffect(() => {
     forceUpdate();
@@ -54,8 +52,8 @@ const HomeViewHeader = ({
             {`${isIntro ? "?" : "'s"} `}
           </animated.span>
           <animated.span style={hueRotation} className='highlighted-link'>
-            {isIntro ? "" : `${allParamsObj.param3}`}
-            {isIntro ? "" : ` ${allParamsObj.param2}`}
+            {isIntro ? "" : `${allParams.param3}`}
+            {isIntro ? "" : ` ${allParams.param2}`}
           </animated.span>
         </h1>
         <p className='subtitle'>
@@ -67,18 +65,18 @@ const HomeViewHeader = ({
       <div className='project-nav-ctr'>
         <div className='project-nav'>
           <span className='material-symbols-outlined'>chevron_left</span>
-          <h2>{currentContent}</h2>
+          <h2>{allParams.param4}</h2>
           <span className='material-symbols-outlined'>chevron_right</span>
         </div>
 
         <div className='project-nav-type-cat'>
           <NavLink
-            to={`/${allParamsObj.param1}/${allParamsObj.param2}/gamedev`}
+            to={`/${allParams.param1}/${allParams.param2}/gamedev`}
             className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
             <animated.p style={hueRotation}>gamedev</animated.p>
           </NavLink>
           <NavLink
-            to={`/${allParamsObj.param1}/${allParamsObj.param2}/webdev`}
+            to={`/${allParams.param1}/${allParams.param2}/webdev`}
             className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
             <animated.p style={hueRotation}>webdev</animated.p>
           </NavLink>
@@ -89,7 +87,7 @@ const HomeViewHeader = ({
         <ul>
           <li>
             <NavLink
-              to={`/${allParamsObj.param1}/${allParamsObj.param2}/gamedev`}
+              to={`/${allParams.param1}/${allParams.param2}/gamedev`}
               className={({ isActive }) =>
                 isActive ? "highlighted-link" : ""
               }>
@@ -98,7 +96,7 @@ const HomeViewHeader = ({
           </li>
           <li>
             <NavLink
-              to={`/${allParamsObj.param1}/${allParamsObj.param2}/webdev`}
+              to={`/${allParams.param1}/${allParams.param2}/webdev`}
               className={({ isActive }) =>
                 isActive ? "highlighted-link" : ""
               }>

src/components/LandingPage.tsx

@@ -26,12 +26,11 @@ const LandingPage = ({ setIsLanding, setParamsArray }: Props) => {
   const navigate = useNavigate();
 
   // - - - - - CONTEXT - - - - -
-  const { currentPathContext, setCurrentPathContext } = useContext(AuthContext);
+  const { setCurrentPathContext } = useContext(AuthContext);
   const { hueRotation, setHueDuration } = useContext(AppContext);
 
   // - - - - - BG TRANSITION - - - - -
   const [hideLP, setHideLP] = useState<string>("");
-  const [hideHV, setHideHV] = useState<string>("hide");
   const [isActivePage, setIsActivePage] = useState<boolean>(true);
   const [currBG, setCurrBG] = useState<string>(pixelBG);
 
@@ -65,7 +64,6 @@ const LandingPage = ({ setIsLanding, setParamsArray }: Props) => {
     ) {
       setCurrBG(pixelFadeBG);
       setIsActivePage(false);
-      setHideHV("");
       setTimeout(() => setIsLanding(false), 1500);
       setParamsArray[0]("home");
       setHueDuration(AppConfig.hueAnimDuration_Slow);
@@ -75,7 +73,6 @@ const LandingPage = ({ setIsLanding, setParamsArray }: Props) => {
       navigate("/landing");
       setCurrBG(pixelBG);
       setIsActivePage(true);
-      setHideHV("hide");
       setHideLP("");
       setHueDuration(4000);
     } else if (currentPath === "/landing") {

src/components/styles/HomeViewFooter.css

@@ -24,7 +24,8 @@
   /* Style */
   color: white;
   border: solid white 2px;
-  background-color: rgba(96, 96, 96, 0.4);
+  background-color: rgba(96, 96, 96, 0.3);
+  backdrop-filter: blur(2px);
   font-size: 16px;
 }