Skip to content

Commit 8b19400

Browse files
SamLarivsSamLarivs
authored
Merge pull request #82 from oslabs-beta/aidanprior/routingFix
fix: routing fix
2 parents 093c07b + c68ce9d commit 8b19400

File tree

11 files changed

+97
-63
lines changed

11 files changed

+97
-63
lines changed

‎client/src/App.tsx‎

Lines changed: 56 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { ReactNode, useState } from 'react';
1+
import React, { ReactNode, useCallback, useEffect, useState } from 'react';
22
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
33

44
import Navbar from './components/Navbar';
@@ -7,12 +7,56 @@ import Home from './pages/Home';
77
import EventsDashboard from './pages/EventsDashboard';
88
import Login from './pages/Login';
99
import SignUp from './pages/SignUp';
10-
import { UserDetails } from './types';
10+
import { AWSCredentials, UserDetails } from './types';
1111

1212
const App: React.FC = () => {
1313
const [isDarkMode, setIsDarkMode] = useState(false); // Dark mode state
1414
const [user, setUser] = useState<UserDetails | null>(null);
1515

16+
const updateCredentials = useCallback(
17+
function (credentials: AWSCredentials): void {
18+
const locallyStoredUser: UserDetails = JSON.parse(
19+
window.localStorage.getItem('user')!
20+
) as UserDetails;
21+
fetch('/credentials', {
22+
method: 'POST',
23+
body: JSON.stringify({
24+
...credentials,
25+
username:
26+
user?.username ?? locallyStoredUser.username ?? 'No Active User',
27+
}),
28+
headers: {
29+
'Content-Type': 'application/json',
30+
},
31+
})
32+
.then((response) => {
33+
if (!response.ok)
34+
throw Error('Server Error while updating aws credentials');
35+
return response.json();
36+
})
37+
.then((data: UserDetails) => {
38+
setUser(data);
39+
window.localStorage.setItem('user', JSON.stringify(data));
40+
})
41+
.catch((error: Error) => {
42+
console.error(error);
43+
});
44+
},
45+
// we don't want to update on user update, because it would create an infinte loop, only on app reload
46+
// eslint-disable-next-line react-hooks/exhaustive-deps
47+
[]
48+
);
49+
50+
// check for a user session and update the user if found
51+
useEffect(() => {
52+
if (window.localStorage.getItem('user')) {
53+
const locallyStoredUser: UserDetails = JSON.parse(
54+
window.localStorage.getItem('user')!
55+
) as UserDetails;
56+
setUser(locallyStoredUser);
57+
}
58+
}, []);
59+
1660
const toggleDarkMode = () => {
1761
setIsDarkMode((prev) => !prev);
1862
document.body.classList.toggle('dark-mode', !isDarkMode); // Toggle class based on state
@@ -47,26 +91,30 @@ const App: React.FC = () => {
4791
setUser={setUser}
4892
/>
4993
<Routes>
94+
<Route path="/" element={<Login setUser={setUser} />} />
5095
<Route path="/login" element={<Login setUser={setUser} />} />
5196
<Route path="/signup" element={<SignUp />} />
5297

5398
<Route
54-
path="/"
55-
element={checkAWSCreds(checkLogin(<Home isDarkMode={isDarkMode} />))}
99+
path="/home"
100+
element={checkLogin(checkAWSCreds(<Home isDarkMode={isDarkMode} />))}
56101
/>
57102
<Route
58103
path="/profile"
59104
element={checkLogin(
60-
<Profile isDarkMode={isDarkMode} user={user} setUser={setUser} />
105+
<Profile
106+
isDarkMode={isDarkMode}
107+
user={user}
108+
updateCredentials={updateCredentials}
109+
/>
61110
)}
62111
/>
63112
<Route
64113
path="/events-dashboard"
65-
element={checkAWSCreds(
66-
checkLogin(<EventsDashboard isDarkMode={isDarkMode} />)
114+
element={checkLogin(
115+
checkAWSCreds(<EventsDashboard isDarkMode={isDarkMode} />)
67116
)}
68117
/>
69-
{/* </>} */}
70118
</Routes>
71119
</Router>
72120
);

‎client/src/components/Navbar.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ const Navbar: React.FC<NavbarProps> = ({
1919
};
2020

2121
const handleLogout = () => {
22-
console.log('User logged out');
2322
setUser(null);
2423
window.localStorage.removeItem('user');
2524
navigate('/login');
@@ -43,12 +42,12 @@ const Navbar: React.FC<NavbarProps> = ({
4342

4443
return (
4544
<nav className={isDarkMode ? 'dark-mode' : ''}>
46-
<Link to="/" className="logo" title="Home">
45+
<Link to="/home" className="logo" title="Home">
4746
<img src={LOGO} alt="Wood Plank T" className="logo-image" />
4847
</Link>
4948
<div className="nav-buttons">
5049
<Link to="/events-dashboard" className="nav-button">
51-
EVENTS DASHBOARD
50+
RECENT EVENTS
5251
</Link>
5352
<button onClick={toggleDarkMode} className="nav-button">
5453
{isDarkMode ? 'LIGHT MODE' : 'DARK MODE'}

‎client/src/components/charts/EventType.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function EventTypeChart() {
2121

2222
useEffect(() => {
2323
setLoading(true);
24-
fetch('/events?countOn=type')
24+
fetch('/events?countOn=name')
2525
.then((response) => {
2626
if (response.ok) return response.json();
2727
throw new Error(response.status + ': ' + response.statusText);
@@ -30,13 +30,13 @@ export default function EventTypeChart() {
3030
setEvents(
3131
(data as CountedEvent[]).map((event) => ({
3232
...event,
33-
type: event.type.replace(/([A-Z])/g, ' $1'),
33+
name: event.name.replace(/([A-Z])/g, ' $1'),
3434
}))
3535
);
3636
setLoading(false);
3737
})
3838
.catch((error) =>
39-
console.warn('Could not fetch event type counts: ', error)
39+
console.warn('Could not fetch event name counts: ', error)
4040
);
4141
}, []);
4242

‎client/src/pages/Home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const Home: React.FC<{ isDarkMode: boolean }> = ({ isDarkMode }) => {
2424
title: 'User Activity',
2525
component: <UserActivityChart />,
2626
},
27-
{ id: 'eventTypes', title: 'Event Types', component: <EventTypeChart /> },
27+
{ id: 'eventTypes', title: 'Event Names', component: <EventTypeChart /> },
2828
{
2929
id: 'eventSources',
3030
title: 'Event Sources',

‎client/src/pages/Login.tsx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useState } from 'react';
22
import { useNavigate, Link } from 'react-router-dom';
33
import { UserDetails } from '../types';
44

@@ -11,17 +11,6 @@ const Login: React.FC<{
1111
const [error, setError] = useState<string | null>(null);
1212
const navigate = useNavigate();
1313

14-
useEffect(() => {
15-
if (window.localStorage.getItem('user')) {
16-
console.log(
17-
'using sessioned user: ',
18-
window.localStorage.getItem('user')
19-
);
20-
setUser(JSON.parse(window.localStorage.getItem('user')!) as UserDetails);
21-
navigate('/profile');
22-
}
23-
}, [navigate, setUser]);
24-
2514
const handleLogin = async (event: React.FormEvent) => {
2615
event.preventDefault();
2716
setError(null);

‎client/src/pages/Profile.tsx‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
import React from 'react';
22
import { AWSCredentials, ProfileProps, UserDetails } from '../types';
33

4-
const Profile: React.FC<ProfileProps> = ({ isDarkMode, user, setUser }) => {
4+
const Profile: React.FC<ProfileProps> = ({
5+
isDarkMode,
6+
user,
7+
updateCredentials,
8+
}) => {
59
function handleCredentialSubmit() {
6-
const creds: AWSCredentials = {
10+
const locallyStoredUser: UserDetails = JSON.parse(
11+
window.localStorage.getItem('user')!
12+
) as UserDetails;
13+
const domCollectedCreds: AWSCredentials = {
714
aws_access_key:
815
(document.getElementById('accessKey') as HTMLInputElement | null)
916
?.value ?? 'Could not find accessKey element',
@@ -14,28 +21,23 @@ const Profile: React.FC<ProfileProps> = ({ isDarkMode, user, setUser }) => {
1421
(document.getElementById('region') as HTMLInputElement | null)?.value ??
1522
'Could not find region element',
1623
};
17-
fetch('/credentials', {
18-
method: 'POST',
19-
body: JSON.stringify({
20-
...creds,
21-
username: user?.username ?? 'Not Logged In',
22-
}),
23-
headers: {
24-
'Content-Type': 'application/json',
25-
},
26-
})
27-
.then((response) => {
28-
if (response.ok) window.alert('Credentials Saved');
29-
else throw Error('Server Error while updating aws credentials');
30-
return response.json();
31-
})
32-
.then((data: UserDetails) => {
33-
setUser(data);
34-
window.localStorage.setItem('user', JSON.stringify(data));
35-
})
36-
.catch((error: Error) => {
37-
console.error(error);
38-
});
24+
console.log(locallyStoredUser);
25+
console.log(domCollectedCreds);
26+
updateCredentials({
27+
aws_access_key:
28+
domCollectedCreds.aws_access_key !== ''
29+
? domCollectedCreds.aws_access_key
30+
: locallyStoredUser.aws_access_key ?? 'No locally stored access key',
31+
aws_secret_access_key:
32+
domCollectedCreds.aws_secret_access_key !== ''
33+
? domCollectedCreds.aws_secret_access_key
34+
: locallyStoredUser.aws_secret_access_key ??
35+
'No locally stored secret access key',
36+
aws_region:
37+
domCollectedCreds.aws_region !== ''
38+
? domCollectedCreds.aws_region
39+
: locallyStoredUser.aws_region ?? 'No locally stored region',
40+
});
3941
}
4042

4143
return (

‎client/src/pages/SignUp.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,7 @@ const SignUp: React.FC = () => {
5252
});
5353

5454
if (response.ok) {
55-
console.log('Sign-up successful!');
56-
navigate('/profile');
55+
navigate('/login');
5756
}
5857
} catch (err) {
5958
setError('Error signing up. Please try again.');

‎client/src/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export interface AWSCredentials {
2424
export interface ProfileProps {
2525
isDarkMode: boolean;
2626
user: UserDetails | null;
27-
setUser: React.Dispatch<React.SetStateAction<UserDetails | null>>;
27+
updateCredentials: (credentials: AWSCredentials) => void;
2828
}
2929

3030
export interface CardProps {

‎compose.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ services:
2525
build:
2626
context: .
2727
container_name: trailguide-server
28-
env_file: .env
2928
environment:
3029
- POSTGRES_PASSWORD=secret
3130
- POSTGRES_USER=tgadmin

‎server/controllers/awsController.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export default {
66
try {
77
const { aws_access_key, aws_secret_access_key, aws_region } = req.body;
88
if (!aws_access_key || !aws_secret_access_key || !aws_region) {
9-
console.log(req.body);
109
return next({
1110
log: `awsController.setCredentials: Malformed Request: aws_access_key= ${aws_access_key} typeof aws_secret_access_key= ${typeof aws_secret_access_key} aws_region= ${aws_region}`,
1211
status: 400,
@@ -15,7 +14,7 @@ export default {
1514
}
1615
process.env.AWS_ACCESS_KEY_ID = aws_access_key;
1716
process.env.AWS_SECRET_ACCESS_KEY = aws_secret_access_key;
18-
process.env.AWS_aws_region = aws_region;
17+
process.env.AWS_REGION = aws_region;
1918
configureCloudtrailClient();
2019
res.locals.awsCredentials = {
2120
aws_access_key,
@@ -40,8 +39,8 @@ export default {
4039
process.env.AWS_ACCESS_KEY_ID === '' ||
4140
!process.env.AWS_SECRET_ACCESS_KEY ||
4241
process.env.AWS_SECRET_ACCESS_KEY_ID === '' ||
43-
!process.env.AWS_aws_region ||
44-
process.env.AWS_aws_region === ''
42+
!process.env.AWS_REGION ||
43+
process.env.AWS_REGION === ''
4544
) {
4645
return next({
4746
log: 'awsController.getEvents: trying to get events without an accesskey',
@@ -61,7 +60,6 @@ export default {
6160
`,
6261
[req.query.amount || 100]
6362
);
64-
// console.log('awsController.getEvents: got rows from db:', result.rows);
6563
res.locals.events = result.rows;
6664
return next();
6765
} catch (err) {

0 commit comments

Comments
 (0)