routing to AWScpntainer sucessfully, added a scss file for it

Author: taylrzhang

app/components/Occupied.tsx

@@ -45,6 +45,7 @@ import { DashboardContext } from '../context/DashboardContext';
 import { ApplicationContext } from '../context/ApplicationContext';
 import { CommsContext } from '../context/CommsContext';
 import { AwsContext } from '../context/AwsContext';
+import { useNavigate } from 'react-router-dom';
 
 // TYPESCRIPT
 interface StyleProps {
@@ -65,6 +66,9 @@ const Occupied = React.memo(() => {
   const [searchTerm, setSearchTerm] = useState<string>('');
   const [clickedAt, setClickedAt] = useState<string>('2000-01-01T00:00:00Z');
 
+  // const [showAwsContainer, setShowAwsContainer] = useState(false);
+  const navigate = useNavigate();
+
   // Grab services and applications whenever the user changes
   useEffect(() => {
     setServicesData([]);
@@ -81,15 +85,23 @@ const Occupied = React.memo(() => {
   };
 
   // Handle clicks on Application cards
-  const handleClick = (event: ClickEvent, selectedApp: string, i: number) => {
-    console.log(selectedApp, i);
+  const handleClick = (
+    event: ClickEvent,
+    selectedApp: string,
+    selectedService: string,
+    i: number
+  ) => {
+    //delRaf refers to the delete button
     if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
-      console.log('the application that you clicked is: ', selectedApp)
-      setIndex(i);
-      setApp(selectedApp);
-      setServicesData([]);
-      setServiceModalOpen(true);
-      fetchAwsData();
+      if (selectedService === 'AWS') {
+        navigate(`/aws/:${app}`);
+        fetchAwsData();
+      } else {
+        setIndex(i);
+        setApp(selectedApp);
+        setServicesData([]);
+        setServiceModalOpen(true);
+      }
     }
   };
 
@@ -281,7 +293,7 @@ const Occupied = React.memo(() => {
                     key={`card-${i}`}
                     className={classes.paper}
                     variant="outlined"
-                    onClick={event => handleClick(event, application[0], i)}
+                    onClick={event => handleClick(event, application[0], application[3], i)}
                   >
                     <div className="databaseIconContainer">
                       <div className="databaseIconHeader">
@@ -333,7 +345,6 @@ const Occupied = React.memo(() => {
                   </Card>
                 </div>
               ))}
-
           <Modal open={addModalOpen} onClose={() => setAddModalOpen(false)}>
             <AddModal setOpen={setAddModalOpen} />
           </Modal>

app/containers/AWSGraphsContainer.tsx

@@ -1,19 +1,20 @@
 /* eslint-disable no-bitwise */
 import React, { useEffect, useState, useContext } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import { ApplicationContext } from '../context/ApplicationContext';
 import * as DashboardContext from '../context/DashboardContext';
 import lightAndDark from '../components/Styling';
 import { useQuery } from 'react-query';
 import { AwsContext } from '../context/AwsContext';
 
+import '../stylesheets/AWSGraphsContainer.scss';
+
 const AwsGraphsContainer: React.FC = React.memo(props => {
   const { awsData, fetchAwsData, setAwsData } = useContext(AwsContext);
 
   useEffect(() => {
     fetchAwsData();
-  })
-  
+  });
+
   // const { data, status, isLoading } = useQuery('awsData', fetchAwsData);
 
   //   if(status === 'loading') {
@@ -25,13 +26,16 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
   //   }
 
   //   else {
-      return (
-        <div className='test-container'>
-          <p>AWS TEST DATAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
-          <p>Here is our data: {awsData}</p>
-        </div>
-      )
-    // }
+  return (
+    <div className="AWS-container">
+      <p>
+        AWS TEST
+        DATAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+      </p>
+      <p>Here is our data: {awsData}</p>
+    </div>
+  );
+  // }
 });
 
-export default AwsGraphsContainer;
+export default AwsGraphsContainer;

app/containers/MainContainer.tsx

@@ -9,12 +9,13 @@ import GraphsContainer from './GraphsContainer';
 import { DashboardContext } from '../context/DashboardContext';
 import SignUp from '../components/SignUp';
 import Login from '../components/Login';
+import AwsGraphsContainer from '../containers/AwsGraphsContainer';
+
 import '../stylesheets/MainContainer.scss';
 
 const MainContainer = React.memo(() => {
   const { mode } = useContext(DashboardContext);
-  const currentModeCSS =
-    mode === 'light' ? lightAndDark.lightModeMain : lightAndDark.darkModeMain;
+  const currentModeCSS = mode === 'light' ? lightAndDark.lightModeMain : lightAndDark.darkModeMain;
 
   return (
     <>
@@ -27,11 +28,12 @@ const MainContainer = React.memo(() => {
             <Route path="/about" element={<About />} />
             <Route path="/contact" element={<Contact />} />
             <Route path="/settings" element={<Settings />} />
+            <Route path="/applications/:app/:service" element={<GraphsContainer />} />
+            <Route path="/aws/:app" element={<AwsGraphsContainer />} />
             <Route
-              path="/applications/:app/:service"
-              element={<GraphsContainer />}
+              path="*"
+              element={<h1 style={{ color: 'red', fontSize: '200px' }}>Not Found</h1>}
             />
-            <Route path="*" element={<h1 style={{color: 'red', fontSize: '200px'}}>Not Found</h1>} />
           </Routes>
         </div>
       </div>

app/context/ApplicationContext.tsx

@@ -37,7 +37,8 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
   }
 
   const fetchServicesNames = useCallback((application: string) => {
-    setApp(application);
+    console.log('app when fetch services name', application);
+    // setApp(application);
 
     ipcRenderer.send('servicesRequest');
 
@@ -65,8 +66,8 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
       const store: object = {};
       data.forEach(el => {
         store[el.metric] = el;
-      })
-      console.log('result from getSavedMetrics is: ', store)
+      });
+      console.log('result from getSavedMetrics is: ', store);
       setSavedMetrics(store);
     });
   }, []);

app/stylesheets/AWSGraphsContainer.scss

@@ -0,0 +1,5 @@
+@import './constants.scss';
+
+.AWS-container {
+  margin-top: 40px;
+}

electron/Main.ts

@@ -9,7 +9,7 @@ let win: Electron.BrowserWindow;
 
 /**
  * @desc createWindow sets up the environment of the window (dimensions, port, initial settings)
-*/
+ */
 const createWindow = () => {
   win = new BrowserWindow({
     width: 1920,
@@ -25,7 +25,7 @@ const createWindow = () => {
 
   if (process.env.NODE_ENV === 'development') {
     // Development: load the application window to the port in the webpack config
-    win.loadURL('http://localhost:8080/');
+    win.loadURL('http://localhost:8081/');
     // console.log(win.webContents);
     win.webContents.openDevTools();
   } else {