Skip to content

Commit f918bf6

Browse files
stephenhyangstephenhyang
authored
Merge pull request #2 from oslabs-beta/modularization
Modularization
2 parents 01ef0f9 + 57d1f73 commit f918bf6

12 files changed

Lines changed: 204 additions & 174 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/components/Occupied/Occupied.tsx‎

Lines changed: 38 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ import React, { useContext, useEffect, useState } from 'react';
88

99
// MATERIAL UI METHODS
1010
import { Modal, Button } from '@material-ui/core';
11-
import { makeStyles } from '@material-ui/core/styles';
12-
import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
1311

1412
// MATERIAL UI ICONS
1513
import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone';
@@ -35,20 +33,13 @@ import SearchBar from '../SearchBar';
3533
import DashboardIcons from '../DashboardIcons/DashboardIcons';
3634
import ApplicationsCard from '../ApplicationsCard/ApplicationsCard';
3735

38-
// TYPESCRIPT
39-
interface StyleProps {
40-
root: BaseCSSProperties;
41-
}
36+
import { useStylesLight, useStylesDark } from './helpers/muiHelper'
4237

4338
//v10: Memoized function, without any props. Should theoretically be called only once.
4439
const Occupied = React.memo(() => {
4540
const { setServicesData, app } = useContext(ApplicationContext);
4641
const { user, applications, getApplications, mode } = useContext(DashboardContext);
47-
const [serviceModalOpen, setServiceModalOpen] = useState<boolean>(false);
48-
const [personModalOpen, setPersonModalOpen] = useState<boolean>(false);
49-
const [envModalOpen, setEnvModalOpen] = useState<boolean>(false);
50-
const [addModalOpen, setAddModalOpen] = useState<boolean>(false);
51-
const [awsModalOpen, setAwsModalOpen] = useState<boolean>(false);
42+
const [ modal,setModal ] = useState({isOpen:false,type:''})
5243
const { appIndex } = useContext(ApplicationContext);
5344
const [searchTerm, setSearchTerm] = useState<string>('');
5445

@@ -59,116 +50,6 @@ const Occupied = React.memo(() => {
5950
getApplications();
6051
}, [user]);
6152

62-
// Conditional Rendering of UI Modals for Light and Dark Mode
63-
// Theme, StyleProps
64-
const useStylesDark = makeStyles<StyleProps>(theme => ({
65-
// ALL CARDS
66-
paper: {
67-
display: 'flex',
68-
flexDirection: 'column',
69-
alignContent: 'center',
70-
alignItems: 'center',
71-
position: 'relative',
72-
overflow: 'visible',
73-
height: 280,
74-
width: 280,
75-
textAlign: 'center',
76-
color: '#888888',
77-
whiteSpace: 'nowrap',
78-
backgroundColor: 'lightgray',
79-
borderRadius: 3,
80-
border: '0',
81-
boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',
82-
'&:hover, &.Mui-focusVisible': {
83-
backgroundColor: 'rgba(255, 255, 255, 0.2)',
84-
color: '#ffffff',
85-
fontWeight: 600,
86-
},
87-
},
88-
iconbutton: {
89-
boxShadow: 'none',
90-
color: 'none',
91-
visibility: 'hidden',
92-
},
93-
btnStyle: {
94-
position: 'absolute',
95-
top: -10,
96-
left: -72,
97-
margin: '0',
98-
color: '#eeeeee',
99-
borderRadius: '0',
100-
backgroundColor: 'none',
101-
visibility: 'visible',
102-
},
103-
icon: {
104-
width: '75px',
105-
height: '75px',
106-
boxShadow: 'none',
107-
},
108-
109-
// ALL CARDS: CONTENT
110-
fontStyles: {
111-
fontSize: '18px',
112-
fontFamily: 'Roboto',
113-
fontWeight: 300,
114-
color: '#444d56',
115-
},
116-
}));
117-
118-
const useStylesLight = makeStyles<StyleProps>(theme => ({
119-
// ALL CARDS
120-
paper: {
121-
display: 'flex',
122-
flexDirection: 'column',
123-
alignContent: 'center',
124-
alignItems: 'center',
125-
position: 'relative',
126-
overflow: 'visible',
127-
height: 280,
128-
width: 280,
129-
textAlign: 'center',
130-
color: '#888888',
131-
whiteSpace: 'nowrap',
132-
backgroundColor: 'white',
133-
borderRadius: 3,
134-
border: '0',
135-
boxShadow:
136-
'0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)',
137-
'&:hover, &.Mui-focusVisible': {
138-
backgroundColor: `#3788fc`,
139-
color: '#ffffff',
140-
fontWeight: 600,
141-
},
142-
},
143-
iconbutton: {
144-
boxShadow: 'none',
145-
color: 'none',
146-
visibility: 'hidden',
147-
},
148-
btnStyle: {
149-
position: 'absolute',
150-
top: -10,
151-
left: -72,
152-
margin: '0',
153-
color: '#eeeeee',
154-
borderRadius: '0',
155-
backgroundColor: 'none',
156-
visibility: 'visible',
157-
},
158-
icon: {
159-
width: '75px',
160-
height: '75px',
161-
boxShadow: 'none',
162-
},
163-
// ALL CARDS: CONTENT
164-
fontStyles: {
165-
fontSize: '18px',
166-
fontFamily: 'Roboto',
167-
fontWeight: 300,
168-
color: '#444d56',
169-
},
170-
}));
171-
17253
const classes = mode === 'light' ? useStylesLight({}) : useStylesDark({});
17354

17455
return (
@@ -181,15 +62,17 @@ const Occupied = React.memo(() => {
18162
setSearchTerm={setSearchTerm}
18263
/>
18364
<DashboardIcons
184-
setPersonModalOpen={setPersonModalOpen}
65+
setModal={setModal}
18566
/>
18667
</section>
18768
</header>
18869

18970
<div className="cardContainer">
19071

19172
<div className="card" id="card-add">
192-
<Button className={classes.paper} onClick={() => setEnvModalOpen(true)}>
73+
<Button className={classes.paper} onClick={() => {
74+
setModal({isOpen:true,type:'envModal'})
75+
}}>
19376
<AddCircleOutlineTwoToneIcon className={classes.icon} />
19477
</Button>
19578
</div>
@@ -201,12 +84,40 @@ const Occupied = React.memo(() => {
20184
<ApplicationsCard
20285
application={application}
20386
i={i}
204-
setServiceModalOpen={setServiceModalOpen}
87+
setModal={setModal}
20588
classes={classes}
20689
/>
20790
))}
208-
209-
<Modal open={envModalOpen} onClose={() => setEnvModalOpen(false)}>
91+
92+
<Modal
93+
open={modal.isOpen}
94+
onClose={() => setModal({isOpen:false,type:''})}
95+
>
96+
{
97+
modal.type === 'envModal' ?
98+
<EnvModal setModal={setModal} />
99+
:
100+
modal.type === 'awsModal' ?
101+
<AwsModal setModal={setModal} />
102+
:
103+
modal.type === 'addModal' ?
104+
<AddModal setModal={setModal} />
105+
:
106+
modal.type === 'personalModal' ?
107+
<ProfileContainer setModal={setModal}/>
108+
:
109+
modal.type === 'serviceModal' ?
110+
<ServicesModal
111+
key={`key-${appIndex}`}
112+
i={appIndex}
113+
app={app}
114+
/>
115+
:
116+
<></>
117+
}
118+
</Modal>
119+
120+
{/* <Modal open={envModalOpen} onClose={() => setEnvModalOpen(false)}>
210121
<EnvModal
211122
setOpen={setEnvModalOpen}
212123
setAwsModalOpen={setAwsModalOpen}
@@ -228,7 +139,7 @@ const Occupied = React.memo(() => {
228139
229140
<Modal open={serviceModalOpen} onClose={() => setServiceModalOpen(false)}>
230141
<ServicesModal key={`key-${appIndex}`} i={appIndex} app={app} />
231-
</Modal>
142+
</Modal> */}
232143
</div>
233144
</div>
234145
</div>

‎app/components/Occupied/helpers/muiHelper.ts‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
4+
5+
// Conditional Rendering of UI Modals for Light and Dark Mode
6+
// Theme, StyleProps
7+
8+
export const useStylesDark = makeStyles<BaseCSSProperties>(theme => ({
9+
// ALL CARDS
10+
paper: {
11+
display: 'flex',
12+
flexDirection: 'column',
13+
alignContent: 'center',
14+
alignItems: 'center',
15+
position: 'relative',
16+
overflow: 'visible',
17+
height: 280,
18+
width: 280,
19+
textAlign: 'center',
20+
color: '#888888',
21+
whiteSpace: 'nowrap',
22+
backgroundColor: 'lightgray',
23+
borderRadius: 3,
24+
border: '0',
25+
boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',
26+
'&:hover, &.Mui-focusVisible': {
27+
backgroundColor: 'rgba(255, 255, 255, 0.2)',
28+
color: '#ffffff',
29+
fontWeight: 600,
30+
},
31+
},
32+
iconbutton: {
33+
boxShadow: 'none',
34+
color: 'none',
35+
visibility: 'hidden',
36+
},
37+
btnStyle: {
38+
position: 'absolute',
39+
top: -10,
40+
left: -72,
41+
margin: '0',
42+
color: '#eeeeee',
43+
borderRadius: '0',
44+
backgroundColor: 'none',
45+
visibility: 'visible',
46+
},
47+
icon: {
48+
width: '75px',
49+
height: '75px',
50+
boxShadow: 'none',
51+
},
52+
53+
// ALL CARDS: CONTENT
54+
fontStyles: {
55+
fontSize: '18px',
56+
fontFamily: 'Roboto',
57+
fontWeight: 300,
58+
color: '#444d56',
59+
},
60+
}));
61+
62+
export const useStylesLight = makeStyles<BaseCSSProperties>(theme => ({
63+
// ALL CARDS
64+
paper: {
65+
display: 'flex',
66+
flexDirection: 'column',
67+
alignContent: 'center',
68+
alignItems: 'center',
69+
position: 'relative',
70+
overflow: 'visible',
71+
height: 280,
72+
width: 280,
73+
textAlign: 'center',
74+
color: '#888888',
75+
whiteSpace: 'nowrap',
76+
backgroundColor: 'white',
77+
borderRadius: 3,
78+
border: '0',
79+
boxShadow:
80+
'0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)',
81+
'&:hover, &.Mui-focusVisible': {
82+
backgroundColor: `#3788fc`,
83+
color: '#ffffff',
84+
fontWeight: 600,
85+
},
86+
},
87+
iconbutton: {
88+
boxShadow: 'none',
89+
color: 'none',
90+
visibility: 'hidden',
91+
},
92+
btnStyle: {
93+
position: 'absolute',
94+
top: -10,
95+
left: -72,
96+
margin: '0',
97+
color: '#eeeeee',
98+
borderRadius: '0',
99+
backgroundColor: 'none',
100+
visibility: 'visible',
101+
},
102+
icon: {
103+
width: '75px',
104+
height: '75px',
105+
boxShadow: 'none',
106+
},
107+
// ALL CARDS: CONTENT
108+
fontStyles: {
109+
fontSize: '18px',
110+
fontFamily: 'Roboto',
111+
fontWeight: 300,
112+
color: '#444d56',
113+
},
114+
}));

‎app/components/Occupied/types/Occupied.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
export type TModal = {
3+
isOpen:boolean
4+
type:string
5+
}
6+
7+
export type TModalSetter = {
8+
setModal: React.Dispatch<React.SetStateAction<{
9+
isOpen: boolean;
10+
type: string;
11+
}>>
12+
}

0 commit comments

Comments
 (0)