Delete card functionality refactor

Cards are now deleted without the ref hook
I believe the delRef hook was being used to
prevent an issue with event bubbling. Becuase
the delete button is nested inside of the
Card component and card has an onClick the
prior teams were calling the onClick on the
card as well as the delete button.
event.stopPropagation was used to prevent
the bubbling the del ref hook is now able
to be removed

Author: mdtagg

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -15,10 +15,10 @@ const ApplicationsCard = (props) => {
   const { application, i, setModal, classes } = props
   const { deleteApp,user,applications } = useContext(DashboardContext)
   const { setAppIndex, setApp, setServicesData, app,example,connectToDB,setChart } = useContext(ApplicationContext)
-  const [ cardName,dbType,dbURI,description,serviceType ] = applications[i]
+  const [ cardName,dbType,dbURI,description,serviceType ] = application
 
   //dynamic refs
-  const delRef = useRef<any>([]);
+  // const delRef = useRef<any>([]);
 
   const navigate = useNavigate();
 
@@ -54,19 +54,18 @@ const ApplicationsCard = (props) => {
         navigate(`/applications/example/${services.join(' ')}`)
       }
       else {
-        setAppIndex(i);
-        setApp(selectedApp);
         setServicesData([]);
         //When we open the service modal a connection is made to the db in a useEffect inside of the service modal component
         setModal({isOpen:true,type:'serviceModal'})
       }
-    }
+    // }
   };
 
   // Asks user to confirm deletion
-  const confirmDelete = (event: ClickEvent, application: string, i: number) => {
+  const confirmDelete = (event: ClickEvent, i: number) => {
+    event.stopPropagation()
     const message = `The application '${app}' will be permanently deleted. Continue?`;
-    if (confirm(message)) deleteApp(i);
+    if (confirm(message)) deleteApp(i,"");
   };
 
   return (
@@ -75,7 +74,7 @@ const ApplicationsCard = (props) => {
         key={`card-${i}`}
         className={classes.paper}
         variant="outlined"
-        onClick={event => handleClick(event, application[0], application[3], i)}
+        onClick={() => handleClick(application[0], application[3], i)}
       >
         <div className="databaseIconContainer">
           <div className="databaseIconHeader">
@@ -86,25 +85,18 @@ const ApplicationsCard = (props) => {
           avatar={
             <IconButton
               id="iconButton"
-              ref={element => {
-                delRef.current[i] = element;
-              }}
               className={classes.iconbutton}
               aria-label="Delete"
-              onClick={event => confirmDelete(event, application[0], i)}
+              onClick={event => confirmDelete(event, i)}
             >
               <HighlightOffIcon
                 className={classes.btnStyle}
                 id="deleteIcon"
-                ref={element => {
-                  delRef.current[i] = element;
-                }}
               />
             </IconButton>
           }
         />
         <CardContent>
-          {/* <p id="databaseName">Name:</p> */}
           <Typography noWrap id="databaseName" className={classes.fontStyles}>
             {application[0]}
           </Typography>

app/containers/SidebarContainer.tsx

@@ -18,7 +18,7 @@ const SidebarContainer = React.memo(() => {
   // Extract isLoading and setLoading state from AwsContext. Initial value: isLoading = true
   const { isLoading, setLoadingState } = useContext(AwsContext);
   // clear interval and set loading state to true when leaving graph containers
-  const { addApp,setApplications } = useContext(DashboardContext)
+  const { addApp,setApplications,deleteApp } = useContext(DashboardContext)
   /**
    * @function handleCLick - check if the 'intervalID' exists. If so, theres a timer running and the fuunction clears the timer using @function clearInterval - function.
    * Checks if variable 'isLoading' is false and if so the content is not loading and therefore, sets it to true using the setLoadingState function.
@@ -69,11 +69,12 @@ const SidebarContainer = React.memo(() => {
 
   const handleExitExample = () => {
     setExample(false)
-    setApplications([])
+    // setApplications([])
     setAppIndex(0);
     setApp('');
     setServicesData([]);
     setChart('communications')
+    deleteApp(0,'all')
   }
 
   return (

app/context/DashboardContext.tsx

@@ -83,8 +83,8 @@ const DashboardContextProvider = React.memo((props: any) => {
     // console.log('the current application that was added is : ', result)
   }, []);
 
-  const deleteApp = useCallback((index: number) => {
-    const result = ipcRenderer.sendSync('deleteApp', index);
+  const deleteApp = useCallback((index: number,action:string) => {
+    const result = ipcRenderer.sendSync('deleteApp', index,action);
     setApplications(result);
   }, []);
 

electron/routes/dashboard.ts

@@ -198,23 +198,25 @@ ipcMain.on('getApps', (message: IpcMainEvent) => {
  *          If user is logged in, makes an update query request to mongoDB to delete the desired application in services array
  * @return  Returns the new list of applications
  */
-ipcMain.on('deleteApp', (message: IpcMainEvent, index) => {
+ipcMain.on('deleteApp', (message: IpcMainEvent, index:number, action:string) => {
   //If user is not logged in
   if (currentUser === 'guest') {
     // Retrives file contents from settings.json
     const settings = JSON.parse(fs.readFileSync(settingsLocation).toString('utf8'));
-    const userServices = settings[currentUser].services;
+    let guestServices = settings[currentUser].services;
 
     // Remove application from settings.json
-    userServices.splice(index, 1);
+    console.log({action})
+    if(action === 'all') guestServices.splice(0);
+    else guestServices.splice(index, 1);
 
     // Update settings.json with new list
     fs.writeFileSync(settingsLocation, JSON.stringify(settings, null, '\t'), {
       encoding: 'utf8',
     });
 
     // Sync event - return new applications list
-    message.returnValue = userServices.map((arr: string[]) => [arr[0], arr[1], arr[3], arr[4]]);
+    message.returnValue = guestServices.map((arr: string[]) => [...arr]);
   }
 
   //If user is logged in