navigation is now in a good state; transitioning to managing displayed content

Author: JS-GitRepo

src/components/HomeView.tsx

@@ -20,10 +20,10 @@ const HomeView = ({}: Props) => {
   const param3_Opts = ["gamedev", "webdev"];
   const param4_Opts = AppConfig.projectURL_Params;
   // useStates for Interfacing with URL Params
-  const [param1, setParam1] = useState<string>("home");
-  const [param2, setParam2] = useState<string>("portfolio");
-  const [param3, setParam3] = useState<string>("gamedev");
-  const [param4, setParam4] = useState<string>("deerfall");
+  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>({
     param1,
     param2,
@@ -97,6 +97,7 @@ const HomeView = ({}: Props) => {
         subEmoji={subEmoji}
         currentContent={currentContent}
         allParamsObj={allParamsObj}
+        isLanding={isLanding}
       />
       <Outlet />
       <HomeViewFooter currentContent={"deerfall"} allParamsObj={allParamsObj} />

src/components/HomeViewHeader.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useReducer, useState } from "react";
 import { Link, NavLink } from "react-router-dom";
 import { animated } from "react-spring";
 import AppContext from "../contexts/AppContext";
@@ -8,6 +8,7 @@ interface Props {
   subtitle: string;
   subEmoji: string;
   currentContent: string;
+  isLanding: boolean;
   allParamsObj: {
     param1: string;
     param2: string;
@@ -20,11 +21,13 @@ const HomeViewHeader = ({
   subtitle,
   subEmoji,
   currentContent,
+  isLanding,
   allParamsObj,
 }: 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") {
@@ -34,6 +37,10 @@ const HomeViewHeader = ({
     }
   }, [allParamsObj.param2]);
 
+  useEffect(() => {
+    forceUpdate();
+  }, [isLanding]);
+
   // Some elements in the return will be hidden by media query CSS, to allow UI elements in the header or footer depending on mobile / Desktop. This is why there are some "redundant" elements
   return (
     <div className='HomeViewHeader'>

src/components/LandingPage.tsx

@@ -90,18 +90,22 @@ const LandingPage = ({ setIsLanding, setParamsArray }: Props) => {
       setParamsArray[1]("portfolio");
       setCurrentDisplay("Portfolio");
       setLink1Text("Web Dev");
-      setLink1Path("/landing/portfolio/webdev");
+      setLink1Path("/home/portfolio/webdev");
       setLink2Text("Game Dev");
-      setLink2Path("/landing/portfolio/gamedev");
+      setLink2Path("/home/portfolio/gamedev");
       setHueDuration(AppConfig.hueAnimDuration);
     } else if (currentPath === "/landing/blog") {
       setParamsArray[1]("blog");
       setCurrentDisplay("Blog");
       setLink1Text("Web Dev");
-      setLink1Path("/landing/blog/webdev");
+      setLink1Path("/home/blog/webdev");
       setLink2Text("Game Dev");
-      setLink2Path("/landing/blog/gamedev");
+      setLink2Path("/home/blog/gamedev");
       setHueDuration(AppConfig.hueAnimDuration);
+    } else if (currentPath.endsWith("/gamedev")) {
+      setParamsArray[2]("gamedev");
+    } else if (currentPath.endsWith("/webdev")) {
+      setParamsArray[2]("webdev");
     }
   }, [currentPath]);
 

src/components/styles/WIPDisclaimer.css

@@ -2,7 +2,7 @@
   font-family: "munro";
   color: white;
   position: absolute;
-  bottom: 45%;
+  bottom: 20%;
   left: 50%;
   transform: translate(-50%);
   z-index: 100;
@@ -27,7 +27,7 @@
 .WIPDisclaimer .close-ctr {
   position: absolute;
   border: solid white 1px;
-  left: 5px;
+  right: 5px;
   top: 5px;
 }