refactored context, seperating 'style' from auth, and modifying the w…

package.json

@@ -16,7 +16,7 @@
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
-    "react-spring": "^9.4.5",
+    "react-spring": "9.4.5",
     "typescript": "^4.6.3",
     "web-vitals": "^2.1.4"
   },

src/App.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

src/App.tsx

@@ -1,110 +1,29 @@
 import "./App.css";
-import {
-  BrowserRouter as Router,
-  Route,
-  Routes,
-  useLocation,
-} from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import LandingPage from "./components/LandingPage";
 import HomeView from "./components/HomeView";
 import { useSpring } from "react-spring";
 import { useState } from "react";
 import WIPDisclaimer from "./components/WIPDisclaimer";
 
 function App() {
-  const [hueFlip, setHueFlip] = useState<boolean>(false);
-  const [bgAnimOff, setBgAnimOff] = useState<boolean>(false);
-  const [hueDuration, setHueDuration] = useState<number>(4000);
-  const hueRotation = useSpring({
-    to: {
-      filter: "hue-rotate(130deg) saturate(80%) sepia(30%)",
-    },
-    from: {
-      filter: "hue-rotate(0deg) saturate(100%) sepia(0%)",
-    },
-    reset: false,
-    cancel: bgAnimOff,
-    reverse: hueFlip,
-    delay: 1000,
-    config: { duration: hueDuration, tension: 280, friction: 60 },
-    onRest: () => setHueFlip(!hueFlip),
-  });
-
   return (
     <div className='App'>
       <Router>
         <Routes>
-          <Route
-            path='/'
-            element={
-              <LandingPage
-                hueRotation={hueRotation}
-                setHueDuration={setHueDuration}
-              />
-            }
-          />
-          <Route
-            path='/landing'
-            element={
-              <LandingPage
-                hueRotation={hueRotation}
-                setHueDuration={setHueDuration}
-              />
-            }
-          />
-          <Route
-            path='/landing/:location'
-            element={
-              <LandingPage
-                hueRotation={hueRotation}
-                setHueDuration={setHueDuration}
-              />
-            }
-          />
-          <Route
-            path='/landing/:category/:content'
-            element={
-              <LandingPage
-                hueRotation={hueRotation}
-                setHueDuration={setHueDuration}
-              />
-            }
-          />
+          <Route path='/' element={<LandingPage />} />
+          <Route path='/landing' element={<LandingPage />} />
+          <Route path='/landing/:location' element={<LandingPage />} />
+          <Route path='/landing/:category/:content' element={<LandingPage />} />
           <Route
             path='/landing/:category/:content/:project'
-            element={
-              <LandingPage
-                hueRotation={hueRotation}
-                setHueDuration={setHueDuration}
-              />
-            }
-          />
-          <Route
-            path='/home'
-            element={
-              <HomeView
-                hueRotation={hueRotation}
-                setHueDuration={setHueDuration}
-              />
-            }
-          />
-          <Route
-            path='/home/:category/:content'
-            element={
-              <HomeView
-                hueRotation={hueRotation}
-                setHueDuration={setHueDuration}
-              />
-            }
+            element={<LandingPage />}
           />
+          <Route path='/home' element={<HomeView />} />
+          <Route path='/home/:category/:content' element={<HomeView />} />
           <Route
             path='/home/:category/:content/:project'
-            element={
-              <HomeView
-                hueRotation={hueRotation}
-                setHueDuration={setHueDuration}
-              />
-            }
+            element={<HomeView />}
           />
         </Routes>
       </Router>

src/components/HomeView.tsx

@@ -1,21 +1,18 @@
-import "./HomeView.css";
-import { Navigate, useLocation, useNavigate } from "react-router-dom";
-import { useEffect, useState } from "react";
+import "./styles/HomeView.css";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useContext, useEffect, useState } from "react";
 import HomeViewHeader from "./HomeViewHeader";
 import HomeViewFooter from "./HomeViewFooter";
 import HomeViewContent from "./HomeViewContent";
 import { SpringValue } from "react-spring";
+import StyleContext from "../contexts/StyleContext";
 
-interface Props {
-  hueRotation: {
-    filter: SpringValue<string>;
-  };
-  setHueDuration: React.Dispatch<React.SetStateAction<number>>;
-}
+interface Props {}
 
-const HomeView = ({ hueRotation, setHueDuration }: Props) => {
+const HomeView = ({}: Props) => {
   // - - - - GENERAL STATES - - - -
   const [firstRender, setFirstRender] = useState<boolean>(true);
+  const { hueRotation, setHueDuration } = useContext(StyleContext);
   // - - - - - TITLES AND TEXT - - - - -
   const [currentProject, setCurrentProject] = useState<string>("Deerfall");
   const [title, setTitle] = useState<string>("Dev Blog");

src/components/HomeViewContent.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { animated, useTransition } from "react-spring";
-import "./HomeViewContent.css";
+import "./styles/HomeViewContent.css";
 import Deerfall from "./projects/Deerfall";
 import MediaMatchup from "./projects/MediaMatchup";
 

src/components/HomeViewFooter.tsx

@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom";
 import { animated, SpringValue } from "react-spring";
-import "./HomeViewFooter.css";
+import "./styles/HomeViewFooter.css";
 
 interface Props {
   pathname: string;
@@ -24,15 +24,15 @@ const HomeViewFooter = ({
   const currentYear = new Date();
 
   return (
-    <div className="HomeViewFooter">
-      <div className="project-nav-ctr">
-        <div className="project-nav">
-          <span className="material-symbols-outlined">chevron_left</span>
+    <div className='HomeViewFooter'>
+      <div className='project-nav-ctr'>
+        <div className='project-nav'>
+          <span className='material-symbols-outlined'>chevron_left</span>
           <h2>{currentProject}</h2>
-          <span className="material-symbols-outlined">chevron_right</span>
+          <span className='material-symbols-outlined'>chevron_right</span>
         </div>
 
-        <div className="project-nav-type-cat">
+        <div className='project-nav-type-cat'>
           <Link
             to={gameDevLink}
             className={gamedevOrWebdev ? "highlighted-link" : ""}>
@@ -50,7 +50,7 @@ const HomeViewFooter = ({
         </div>
       </div>
 
-      <div className="rights-ctr">
+      <div className='rights-ctr'>
         <p>
           <animated.span
             className={"highlighted-link"}

src/components/HomeViewHeader.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { animated, SpringValue } from "react-spring";
-import "./HomeViewHeader.css";
+import "./styles/HomeViewHeader.css";
 
 interface Props {
   title: string;
@@ -34,28 +34,28 @@ const HomeViewHeader = ({
 }: Props) => {
   // 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">
-      <Link className="title-ctr" to={{ pathname: "/" }}>
+    <div className='HomeViewHeader'>
+      <Link className='title-ctr' to={{ pathname: "/" }}>
         <h1>
           {`Jake's `}
-          <animated.span style={hueRotation} className="highlighted-link">
+          <animated.span style={hueRotation} className='highlighted-link'>
             {title}
           </animated.span>
         </h1>
-        <p className="subtitle">
+        <p className='subtitle'>
           {subtitle}
-          <span className="emoji">{subEmoji}</span>
+          <span className='emoji'>{subEmoji}</span>
         </p>
       </Link>
 
-      <div className="project-nav-ctr">
-        <div className="project-nav">
-          <span className="material-symbols-outlined">chevron_left</span>
+      <div className='project-nav-ctr'>
+        <div className='project-nav'>
+          <span className='material-symbols-outlined'>chevron_left</span>
           <h2>{currentProject}</h2>
-          <span className="material-symbols-outlined">chevron_right</span>
+          <span className='material-symbols-outlined'>chevron_right</span>
         </div>
 
-        <div className="project-nav-type-cat">
+        <div className='project-nav-type-cat'>
           <Link
             to={gameDevLink}
             className={gamedevOrWebdev ? "highlighted-link" : ""}>
@@ -73,7 +73,7 @@ const HomeViewHeader = ({
         </div>
       </div>
 
-      <div className="nav-ctr">
+      <div className='nav-ctr'>
         <ul>
           <li>
             <Link

src/components/LandingPage.tsx

@@ -1,22 +1,18 @@
 import { useContext, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import "./LandingPage.css";
+import "./styles/LandingPage.css";
 import LandingPageLink from "./LandingPageLink";
 import { animated, SpringValue, useTransition } from "react-spring";
 import HomeView from "./HomeView";
 import AuthContext from "../contexts/AuthContext";
 import pixelBG from "../img/pixelBG_LowRes.png";
 import pixelFadeBG from "../img/animated-14fps.png";
 import PersonalIntro from "./PersonalIntro";
+import StyleContext from "../contexts/StyleContext";
 
-interface Props {
-  hueRotation: {
-    filter: SpringValue<string>;
-  };
-  setHueDuration: React.Dispatch<React.SetStateAction<number>>;
-}
+interface Props {}
 
-const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
+const LandingPage = ({}: Props) => {
   // - - - - - LINK FUNCTIONALITY - - - - -
   const [currentDisplay, setCurrentDisplay] = useState<string>("");
   const [firstRender, setFirstRender] = useState<boolean>(true);
@@ -25,6 +21,7 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
   const [link2Text, setLink2Text] = useState<string>("");
   const [link2Path, setLink2Path] = useState<string>("");
   const { currentPathContext, setCurrentPathContext } = useContext(AuthContext);
+  const { hueRotation, setHueDuration } = useContext(StyleContext);
   const currentPath = useLocation().pathname;
   const navigate = useNavigate();
 
@@ -108,30 +105,27 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
                 currentDisplay={currentDisplay}
                 linkText={currentDisplay}
                 pathName={"/"}
-                className={"lp-link"}
                 isH1={true}
               />
             </animated.div>
           ) : (
             ""
           )
         )}
-        <PersonalIntro />
+        {/* <PersonalIntro /> */}
         {fadeOut((style: any, item: any) =>
           item ? (
             <animated.div className='nav-ctr' style={style}>
               <LandingPageLink
                 currentDisplay={currentDisplay}
                 linkText={link1Text}
                 pathName={link1Path}
-                className={"lp-link"}
                 isH1={false}
               />
               <LandingPageLink
                 currentDisplay={currentDisplay}
                 linkText={link2Text}
                 pathName={link2Path}
-                className={"lp-link"}
                 isH1={false}
               />
             </animated.div>
@@ -149,7 +143,7 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
         </div>
       </div>
       <div className={`HomeView-ctr ${hideHV}`}>
-        <HomeView hueRotation={hueRotation} setHueDuration={setHueDuration} />
+        <HomeView />
       </div>
     </div>
   );