Merge pull request #95 from ronellecaguioa/newbug

Resolve bugs

Author: ronellecaguioa

app/assets/chronos-v4-bw.png

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, useRef } from 'react';
 import {
   IconButton,
   Grid,
@@ -10,33 +10,37 @@ import {
 } from '@material-ui/core';
 import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
 import { makeStyles } from '@material-ui/core/styles';
-import { DashboardContext } from '../context/DashboardContext';
 
+import { DashboardContext } from '../context/DashboardContext';
 import ServicesModal from '../modals/ServicesModal';
 import '../stylesheets/Applications.css';
 
+type ClickEvent = React.MouseEvent<HTMLElement>;
+
 const Applications = () => {
   const { applications, getApplications, deleteApp } = useContext(DashboardContext);
   const [open, setOpen] = useState<boolean>(false);
   const [index, setIndex] = useState<number>(0);
   const [app, setApp] = useState<string>('');
+  const delRef = useRef<any>(null);
 
   useEffect(() => {
     getApplications();
   }, []);
 
   // Ask user for deletetion confirmation
-  const confirmDelete = (app: string, i: number) => {
+  const confirmDelete = (event: ClickEvent, app: string, i: number) => {
     const message = `The application '${app}' will be permanently deleted. Continue?`;
     if (confirm(message)) deleteApp(i);
   };
 
   // Handle clicks on Application cards
-  const handleClick = (selectedApp: string, i: number) => {
-    setIndex(i);
-    setApp(selectedApp);
-    console.log('handle', selectedApp);
-    setOpen(true);
+  const handleClick = (event: ClickEvent, selectedApp: string, i: number) => {
+    if (!delRef.current.contains(event.target)) {
+      setIndex(i);
+      setApp(selectedApp);
+      setOpen(true);
+    }
   };
 
   const useStyles = makeStyles(theme => ({
@@ -82,14 +86,15 @@ const Applications = () => {
             <Card
               className={classes.paper}
               variant="outlined"
-              onClick={(event: React.MouseEvent<HTMLElement>) => handleClick(app[0], i)}
+              onClick={event => handleClick(event, app[0], i)}
             >
               <CardHeader
                 avatar={
                   <IconButton
+                    ref={delRef}
                     className={classes.hover}
                     aria-label="Delete"
-                    onClick={(event: React.MouseEvent<HTMLElement>) => confirmDelete(app[0], i)}
+                    onClick={event => confirmDelete(event, app[0], i)}
                   >
                     <DeleteForeverOutlinedIcon />
                   </IconButton>

app/assets/chronos-v4-pangolin.png

@@ -6,7 +6,7 @@ import '../stylesheets/Home.scss';
 const Home = () => (
   <div className="home">
     <div className="pangolin-container">
-      <img src={'../assets/pangolin.png'} alt="Chronos logo" />
+      <img src={'../assets/chronos-v4-pangolin.png'} alt="Chronos logo" />
     </div>
     <h1 id="welcome">Welcome to Chronos</h1>
     <p>A very short short description about Chronos...</p>

app/components/Applications.tsx

@@ -29,7 +29,7 @@ const SidebarContainer: React.FC = (): JSX.Element => (
   >
     <div className="sidebar">
       <img alt="Chronos Logo" id="serviceDashLogo" src={'../assets/icon2Cropped.png'} />
-      <img alt="Chronos Logo Mini" id="miniLogo" src={'../assets/pangolin.png'} />
+      <img alt="Chronos Logo Mini" id="miniLogo" src={'../assets/chronos-v4-pangolin.png'} />
       <Link className="sidebar-link" to="/" id="home">
         <HomeSharpIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
         &emsp;Home

app/components/Home.tsx

@@ -38,8 +38,8 @@ select {
   button {
     &:first-of-type {
       position: absolute;
-      top: 25px;
-      left: 130px;
+      top: 20px;
+      left: 115px;
       background-color: transparent;
       border: 1px solid $sidebarblue;
       color: $sidebarblue;

app/containers/SidebarContainer.tsx

@@ -9,7 +9,6 @@
   flex-direction: column;
 
   .pangolin-container {
-    margin-top: 65px;
     height: auto;
     width: 40%;
     max-width: 650px;

app/stylesheets/Header.scss

@@ -58,10 +58,10 @@
 #miniLogo {
   position: absolute;
   animation: twirl 20s infinite linear;
-  left: 12px;
-  top: 35px;
-  height: 75px;
-  width: 75px;
+  left: 18px;
+  top: 15px;
+  height: auto;
+  width: 65px;
   opacity: 1;
   transition: 200ms;
   margin-top: 10px;

app/stylesheets/Home.scss

@@ -28,7 +28,7 @@ ipcMain.on('addApp', (message: IpcMainEvent, application: any) => {
   fs.writeFileSync(path.resolve(__dirname, '../user/settings.json'), JSON.stringify(state));
 
   // Sync event - return new applications list
-  message.returnValue = state.services.map((arr: string[]) => arr[0]);
+  message.returnValue = state.services.map((arr: string[]) => [arr[0], arr[3], arr[4]]);
 });
 
 /**
@@ -70,7 +70,7 @@ ipcMain.on('deleteApp', (message: IpcMainEvent, index) => {
   });
 
   // Sync event - return new applications list
-  message.returnValue = state.services.map((arr: string[]) => arr[0]);
+  message.returnValue = state.services.map((arr: string[]) => [arr[0], arr[3], arr[4]]);
 });
 
 // module.exports = dashboard;