Merge pull request #82 from oslabs-beta/aidanprior/routingFix

fix: routing fix

client/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
 import Navbar from './components/Navbar';
@@ -7,12 +7,56 @@ import Home from './pages/Home';
 import EventsDashboard from './pages/EventsDashboard';
 import Login from './pages/Login';
 import SignUp from './pages/SignUp';
-import { UserDetails } from './types';
+import { AWSCredentials, UserDetails } from './types';
 
 const App: React.FC = () => {
   const [isDarkMode, setIsDarkMode] = useState(false); // Dark mode state
   const [user, setUser] = useState<UserDetails | null>(null);
 
+  const updateCredentials = useCallback(
+    function (credentials: AWSCredentials): void {
+      const locallyStoredUser: UserDetails = JSON.parse(
+        window.localStorage.getItem('user')!
+      ) as UserDetails;
+      fetch('/credentials', {
+        method: 'POST',
+        body: JSON.stringify({
+          ...credentials,
+          username:
+            user?.username ?? locallyStoredUser.username ?? 'No Active User',
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+        .then((response) => {
+          if (!response.ok)
+            throw Error('Server Error while updating aws credentials');
+          return response.json();
+        })
+        .then((data: UserDetails) => {
+          setUser(data);
+          window.localStorage.setItem('user', JSON.stringify(data));
+        })
+        .catch((error: Error) => {
+          console.error(error);
+        });
+    },
+    // we don't want to update on user update, because it would create an infinte loop, only on app reload
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  // check for a user session and update the user if found
+  useEffect(() => {
+    if (window.localStorage.getItem('user')) {
+      const locallyStoredUser: UserDetails = JSON.parse(
+        window.localStorage.getItem('user')!
+      ) as UserDetails;
+      setUser(locallyStoredUser);
+    }
+  }, []);
+
   const toggleDarkMode = () => {
     setIsDarkMode((prev) => !prev);
     document.body.classList.toggle('dark-mode', !isDarkMode); // Toggle class based on state
@@ -47,26 +91,30 @@ const App: React.FC = () => {
         setUser={setUser}
       />
       <Routes>
+        <Route path="/" element={<Login setUser={setUser} />} />
         <Route path="/login" element={<Login setUser={setUser} />} />
         <Route path="/signup" element={<SignUp />} />
 
         <Route
-          path="/"
-          element={checkAWSCreds(checkLogin(<Home isDarkMode={isDarkMode} />))}
+          path="/home"
+          element={checkLogin(checkAWSCreds(<Home isDarkMode={isDarkMode} />))}
         />
         <Route
           path="/profile"
           element={checkLogin(
-            <Profile isDarkMode={isDarkMode} user={user} setUser={setUser} />
+            <Profile
+              isDarkMode={isDarkMode}
+              user={user}
+              updateCredentials={updateCredentials}
+            />
           )}
         />
         <Route
           path="/events-dashboard"
-          element={checkAWSCreds(
-            checkLogin(<EventsDashboard isDarkMode={isDarkMode} />)
+          element={checkLogin(
+            checkAWSCreds(<EventsDashboard isDarkMode={isDarkMode} />)
           )}
         />
-        {/* </>} */}
       </Routes>
     </Router>
   );

client/src/components/Navbar.tsx

@@ -19,7 +19,6 @@ const Navbar: React.FC<NavbarProps> = ({
   };
 
   const handleLogout = () => {
-    console.log('User logged out');
     setUser(null);
     window.localStorage.removeItem('user');
     navigate('/login');
@@ -43,12 +42,12 @@ const Navbar: React.FC<NavbarProps> = ({
 
   return (
     <nav className={isDarkMode ? 'dark-mode' : ''}>
-      <Link to="/" className="logo" title="Home">
+      <Link to="/home" className="logo" title="Home">
         <img src={LOGO} alt="Wood Plank T" className="logo-image" />
       </Link>
       <div className="nav-buttons">
         <Link to="/events-dashboard" className="nav-button">
-          EVENTS DASHBOARD
+          RECENT EVENTS
         </Link>
         <button onClick={toggleDarkMode} className="nav-button">
           {isDarkMode ? 'LIGHT MODE' : 'DARK MODE'}

client/src/components/charts/EventType.tsx

@@ -21,7 +21,7 @@ export default function EventTypeChart() {
 
   useEffect(() => {
     setLoading(true);
-    fetch('/events?countOn=type')
+    fetch('/events?countOn=name')
       .then((response) => {
         if (response.ok) return response.json();
         throw new Error(response.status + ': ' + response.statusText);
@@ -30,13 +30,13 @@ export default function EventTypeChart() {
         setEvents(
           (data as CountedEvent[]).map((event) => ({
             ...event,
-            type: event.type.replace(/([A-Z])/g, ' $1'),
+            name: event.name.replace(/([A-Z])/g, ' $1'),
           }))
         );
         setLoading(false);
       })
       .catch((error) =>
-        console.warn('Could not fetch event type counts: ', error)
+        console.warn('Could not fetch event name counts: ', error)
       );
   }, []);
 

client/src/pages/Home.tsx

@@ -24,7 +24,7 @@ const Home: React.FC<{ isDarkMode: boolean }> = ({ isDarkMode }) => {
       title: 'User Activity',
       component: <UserActivityChart />,
     },
-    { id: 'eventTypes', title: 'Event Types', component: <EventTypeChart /> },
+    { id: 'eventTypes', title: 'Event Names', component: <EventTypeChart /> },
     {
       id: 'eventSources',
       title: 'Event Sources',

client/src/pages/Login.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { UserDetails } from '../types';
 
@@ -11,17 +11,6 @@ const Login: React.FC<{
   const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate();
 
-  useEffect(() => {
-    if (window.localStorage.getItem('user')) {
-      console.log(
-        'using sessioned user: ',
-        window.localStorage.getItem('user')
-      );
-      setUser(JSON.parse(window.localStorage.getItem('user')!) as UserDetails);
-      navigate('/profile');
-    }
-  }, [navigate, setUser]);
-
   const handleLogin = async (event: React.FormEvent) => {
     event.preventDefault();
     setError(null);

client/src/pages/Profile.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import { AWSCredentials, ProfileProps, UserDetails } from '../types';
 
-const Profile: React.FC<ProfileProps> = ({ isDarkMode, user, setUser }) => {
+const Profile: React.FC<ProfileProps> = ({
+  isDarkMode,
+  user,
+  updateCredentials,
+}) => {
   function handleCredentialSubmit() {
-    const creds: AWSCredentials = {
+    const locallyStoredUser: UserDetails = JSON.parse(
+      window.localStorage.getItem('user')!
+    ) as UserDetails;
+    const domCollectedCreds: AWSCredentials = {
       aws_access_key:
         (document.getElementById('accessKey') as HTMLInputElement | null)
           ?.value ?? 'Could not find accessKey element',
@@ -14,28 +21,23 @@ const Profile: React.FC<ProfileProps> = ({ isDarkMode, user, setUser }) => {
         (document.getElementById('region') as HTMLInputElement | null)?.value ??
         'Could not find region element',
     };
-    fetch('/credentials', {
-      method: 'POST',
-      body: JSON.stringify({
-        ...creds,
-        username: user?.username ?? 'Not Logged In',
-      }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    })
-      .then((response) => {
-        if (response.ok) window.alert('Credentials Saved');
-        else throw Error('Server Error while updating aws credentials');
-        return response.json();
-      })
-      .then((data: UserDetails) => {
-        setUser(data);
-        window.localStorage.setItem('user', JSON.stringify(data));
-      })
-      .catch((error: Error) => {
-        console.error(error);
-      });
+    console.log(locallyStoredUser);
+    console.log(domCollectedCreds);
+    updateCredentials({
+      aws_access_key:
+        domCollectedCreds.aws_access_key !== ''
+          ? domCollectedCreds.aws_access_key
+          : locallyStoredUser.aws_access_key ?? 'No locally stored access key',
+      aws_secret_access_key:
+        domCollectedCreds.aws_secret_access_key !== ''
+          ? domCollectedCreds.aws_secret_access_key
+          : locallyStoredUser.aws_secret_access_key ??
+            'No locally stored secret access key',
+      aws_region:
+        domCollectedCreds.aws_region !== ''
+          ? domCollectedCreds.aws_region
+          : locallyStoredUser.aws_region ?? 'No locally stored region',
+    });
   }
 
   return (

client/src/pages/SignUp.tsx

@@ -52,8 +52,7 @@ const SignUp: React.FC = () => {
       });
 
       if (response.ok) {
-        console.log('Sign-up successful!');
-        navigate('/profile');
+        navigate('/login');
       }
     } catch (err) {
       setError('Error signing up. Please try again.');

client/src/types.ts

@@ -24,7 +24,7 @@ export interface AWSCredentials {
 export interface ProfileProps {
   isDarkMode: boolean;
   user: UserDetails | null;
-  setUser: React.Dispatch<React.SetStateAction<UserDetails | null>>;
+  updateCredentials: (credentials: AWSCredentials) => void;
 }
 
 export interface CardProps {

compose.yml

@@ -25,7 +25,6 @@ services:
     build:
       context: .
     container_name: trailguide-server
-    env_file: .env
     environment:
       - POSTGRES_PASSWORD=secret
       - POSTGRES_USER=tgadmin

server/controllers/awsController.js

@@ -6,7 +6,6 @@ export default {
     try {
       const { aws_access_key, aws_secret_access_key, aws_region } = req.body;
       if (!aws_access_key || !aws_secret_access_key || !aws_region) {
-        console.log(req.body);
         return next({
           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}`,
           status: 400,
@@ -15,7 +14,7 @@ export default {
       }
       process.env.AWS_ACCESS_KEY_ID = aws_access_key;
       process.env.AWS_SECRET_ACCESS_KEY = aws_secret_access_key;
-      process.env.AWS_aws_region = aws_region;
+      process.env.AWS_REGION = aws_region;
       configureCloudtrailClient();
       res.locals.awsCredentials = {
         aws_access_key,
@@ -40,8 +39,8 @@ export default {
       process.env.AWS_ACCESS_KEY_ID === '' ||
       !process.env.AWS_SECRET_ACCESS_KEY ||
       process.env.AWS_SECRET_ACCESS_KEY_ID === '' ||
-      !process.env.AWS_aws_region ||
-      process.env.AWS_aws_region === ''
+      !process.env.AWS_REGION ||
+      process.env.AWS_REGION === ''
     ) {
       return next({
         log: 'awsController.getEvents: trying to get events without an accesskey',
@@ -61,7 +60,6 @@ export default {
         `,
         [req.query.amount || 100]
       );
-      // console.log('awsController.getEvents: got rows from db:', result.rows);
       res.locals.events = result.rows;
       return next();
     } catch (err) {

server/models/eventsModel.js

@@ -100,8 +100,10 @@ async function updateEvents(next, config = {}) {
     process.env.AWS_SECRET_ACCESS_KEY === '' ||
     !process.env.AWS_REGION ||
     process.env.AWS_REGION === ''
-  )
+  ) {
+    console.log('skipping event fetching because the keys are not set');
     return;
+  }
 
   if (!next) {
     const startTime = await getLastEvent();
@@ -120,8 +122,6 @@ async function updateEvents(next, config = {}) {
   if (!data) return;
   for (const event of data.Events) {
     const cloudtrailevent = JSON.parse(event.CloudTrailEvent);
-    // console.log(cloudtrailevent);
-    // console.log(event);
     try {
       await query(
         `