Skip to content

Commit f44d3cd

Browse files
JS-GitRepoJS-GitRepo
committed
new navigation now applied to footer, along with styling changes to accompany new navigation
1 parent 6fd0362 commit f44d3cd

File tree

13 files changed

+209
-221
lines changed

13 files changed

+209
-221
lines changed

‎src/App.tsx‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import HomeView from "./components/HomeView";
55
import WIPDisclaimer from "./components/WIPDisclaimer";
66
import HomeViewHeader from "./components/HomeViewHeader";
77
import ErrorNotFound from "./components/ErrorNotFound";
8+
import HomeViewContent from "./components/HomeViewContent";
89

910
// 9-28-22
1011
// 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.
@@ -18,17 +19,29 @@ function App() {
1819
<div className='App'>
1920
<Routes>
2021
<Route path='/' element={<HomeView />}>
21-
<Route path='/:landingOrHome' element={<HomeView />}>
22-
<Route path='introduction' element={<HomeView />} />
23-
<Route path=':category1' element={<HomeView />}>
24-
<Route path=':gameOrWeb' element={<HomeView />}>
25-
<Route path=':project' element={<HomeView />} />
22+
<Route
23+
path='/:landingOrHome'
24+
element={<HomeViewContent currentContent={"Deerfall"} />}>
25+
<Route
26+
path='introduction'
27+
element={<HomeViewContent currentContent={"Deerfall"} />}
28+
/>
29+
<Route
30+
path=':category1'
31+
element={<HomeViewContent currentContent={"Deerfall"} />}>
32+
<Route
33+
path=':gameOrWeb'
34+
element={<HomeViewContent currentContent={"Deerfall"} />}>
35+
<Route
36+
path=':project'
37+
element={<HomeViewContent currentContent={"Deerfall"} />}
38+
/>
2639
</Route>
2740
</Route>
2841
</Route>
42+
<Route path='404NotFound' element={<ErrorNotFound />} />
43+
<Route path='*' element={<ErrorNotFound />} />
2944
</Route>
30-
<Route path='404NotFound' element={<ErrorNotFound />} />
31-
<Route path='*' element={<ErrorNotFound />} />
3245
</Routes>
3346
<WIPDisclaimer />
3447
</div>

‎src/components/HomeView.tsx‎

Lines changed: 44 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,79 @@
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";
98

109
interface Props {}
1110

1211
const HomeView = ({}: Props) => {
13-
// - - - - GENERAL STATES - - - -
14-
const { hueRotation, setHueDuration } = useContext(StyleContext);
12+
// - - - - - NAVIGATION - - - - -
13+
const location = useLocation();
14+
const navigate = useNavigate();
15+
// Valid URL Parameter Options to check against
16+
let { landingOrHome, category1, gameOrWeb, project } = useParams();
17+
const param1_Opts = ["landing", "home"];
18+
const param2_Opts = ["portfolio", "blog", "introduction", "intro"];
19+
const param3_Opts = ["gamedev", "webdev"];
20+
const param4_Opts = AppConfig.projectURL_Params;
21+
// useStates for Interfacing with URL Params
22+
const [param1, setParam1] = useState("home");
23+
const [param2, setParam2] = useState("portfolio");
24+
const [param3, setParam3] = useState("gamedev");
25+
const [param4, setParam4] = useState("deerfall");
26+
const [paramObj, setParamObj] = useState({ param1, param2, param3, param4 });
27+
// - - - - CONTEXT - - - -
28+
const { hueRotation, setHueDuration } = useContext(AppContext);
1529
// - - - - - TITLES AND TEXT - - - - -
1630
const [currentContent, setCurrentContent] = useState<string>("Deerfall");
1731
const [title, setTitle] = useState<string>("Dev Blog");
1832
const [subtitle, setSubtitle] = useState<string>("Welcome! ");
1933
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;
2934
// - - - - - PROJECTS - - - - -
3035
const gameDevProjList = ["Deerfall"];
3136
const webDevProjList = ["MediaMatchup"];
3237

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

7962
if (hueRotation != AppConfig.hueAnimDuration_Slow) {
8063
setHueDuration(AppConfig.hueAnimDuration_Slow);
8164
}
82-
}, [currentPath]);
65+
}, [location]);
8366

8467
return (
8568
<div className='HomeView'>
8669
<HomeViewHeader
8770
subtitle={subtitle}
8871
subEmoji={subEmoji}
89-
gameDevLink={gameDevLink}
90-
webDevLink={webDevLink}
91-
currentContent={currentContent}
92-
/>
93-
<HomeViewContent
94-
pathname={currentPath}
95-
isPortfolio={isPortfolio}
96-
currentContent={currentContent}
97-
/>
98-
<HomeViewFooter
99-
pathname={currentPath}
100-
gamedevOrWebdev={isGameDev}
101-
hueRotation={hueRotation}
102-
gameDevLink={gameDevLink}
103-
webDevLink={webDevLink}
10472
currentContent={currentContent}
105-
portfolioLink={portfolioLink}
106-
blogLink={blogLink}
107-
isPortfolio={isPortfolio}
73+
paramObj={paramObj}
10874
/>
75+
<Outlet />
76+
<HomeViewFooter currentContent={"deerfall"} paramObj={paramObj} />
10977
</div>
11078
);
11179
};

‎src/components/HomeViewContent.tsx‎

Lines changed: 5 additions & 7 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;
108
currentContent: string;
119
}
1210

13-
const HomeViewContent = ({ pathname, isPortfolio, currentContent }: 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 - - - -

‎src/components/HomeViewFooter.tsx‎

Lines changed: 41 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,22 @@
1-
import { Link, NavLink } from "react-router-dom";
2-
import { animated, SpringValue } from "react-spring";
1+
import { useContext } from "react";
2+
import { NavLink } from "react-router-dom";
3+
import { animated } from "react-spring";
4+
import AppContext from "../contexts/AppContext";
35
import "./styles/HomeViewFooter.css";
46

57
interface Props {
6-
pathname: string;
7-
gamedevOrWebdev: boolean;
8-
gameDevLink: string;
9-
webDevLink: string;
10-
portfolioLink: string;
11-
blogLink: string;
12-
isPortfolio: boolean;
138
currentContent: string;
14-
hueRotation: {
15-
filter: SpringValue<string>;
9+
paramObj: {
10+
param1: string;
11+
param2: string;
12+
param3: string;
13+
param4: string;
1614
};
1715
}
1816

19-
const HomeViewFooter = ({
20-
pathname,
21-
gamedevOrWebdev,
22-
hueRotation,
23-
gameDevLink,
24-
webDevLink,
25-
currentContent,
26-
portfolioLink,
27-
blogLink,
28-
isPortfolio,
29-
}: Props) => {
17+
const HomeViewFooter = ({ currentContent, paramObj }: Props) => {
3018
const currentYear = new Date();
19+
const { hueRotation } = useContext(AppContext);
3120

3221
return (
3322
<div className='HomeViewFooter'>
@@ -38,26 +27,36 @@ const HomeViewFooter = ({
3827
<span className='material-symbols-outlined'>chevron_right</span>
3928
</div>
4029

41-
<div className='project-nav-type-cat'>
42-
<NavLink
43-
to={portfolioLink}
44-
className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
45-
<animated.p style={isPortfolio ? hueRotation : {}}>
46-
Portfolio
47-
</animated.p>
48-
</NavLink>
49-
<NavLink
50-
to={blogLink}
51-
className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
52-
<animated.p style={isPortfolio ? {} : hueRotation}>Blog</animated.p>
53-
</NavLink>
54-
<NavLink
55-
to={blogLink}
56-
className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
57-
<animated.p style={isPortfolio ? {} : hueRotation}>
58-
Intro
59-
</animated.p>
60-
</NavLink>
30+
<div className='nav-ctr'>
31+
<ul>
32+
<li>
33+
<NavLink
34+
to={`/home/portfolio/${paramObj.param3}`}
35+
className={({ isActive }) =>
36+
isActive ? "highlighted-link" : ""
37+
}>
38+
<animated.p style={hueRotation}>portfolio</animated.p>
39+
</NavLink>
40+
</li>
41+
<li>
42+
<NavLink
43+
to={`/home/blog/${paramObj.param3}`}
44+
className={({ isActive }) =>
45+
isActive ? "highlighted-link" : ""
46+
}>
47+
<animated.p style={hueRotation}>blog</animated.p>
48+
</NavLink>
49+
</li>
50+
<li>
51+
<NavLink
52+
to={`/home/introduction`}
53+
className={({ isActive }) =>
54+
isActive ? "highlighted-link" : ""
55+
}>
56+
<animated.p style={hueRotation}>intro</animated.p>
57+
</NavLink>
58+
</li>
59+
</ul>
6160
</div>
6261
</div>
6362

0 commit comments

Comments
 (0)