Skip to content

Commit 57d1f73

Browse files
committed
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
1 parent dfdc00e commit 57d1f73

8 files changed

Lines changed: 39 additions & 43 deletions

File tree

app/components/ApplicationsCard/ApplicationsCard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ type ClickEvent = React.MouseEvent<HTMLElement>;
1212

1313
const ApplicationsCard = (props) => {
1414

15-
const { application, i, setServiceModalOpen, classes } = props
15+
const { application, i, setModal, classes } = props
1616
const { deleteApp } = useContext(DashboardContext)
1717
const { setAppIndex, setApp, setServicesData, app } = useContext(ApplicationContext)
1818

@@ -45,7 +45,7 @@ const ApplicationsCard = (props) => {
4545
setAppIndex(i);
4646
setApp(selectedApp);
4747
setServicesData([]);
48-
setServiceModalOpen(true);
48+
setModal({isOpen:true,type:'serviceModal'})
4949
}
5050
}
5151
};

app/components/DashboardIcons/DashboardIcons.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import './styles.scss'
1010

1111
const DashboardIcons = (props) => {
1212

13-
const { setPersonModalOpen } = props
13+
const { setModal } = props
1414
const { applications } = useContext(DashboardContext)
1515
const { commsData } = useContext(CommsContext)
1616

@@ -46,7 +46,7 @@ const DashboardIcons = (props) => {
4646
</div>
4747

4848
<div className="personIconArea">
49-
<Button className="personTooltip" onClick={() => setPersonModalOpen(true)}>
49+
<Button className="personTooltip" onClick={() => setModal({isOpen:true,type:'personalModal'})}>
5050
<PersonIcon className="navIcon" id="personIcon" />
5151
</Button>
5252
</div>

app/containers/ProfileContainer.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,13 @@ import React, { useContext } from 'react';
22
import UserModal from '../modals/UserModal';
33
import SetAuth from '../modals/SetAuth';
44
import { DashboardContext } from '../context/DashboardContext';
5+
import { TModalSetter } from '../components/Occupied/types/Occupied';
56

6-
interface Props {
7-
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
8-
}
9-
10-
const ProfileContainer: React.FC<Props> = React.memo(({ setOpen }) => {
7+
const ProfileContainer: React.FC<TModalSetter> = React.memo(({ setModal }) => {
118
const { landingPage } = useContext(DashboardContext);
129

13-
if (landingPage === 'dashBoard') return <SetAuth setOpen={setOpen} />;
14-
return <UserModal setOpen={setOpen} />;
10+
if (landingPage === 'dashBoard') return <SetAuth setModal={setModal} />;
11+
return <UserModal setModal={setModal} />;
1512
});
1613

1714
export default ProfileContainer;

app/modals/AddModal.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import React, { useState, useContext, useCallback } from 'react';
33
import { DashboardContext } from '../context/DashboardContext';
44
import '../stylesheets/AddModal.scss';
55

6+
import { TModalSetter } from '../components/Occupied/types/Occupied';
7+
68
interface IFields {
79
typeOfService: string;
810
database: string;
@@ -16,14 +18,10 @@ interface IDashboard {
1618
setApplications: any;
1719
}
1820

19-
interface AddModalProps {
20-
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
21-
}
22-
2321
type InputElement = React.ChangeEvent<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>;
2422
type FormElement = React.FormEvent<HTMLFormElement>;
2523

26-
const AddModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
24+
const AddModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
2725
const { addApp, setApplications }: IDashboard = useContext(DashboardContext);
2826

2927
const [fields, setFields] = useState<IFields>({
@@ -40,7 +38,9 @@ const AddModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
4038
// const newApp = [name, database, URI, description, typeOfService];
4139
// setApplications(prev => [...prev, ...newApp])
4240
addApp(fields);
43-
setOpen(false); // Close modal on submit
41+
// setOpenModal(false); // Close modal on submit
42+
// setModalType('')
43+
setModal({isOpen:false,type:''})
4444
};
4545

4646
// Handle form changes

app/modals/AwsModal.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import React, { useState, useContext, useCallback } from 'react';
33
import { DashboardContext } from '../context/DashboardContext';
44
import '../stylesheets/AwsModal.scss';
55

6+
import { TModalSetter } from '../components/Occupied/types/Occupied';
7+
68
interface AwsFields {
79
typeOfService: string;
810
instance: string;
@@ -25,7 +27,7 @@ interface AddModalProps {
2527
type InputElement = React.ChangeEvent<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>;
2628
type FormElement = React.FormEvent<HTMLFormElement>;
2729

28-
const AwsModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
30+
const AwsModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
2931
const { addAwsApp }: IDashboard = useContext(DashboardContext);
3032

3133
// instance is instanceID
@@ -44,7 +46,7 @@ const AwsModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
4446
const handleSubmit = (event: FormElement) => {
4547
event.preventDefault();
4648
addAwsApp(awsFields);
47-
setOpen(false); // Close modal on submit
49+
setModal({isOpen:false,type:''})
4850
};
4951

5052
// Handle form changes

app/modals/EnvModal.tsx

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,17 @@ import React from 'react';
22
import { Button, Typography } from '@material-ui/core';
33
import '../stylesheets/EnvModal.scss';
44
import { CloudQueue, Computer } from '@material-ui/icons';
5+
import { TModalSetter } from '../components/Occupied/types/Occupied';
56

6-
interface EnvModalProps {
7-
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
8-
setAddModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
9-
setAwsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
10-
}
7+
const EnvModal: React.FC<TModalSetter> = React.memo(
8+
({ setModal}) => {
119

12-
const EnvModal: React.FC<EnvModalProps> = React.memo(
13-
({ setOpen, setAddModalOpen, setAwsModalOpen }) => {
1410
return (
1511
<div className="add-container">
1612
<div className="card" id="card-env">
1713
<button
1814
className="env-button"
19-
onClick={() => {
20-
setOpen(false);
21-
setAwsModalOpen(true);
22-
}}
15+
onClick={() => setModal({isOpen:true,type:'awsModal'})}
2316
>
2417
<Typography>
2518
<CloudQueue fontSize="large" />
@@ -28,10 +21,7 @@ const EnvModal: React.FC<EnvModalProps> = React.memo(
2821
</button>
2922
<button
3023
className="env-button2"
31-
onClick={() => {
32-
setOpen(false);
33-
setAddModalOpen(true);
34-
}}
24+
onClick={() => setModal({isOpen:true,type:'addModal'})}
3525
>
3626
<Typography>
3727
<Computer fontSize="large" />

app/modals/SetAuth.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import React, { useContext } from 'react';
22
import { DashboardContext } from '../context/DashboardContext';
3+
import { TModalSetter } from '../components/Occupied/types/Occupied';
34

4-
interface Props {
5-
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
6-
}
7-
8-
const SetAuthModal: React.FC<Props> = React.memo(({ setOpen }) => {
5+
const SetAuthModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
96
const { updateLandingPage } = useContext(DashboardContext);
107
const handleClick = () => {
118
updateLandingPage('createAdmin');
@@ -21,7 +18,11 @@ const SetAuthModal: React.FC<Props> = React.memo(({ setOpen }) => {
2118
<form onSubmit={e => e.preventDefault()}>
2219
<br />
2320
<div />
24-
<button onClick={() => setOpen(false)}>Cancel</button>
21+
<button
22+
onClick={() => setModal({isOpen:false,type:''})}
23+
>
24+
Cancel
25+
</button>
2526
<br />
2627
<button className="link" onClick={handleClick}>
2728
Add Authentication

app/modals/UserModal.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@ import { DashboardContext } from '../context/DashboardContext';
66
import { guestUser } from '../context/helpers';
77
import '../stylesheets/UserModal.scss';
88
import { Button } from '@material-ui/core';
9+
import { TModalSetter } from '../components/Occupied/types/Occupied';
910

1011
const { ipcRenderer } = window.require('electron');
1112

1213
interface UserModalProps {
1314
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
1415
}
1516

16-
const UserModal: React.FC<UserModalProps> = React.memo(({ setOpen }) => {
17+
const UserModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
1718
const { user, setUser, setApplications, setMode } = useContext(DashboardContext);
1819

1920
const navigate = useNavigate();
@@ -38,7 +39,12 @@ const UserModal: React.FC<UserModalProps> = React.memo(({ setOpen }) => {
3839
</>
3940

4041
}
41-
<Button variant='outlined' onClick={() => setOpen(false)}>Close</Button>
42+
<Button
43+
variant='outlined'
44+
onClick={() => setModal({isOpen:false,type:''})}
45+
>
46+
Close
47+
</Button>
4248
</div>
4349
</div>
4450
);
@@ -48,7 +54,7 @@ const UserModal: React.FC<UserModalProps> = React.memo(({ setOpen }) => {
4854
setApplications(guestUser.services);
4955
setMode(guestUser.mode);
5056
ipcRenderer.sendSync('signOut');
51-
setOpen(false);
57+
setModal({isOpen:false,type:''})
5258
}
5359
});
5460

0 commit comments

Comments
 (0)