Modal component refactor

this commit represents the changes to all the individual modals
that are now rendered from a single modal state. Done to clarify
which modals are open and prevent unnecessary states

Author: mdtagg

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -12,7 +12,7 @@ type ClickEvent = React.MouseEvent<HTMLElement>;
 
 const ApplicationsCard = (props) => {
 
-  const { application, i, setServiceModalOpen, classes } = props
+  const { application, i, setModal, classes } = props
   const { deleteApp } = useContext(DashboardContext)
   const { setAppIndex, setApp, setServicesData, app } = useContext(ApplicationContext)
 
@@ -45,7 +45,7 @@ const ApplicationsCard = (props) => {
         setAppIndex(i);
         setApp(selectedApp);
         setServicesData([]);
-        setServiceModalOpen(true);
+        setModal({isOpen:true,type:'serviceModal'})
       }
     }
   };

app/components/DashboardIcons/DashboardIcons.tsx

@@ -10,7 +10,7 @@ import './styles.scss'
 
 const DashboardIcons = (props) => {
 
-  const { setPersonModalOpen } = props
+  const { setModal } = props
   const { applications } = useContext(DashboardContext)
   const { commsData } = useContext(CommsContext)
 
@@ -46,7 +46,7 @@ const DashboardIcons = (props) => {
       </div>
 
       <div className="personIconArea">
-        <Button className="personTooltip" onClick={() => setPersonModalOpen(true)}>
+        <Button className="personTooltip" onClick={() => setModal({isOpen:true,type:'personalModal'})}>
           <PersonIcon className="navIcon" id="personIcon" />
         </Button>
       </div>

app/containers/ProfileContainer.tsx

@@ -2,16 +2,13 @@ import React, { useContext } from 'react';
 import UserModal from '../modals/UserModal';
 import SetAuth from '../modals/SetAuth';
 import { DashboardContext } from '../context/DashboardContext';
+import { TModalSetter } from '../components/Occupied/types/Occupied';
 
-interface Props {
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const ProfileContainer: React.FC<Props> = React.memo(({ setOpen }) => {
+const ProfileContainer: React.FC<TModalSetter> = React.memo(({ setModal }) => {
   const { landingPage } = useContext(DashboardContext);
 
-  if (landingPage === 'dashBoard') return <SetAuth setOpen={setOpen} />;
-  return <UserModal setOpen={setOpen} />;
+  if (landingPage === 'dashBoard') return <SetAuth  setModal={setModal} />;
+  return <UserModal setModal={setModal} />;
 });
 
 export default ProfileContainer;

app/modals/AddModal.tsx

@@ -3,6 +3,8 @@ import React, { useState, useContext, useCallback } from 'react';
 import { DashboardContext } from '../context/DashboardContext';
 import '../stylesheets/AddModal.scss';
 
+import { TModalSetter } from '../components/Occupied/types/Occupied';
+
 interface IFields {
   typeOfService: string;
   database: string;
@@ -16,14 +18,10 @@ interface IDashboard {
   setApplications: any;
 }
 
-interface AddModalProps {
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
 type InputElement = React.ChangeEvent<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>;
 type FormElement = React.FormEvent<HTMLFormElement>;
 
-const AddModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
+const AddModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
   const { addApp, setApplications }: IDashboard = useContext(DashboardContext);
 
   const [fields, setFields] = useState<IFields>({
@@ -40,7 +38,9 @@ const AddModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
     // const newApp = [name, database, URI, description, typeOfService];
     // setApplications(prev => [...prev, ...newApp])
     addApp(fields);
-    setOpen(false); // Close modal on submit
+    // setOpenModal(false); // Close modal on submit
+    // setModalType('')
+    setModal({isOpen:false,type:''})
   };
 
   // Handle form changes

app/modals/AwsModal.tsx

@@ -3,6 +3,8 @@ import React, { useState, useContext, useCallback } from 'react';
 import { DashboardContext } from '../context/DashboardContext';
 import '../stylesheets/AwsModal.scss';
 
+import { TModalSetter } from '../components/Occupied/types/Occupied';
+
 interface AwsFields {
   typeOfService: string;
   instance: string;
@@ -25,7 +27,7 @@ interface AddModalProps {
 type InputElement = React.ChangeEvent<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>;
 type FormElement = React.FormEvent<HTMLFormElement>;
 
-const AwsModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
+const AwsModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
   const { addAwsApp }: IDashboard = useContext(DashboardContext);
 
   // instance is instanceID
@@ -44,7 +46,7 @@ const AwsModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
   const handleSubmit = (event: FormElement) => {
     event.preventDefault();
     addAwsApp(awsFields);
-    setOpen(false); // Close modal on submit
+    setModal({isOpen:false,type:''})
   };
 
   // Handle form changes

app/modals/EnvModal.tsx

@@ -2,24 +2,17 @@ import React from 'react';
 import { Button, Typography } from '@material-ui/core';
 import '../stylesheets/EnvModal.scss';
 import { CloudQueue, Computer } from '@material-ui/icons';
+import { TModalSetter } from '../components/Occupied/types/Occupied';
 
-interface EnvModalProps {
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  setAddModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  setAwsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
+const EnvModal: React.FC<TModalSetter> = React.memo(
+  ({ setModal}) => {
 
-const EnvModal: React.FC<EnvModalProps> = React.memo(
-  ({ setOpen, setAddModalOpen, setAwsModalOpen }) => {
     return (
       <div className="add-container">
         <div className="card" id="card-env">
           <button
             className="env-button"
-            onClick={() => {
-              setOpen(false);
-              setAwsModalOpen(true);
-            }}
+            onClick={() => setModal({isOpen:true,type:'awsModal'})}
           >
             <Typography>
               <CloudQueue fontSize="large" />
@@ -28,10 +21,7 @@ const EnvModal: React.FC<EnvModalProps> = React.memo(
           </button>
           <button
             className="env-button2"
-            onClick={() => {
-              setOpen(false);
-              setAddModalOpen(true);
-            }}
+            onClick={() => setModal({isOpen:true,type:'addModal'})}
           >
             <Typography>
               <Computer fontSize="large" />

app/modals/SetAuth.tsx

@@ -1,11 +1,8 @@
 import React, { useContext } from 'react';
 import { DashboardContext } from '../context/DashboardContext';
+import { TModalSetter } from '../components/Occupied/types/Occupied';
 
-interface Props {
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const SetAuthModal: React.FC<Props> = React.memo(({ setOpen }) => {
+const SetAuthModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
   const { updateLandingPage } = useContext(DashboardContext);
   const handleClick = () => {
     updateLandingPage('createAdmin');
@@ -21,7 +18,11 @@ const SetAuthModal: React.FC<Props> = React.memo(({ setOpen }) => {
         <form onSubmit={e => e.preventDefault()}>
           <br />
           <div />
-          <button onClick={() => setOpen(false)}>Cancel</button>
+          <button 
+            onClick={() => setModal({isOpen:false,type:''})}
+          >
+            Cancel
+          </button>
           <br />
           <button className="link" onClick={handleClick}>
             Add Authentication

app/modals/UserModal.tsx

@@ -6,14 +6,15 @@ import { DashboardContext } from '../context/DashboardContext';
 import { guestUser } from '../context/helpers';
 import '../stylesheets/UserModal.scss';
 import { Button } from '@material-ui/core';
+import { TModalSetter } from '../components/Occupied/types/Occupied';
 
 const { ipcRenderer } = window.require('electron');
 
 interface UserModalProps {
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const UserModal: React.FC<UserModalProps> = React.memo(({ setOpen }) => {
+const UserModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
   const { user, setUser, setApplications, setMode } = useContext(DashboardContext);
 
   const navigate = useNavigate();
@@ -38,7 +39,12 @@ const UserModal: React.FC<UserModalProps> = React.memo(({ setOpen }) => {
         </>
 
         }
-        <Button variant='outlined' onClick={() => setOpen(false)}>Close</Button>
+        <Button 
+          variant='outlined' 
+          onClick={() => setModal({isOpen:false,type:''})}
+        >
+          Close
+        </Button>
       </div>
     </div>
   );
@@ -48,7 +54,7 @@ const UserModal: React.FC<UserModalProps> = React.memo(({ setOpen }) => {
     setApplications(guestUser.services);
     setMode(guestUser.mode);
     ipcRenderer.sendSync('signOut');
-    setOpen(false);
+    setModal({isOpen:false,type:''})
   }
 });