Skip to content

Commit e494601

Browse files
AhnafKhvnAhnafKhvn
authored
Merge pull request #39 from oslabs-beta/Hernan/alerts
Hernan/alerts
2 parents 3daed4d + 7f84ccc commit e494601

File tree

16 files changed

+255
-36
lines changed

16 files changed

+255
-36
lines changed

‎app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const ComponentDropDown = ({
6767
};
6868

6969
const renderOption = (props, option) => (
70-
<li style={{ color: 'black', border: '1px solid black' }} {...props}>
70+
<li style={{ color: 'black', backgroundColor: 'none'}} {...props}>
7171
{option.name}
7272
</li>
7373
);
@@ -93,7 +93,7 @@ const ComponentDropDown = ({
9393
{...params}
9494
InputProps={{
9595
...params.InputProps,
96-
style: { color: color }
96+
style: { color: 'white' }
9797
}}
9898
variant="filled"
9999
label="Select Component"

‎app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const ContextDropDown = ({
6969
};
7070

7171
const renderOption = (props, option) => (
72-
<li style={{ color: 'black', border: '1px solid black' }} {...props}>
72+
<li style={{ color: 'black' }} {...props}>
7373
{option.name}
7474
</li>
7575
);
@@ -95,7 +95,7 @@ const ContextDropDown = ({
9595
{...params}
9696
InputProps={{
9797
...params.InputProps,
98-
style: { color }
98+
style: { color: 'white' }
9999
}}
100100
label="Select Context"
101101
variant="filled"

‎app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,8 @@ const AddContextForm = ({
100100
/>
101101
<Snackbar
102102
open={open && !errorStatus}
103-
autoHideDuration={6000}
103+
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
104+
autoHideDuration={3000}
104105
onClose={handleClose}
105106
>
106107
<Alert

‎app/src/components/left/HTMLItem.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const HTMLItem: React.FC<{
7070
const children = (
7171
<List className="export-preference">
7272
<ListItem
73+
id="export-modal"
7374
key={`clear${deleteID}`}
7475
onClick={() => handleDelete(deleteID)}
7576
style={{
@@ -85,6 +86,7 @@ const HTMLItem: React.FC<{
8586
/>
8687
</ListItem>
8788
<ListItem
89+
id="export-modal"
8890
key={`close${deleteID}`}
8991
onClick={closeModal}
9092
style={{

‎app/src/components/left/HTMLPanel.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { RootState } from '../../redux/store';
77
import TextField from '@mui/material/TextField';
88
import { addElement } from '../../redux/reducers/slice/appStateSlice';
99
import makeStyles from '@mui/styles/makeStyles';
10+
import MuiAlert, { AlertProps } from '@mui/material/Alert';
11+
import Snackbar from '@mui/material/Snackbar';
1012

1113
/*
1214
DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
@@ -29,6 +31,7 @@ const HTMLPanel = (props): JSX.Element => {
2931
const [name, setName] = useState('');
3032
const [errorMsg, setErrorMsg] = useState('');
3133
const [errorStatus, setErrorStatus] = useState(false);
34+
const [alertOpen, setAlertOpen] = React.useState<boolean>(false)
3235
const isDarkMode = useSelector(
3336
(store: RootState) => store.darkMode.isDarkMode
3437
);
@@ -158,7 +161,29 @@ const HTMLPanel = (props): JSX.Element => {
158161
};
159162
}, []);
160163

164+
const handleAlertOpen = () => {
165+
setAlertOpen(true)
166+
}
167+
168+
const handleAlertClose = (
169+
event: React.SyntheticEvent | Event,
170+
reason?: string
171+
) => {
172+
if (reason === 'clickaway') {
173+
return;
174+
}
175+
setAlertOpen(false);
176+
}
177+
178+
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
179+
props,
180+
ref
181+
) {
182+
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
183+
});
184+
161185
return (
186+
<>
162187
<div className="HTMLItemCreate">
163188
<div className={classes.addComponentWrapper}>
164189
<div className={classes.inputWrapper}>
@@ -268,6 +293,7 @@ const HTMLPanel = (props): JSX.Element => {
268293
)}
269294
<br></br>
270295
<Button
296+
onClick={handleAlertOpen}
271297
className={
272298
!isDarkMode
273299
? `${classes.addElementButton} ${classes.lightThemeFontColor}`
@@ -285,6 +311,23 @@ const HTMLPanel = (props): JSX.Element => {
285311
</div>
286312
</div>
287313
</div>
314+
<>
315+
<Snackbar
316+
open={alertOpen}
317+
autoHideDuration={3000}
318+
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
319+
onClose={handleAlertClose}
320+
>
321+
<Alert
322+
onClose={handleAlertClose}
323+
severity="success"
324+
sx={{ width: '100%', color: 'white' }}
325+
>
326+
HTML Tag Created!
327+
</Alert>
328+
</Snackbar>
329+
</>
330+
</>
288331
);
289332
};
290333

‎app/src/components/main/CanvasContainer.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ function CanvasContainer(props): JSX.Element {
3838
textAlign: 'center',
3939
color: '#ffffff',
4040
backgroundColor: '#151515',
41-
zIndex: 0
41+
zIndex: 0,
42+
border: '2px solid #186BB4'
4243

4344

4445

‎app/src/components/marketplace/MarketplaceCard.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,7 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
167167
<Snackbar
168168
open={alertOpen}
169169
autoHideDuration={3000}
170+
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
170171
onClose={handleAlertClose}
171172
>
172173
<Alert

‎app/src/components/right/ComponentPanel.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { RootState } from '../../redux/store';
66
import TextField from '@mui/material/TextField';
77
import { addComponent } from '../../redux/reducers/slice/appStateSlice';
88
import makeStyles from '@mui/styles/makeStyles';
9+
import MuiAlert, { AlertProps } from '@mui/material/Alert';
10+
import Snackbar from '@mui/material/Snackbar';
911

1012
// The component panel section of the left panel displays all components and has the ability to add new components
1113
const ComponentPanel = ({ isThemeLight }): JSX.Element => {
@@ -22,6 +24,7 @@ const ComponentPanel = ({ isThemeLight }): JSX.Element => {
2224
const [errorMsg, setErrorMsg] = useState('');
2325
const [compName, setCompName] = useState('');
2426
const [isRoot, setIsRoot] = useState(false);
27+
const [alertOpen, setAlertOpen] = React.useState<boolean>(false)
2528

2629
// function to create error message for component name input
2730
const triggerError = (type: String) => {
@@ -96,6 +99,7 @@ const ComponentPanel = ({ isThemeLight }): JSX.Element => {
9699
} else {
97100
createOption(compName);
98101
setErrorStatus(false);
102+
setAlertOpen(true)
99103
return;
100104
}
101105
triggerError(error);
@@ -114,7 +118,26 @@ const ComponentPanel = ({ isThemeLight }): JSX.Element => {
114118
document.removeEventListener('keydown', keyBindCreateComponent);
115119
};
116120
}, []);
121+
122+
const handleAlertClose = (
123+
event: React.SyntheticEvent | Event,
124+
reason?: string
125+
) => {
126+
if (reason === 'clickaway') {
127+
return;
128+
}
129+
setAlertOpen(false);
130+
}
131+
132+
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
133+
props,
134+
ref
135+
) {
136+
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
137+
});
138+
117139
return (
140+
<>
118141
<div className={`${classes.panelWrapper}`}>
119142
{/* Add a new component*/}
120143
<div className={classes.addComponentWrapper}>
@@ -229,6 +252,23 @@ const ComponentPanel = ({ isThemeLight }): JSX.Element => {
229252
</div>
230253
</div>
231254
</div>
255+
<>
256+
<Snackbar
257+
open={alertOpen}
258+
autoHideDuration={3000}
259+
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
260+
onClose={handleAlertClose}
261+
>
262+
<Alert
263+
onClose={handleAlertClose}
264+
severity="success"
265+
sx={{ width: '100%', color: 'white' }}
266+
>
267+
Component Created!
268+
</Alert>
269+
</Snackbar>
270+
</>
271+
</>
232272
);
233273
};
234274

‎app/src/components/right/DeleteProjects.tsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,18 @@ import localforage from 'localforage';
1818
import { useSelector, useDispatch } from 'react-redux';
1919
import { setInitialState, initialState } from '../../redux/reducers/slice/appStateSlice';
2020
import { RootState } from '../../redux/store';
21+
import MuiAlert, { AlertProps } from '@mui/material/Alert';
22+
import Snackbar from '@mui/material/Snackbar';
2123
export interface ProjectDialogProps {
24+
deleteAlert: () => void;
2225
open: boolean;
2326
projects: Array<Object>;
2427
onClose: () => void;
2528
}
2629
// The options to be rendered when dialog is open
2730
function ProjectsDialog(props: ProjectDialogProps) {
2831
const classes = useStyles();
29-
const { onClose, open, projects } = props;
32+
const { onClose, open, projects, deleteAlert } = props;
3033
const state = useSelector((store:RootState) => store.appState);
3134
const dispatch = useDispatch();
3235

@@ -41,14 +44,17 @@ function ProjectsDialog(props: ProjectDialogProps) {
4144
const selectedProject = projects.filter(
4245
(project: any) => project._id === value
4346
)[0];
44-
console.log('deleting this one', selectedProject)
45-
deleteProject(selectedProject);
46-
localforage.removeItem(window.localStorage.getItem('ssid'));
47-
dispatch(setInitialState(initialState))
48-
onClose();
47+
console.log('deleting this one', selectedProject)
48+
deleteProject(selectedProject);
49+
localforage.removeItem(window.localStorage.getItem('ssid'));
50+
dispatch(setInitialState(initialState))
51+
// handleAlertOpen()
52+
deleteAlert()
53+
onClose()
4954
};
50-
55+
5156
return (
57+
<>
5258
<Dialog
5359
onClose={handleClose}
5460
aria-labelledby="project-dialog-title"
@@ -90,10 +96,11 @@ function ProjectsDialog(props: ProjectDialogProps) {
9096
))}
9197
</List>
9298
</Dialog>
99+
</>
93100
);
94101
}
95102

96-
export default function ProjectsFolder() {
103+
export default function ProjectsFolder(props) {
97104
const [open, setOpen] = useState(false);
98105
const [projects, setProjects] = useState([{ hello: 'cat' }]);
99106

@@ -110,6 +117,7 @@ export default function ProjectsFolder() {
110117
setOpen(false);
111118
};
112119

120+
113121
const keyBindDeleteProject = useCallback((e) => {
114122
if(e.key === 'Backspace' && e.metaKey || e.key === 'Backspace' && e.ctrlKey) {
115123
e.preventDefault();
@@ -123,6 +131,7 @@ export default function ProjectsFolder() {
123131
document.removeEventListener('keydown', keyBindDeleteProject)
124132
}
125133
}, []);
134+
126135
return (
127136
<div>
128137
<Button
@@ -133,7 +142,7 @@ export default function ProjectsFolder() {
133142
>
134143
Delete Project
135144
</Button>
136-
<ProjectsDialog open={open} onClose={handleClose} projects={projects} />
145+
<ProjectsDialog open={open} onClose={handleClose} projects={projects} deleteAlert={props.deleteAlert}/>
137146
</div>
138147
);
139148
}

‎app/src/components/right/OpenProjects.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,15 @@ import { openProject } from '../../redux/reducers/slice/appStateSlice';
1616
import { RootState } from '../../redux/store';
1717

1818
export interface ProjectDialogProps {
19+
openAlert: () => void;
1920
open: boolean;
2021
projects: Array<Object>;
2122
onClose: () => void;
2223
}
2324
// The options to be rendered when dialog is open
2425
function ProjectsDialog(props: ProjectDialogProps) {
2526
const classes = useStyles();
26-
const { onClose, open, projects } = props;
27+
const { onClose, open, projects, openAlert } = props;
2728
const state = useSelector((store:RootState) => store.appState);
2829
const dispatch = useDispatch();
2930
// If no projects selected, keep the name of the current displayed
@@ -38,6 +39,7 @@ function ProjectsDialog(props: ProjectDialogProps) {
3839
// dispatch({ type: 'OPEN PROJECT', payload: selectedProject });
3940
console.log(selectedProject);
4041
dispatch(openProject(selectedProject))
42+
openAlert()
4143
onClose();
4244
};
4345

@@ -127,7 +129,7 @@ export default function ProjectsFolder(props) {
127129
>
128130
Open Project
129131
</Button>
130-
<ProjectsDialog open={open} onClose={handleClose} projects={projects} />
132+
<ProjectsDialog open={open} onClose={handleClose} projects={projects} openAlert={props.openAlert}/>
131133
</div>
132134
);
133135
}

0 commit comments

Comments
 (0)