modularized ApplicationCard,added EventHandler

Author: tedpham3

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -1,68 +1,20 @@
-
-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'
-
-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>([]);
+import './styles.scss';
+import { getEventHandlers } from './EventHandlers';
 
-  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')
-
-        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'})
-      }
-    // }
-  };
+interface ApplicationCardProps {
+  application: any[];
+  i: number;
+  setModal: (modalState: { isOpen: boolean; type: string }) => void;
+  classes: any;
+}
 
-  // 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 ApplicationsCard: React.FC<ApplicationCardProps> = (props: ApplicationCardProps) => {
+  const { application, i, setModal, classes } = props;
+  const { handleClick, confirmDelete } = getEventHandlers({ application, setModal });
 
   return (
     <div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
@@ -73,8 +25,7 @@ const ApplicationsCard = (props) => {
         onClick={() => handleClick(application[0], application[3], i)}
       >
         <div className="databaseIconContainer">
-          <div className="databaseIconHeader">
-          </div>
+          <div className="databaseIconHeader"></div>
         </div>
 
         <CardHeader
@@ -84,11 +35,9 @@ const ApplicationsCard = (props) => {
               className={classes.iconbutton}
               aria-label="Delete"
               onClick={event => confirmDelete(event, i)}
-              size="large">
-              <HighlightOffIcon
-                className={classes.btnStyle}
-                id="deleteIcon"
-              />
+              size="large"
+            >
+              <HighlightOffIcon className={classes.btnStyle} id="deleteIcon" />
             </IconButton>
           }
         />
@@ -110,6 +59,6 @@ const ApplicationsCard = (props) => {
       </Card>
     </div>
   );
-}
+};
 
-export default ApplicationsCard
+export default ApplicationsCard;

app/components/ApplicationsCard/EventHandlers.ts

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { DashboardContext } from "../../context/DashboardContext";
-import { ApplicationContext } from "../../context/ApplicationContext";
+import { DashboardContext } from '../../context/DashboardContext';
+import { ApplicationContext } from '../../context/ApplicationContext';
 
 type ClickEvent = React.MouseEvent<HTMLElement>;
 
@@ -10,9 +10,10 @@ interface EventHandlersProps {
   setModal: (modalState: { isOpen: boolean; type: string }) => void;
 }
 
-export const useEventHandlers = ({ application, setModal }: EventHandlersProps) => {
+export const getEventHandlers = ({ application, setModal }: EventHandlersProps) => {
   const { deleteApp, user } = useContext(DashboardContext);
-  const { setAppIndex, setApp, setServicesData, app, example, connectToDB, setChart } = useContext(ApplicationContext);
+  const { setAppIndex, setApp, setServicesData, app, example, connectToDB, setChart } =
+    useContext(ApplicationContext);
   const navigate = useNavigate();
 
   const handleClick = (selectedApp: string, selectedService: string, i: number) => {
@@ -35,7 +36,7 @@ export const useEventHandlers = ({ application, setModal }: EventHandlersProps)
   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 { handleClick, confirmDelete };