pre push commit

Author: tedpham3

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -1,23 +1,68 @@
-import React from 'react';
-import { Card, CardHeader, IconButton, CardContent, Typography } from "@mui/material";
+
+import React, { useContext, useRef } from "react";
+import { useNavigate } from 'react-router-dom';
+import { Card,CardHeader,IconButton,CardContent,Typography } from "@mui/material";
+import { DashboardContext } from "../../context/DashboardContext";
+import { ApplicationContext } from "../../context/ApplicationContext";
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import UpdateIcon from '@mui/icons-material/Update';
-import { useEventHandlers } from './EventHandlers';
-import './styles.scss';
+import './styles.scss'
 
 type ClickEvent = React.MouseEvent<HTMLElement>;
 
-interface ApplicationsCardProps {
-  application: any[];
-  i: number;
-  setModal: (modalState: { isOpen: boolean; type: string }) => void;
-  classes: any;
-}
+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 ] = application
+
+  //dynamic refs
+  // const delRef = useRef<any>([]);
 
-const ApplicationsCard: React.FC<ApplicationsCardProps> = ({ application, i, setModal, classes }) => {
-  const { handleClick, confirmDelete } = useEventHandlers({ application, setModal });
+  const navigate = useNavigate();
 
-  const [cardName, dbType, dbURI, serviceType, description] = application;
+  // Handle clicks on Application cards
+  // v10 info: when card is clicked (not on the delete button) if the service is an AWS instance,
+  // you are redirected to AWSGraphsContainer passing in the state object containing typeOfService
+  const handleClick = (
+    selectedApp: string,
+    selectedService: string,
+    i: number
+  ) => {
+    const services = ['auth','client','event-bus','items','inventory','orders']
+    // if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
+      setAppIndex(i);
+      setApp(selectedApp);
+      if (
+        selectedService === 'AWS' ||
+        selectedService === 'AWS/EC2' ||
+        selectedService === 'AWS/ECS' ||
+        selectedService === 'AWS/EKS'
+      ) {
+        navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } });
+      } 
+      else if(example) {
+        setServicesData([]);
+        setChart('communications')
+
+        connectToDB(user, i, app, dbURI, dbType)
+        navigate(`/applications/example/${services.join(' ')}`)
+      }
+      else {
+        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, i: number) => {
+    event.stopPropagation()
+    const message = `The application '${app}' will be permanently deleted. Continue?`;
+    if (confirm(message)) deleteApp(i,"");
+  };
 
   return (
     <div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
@@ -28,7 +73,8 @@ const ApplicationsCard: React.FC<ApplicationsCardProps> = ({ application, i, set
         onClick={() => handleClick(application[0], application[3], i)}
       >
         <div className="databaseIconContainer">
-          <div className="databaseIconHeader"></div>
+          <div className="databaseIconHeader">
+          </div>
         </div>
 
         <CardHeader
@@ -37,31 +83,33 @@ const ApplicationsCard: React.FC<ApplicationsCardProps> = ({ application, i, set
               id="iconButton"
               className={classes.iconbutton}
               aria-label="Delete"
-              onClick={(event) => confirmDelete(event, i)}
-              size="large"
-            >
-              <HighlightOffIcon className={classes.btnStyle} id="deleteIcon" />
+              onClick={event => confirmDelete(event, i)}
+              size="large">
+              <HighlightOffIcon
+                className={classes.btnStyle}
+                id="deleteIcon"
+              />
             </IconButton>
           }
         />
         <CardContent>
           <Typography noWrap id="databaseName" className={classes.fontStyles}>
-            {cardName}
+            {application[0]}
           </Typography>
           <p id="serviceName">Service:</p>
-          <Typography className={classes.fontStyles}>{serviceType}</Typography>
+          <Typography className={classes.fontStyles}>{application[3]}</Typography>
         </CardContent>
         <hr className="cardLine" />
 
         <div className="cardFooter">
           <UpdateIcon className="cardFooterIcon" />
           <em>
-            <p id="cardFooterText">{description}</p>
+            <p id="cardFooterText">{application[4]}</p>
           </em>
         </div>
       </Card>
     </div>
   );
-};
+}
 
-export default ApplicationsCard;
+export default ApplicationsCard