Styling Updates

Author: alon25

Chronos Slide Deck Notes.rtf

@@ -1,37 +1,34 @@
 import React from 'react';
+import '../stylesheets/overviewSubmit.css';
 
 const Extras = (props) => {
   const { AddClick, DeleteClick, RefreshClick } = props;
   return (
-    <>
-      <div className="left-bottom">
-        <button
-          className="overviewSubmitBtn"
-          type="submit"
-          key="BackToStart"
-          onClick={AddClick}
-        >
-          Add Database
-        </button>
-        <button
-          className="overviewSubmitBtn"
-          type="submit"
-          key="goToDeletePage"
-          onClick={DeleteClick}
-        >
-          Delete Database
-        </button>
-      </div>
-      <div className="left-bottom">
-        <button
-          className="overviewSubmitBtn"
-          type="submit"
-          onClick={RefreshClick}
-        >
-          Refresh overview
-        </button>
-      </div>
-    </>
+    <div className="left-bottom">
+      <button
+        className="overviewSubmitBtn"
+        type="submit"
+        key="BackToStart"
+        onClick={AddClick}
+      >
+        Add Database
+      </button>
+      <button
+        className="overviewSubmitBtn"
+        type="submit"
+        key="goToDeletePage"
+        onClick={DeleteClick}
+      >
+        Delete Database
+      </button>
+      <button
+        className="overviewSubmitBtn"
+        type="submit"
+        onClick={RefreshClick}
+      >
+        Refresh overview
+      </button>
+    </div>
   );
 };
 

app/AComp/Extras.jsx

@@ -1,107 +1,27 @@
-import React, { useContext, useState, useEffect } from 'react';
-import OverviewContext from '../context/OverviewContext';
-import HealthInformationContext from '../context/DetailsContext';
-import ServiceDetails from '../components/ServiceDetails.jsx';
+import React from 'react';
+import '../stylesheets/Microservices.css';
 
-const { ipcRenderer } = window.require('electron');
 
 const Microservices = (props) => {
-  const { index, setDetails } = props;
-  // 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);
-
-  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 = [];
-
-  // Tracks which services already have button created.
-  const serviceCache = {};
-  // Contexts have data added to them following successful IPC return. Data is later used to create charts.
-  const healthdata = useContext(HealthInformationContext);
-
-  for (let i = 0; i < overviewState.length; i += 1) {
-    const element = overviewState[i];
-    // If SQL
-    if (element.currentmicroservice) {
-      if (!(element.currentmicroservice in serviceCache)) {
-        const button = (
-          <button
-            className="servicesBtn"
-            currentMicroservice={element.currentmicroservice}
-            type="button"
-            key={`serviceItem${index}${i}`}
-            onClick={() => {
-              // IPC communication used to initiate query for information on microservice health information.
-              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
-                healthdata.detailData = Object.values(JSON.parse(data));
-                // Updates state. Triggers rerender.
-                setDetails(
-                  <ServiceDetails service={element.currentmicroservice} />
-                );
-              });
-            }}
-          >
-            {element.currentmicroservice}
-          </button>
-        );
-        componentButtons.push(button);
-        serviceCache[element.currentmicroservice] = true;
-      }
-    } else if (element.currentMicroservice) {
-      // If Mongo
-      if (element.currentMicroservice) {
-        if (!(element.currentMicroservice in serviceCache)) {
-          const button = (
-            <button
-              className="servicesBtn"
-              type="button"
-              key={`serviceItem${index}${i}`}
-              onClick={() => {
-                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.
-                  healthdata.detailData = Object.values(JSON.parse(data));
-                  // Updates state. Triggers rerender.
-                  setDetails(
-                    <ServiceDetails service={element.currentMicroservice} />
-                  );
-                });
-              }}
-            >
-              {element.currentMicroservice}
-            </button>
-          );
-          componentButtons.push(button);
-          serviceCache[element.currentMicroservice] = true;
-        }
-      }
-    }
-  }
-  // If there's no data, return 'No data present', else return microservices button
-  if (componentButtons.length === 0) {
-    return <p>Loading</p>;
+  const { context, Click, isclicked } = props;
+  const buttonStore = [];
+  for (let i = 0; i < context.length; i += 1) {
+    buttonStore.push(
+      <button
+        className="microserviceBtn"
+        id={i}
+        type="button"
+        key={`${i}${context[i]}`}
+        onClick={Click}
+        isclicked={isclicked}
+      >
+        {context[i]}
+      </button>
+    );
   }
-  return componentButtons;
+  return (
+    buttonStore
+  );
 };
 
 export default Microservices;