Skip to content

Commit 6c4e929

Browse files
JS-GitRepoJS-GitRepo
committed
navigation modified further to better facilitatehistory (going back or forward) and simplified HomeView function logic
1 parent abb0576 commit 6c4e929

File tree

5 files changed

+69
-108
lines changed

5 files changed

+69
-108
lines changed

‎src/components/HomeView.tsx

Lines changed: 43 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import "./styles/HomeView.css";
2-
import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
2+
import { useLocation, useNavigate, useParams } from "react-router-dom";
33
import { useContext, useEffect, useState } from "react";
44
import HomeViewHeader from "./HomeViewHeader";
55
import HomeViewFooter from "./HomeViewFooter";
@@ -20,18 +20,17 @@ const HomeView = ({}: Props) => {
2020
const param2_Opts = ["portfolio", "blog", "introduction", "intro"];
2121
const param3_Opts = ["gamedev", "webdev"];
2222
const param4_Opts = AppConfig.projectURL_Params;
23-
// useStates for Interfacing with URL Params
2423
const [param1, setParam1] = useState<string>("");
2524
const [param2, setParam2] = useState<string>("");
2625
const [param3, setParam3] = useState<string>("");
2726
const [param4, setParam4] = useState<string>("");
28-
const [allParamsObj, setAllParamsObj] = useState<any>({
27+
const [allParamsArray, setAllParamsArray] = useState<string[]>([
2928
param1,
3029
param2,
3130
param3,
3231
param4,
33-
});
34-
const setParamsArray = [setParam1, setParam2, setParam3, setParam4];
32+
]);
33+
const paramStateSet = [setParam1, setParam2, setParam3, setParam4];
3534
// check if this is the landing page
3635
const [isLanding, setIsLanding] = useState<boolean>(false);
3736
// - - - - CONTEXT - - - -
@@ -42,102 +41,87 @@ const HomeView = ({}: Props) => {
4241
// - - - - - PROJECTS - - - - -
4342
const gameDevProjList = ["deerfall"];
4443
const webDevProjList = ["mediamatchup"];
45-
const [currentContent, setCurrentContent] = useState<string | undefined>();
4644

4745
// - - - - - FUNCTIONS - - - - -
48-
const checkDefaultProject = () => {
49-
let isGameDev = param3 === "gamedev";
50-
let isWebDev = param3 === "webdev";
51-
let isGameDevProj = gameDevProjList.includes(param4);
52-
let isWebDevProj = webDevProjList.includes(param4);
53-
// checks location and
54-
if (isGameDev && !isGameDevProj) {
55-
setParam4(gameDevProjList[0]);
56-
} else if (isWebDev && !isWebDevProj) {
57-
setParam4(webDevProjList[0]);
58-
}
59-
};
60-
61-
const checkProjectParams = () => {
62-
let construct_URL = `/${param1}/${param2}/${param3}/${param4}`;
63-
// booleans
64-
let projectIsCurrent_URL = param4 === project;
65-
let isSame_URL = construct_URL === location.pathname;
66-
let isIntroduction_URL = param2 === "introduction";
67-
68-
if (param4 && !projectIsCurrent_URL && !isSame_URL && !isIntroduction_URL) {
69-
navigate(construct_URL);
70-
}
71-
};
7246

7347
const validateURL = () => {
48+
// INITIAL SEGMENT VALIDATION
49+
let tempParams = allParamsArray;
7450
let URLSegments = [landingOrHome, category1, gameOrWeb, project];
7551
let paramArray = [param1_Opts, param2_Opts, param3_Opts, param4_Opts];
76-
// verifies if this should be the landing page
52+
// checks for landing page
7753
if (location.pathname === "/") {
54+
tempParams = [""];
7855
navigate("/landing");
7956
setIsLanding(true);
80-
} else if (location.pathname === "/landing") {
57+
} else if (landingOrHome === "landing") {
58+
tempParams = ["/landing"];
8159
setIsLanding(true);
60+
} else {
61+
setIsLanding(false);
8262
}
83-
// compares segments of the URL against valid options
63+
// loops through each segment and validates it individually
8464
for (let i = 0; i < URLSegments.length; i++) {
8565
if (URLSegments[i]) {
8666
let found = paramArray[i].find((item) => item === URLSegments[i]);
8767
if (found === undefined) {
8868
navigate("/404NotFound");
8969
} else {
90-
setParamsArray[i](found);
70+
// setParamsArray[i](found);
71+
paramStateSet[i](found);
72+
tempParams[i] = found;
9173
}
9274
}
9375
}
76+
// Sets Default Project if none is selected in this category
77+
let isGameDev = tempParams[2] === "gamedev";
78+
let isWebDev = tempParams[2] === "webdev";
79+
let isGameDevProj = gameDevProjList.includes(tempParams[3]);
80+
let isWebDevProj = webDevProjList.includes(tempParams[3]);
81+
82+
if (isGameDev && !isGameDevProj) {
83+
setParam4(gameDevProjList[0]);
84+
tempParams[3] = gameDevProjList[0];
85+
} else if (isWebDev && !isWebDevProj) {
86+
setParam4(webDevProjList[0]);
87+
tempParams[3] = webDevProjList[0];
88+
}
89+
90+
let construct_URL = `/${tempParams[0]}/${tempParams[1]}/${tempParams[2]}/${tempParams[3]}`;
91+
let isSame_URL = construct_URL === location.pathname;
92+
let isIntroduction_URL = tempParams[1] === "introduction";
93+
94+
if (tempParams[3] && !isSame_URL && !isIntroduction_URL) {
95+
navigate(construct_URL, { replace: true });
96+
}
9497
};
9598

9699
// - - - - - useEffects - - - - -
97100
useEffect(() => {
101+
validateURL();
98102
if (!isLanding) {
99-
validateURL();
100103
if (hueRotation != AppConfig.hueAnimDuration_Slow) {
101104
setHueDuration(AppConfig.hueAnimDuration_Slow);
102105
}
103106
}
104-
console.log("- - - - - - - -");
105-
106-
console.log(`individual params: /${param1}/${param2}/${param3}/${param4}`);
107-
console.log(
108-
`params object: /${allParamsObj.param1}/${allParamsObj.param2}/${allParamsObj.param3}/${allParamsObj.param4}`
109-
);
110-
console.log(`current URL: ${location.pathname}`);
111-
console.log("- - - - - - - -");
112107
}, [location]);
113108

109+
// Necessary to update props. Otherwise, props are always a step behind.
114110
useEffect(() => {
115-
setAllParamsObj({ param1, param2, param3, param4 });
111+
setAllParamsArray([param1, param2, param3, param4]);
116112
}, [param1, param2, param3, param4]);
117113

118-
useEffect(() => {
119-
checkDefaultProject();
120-
}, [allParamsObj]);
121-
122114
// - - - - - JSX - - - - -
123115
return (
124116
<div className='HomeView'>
125-
{isLanding ? (
126-
<LandingPage
127-
setIsLanding={setIsLanding}
128-
setParamsArray={setParamsArray}
129-
/>
130-
) : (
131-
""
132-
)}
117+
{isLanding ? <LandingPage setIsLanding={setIsLanding} /> : ""}
133118
<HomeViewHeader
134119
subtitle={subtitle}
135120
subEmoji={subEmoji}
136-
allParams={allParamsObj}
137-
isLanding={isLanding}
121+
allParams={allParamsArray}
138122
/>
139123
<HomeViewContent currentContent={param4} />
140-
<HomeViewFooter allParams={allParamsObj} />
124+
<HomeViewFooter allParams={allParamsArray} />
141125
</div>
142126
);
143127
};

‎src/components/HomeViewFooter.tsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@ import AppContext from "../contexts/AppContext";
55
import "./styles/HomeViewFooter.css";
66

77
interface Props {
8-
allParams: {
9-
param1: string;
10-
param2: string;
11-
param3: string;
12-
param4: string;
13-
};
8+
allParams: string[];
149
}
1510

1611
const HomeViewFooter = ({ allParams }: Props) => {
@@ -22,15 +17,15 @@ const HomeViewFooter = ({ allParams }: Props) => {
2217
<div className='project-nav-ctr'>
2318
<div className='project-nav'>
2419
<span className='material-symbols-outlined'>chevron_left</span>
25-
<h2>{allParams.param4}</h2>
20+
<h2>{allParams[3]}</h2>
2621
<span className='material-symbols-outlined'>chevron_right</span>
2722
</div>
2823

2924
<div className='nav-ctr'>
3025
<ul>
3126
<li>
3227
<NavLink
33-
to={`/${allParams.param1}/portfolio/${allParams.param3}`}
28+
to={`/${allParams[0]}/portfolio/${allParams[2]}`}
3429
className={({ isActive }) =>
3530
isActive ? "highlighted-link" : ""
3631
}>
@@ -39,7 +34,7 @@ const HomeViewFooter = ({ allParams }: Props) => {
3934
</li>
4035
<li>
4136
<NavLink
42-
to={`/${allParams.param1}/blog/${allParams.param3}`}
37+
to={`/${allParams[0]}/blog/${allParams[2]}`}
4338
className={({ isActive }) =>
4439
isActive ? "highlighted-link" : ""
4540
}>
@@ -48,7 +43,7 @@ const HomeViewFooter = ({ allParams }: Props) => {
4843
</li>
4944
<li>
5045
<NavLink
51-
to={`/${allParams.param1}/introduction`}
46+
to={`/${allParams[0]}/introduction`}
5247
className={({ isActive }) =>
5348
isActive ? "highlighted-link" : ""
5449
}>

‎src/components/HomeViewHeader.tsx

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,33 @@
11
import { useContext, useEffect, useReducer, useState } from "react";
2-
import { Link, NavLink } from "react-router-dom";
2+
import { Link, NavLink, useLocation } from "react-router-dom";
33
import { animated } from "react-spring";
44
import AppContext from "../contexts/AppContext";
55
import "./styles/HomeViewHeader.css";
66

77
interface Props {
88
subtitle: string;
99
subEmoji: string;
10-
isLanding: boolean;
11-
allParams: {
12-
param1: string;
13-
param2: string;
14-
param3: string;
15-
param4: string;
16-
};
10+
allParams: string[];
1711
}
1812

19-
const HomeViewHeader = ({
20-
subtitle,
21-
subEmoji,
22-
isLanding,
23-
allParams,
24-
}: Props) => {
13+
const HomeViewHeader = ({ subtitle, subEmoji, allParams }: Props) => {
2514
// GENERAL
15+
const location = useLocation();
2616
const { hueRotation } = useContext(AppContext);
2717
const [isIntro, setIsIntro] = useState<boolean>(false);
28-
const [ignored, forceUpdate] = useReducer((x) => x + 1, 0);
2918

3019
useEffect(() => {
31-
if (allParams.param2 === "introduction") {
20+
if (allParams[1] === "introduction") {
3221
setIsIntro(true);
3322
} else {
3423
setIsIntro(false);
3524
}
36-
}, [allParams.param2]);
37-
38-
useEffect(() => {
39-
forceUpdate();
40-
}, [isLanding]);
25+
}, [allParams]);
4126

4227
// 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
4328
return (
4429
<div className='HomeViewHeader'>
45-
<Link className='title-ctr' to={{ pathname: "/" }}>
30+
<Link className='title-ctr' to={{ pathname: "/landing" }}>
4631
<h1>
4732
{`${isIntro ? "who is " : ""}`}
4833
<animated.span
@@ -52,8 +37,8 @@ const HomeViewHeader = ({
5237
{`${isIntro ? "?" : "'s"} `}
5338
</animated.span>
5439
<animated.span style={hueRotation} className='highlighted-link'>
55-
{isIntro ? "" : `${allParams.param3}`}
56-
{isIntro ? "" : ` ${allParams.param2}`}
40+
{isIntro ? "" : `${allParams[2]}`}
41+
{isIntro ? "" : ` ${allParams[1]}`}
5742
</animated.span>
5843
</h1>
5944
<p className='subtitle'>
@@ -65,18 +50,18 @@ const HomeViewHeader = ({
6550
<div className='project-nav-ctr'>
6651
<div className='project-nav'>
6752
<span className='material-symbols-outlined'>chevron_left</span>
68-
<h2>{allParams.param4}</h2>
53+
<h2>{allParams[3]}</h2>
6954
<span className='material-symbols-outlined'>chevron_right</span>
7055
</div>
7156

7257
<div className='project-nav-type-cat'>
7358
<NavLink
74-
to={`/${allParams.param1}/${allParams.param2}/gamedev`}
59+
to={`/${allParams[0]}/${allParams[1]}/gamedev`}
7560
className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
7661
<animated.p style={hueRotation}>gamedev</animated.p>
7762
</NavLink>
7863
<NavLink
79-
to={`/${allParams.param1}/${allParams.param2}/webdev`}
64+
to={`/${allParams[0]}/${allParams[1]}/webdev`}
8065
className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
8166
<animated.p style={hueRotation}>webdev</animated.p>
8267
</NavLink>
@@ -87,7 +72,7 @@ const HomeViewHeader = ({
8772
<ul>
8873
<li>
8974
<NavLink
90-
to={`/${allParams.param1}/${allParams.param2}/gamedev`}
75+
to={`/${allParams[0]}/${allParams[1]}/gamedev`}
9176
className={({ isActive }) =>
9277
isActive ? "highlighted-link" : ""
9378
}>
@@ -96,7 +81,7 @@ const HomeViewHeader = ({
9681
</li>
9782
<li>
9883
<NavLink
99-
to={`/${allParams.param1}/${allParams.param2}/webdev`}
84+
to={`/${allParams[0]}/${allParams[1]}/webdev`}
10085
className={({ isActive }) =>
10186
isActive ? "highlighted-link" : ""
10287
}>

‎src/components/LandingPage.tsx

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,9 @@ import AppConfig from "../AppConfig.json";
1111

1212
interface Props {
1313
setIsLanding: React.Dispatch<React.SetStateAction<boolean>>;
14-
setParamsArray: React.Dispatch<React.SetStateAction<string>>[];
1514
}
1615

17-
const LandingPage = ({ setIsLanding, setParamsArray }: Props) => {
16+
const LandingPage = ({ setIsLanding }: Props) => {
1817
// - - - - - LINK FUNCTIONALITY - - - - -
1918
const [currentDisplay, setCurrentDisplay] = useState<string>("");
2019
const [firstRender, setFirstRender] = useState<boolean>(true);
@@ -65,7 +64,6 @@ const LandingPage = ({ setIsLanding, setParamsArray }: Props) => {
6564
setCurrBG(pixelFadeBG);
6665
setIsActivePage(false);
6766
setTimeout(() => setIsLanding(false), 1500);
68-
setParamsArray[0]("home");
6967
setHueDuration(AppConfig.hueAnimDuration_Slow);
7068
}
7169

@@ -77,32 +75,25 @@ const LandingPage = ({ setIsLanding, setParamsArray }: Props) => {
7775
setHueDuration(4000);
7876
} else if (currentPath === "/landing") {
7977
setCurrentDisplay("jakesnyder.dev");
80-
setParamsArray[0]("landing");
8178
setLink1Text("Portfolio");
8279
setLink1Path("/landing/portfolio");
8380
setLink2Text("Blog");
8481
setLink2Path("/landing/blog");
8582
setHueDuration(AppConfig.hueAnimDuration);
8683
} else if (currentPath === "/landing/portfolio") {
87-
setParamsArray[1]("portfolio");
8884
setCurrentDisplay("Portfolio");
8985
setLink1Text("Web Dev");
9086
setLink1Path("/home/portfolio/webdev");
9187
setLink2Text("Game Dev");
9288
setLink2Path("/home/portfolio/gamedev");
9389
setHueDuration(AppConfig.hueAnimDuration);
9490
} else if (currentPath === "/landing/blog") {
95-
setParamsArray[1]("blog");
9691
setCurrentDisplay("Blog");
9792
setLink1Text("Web Dev");
9893
setLink1Path("/home/blog/webdev");
9994
setLink2Text("Game Dev");
10095
setLink2Path("/home/blog/gamedev");
10196
setHueDuration(AppConfig.hueAnimDuration);
102-
} else if (currentPath.endsWith("/gamedev")) {
103-
setParamsArray[2]("gamedev");
104-
} else if (currentPath.endsWith("/webdev")) {
105-
setParamsArray[2]("webdev");
10697
}
10798
}, [currentPath]);
10899

‎src/models/ParamObject.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default interface ParamObject {
2+
0: string;
3+
1: string;
4+
2: string;
5+
3: string;
6+
}

0 commit comments

Comments
 (0)