updated ApplicationCard, functioning

Author: tedpham3

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -1,68 +1,23 @@
-
-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 React from 'react';
+import { Card, CardHeader, IconButton, CardContent, Typography } from "@mui/material";
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import UpdateIcon from '@mui/icons-material/Update';
-import './styles.scss'
+import { useEventHandlers } from './EventHandlers';
+import './styles.scss';
 
 type ClickEvent = React.MouseEvent<HTMLElement>;
 
-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 navigate = useNavigate();
-
-  // 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')
+interface ApplicationsCardProps {
+  application: any[];
+  i: number;
+  setModal: (modalState: { isOpen: boolean; type: string }) => void;
+  classes: any;
+}
 
-        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'})
-      }
-    // }
-  };
+const ApplicationsCard: React.FC<ApplicationsCardProps> = ({ application, i, setModal, classes }) => {
+  const { handleClick, confirmDelete } = useEventHandlers({ application, setModal });
 
-  // 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,"");
-  };
+  const [cardName, dbType, dbURI, serviceType, description] = application;
 
   return (
     <div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
@@ -73,8 +28,7 @@ const ApplicationsCard = (props) => {
         onClick={() => handleClick(application[0], application[3], i)}
       >
         <div className="databaseIconContainer">
-          <div className="databaseIconHeader">
-          </div>
+          <div className="databaseIconHeader"></div>
         </div>
 
         <CardHeader
@@ -83,33 +37,31 @@ const ApplicationsCard = (props) => {
               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}>
-            {application[0]}
+            {cardName}
           </Typography>
           <p id="serviceName">Service:</p>
-          <Typography className={classes.fontStyles}>{application[3]}</Typography>
+          <Typography className={classes.fontStyles}>{serviceType}</Typography>
         </CardContent>
         <hr className="cardLine" />
 
         <div className="cardFooter">
           <UpdateIcon className="cardFooterIcon" />
           <em>
-            <p id="cardFooterText">{application[4]}</p>
+            <p id="cardFooterText">{description}</p>
           </em>
         </div>
       </Card>
     </div>
   );
-}
+};
 
-export default ApplicationsCard
+export default ApplicationsCard;