From 4f01d0bbd031042bc3868cfd133dbbefcfb0cc61 Mon Sep 17 00:00:00 2001
From: aidanprior <priorlyaidan@yahoo.com>
Date: Wed, 30 Oct 2024 12:31:20 -0400
Subject: [PATCH 1/4] fix: fix some edge cases for routing on the frontend,
 organized user session managment better

---
 client/src/App.tsx               | 60 +++++++++++++++++++++++++++-----
 client/src/components/Navbar.tsx |  2 +-
 client/src/pages/Login.tsx       | 13 +------
 client/src/pages/Profile.tsx     | 31 ++++-------------
 client/src/pages/SignUp.tsx      |  2 +-
 client/src/types.ts              |  2 +-
 compose.yml                      |  1 -
 7 files changed, 63 insertions(+), 48 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2484db0..47501b0 100644
--- a/client/src/App.tsx
+++ b/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,52 @@ 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 {
+      fetch('/credentials', {
+        method: 'POST',
+        body: JSON.stringify({
+          ...credentials,
+          username: user?.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;
+      updateCredentials(locallyStoredUser);
+    }
+  }, [updateCredentials]);
+
   const toggleDarkMode = () => {
     setIsDarkMode((prev) => !prev);
     document.body.classList.toggle('dark-mode', !isDarkMode); // Toggle class based on state
@@ -47,26 +87,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>
   );
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index a29eb59..3903b0d 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -43,7 +43,7 @@ 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">
diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx
index a16a3bf..c784faa 100644
--- a/client/src/pages/Login.tsx
+++ b/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);
diff --git a/client/src/pages/Profile.tsx b/client/src/pages/Profile.tsx
index 21c222a..650b41b 100644
--- a/client/src/pages/Profile.tsx
+++ b/client/src/pages/Profile.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
-import { AWSCredentials, ProfileProps, UserDetails } from '../types';
+import { AWSCredentials, ProfileProps } from '../types';
 
-const Profile: React.FC<ProfileProps> = ({ isDarkMode, user, setUser }) => {
+const Profile: React.FC<ProfileProps> = ({
+  isDarkMode,
+  user,
+  updateCredentials,
+}) => {
   function handleCredentialSubmit() {
     const creds: AWSCredentials = {
       aws_access_key:
@@ -14,28 +18,7 @@ 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);
-      });
+    updateCredentials(creds);
   }
 
   return (
diff --git a/client/src/pages/SignUp.tsx b/client/src/pages/SignUp.tsx
index 8fa12a7..036ea63 100644
--- a/client/src/pages/SignUp.tsx
+++ b/client/src/pages/SignUp.tsx
@@ -53,7 +53,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.');
diff --git a/client/src/types.ts b/client/src/types.ts
index 0b526da..37a1079 100644
--- a/client/src/types.ts
+++ b/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 {
diff --git a/compose.yml b/compose.yml
index 9db5bea..d1366f7 100644
--- a/compose.yml
+++ b/compose.yml
@@ -25,7 +25,6 @@ services:
     build:
       context: .
     container_name: trailguide-server
-    env_file: .env
     environment:
       - POSTGRES_PASSWORD=secret
       - POSTGRES_USER=tgadmin

From 82809b7642747e0e7c8a08c0b626ac2108ee611b Mon Sep 17 00:00:00 2001
From: aidanprior <priorlyaidan@yahoo.com>
Date: Wed, 30 Oct 2024 16:10:43 -0400
Subject: [PATCH 2/4] fix: typo in backend credential checking

---
 server/controllers/awsController.js | 6 +++---
 server/models/eventsModel.js        | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/server/controllers/awsController.js b/server/controllers/awsController.js
index ee5ec2d..aedb8d5 100644
--- a/server/controllers/awsController.js
+++ b/server/controllers/awsController.js
@@ -15,7 +15,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 +40,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',
diff --git a/server/models/eventsModel.js b/server/models/eventsModel.js
index 4a5034d..1194706 100644
--- a/server/models/eventsModel.js
+++ b/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();

From 429b783c88da381f21772cc3392fb7a3138f0329 Mon Sep 17 00:00:00 2001
From: aidanprior <priorlyaidan@yahoo.com>
Date: Thu, 31 Oct 2024 11:57:38 -0400
Subject: [PATCH 3/4] fix: remove console logs and fix session issues

---
 client/src/App.tsx                  | 4 ++--
 client/src/components/Navbar.tsx    | 1 -
 client/src/pages/SignUp.tsx         | 1 -
 server/controllers/awsController.js | 2 --
 server/models/eventsModel.js        | 2 --
 5 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 47501b0..37e143f 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -49,9 +49,9 @@ const App: React.FC = () => {
       const locallyStoredUser: UserDetails = JSON.parse(
         window.localStorage.getItem('user')!
       ) as UserDetails;
-      updateCredentials(locallyStoredUser);
+      setUser(locallyStoredUser);
     }
-  }, [updateCredentials]);
+  }, []);
 
   const toggleDarkMode = () => {
     setIsDarkMode((prev) => !prev);
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 3903b0d..1d97dce 100644
--- a/client/src/components/Navbar.tsx
+++ b/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');
diff --git a/client/src/pages/SignUp.tsx b/client/src/pages/SignUp.tsx
index 036ea63..ff3cd9a 100644
--- a/client/src/pages/SignUp.tsx
+++ b/client/src/pages/SignUp.tsx
@@ -52,7 +52,6 @@ const SignUp: React.FC = () => {
       });
 
       if (response.ok) {
-        console.log('Sign-up successful!');
         navigate('/login');
       }
     } catch (err) {
diff --git a/server/controllers/awsController.js b/server/controllers/awsController.js
index aedb8d5..b934928 100644
--- a/server/controllers/awsController.js
+++ b/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,
@@ -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) {
diff --git a/server/models/eventsModel.js b/server/models/eventsModel.js
index 1194706..7823878 100644
--- a/server/models/eventsModel.js
+++ b/server/models/eventsModel.js
@@ -122,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(
         `

From 51edb5f20fabb3339b766f677879c98dee08b5b8 Mon Sep 17 00:00:00 2001
From: aidanprior <priorlyaidan@yahoo.com>
Date: Thu, 31 Oct 2024 12:11:35 -0400
Subject: [PATCH 4/4] fix: update users creds on empty submit, change events
 dashborad button text to recent events, change from event types to event
 names in chart

---
 client/src/App.tsx                         |  6 +++++-
 client/src/components/Navbar.tsx           |  2 +-
 client/src/components/charts/EventType.tsx |  6 +++---
 client/src/pages/Home.tsx                  |  2 +-
 client/src/pages/Profile.tsx               | 25 +++++++++++++++++++---
 5 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 37e143f..25aeeb5 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -15,11 +15,15 @@ const App: React.FC = () => {
 
   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 ?? 'No Active User',
+          username:
+            user?.username ?? locallyStoredUser.username ?? 'No Active User',
         }),
         headers: {
           'Content-Type': 'application/json',
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 1d97dce..f774d43 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -47,7 +47,7 @@ const Navbar: React.FC<NavbarProps> = ({
       </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'}
diff --git a/client/src/components/charts/EventType.tsx b/client/src/components/charts/EventType.tsx
index 8eb97d4..0aa3d55 100644
--- a/client/src/components/charts/EventType.tsx
+++ b/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)
       );
   }, []);
 
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index af61cde..20e969a 100644
--- a/client/src/pages/Home.tsx
+++ b/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',
diff --git a/client/src/pages/Profile.tsx b/client/src/pages/Profile.tsx
index 650b41b..45388e4 100644
--- a/client/src/pages/Profile.tsx
+++ b/client/src/pages/Profile.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AWSCredentials, ProfileProps } from '../types';
+import { AWSCredentials, ProfileProps, UserDetails } from '../types';
 
 const Profile: React.FC<ProfileProps> = ({
   isDarkMode,
@@ -7,7 +7,10 @@ const Profile: React.FC<ProfileProps> = ({
   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',
@@ -18,7 +21,23 @@ const Profile: React.FC<ProfileProps> = ({
         (document.getElementById('region') as HTMLInputElement | null)?.value ??
         'Could not find region element',
     };
-    updateCredentials(creds);
+    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 (