Skip to content

Commit 8c14ff3

Browse files
JS-GitRepoJS-GitRepo
committed
refactored context, seperating 'style' from auth, and modifying the way react spring animations work and where they are located. Still working on a bug where hueRotation resets the animation of the entry links
1 parent 4e1dd0b commit 8c14ff3

25 files changed

+2874
-3132
lines changed

‎package-lock.json‎

Lines changed: 2724 additions & 2974 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"react-dom": "^18.0.0",
1717
"react-router-dom": "^6.3.0",
1818
"react-scripts": "5.0.1",
19-
"react-spring": "^9.4.5",
19+
"react-spring": "9.4.5",
2020
"typescript": "^4.6.3",
2121
"web-vitals": "^2.1.4"
2222
},

‎src/App.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from 'react';
2-
import { render, screen } from '@testing-library/react';
3-
import App from './App';
1+
import React from "react";
2+
import { render, screen } from "@testing-library/react";
3+
import App from "./App";
44

5-
test('renders learn react link', () => {
5+
test("renders learn react link", () => {
66
render(<App />);
77
const linkElement = screen.getByText(/learn react/i);
88
expect(linkElement).toBeInTheDocument();

‎src/App.tsx‎

Lines changed: 9 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,29 @@
11
import "./App.css";
2-
import {
3-
BrowserRouter as Router,
4-
Route,
5-
Routes,
6-
useLocation,
7-
} from "react-router-dom";
2+
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
83
import LandingPage from "./components/LandingPage";
94
import HomeView from "./components/HomeView";
105
import { useSpring } from "react-spring";
116
import { useState } from "react";
127
import WIPDisclaimer from "./components/WIPDisclaimer";
138

149
function App() {
15-
const [hueFlip, setHueFlip] = useState<boolean>(false);
16-
const [bgAnimOff, setBgAnimOff] = useState<boolean>(false);
17-
const [hueDuration, setHueDuration] = useState<number>(4000);
18-
const hueRotation = useSpring({
19-
to: {
20-
filter: "hue-rotate(130deg) saturate(80%) sepia(30%)",
21-
},
22-
from: {
23-
filter: "hue-rotate(0deg) saturate(100%) sepia(0%)",
24-
},
25-
reset: false,
26-
cancel: bgAnimOff,
27-
reverse: hueFlip,
28-
delay: 1000,
29-
config: { duration: hueDuration, tension: 280, friction: 60 },
30-
onRest: () => setHueFlip(!hueFlip),
31-
});
32-
3310
return (
3411
<div className='App'>
3512
<Router>
3613
<Routes>
37-
<Route
38-
path='/'
39-
element={
40-
<LandingPage
41-
hueRotation={hueRotation}
42-
setHueDuration={setHueDuration}
43-
/>
44-
}
45-
/>
46-
<Route
47-
path='/landing'
48-
element={
49-
<LandingPage
50-
hueRotation={hueRotation}
51-
setHueDuration={setHueDuration}
52-
/>
53-
}
54-
/>
55-
<Route
56-
path='/landing/:location'
57-
element={
58-
<LandingPage
59-
hueRotation={hueRotation}
60-
setHueDuration={setHueDuration}
61-
/>
62-
}
63-
/>
64-
<Route
65-
path='/landing/:category/:content'
66-
element={
67-
<LandingPage
68-
hueRotation={hueRotation}
69-
setHueDuration={setHueDuration}
70-
/>
71-
}
72-
/>
14+
<Route path='/' element={<LandingPage />} />
15+
<Route path='/landing' element={<LandingPage />} />
16+
<Route path='/landing/:location' element={<LandingPage />} />
17+
<Route path='/landing/:category/:content' element={<LandingPage />} />
7318
<Route
7419
path='/landing/:category/:content/:project'
75-
element={
76-
<LandingPage
77-
hueRotation={hueRotation}
78-
setHueDuration={setHueDuration}
79-
/>
80-
}
81-
/>
82-
<Route
83-
path='/home'
84-
element={
85-
<HomeView
86-
hueRotation={hueRotation}
87-
setHueDuration={setHueDuration}
88-
/>
89-
}
90-
/>
91-
<Route
92-
path='/home/:category/:content'
93-
element={
94-
<HomeView
95-
hueRotation={hueRotation}
96-
setHueDuration={setHueDuration}
97-
/>
98-
}
20+
element={<LandingPage />}
9921
/>
22+
<Route path='/home' element={<HomeView />} />
23+
<Route path='/home/:category/:content' element={<HomeView />} />
10024
<Route
10125
path='/home/:category/:content/:project'
102-
element={
103-
<HomeView
104-
hueRotation={hueRotation}
105-
setHueDuration={setHueDuration}
106-
/>
107-
}
26+
element={<HomeView />}
10827
/>
10928
</Routes>
11029
</Router>

‎src/components/HomeView.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
1-
import "./HomeView.css";
2-
import { Navigate, useLocation, useNavigate } from "react-router-dom";
3-
import { useEffect, useState } from "react";
1+
import "./styles/HomeView.css";
2+
import { useLocation, useNavigate } from "react-router-dom";
3+
import { useContext, useEffect, useState } from "react";
44
import HomeViewHeader from "./HomeViewHeader";
55
import HomeViewFooter from "./HomeViewFooter";
66
import HomeViewContent from "./HomeViewContent";
77
import { SpringValue } from "react-spring";
8+
import StyleContext from "../contexts/StyleContext";
89

9-
interface Props {
10-
hueRotation: {
11-
filter: SpringValue<string>;
12-
};
13-
setHueDuration: React.Dispatch<React.SetStateAction<number>>;
14-
}
10+
interface Props {}
1511

16-
const HomeView = ({ hueRotation, setHueDuration }: Props) => {
12+
const HomeView = ({}: Props) => {
1713
// - - - - GENERAL STATES - - - -
1814
const [firstRender, setFirstRender] = useState<boolean>(true);
15+
const { hueRotation, setHueDuration } = useContext(StyleContext);
1916
// - - - - - TITLES AND TEXT - - - - -
2017
const [currentProject, setCurrentProject] = useState<string>("Deerfall");
2118
const [title, setTitle] = useState<string>("Dev Blog");

‎src/components/HomeViewContent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useEffect, useState } from "react";
22
import { animated, useTransition } from "react-spring";
3-
import "./HomeViewContent.css";
3+
import "./styles/HomeViewContent.css";
44
import Deerfall from "./projects/Deerfall";
55
import MediaMatchup from "./projects/MediaMatchup";
66

‎src/components/HomeViewFooter.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Link } from "react-router-dom";
22
import { animated, SpringValue } from "react-spring";
3-
import "./HomeViewFooter.css";
3+
import "./styles/HomeViewFooter.css";
44

55
interface Props {
66
pathname: string;
@@ -24,15 +24,15 @@ const HomeViewFooter = ({
2424
const currentYear = new Date();
2525

2626
return (
27-
<div className="HomeViewFooter">
28-
<div className="project-nav-ctr">
29-
<div className="project-nav">
30-
<span className="material-symbols-outlined">chevron_left</span>
27+
<div className='HomeViewFooter'>
28+
<div className='project-nav-ctr'>
29+
<div className='project-nav'>
30+
<span className='material-symbols-outlined'>chevron_left</span>
3131
<h2>{currentProject}</h2>
32-
<span className="material-symbols-outlined">chevron_right</span>
32+
<span className='material-symbols-outlined'>chevron_right</span>
3333
</div>
3434

35-
<div className="project-nav-type-cat">
35+
<div className='project-nav-type-cat'>
3636
<Link
3737
to={gameDevLink}
3838
className={gamedevOrWebdev ? "highlighted-link" : ""}>
@@ -50,7 +50,7 @@ const HomeViewFooter = ({
5050
</div>
5151
</div>
5252

53-
<div className="rights-ctr">
53+
<div className='rights-ctr'>
5454
<p>
5555
<animated.span
5656
className={"highlighted-link"}

‎src/components/HomeViewHeader.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useState } from "react";
22
import { Link } from "react-router-dom";
33
import { animated, SpringValue } from "react-spring";
4-
import "./HomeViewHeader.css";
4+
import "./styles/HomeViewHeader.css";
55

66
interface Props {
77
title: string;
@@ -34,28 +34,28 @@ const HomeViewHeader = ({
3434
}: Props) => {
3535
// 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
3636
return (
37-
<div className="HomeViewHeader">
38-
<Link className="title-ctr" to={{ pathname: "/" }}>
37+
<div className='HomeViewHeader'>
38+
<Link className='title-ctr' to={{ pathname: "/" }}>
3939
<h1>
4040
{`Jake's `}
41-
<animated.span style={hueRotation} className="highlighted-link">
41+
<animated.span style={hueRotation} className='highlighted-link'>
4242
{title}
4343
</animated.span>
4444
</h1>
45-
<p className="subtitle">
45+
<p className='subtitle'>
4646
{subtitle}
47-
<span className="emoji">{subEmoji}</span>
47+
<span className='emoji'>{subEmoji}</span>
4848
</p>
4949
</Link>
5050

51-
<div className="project-nav-ctr">
52-
<div className="project-nav">
53-
<span className="material-symbols-outlined">chevron_left</span>
51+
<div className='project-nav-ctr'>
52+
<div className='project-nav'>
53+
<span className='material-symbols-outlined'>chevron_left</span>
5454
<h2>{currentProject}</h2>
55-
<span className="material-symbols-outlined">chevron_right</span>
55+
<span className='material-symbols-outlined'>chevron_right</span>
5656
</div>
5757

58-
<div className="project-nav-type-cat">
58+
<div className='project-nav-type-cat'>
5959
<Link
6060
to={gameDevLink}
6161
className={gamedevOrWebdev ? "highlighted-link" : ""}>
@@ -73,7 +73,7 @@ const HomeViewHeader = ({
7373
</div>
7474
</div>
7575

76-
<div className="nav-ctr">
76+
<div className='nav-ctr'>
7777
<ul>
7878
<li>
7979
<Link

‎src/components/LandingPage.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
11
import { useContext, useEffect, useState } from "react";
22
import { useLocation, useNavigate } from "react-router-dom";
3-
import "./LandingPage.css";
3+
import "./styles/LandingPage.css";
44
import LandingPageLink from "./LandingPageLink";
55
import { animated, SpringValue, useTransition } from "react-spring";
66
import HomeView from "./HomeView";
77
import AuthContext from "../contexts/AuthContext";
88
import pixelBG from "../img/pixelBG_LowRes.png";
99
import pixelFadeBG from "../img/animated-14fps.png";
1010
import PersonalIntro from "./PersonalIntro";
11+
import StyleContext from "../contexts/StyleContext";
1112

12-
interface Props {
13-
hueRotation: {
14-
filter: SpringValue<string>;
15-
};
16-
setHueDuration: React.Dispatch<React.SetStateAction<number>>;
17-
}
13+
interface Props {}
1814

19-
const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
15+
const LandingPage = ({}: Props) => {
2016
// - - - - - LINK FUNCTIONALITY - - - - -
2117
const [currentDisplay, setCurrentDisplay] = useState<string>("");
2218
const [firstRender, setFirstRender] = useState<boolean>(true);
@@ -25,6 +21,7 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
2521
const [link2Text, setLink2Text] = useState<string>("");
2622
const [link2Path, setLink2Path] = useState<string>("");
2723
const { currentPathContext, setCurrentPathContext } = useContext(AuthContext);
24+
const { hueRotation, setHueDuration } = useContext(StyleContext);
2825
const currentPath = useLocation().pathname;
2926
const navigate = useNavigate();
3027

@@ -108,30 +105,27 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
108105
currentDisplay={currentDisplay}
109106
linkText={currentDisplay}
110107
pathName={"/"}
111-
className={"lp-link"}
112108
isH1={true}
113109
/>
114110
</animated.div>
115111
) : (
116112
""
117113
)
118114
)}
119-
<PersonalIntro />
115+
{/* <PersonalIntro /> */}
120116
{fadeOut((style: any, item: any) =>
121117
item ? (
122118
<animated.div className='nav-ctr' style={style}>
123119
<LandingPageLink
124120
currentDisplay={currentDisplay}
125121
linkText={link1Text}
126122
pathName={link1Path}
127-
className={"lp-link"}
128123
isH1={false}
129124
/>
130125
<LandingPageLink
131126
currentDisplay={currentDisplay}
132127
linkText={link2Text}
133128
pathName={link2Path}
134-
className={"lp-link"}
135129
isH1={false}
136130
/>
137131
</animated.div>
@@ -149,7 +143,7 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
149143
</div>
150144
</div>
151145
<div className={`HomeView-ctr ${hideHV}`}>
152-
<HomeView hueRotation={hueRotation} setHueDuration={setHueDuration} />
146+
<HomeView />
153147
</div>
154148
</div>
155149
);

0 commit comments

Comments
 (0)