Skip to content

Commit faae7ac

Browse files
JS-GitRepoJS-GitRepo
authored
Merge pull request #14 from JS-GitRepo/feature/NavigationOverhaul
Navigation Overhaul
2 parents 5948a61 + ff606fe commit faae7ac

19 files changed

+382
-264
lines changed

‎src/App.tsx

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,67 @@
11
import "./App.css";
2-
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
2+
import { Route, Router, Routes } from "react-router-dom";
33
import LandingPage from "./components/LandingPage";
44
import HomeView from "./components/HomeView";
55
import WIPDisclaimer from "./components/WIPDisclaimer";
6+
import HomeViewHeader from "./components/HomeViewHeader";
7+
import ErrorNotFound from "./components/ErrorNotFound";
8+
import HomeViewContent from "./components/HomeViewContent";
69

10+
// 9-28-22
11+
// 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.
12+
13+
// This would effectively make "App" into what is currently HomeView, and turn HomeView into HomeViewContent which can then be routed between
14+
15+
// jakesnyder.dev/:landingOrHome/:category1/:gameOrWeb/:project
16+
// jakesnyder.dev/:landingOrHome/:category1/introduction
717
function App() {
818
return (
919
<div className='App'>
10-
<Router>
11-
<Routes>
12-
<Route path='/' element={<LandingPage />} />
13-
<Route path='/landing' element={<LandingPage />} />
14-
<Route path='/landing/:location' element={<LandingPage />} />
15-
<Route path='/landing/:category/:content' element={<LandingPage />} />
20+
<Routes>
21+
<Route path='/' element={<HomeView />}>
1622
<Route
17-
path='/landing/:category/:content/:project'
18-
element={<LandingPage />}
19-
/>
20-
<Route path='/home' element={<HomeView />} />
21-
<Route path='/home/:category/:content' element={<HomeView />} />
22-
<Route
23-
path='/home/:category/:content/:project'
24-
element={<HomeView />}
25-
/>
26-
</Routes>
27-
</Router>
23+
path='/:landingOrHome'
24+
element={<HomeViewContent currentContent={"Deerfall"} />}>
25+
<Route
26+
path=':category1'
27+
element={<HomeViewContent currentContent={"Deerfall"} />}>
28+
<Route
29+
path=':gameOrWeb'
30+
element={<HomeViewContent currentContent={"Deerfall"} />}>
31+
<Route
32+
path=':project'
33+
element={<HomeViewContent currentContent={"Deerfall"} />}
34+
/>
35+
</Route>
36+
</Route>
37+
</Route>
38+
<Route path='404NotFound' element={<ErrorNotFound />} />
39+
<Route path='*' element={<ErrorNotFound />} />
40+
</Route>
41+
</Routes>
2842
<WIPDisclaimer />
2943
</div>
3044
);
3145
}
3246

47+
// <Route path='/' element={<LandingPage />} />
48+
// <Route path='/landing' element={<LandingPage />}>
49+
// <Route path='/landing/:category' element={<LandingPage />} />
50+
// <Route
51+
// path='/landing/:category/:content'
52+
// element={<LandingPage />}
53+
// />
54+
// <Route
55+
// path='/landing/:category/:content/:project'
56+
// element={<LandingPage />}
57+
// />
58+
// </Route>
59+
// <Route path='/home' element={<HomeView />}>
60+
// <Route path='/home/:category/:content' element={<HomeView />} />
61+
// <Route
62+
// path='/home/:category/:content/:project'
63+
// element={<HomeView />}
64+
// />
65+
// </Route>
66+
3367
export default App;

‎src/AppConfig.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2-
"hueAnimDuration": 4000,
3-
"hueAnimDuration_Slow": 10000
2+
"hueAnimDuration": 7000,
3+
"hueAnimDuration_Slow": 10000,
4+
"projectURL_Params": ["deerfall", "mediamatchup"]
45
}

‎src/components/ErrorNotFound.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import "./styles/ErrorNotFound.css";
2+
3+
const ErrorNotFound = () => {
4+
return (
5+
<div className='ErrorNotFound'>
6+
<p>404</p>
7+
<p>NotFound</p>
8+
</div>
9+
);
10+
};
11+
12+
export default ErrorNotFound;

‎src/components/HomeView.tsx

Lines changed: 75 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,106 @@
11
import "./styles/HomeView.css";
2-
import { useLocation, useNavigate } from "react-router-dom";
2+
import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
33
import { useContext, useEffect, useState } from "react";
44
import HomeViewHeader from "./HomeViewHeader";
55
import HomeViewFooter from "./HomeViewFooter";
6-
import HomeViewContent from "./HomeViewContent";
7-
import StyleContext from "../contexts/StyleContext";
6+
import AppContext from "../contexts/AppContext";
87
import AppConfig from "../AppConfig.json";
8+
import LandingPage from "./LandingPage";
99

1010
interface Props {}
1111

1212
const HomeView = ({}: Props) => {
13-
// - - - - GENERAL STATES - - - -
14-
const { hueRotation, setHueDuration } = useContext(StyleContext);
13+
// - - - - - NAVIGATION - - - - -
14+
const location = useLocation();
15+
const navigate = useNavigate();
16+
// Valid URL Parameter Options to check against
17+
let { landingOrHome, category1, gameOrWeb, project } = useParams();
18+
const param1_Opts = ["landing", "home"];
19+
const param2_Opts = ["portfolio", "blog", "introduction", "intro"];
20+
const param3_Opts = ["gamedev", "webdev"];
21+
const param4_Opts = AppConfig.projectURL_Params;
22+
// useStates for Interfacing with URL Params
23+
const [param1, setParam1] = useState<string>("");
24+
const [param2, setParam2] = useState<string>("");
25+
const [param3, setParam3] = useState<string>("");
26+
const [param4, setParam4] = useState<string>("");
27+
const [allParamsObj, setAllParamsObj] = useState<any>({
28+
param1,
29+
param2,
30+
param3,
31+
param4,
32+
});
33+
const setParamsArray = [setParam1, setParam2, setParam3, setParam4];
34+
// check if this is the landing page
35+
const [isLanding, setIsLanding] = useState<boolean>(false);
36+
// - - - - CONTEXT - - - -
37+
const { hueRotation, setHueDuration } = useContext(AppContext);
1538
// - - - - - TITLES AND TEXT - - - - -
16-
const [currentProject, setCurrentProject] = useState<string>("Deerfall");
39+
const [currentContent, setCurrentContent] = useState<string>("Deerfall");
1740
const [title, setTitle] = useState<string>("Dev Blog");
1841
const [subtitle, setSubtitle] = useState<string>("Welcome! ");
1942
const [subEmoji, setSubEmoji] = useState<string>(" 🙂");
20-
// - - - - - LINKS - - - - -
21-
const [gameDevLink, setGameDevLink] = useState<string>("");
22-
const [webDevLink, setWebDevLink] = useState<string>("");
23-
const [portfolioLink, setPortfolioLink] = useState<string>("");
24-
const [blogLink, setBlogLink] = useState<string>("");
25-
const [isPortfolio, setIsPortfolio] = useState<boolean>(true);
26-
const [isGameDev, setIsGameDev] = useState<boolean>(true);
27-
const navigate = useNavigate();
28-
const currentPath = useLocation().pathname;
2943
// - - - - - PROJECTS - - - - -
3044
const gameDevProjList = ["Deerfall"];
3145
const webDevProjList = ["MediaMatchup"];
3246

33-
useEffect(() => {
34-
if (currentPath.includes("/gamedev/portfolio")) {
35-
if (currentPath.includes("home/")) {
36-
navigate(`/home/gamedev/portfolio/${currentProject}`);
37-
}
38-
setTitle("GameDev Portfolio");
39-
setWebDevLink(`/home/webdev/portfolio/${currentProject}`);
40-
setBlogLink(`/home/gamedev/blog/${currentProject}`);
41-
setIsPortfolio(true);
42-
setIsGameDev(true);
43-
} else if (currentPath.includes("/gamedev/blog")) {
44-
if (currentPath.includes("home/")) {
45-
navigate(`/home/gamedev/blog/${currentProject}`);
46-
}
47-
setTitle("GameDev Blog");
48-
setWebDevLink(`/home/webdev/blog/${currentProject}`);
49-
setPortfolioLink(`/home/gamedev/portfolio/${currentProject}`);
50-
setIsPortfolio(false);
51-
setIsGameDev(true);
52-
} else if (currentPath.includes("/webdev/portfolio")) {
53-
if (currentPath.includes("home/")) {
54-
navigate(`/home/webdev/portfolio/${currentProject}`);
55-
}
56-
setTitle("WebDev Portfolio");
57-
setGameDevLink(`/home/gamedev/portfolio/${currentProject}`);
58-
setBlogLink(`/home/webdev/blog/${currentProject}`);
59-
setIsPortfolio(true);
60-
setIsGameDev(false);
61-
} else if (currentPath.includes("/webdev/blog")) {
62-
if (currentPath.includes("home/")) {
63-
navigate(`/home/webdev/blog/${currentProject}`);
64-
}
65-
setTitle("WebDev Blog");
66-
setGameDevLink(`/home/gamedev/blog/${currentProject}`);
67-
setPortfolioLink(`/home/webdev/portfolio/${currentProject}`);
68-
setIsPortfolio(false);
69-
setIsGameDev(false);
47+
// - - - - - FUNCTIONS - - - - -
48+
const checkURL = () => {
49+
let URLSegments = [landingOrHome, category1, gameOrWeb, project];
50+
let paramArray = [param1_Opts, param2_Opts, param3_Opts, param4_Opts];
51+
if (location.pathname === "/") {
52+
navigate("/landing");
53+
setIsLanding(true);
54+
} else if (location.pathname === "/landing") {
55+
setIsLanding(true);
7056
}
71-
if (currentPath.includes("/gamedev/")) {
72-
setCurrentProject(gameDevProjList[0]);
73-
} else if (currentPath.includes("/webdev/")) {
74-
setCurrentProject(webDevProjList[0]);
57+
for (let i = 0; i < URLSegments.length; i++) {
58+
if (URLSegments[i]) {
59+
let found = paramArray[i].find((item) => item === URLSegments[i]);
60+
if (found === undefined) {
61+
navigate("/404NotFound");
62+
} else {
63+
setParamsArray[i](found);
64+
}
65+
}
7566
}
67+
};
68+
69+
// - - - - - useEffects - - - - -
70+
useEffect(() => {
71+
setAllParamsObj({ param1, param2, param3, param4 });
72+
}, [param1, param2, param3, param4]);
7673

77-
if (hueRotation != AppConfig.hueAnimDuration_Slow) {
78-
setHueDuration(AppConfig.hueAnimDuration_Slow);
74+
useEffect(() => {
75+
if (!isLanding) {
76+
checkURL();
77+
if (hueRotation != AppConfig.hueAnimDuration_Slow) {
78+
setHueDuration(AppConfig.hueAnimDuration_Slow);
79+
}
7980
}
80-
}, [currentPath]);
81+
console.log(category1);
82+
}, [location]);
8183

84+
// - - - - - JSX - - - - -
8285
return (
8386
<div className='HomeView'>
87+
{isLanding ? (
88+
<LandingPage
89+
setIsLanding={setIsLanding}
90+
setParamsArray={setParamsArray}
91+
/>
92+
) : (
93+
""
94+
)}
8495
<HomeViewHeader
85-
isPortfolio={isPortfolio}
86-
gamedevOrWebdev={isGameDev}
87-
hueRotation={hueRotation}
88-
title={title}
8996
subtitle={subtitle}
9097
subEmoji={subEmoji}
91-
gameDevLink={gameDevLink}
92-
webDevLink={webDevLink}
93-
portfolioLink={portfolioLink}
94-
currentProject={currentProject}
95-
blogLink={blogLink}
96-
/>
97-
<HomeViewContent
98-
pathname={currentPath}
99-
isPortfolio={isPortfolio}
100-
currentProject={currentProject}
101-
/>
102-
<HomeViewFooter
103-
pathname={currentPath}
104-
gamedevOrWebdev={isGameDev}
105-
hueRotation={hueRotation}
106-
gameDevLink={gameDevLink}
107-
webDevLink={webDevLink}
108-
currentProject={currentProject}
98+
currentContent={currentContent}
99+
allParamsObj={allParamsObj}
100+
isLanding={isLanding}
109101
/>
102+
<Outlet />
103+
<HomeViewFooter currentContent={"deerfall"} allParamsObj={allParamsObj} />
110104
</div>
111105
);
112106
};

‎src/components/HomeViewContent.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,23 @@ import Deerfall from "./projects/Deerfall";
55
import MediaMatchup from "./projects/MediaMatchup";
66

77
interface Props {
8-
pathname: string;
9-
isPortfolio: boolean;
10-
currentProject: string;
8+
currentContent: string;
119
}
1210

13-
const HomeViewContent = ({ pathname, isPortfolio, currentProject }: Props) => {
11+
const HomeViewContent = ({ currentContent }: Props) => {
1412
// - - - - States - - - -
1513
// toggleQueue false = projQueue1, toggleQueue true = projQueue2
1614
const [toggleQueue, setToggleQueue] = useState(false);
1715
// - - - - Projects - - - -
1816
const allProjList = {
19-
Deerfall: <Deerfall isPortfolio={isPortfolio} />,
20-
MediaMatchup: <MediaMatchup isPortfolio={isPortfolio} />,
17+
Deerfall: <Deerfall isPortfolio={true} />,
18+
MediaMatchup: <MediaMatchup isPortfolio={true} />,
2119
};
2220
const gameDevProjList = {
23-
Deerfall: <Deerfall isPortfolio={isPortfolio} />,
21+
Deerfall: <Deerfall isPortfolio={true} />,
2422
};
2523
const webDevProjList = {
26-
MediaMatchup: <MediaMatchup isPortfolio={isPortfolio} />,
24+
MediaMatchup: <MediaMatchup isPortfolio={true} />,
2725
};
2826
const [currProjArray, setCurrProjArray] = useState<JSX.Element[]>([]);
2927
// - - - - Transitions - - - -
@@ -36,8 +34,8 @@ const HomeViewContent = ({ pathname, isPortfolio, currentProject }: Props) => {
3634
});
3735

3836
useEffect(() => {
39-
setCurrProjArray([eval(`allProjList.${currentProject}`)]);
40-
}, [currentProject]);
37+
setCurrProjArray([eval(`allProjList.${currentContent}`)]);
38+
}, [currentContent]);
4139

4240
return (
4341
<div className='HomeViewContent'>

0 commit comments

Comments
 (0)