revamp2

Author: alon25

app/containers/SideBarContainer.jsx

@@ -0,0 +1,16 @@
+import React, { useState, useContext } from 'react';
+import ServiceOverview from './ServiceOverview.jsx';
+import DashboardContext from '../context/DashboardContext';
+import SetupContext from '../context/SetupContext';
+import AddService from './AddService.jsx';
+import DeleteService from './DeleteService.jsx';
+
+const ServicesDashboard = (props) => {
+  // Used to toggle setup required if user wants to add a new database.
+  const setup = useContext(SetupContext);
+
+  // List of the databases saved by users to track microservices.
+  const serviceList = useContext(DashboardContext);
+
+  // Used to hold the buttons created for each database found in context.
+  const [serviceSelected, setSelection] = useState();

app/newcomp/adrBut.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import AddService from '../components/AddService.jsx';
+import DeleteService from '../components/DeleteService.jsx';
+
+const Adr = (props) => {
+  // Used to toggle setup required if user wants to add a new database.
+  const setup = useContext(SetupContext);
+
+  return (
+    <div className="left-bottom">
+      <button
+        className="overviewSubmitBtn"
+        type="submit"
+        key="BackToStart"
+        onClick={() => {
+          setup.setupRequired = setup.toggleSetup(false);
+          setSelection(<AddService />);
+        }}
+      >
+        Add Database
+      </button>
+      <button
+        className="overviewSubmitBtn"
+        type="submit"
+        key="goToDeletePage"
+        onClick={() => {
+          setSelection(<DeleteService />);
+        }}
+      >
+        Delete Database
+      </button>
+      <div className="left-bottom">
+        <button
+          className="overviewSubmitBtn"
+          type="submit"
+          onClick={() => {
+            location.reload();
+          }}
+        >
+          Refresh overview
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Adr;

app/newcomp/services.jsx

@@ -0,0 +1,26 @@
+import React, {useState} from 'react';
+import ServiceOverview from '../components/ServiceOverview.jsx';
+import Adr from '../newcomp/adrBut.jsx';
+
+const Services = (context) => {
+  // Used to hold the buttons created for each database found in context.
+  const [serviceSelected, setSelection] = useState();
+  const buttonStore = [];
+  for (let i = 0; i < context.length; i += 1) {
+      buttonStore.push(
+        <button
+          className="microserviceBtn"
+          type="button"
+          key={`${i}${context[i]}`}
+          onClick={() => {
+            setSelection(<ServiceOverview index={i} />);
+          }}
+        >
+          {context[i]}
+        </button>,
+      );
+    }
+    return buttonStore;
+}
+
+export default Services;

user/settings.json

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