Managing App State

Author: alon25

app/AComp/Microservices.jsx

@@ -1,11 +1,31 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
+import OverviewContext from '../context/OverviewContext';
 import HealthInformationContext from '../context/DetailsContext';
 import ServiceDetails from '../components/ServiceDetails.jsx';
 
+
 const { ipcRenderer } = window.require('electron');
 
 const Microservices = (props) => {
-  const { overviewState, setDetails, index } = props;
+  const { index, setDetails } = props;
+  // Overview state used to create service buttons
+  const [overviewState, setOverviewState] = useState([]);
+  // const [detailsSelected, setDetails] = useState();
+  // Contexts have data added to them following successful IPC return. Data is later used to create charts.
+  const serviceComponents = useContext(OverviewContext);
+
+  useEffect(() => {
+    // IPC communication used to initiate query for information on microservices.
+    ipcRenderer.send('overviewRequest', index);
+    // IPC listener responsible for retrieving infomation from asynchronous main process message.
+    ipcRenderer.on('overviewResponse', (event, data) => {
+      // Adds to state and context.
+      // console.log(JSON.parse(data));
+      setOverviewState(Object.values(JSON.parse(data)));
+      serviceComponents.overviewData = JSON.parse(data);
+    });
+  }, []);
+
   // Holds the buttons generated for unique services.
   const componentButtons = [];
 
@@ -26,6 +46,7 @@ const Microservices = (props) => {
             type="button"
             key={`serviceItem${index}${i}`}
             onClick={() => {
+              console.log(element.currentmicroservice);
               // IPC communication used to initiate query for information on microservice health information.
               ipcRenderer.send('detailsRequest', index);
 
@@ -35,12 +56,10 @@ const Microservices = (props) => {
                 healthdata.detailData = Object.values(JSON.parse(data));
                 // Updates state. Triggers rerender.
                 setDetails(
-                  <ServiceDetails
-                    service={element.currentmicroservice}
-                    setDetails={setDetails}
-                  />
+                      <ServiceDetails service={element.currentmicroservice} />
                 );
               });
+              // setSelection(<Monitoring detailsSelected={detailsSelected} />);
             }}
           >
             {element.currentmicroservice}
@@ -59,18 +78,17 @@ const Microservices = (props) => {
               type="button"
               key={`serviceItem${index}${i}`}
               onClick={() => {
-                ipcRenderer.send('detailsRequest', props.index);
-
+                ipcRenderer.send('detailsRequest', index);
+                
                 // IPC listener responsible for retrieving infomation from asynchronous main process message.
                 ipcRenderer.on('detailsResponse', (event, data) => {
                   // Adds returned data to context.
+                  console.log(element.currentmicroservice);
                   healthdata.detailData = Object.values(JSON.parse(data));
                   // Updates state. Triggers rerender.
                   setDetails(
-                    <ServiceDetails
-                      service={element.currentMicroservice}
-                      setDetails={setDetails}
-                    />
+                        <ServiceDetails service={element.currentmicroservice} />
+                      
                   );
                 });
               }}

app/components/ServiceDetails.jsx

@@ -5,7 +5,8 @@ import Modal from './Modal.jsx';
 // Renders charts created with health and communication data for a selected database.
 const ServiceDetails = (props) => {
   // Renders health info detail buttons
-  const { service, setDetails } = props;
+  const { service } = props;
+  console.log(service);
   // Hook used to toggle whether or not the Modal component renders
   const [modalDisplay, toggleModalDisplay] = useState(false);
   // Hook used to set the chart that the Modal displays.  The
@@ -85,7 +86,7 @@ const ServiceDetails = (props) => {
         onClick={() => {
           // document.location.reload()
           console.log('should clear data');
-          setDetails(null);
+          // setDetails(null);
         }}
       >
         Clear Health Data

app/containers/DashboardContainer.jsx

@@ -7,12 +7,12 @@ import '../stylesheets/dashboard.css';
 const DashboardContainer = () => {
   // Used to hold the buttons created for each database found in context.
   const [serviceSelected, setSelection] = useState();
-  // const [detailsSelected, setDetails] = useState();
+  const [detailsSelected, setDetails] = useState();
   return (
     <div className="servicesDashboardContainer">
-      <SidebarContainer setSelection={setSelection} />
+      <SidebarContainer setSelection={setSelection} setDetails={setDetails} />
       <div className="databsaseList">
-        {serviceSelected}
+        {serviceSelected || <Monitoring detailsSelected={detailsSelected} />}
       </div>
     </div>
   );

app/containers/SideBarContainer.jsx

@@ -4,11 +4,10 @@ import Extras from '../AComp/Extras.jsx';
 import SetupContext from '../context/SetupContext';
 import DashboardContext from '../context/DashboardContext';
 import Microservices from '../AComp/Microservices.jsx';
-import OverviewContext from '../context/OverviewContext';
 import ServicesList from '../AComp/ServicesList.jsx';
 import AddService from '../components/AddService.jsx';
 import DeleteService from '../components/DeleteService.jsx';
-import Monitoring from './MonitoringContainer.jsx';
+// import Monitoring from './MonitoringContainer.jsx';
 import '../stylesheets/sidebar.css';
 
 const { ipcRenderer } = window.require('electron');
@@ -18,17 +17,15 @@ const SidebarContainer = (props) => {
   // Used to toggle setup required if user wants to add a new database.
   const setup = useContext(SetupContext);
 
-  const { setSelection } = props;
+  const { setSelection, setDetails} = props;
 
-  const [detailsSelected, setDetails] = useState();
+  
   // List of the databases saved by users to track microservices.
   const serviceList = useContext(DashboardContext);
 
-  // Overview state used to create service buttons
-  const [overviewState, setOverviewState] = useState([]);
+  
 
-  // Contexts have data added to them following successful IPC return. Data is later used to create charts.
-  const serviceComponents = useContext(OverviewContext);
+ 
   const [index, setIndex] = useState();
   const [isclicked, setClicked] = useState('false');
 
@@ -41,16 +38,8 @@ const SidebarContainer = (props) => {
   const ServicesClick = (e) => {
     clickToggle(e);
     setIndex(e.target.id);
-    // const event = e.target.id;
-    ipcRenderer.send('overviewRequest', e.target.id);
-    // IPC listener responsible for retrieving infomation from asynchronous main process message.
-    ipcRenderer.on('overviewResponse', (event, data) => {
-      // Adds to state and context.
-      // console.log(JSON.parse(data));
-      setOverviewState(Object.values(JSON.parse(data)));
-      serviceComponents.overviewData = JSON.parse(data);
-    });
-    setSelection(<Monitoring detailsSelected={detailsSelected} />);
+
+    // setSelection(<Monitoring detailsSelected={detailsSelected} />);
   };
   // Click function for AddService
   const AddClick = () => {
@@ -75,9 +64,9 @@ const SidebarContainer = (props) => {
         />
         {isclicked === 'true' ? (
           <Microservices
-            overviewState={overviewState}
-            setDetails={setDetails}
+            setSelection={setSelection}
             index={index}
+            setDetails={setDetails}
           />
         ) : null}
         <Extras

user/settings.json

@@ -1 +1 @@
-{"setupRequired":false,"services":[["test","MongoDB","mongodb+srv://alon:testing123@cluster0-phsei.mongodb.net/test?retryWrites=true&w=majority"]],"splash":true}
+{"setupRequired":false,"services":[["test","MongoDB","mongodb+srv://alon:testing123@cluster0-phsei.mongodb.net/test?retryWrites=true&w=majority"]],"splash":false}