removed aws keys, added react query package

Author: timlee12

app/App.tsx

@@ -2,13 +2,18 @@ import React, { useState } from 'react';
 import Splash from './components/Splash';
 import DashboardContainer from './containers/DashboardContainer';
 import './stylesheets/scrollBar.scss';
+import { useQuery, QueryClient, useQueryClient, QueryClientProvider } from 'react-query';
+import { ReactQueryDevtools } from 'react-query/devtools'
+
+const queryClient = new QueryClient();
 
 const App: React.FC = React.memo(() => {
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryDevtools initialIsOpen={true} />
       <Splash />
       <DashboardContainer />
-    </>
+    </QueryClientProvider>
 
   )
 });

app/components/Splash.tsx

@@ -3,9 +3,9 @@ import '../stylesheets/Splash.scss';
 
 const Splash: React.FC = React.memo((props) => {
   const [visible, setVisible] = useState(false);
-  useEffect(() => {
-    setTimeout(() => setVisible(false), 4000);
-  }, []);
+  // useEffect(() => {
+  //   setTimeout(() => setVisible(false), 4000);
+  // }, []);
 
   return (
     <>

app/containers/DashboardContainer.tsx

@@ -15,9 +15,9 @@ import '../stylesheets/Dashboard.scss';
 const DashboardContainer = React.memo(() => {
   const [visible, setVisible] = useState(true);
 
-  useEffect(() => {
-    setTimeout(() => setVisible(true), 4000);
-  }, []);
+  // useEffect(() => {
+  //   setTimeout(() => setVisible(true), 4000);
+  // }, []);
 
   return (
     <>

app/context/AwsContext.tsx

@@ -1,7 +1,8 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import Electron from 'electron';
 import { transformData } from './helpers';
 const { ipcRenderer } = window.require('electron');
+import { useQuery } from 'react-query';
 
 export const AwsContext = React.createContext<any>(null);
 
@@ -11,19 +12,25 @@ interface Props {
 
 const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
   const [awsData, setAwsData] = useState<any>({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] })
-
+  
   const fetchAwsData = useCallback(() => {
     console.log('i am here in fetchawsdata!!!')
     ipcRenderer.send('awsMetricsRequest');
-
+    
     console.log('i am between the send and on!!!!!!!')
     ipcRenderer.on('awsMetricsResponse', (event: Electron.Event, data: any) => {
       console.log('data fetched from awsContext', data);
-      // setAwsData(data);
+      setAwsData(data);
     })
-
+    
     console.log('i am after the ipcrender!!!!')
   },[]);
+  
+  const { isLoading, data, error, isFetching } = useQuery('awsMetricsResponse', fetchAwsData);
+  
+  // useEffect(() => {
+  //   console.log(data, isLoading, error, isFetching);
+  // });
 
   return (
     <AwsContext.Provider

app/stylesheets/AddModal.scss

@@ -59,59 +59,6 @@
       }
 
 
-      .add-fields {
-        display: flex;
-        flex-direction: column;
-
-        @include centerWithFlex(space-between);
-        width: 100%;
-        margin: 15px 0;
-  
-        select,
-        input,
-        textarea {
-          font-family: 'Roboto';
-          font-size: 14px;
-          padding: 5px;
-          border: thin solid $grey;
-          flex: 1;
-          border-radius: 3px;
-          color: $darkgrey;
-        }
-  
-        // Select field
-        select {
-          cursor: pointer;
-          font-family: 'Roboto';
-          height: 30px;
-          margin: 0;
-          appearance: none;
-          transition: 0.2s;
-  
-          &:hover {
-            background-color: darken(#fff, 5%);
-          }
-        }
-  
-        // Text input
-        input {
-          height: 30px;
-          color: $darkgrey;
-        }
-  
-        // Textarea
-        textarea {
-          resize: none;
-          height: 90px;
-        }
-  
-        label {
-          width: 140px;
-          font-size: 135%;
-          font-weight: 400;
-        }
-      }
-
     }
 
     /* Submit button */

electron/routes/dashboard.ts

@@ -81,7 +81,7 @@ ipcMain.on('getApps', (message: IpcMainEvent) => {
   const services: string[][] = settings[currentUser].services;
 
   // Return an array of arrays that is a subset of the full services array
-  const dashboardList: string[][] = services.map((arr: string[]) => [arr[0], arr[1], arr[3], arr[4]]);
+  const dashboardList: string[][] = services.map((arr: string[]) => [arr[0], arr[1], arr[3], arr[4], arr[5]]);
   message.returnValue = dashboardList;
 });
 
@@ -105,7 +105,7 @@ ipcMain.on('deleteApp', (message: IpcMainEvent, index) => {
   });
 
   // Sync event - return new applications list
-  message.returnValue = userServices.map((arr: string[]) => [arr[0], arr[1], arr[3], arr[4]]);
+  message.returnValue = userServices.map((arr: string[]) => [arr[0], arr[1], arr[3], arr[4], arr[5]]);
 });
 
 

electron/routes/data.ts

@@ -19,7 +19,9 @@ const mongoFetch = fetchData.mongoFetch;
 const postgresFetch = fetchData.postgresFetch;
 const AWS = require('aws-sdk');
 
-require('dotenv').config();
+require('dotenv').config({
+  path: path.join(__dirname, './.env')
+});
 // Initiate pool variable for SQL setup
 let pool: any;
 
@@ -317,8 +319,8 @@ ipcMain.on('awsMetricsRequest', async (message: Electron.IpcMainEvent) => {
 
     const cloudwatch = new AWS.CloudWatch({
       region: 'us-west-1',
-      accessKeyId: 'AKIAU4VDDZOHUKZLQREU',
-      secretAccessKey: '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'
+      accessKeyId: process.env.AWS_ACCESS_KEY,
+      secretAccessKey: process.env.AWS_SECRET_KEY
     });
 
     const metricsNamesArray = ['CPUUtilization', 'NetworkIn', 'NetworkOut', 'DiskReadBytes'];

package.json

@@ -22,6 +22,7 @@
     "react-dom": "^17.0.0",
     "react-graph-vis": "^1.0.7",
     "react-plotly.js": "^2.6.0",
+    "react-query": "^3.39.3",
     "react-router-dom": "^6.5.0",
     "react-table": "^7.8.0",
     "styled-components": "^5.3.6"