Merge pull request #20 from Chronos2-0/jenae/delete_button

Jenae/delete button

Author: jenaepen

Main.js

@@ -119,6 +119,29 @@ ipcMain.on('dashboard', (message) => {
   message.returnValue = dashboardList;
 });
 
+//ipc 'deleteService' route
+ipcMain.on('deleteService', (message, index) => {
+  //assigns state to the returned the object returned from settings.json
+    let state = JSON.parse(
+      //read json from settings.json
+      fs.readFileSync(path.resolve(__dirname, './user/settings.json'), {
+        encoding: 'UTF-8',
+      }),
+    );
+    // updating the services
+    if(state.services.length > 1){
+      state.services.splice(index,1); 
+    }else{
+      state= {"setupRequired":true, "services":["hard","coded","in"] }
+    }
+    
+    //write json from settings.json
+    fs.writeFileSync(path.resolve(__dirname, './user/settings.json'), JSON.stringify(state), {
+        encoding: 'UTF-8'}) 
+    message.sender.send('deleteResponse', state.services);
+  });
+
+
 // Queries the database for communications information and returns it back to the render process.
 ipcMain.on('overviewRequest', (message, index) => {
   const services = JSON.parse(

app/components/DeleteService.jsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import DashboardContext from '../context/DashboardContext';
+import SetupContext from '../context/SetupContext';
+
+
+const { ipcRenderer } = window.require('electron');
+
+
+const DeleteService = (props) => {
+  console.log('in the DeleteService')
+  
+  // Used to toggle setup required if user wants delete all of the databases and the user needs to be sent to the front page.
+  const setup = useContext(SetupContext);
+
+  // List of the databases saved by users to track microservices. 
+  let serviceList = useContext(DashboardContext);
+ 
+  // Only happens when a DB button is clicked
+  const onDelete= (index) => {
+    // IPC communication used to delete the button pressed.
+    ipcRenderer.send('deleteService', index);
+    ipcRenderer.on('deleteResponse', (event, services) => {
+        serviceList = services;
+        if(serviceList === ["hard","coded","in"]){
+          setup.setupRequired =setup.toggleSetup(false);
+        }
+        document.location.reload();
+      
+    }); 
+  }
+
+  const databaseButtons =[];
+  for(let i = 0; i<serviceList.length; i++){
+    databaseButtons.push(<button className="microserviceBtn deleteMicroservice" key ={"delete"+i} onClick={()=>{
+      const moveForward = confirm(`Are you sure you want to delete ${serviceList[i]}? \n If "YES" press the "OK" button, \n else press the "Cancel" button`);
+      // if yes run the function 
+      if (moveForward){onDelete(i)}
+      
+    }}>{serviceList[i]}</button>)
+  }
+
+  return (
+    <div className="mainContainer">
+        <h1 className='overviewTitle'>Press on the Database You Want to Delete</h1>
+        <div className="servicesList">{databaseButtons}</div>
+    </div>
+  );
+};
+
+export default DeleteService;

app/components/ServicesDashboard.jsx

@@ -3,6 +3,7 @@ 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.
@@ -55,6 +56,16 @@ const ServicesDashboard = (props) => {
           >
             Add Database
           </button>
+          <button
+            className="overviewSubmitBtn"
+            type="submit"
+            key="goToDeletePage"
+            onClick={() => {
+              setSelection(<DeleteService />);
+            }}
+          >
+            Delete Database
+          </button>
         </div>
         <div className="left-bottom">
           <button

app/index.css

@@ -343,3 +343,6 @@ form {
   font-size: 2vh;
   /* margin-top: -4%; */
 }
+.deleteMicroservice{
+  padding: 10px;
+}

user/settings.json

@@ -1 +1 @@
-{"setupRequired":true, "services":["hard","coded","in"]}
+{"setupRequired":true,"services":["hard","coded","in"]}