Merge pull request #39 from oslabs-beta/Hernan/alerts

AhnafKhvn · web-flow · commit e494601b9469 · 2023-09-05T11:51:33.000-07:00
Hernan/alerts
diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx
@@ -67,7 +67,7 @@ const ComponentDropDown = ({
   };
 
   const renderOption = (props, option) => (
-    <li style={{ color: 'black', border: '1px solid black' }} {...props}>
+    <li style={{ color: 'black', backgroundColor: 'none'}} {...props}>
       {option.name}
     </li>
   );
@@ -93,7 +93,7 @@ const ComponentDropDown = ({
               {...params}
               InputProps={{
                 ...params.InputProps,
-                style: { color: color }
+                style: { color: 'white' }
               }}
               variant="filled"
               label="Select Component"
diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx
@@ -69,7 +69,7 @@ const ContextDropDown = ({
   };
 
   const renderOption = (props, option) => (
-    <li style={{ color: 'black', border: '1px solid black' }} {...props}>
+    <li style={{ color: 'black' }} {...props}>
       {option.name}
     </li>
   );
@@ -95,7 +95,7 @@ const ContextDropDown = ({
               {...params}
               InputProps={{
                 ...params.InputProps,
-                style: { color }
+                style: { color: 'white' }
               }}
               label="Select Context"
               variant="filled"
diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx
@@ -100,7 +100,8 @@ const AddContextForm = ({
         />
         <Snackbar
           open={open && !errorStatus}
-          autoHideDuration={6000}
+          anchorOrigin={{ vertical: 'top', horizontal: 'center' }} 
+          autoHideDuration={3000}
           onClose={handleClose}
         >
           <Alert
diff --git a/app/src/components/left/HTMLItem.tsx b/app/src/components/left/HTMLItem.tsx
@@ -70,6 +70,7 @@ const HTMLItem: React.FC<{
     const children = (
       <List className="export-preference">
         <ListItem
+          id="export-modal"
           key={`clear${deleteID}`}
           onClick={() => handleDelete(deleteID)}
           style={{
@@ -85,6 +86,7 @@ const HTMLItem: React.FC<{
           />
         </ListItem>
         <ListItem
+          id="export-modal"
           key={`close${deleteID}`}
           onClick={closeModal}
           style={{
diff --git a/app/src/components/left/HTMLPanel.tsx b/app/src/components/left/HTMLPanel.tsx
@@ -7,6 +7,8 @@ import { RootState } from '../../redux/store';
 import TextField from '@mui/material/TextField';
 import { addElement } from '../../redux/reducers/slice/appStateSlice';
 import makeStyles from '@mui/styles/makeStyles';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
+import Snackbar from '@mui/material/Snackbar';
 
 /*
 DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
@@ -29,6 +31,7 @@ const HTMLPanel = (props): JSX.Element => {
   const [name, setName] = useState('');
   const [errorMsg, setErrorMsg] = useState('');
   const [errorStatus, setErrorStatus] = useState(false);
+  const [alertOpen, setAlertOpen] = React.useState<boolean>(false)
   const isDarkMode = useSelector(
     (store: RootState) => store.darkMode.isDarkMode
   );
@@ -158,7 +161,29 @@ const HTMLPanel = (props): JSX.Element => {
     };
   }, []);
 
+  const handleAlertOpen = () => {
+    setAlertOpen(true)
+  }
+
+  const handleAlertClose = (
+    event: React.SyntheticEvent | Event,
+    reason?: string
+    ) => {
+      if (reason === 'clickaway') {
+        return;
+      }
+      setAlertOpen(false);
+    }
+
+  const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+    props,
+    ref
+  ) {
+    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+  });
+
   return (
+  <>
     <div className="HTMLItemCreate">
       <div className={classes.addComponentWrapper}>
         <div className={classes.inputWrapper}>
@@ -268,6 +293,7 @@ const HTMLPanel = (props): JSX.Element => {
             )}
             <br></br>
             <Button
+              onClick={handleAlertOpen}
               className={
                 !isDarkMode
                   ? `${classes.addElementButton} ${classes.lightThemeFontColor}`
@@ -285,6 +311,23 @@ const HTMLPanel = (props): JSX.Element => {
         </div>
       </div>
     </div>
+    <>
+    <Snackbar
+      open={alertOpen}
+      autoHideDuration={3000}
+      anchorOrigin={{ vertical: 'top', horizontal: 'center' }} 
+      onClose={handleAlertClose}
+    >
+      <Alert
+        onClose={handleAlertClose}
+        severity="success"
+        sx={{ width: '100%', color: 'white' }}
+      >
+        HTML Tag Created!
+      </Alert>
+    </Snackbar>
+    </>
+ </>
   );
 };
 
diff --git a/app/src/components/main/CanvasContainer.tsx b/app/src/components/main/CanvasContainer.tsx
@@ -38,7 +38,8 @@ function CanvasContainer(props): JSX.Element {
     textAlign: 'center',
     color: '#ffffff', 
     backgroundColor: '#151515',
-    zIndex: 0
+    zIndex: 0,
+    border: '2px solid #186BB4'
  
     
     
diff --git a/app/src/components/marketplace/MarketplaceCard.tsx b/app/src/components/marketplace/MarketplaceCard.tsx
@@ -167,6 +167,7 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
         <Snackbar
           open={alertOpen}
           autoHideDuration={3000}
+          anchorOrigin={{ vertical: 'top', horizontal: 'center' }} 
           onClose={handleAlertClose}
         >
           <Alert
diff --git a/app/src/components/right/ComponentPanel.tsx b/app/src/components/right/ComponentPanel.tsx
@@ -6,6 +6,8 @@ import { RootState } from '../../redux/store';
 import TextField from '@mui/material/TextField';
 import { addComponent } from '../../redux/reducers/slice/appStateSlice';
 import makeStyles from '@mui/styles/makeStyles';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
+import Snackbar from '@mui/material/Snackbar';
 
 // The component panel section of the left panel displays all components and has the ability to add new components
 const ComponentPanel = ({ isThemeLight }): JSX.Element => {
@@ -22,6 +24,7 @@ const ComponentPanel = ({ isThemeLight }): JSX.Element => {
   const [errorMsg, setErrorMsg] = useState('');
   const [compName, setCompName] = useState('');
   const [isRoot, setIsRoot] = useState(false);
+  const [alertOpen, setAlertOpen] = React.useState<boolean>(false)
 
   // function to create error message for component name input
   const triggerError = (type: String) => {
@@ -96,6 +99,7 @@ const ComponentPanel = ({ isThemeLight }): JSX.Element => {
     } else {
       createOption(compName);
       setErrorStatus(false);
+      setAlertOpen(true)
       return;
     }
     triggerError(error);
@@ -114,7 +118,26 @@ const ComponentPanel = ({ isThemeLight }): JSX.Element => {
       document.removeEventListener('keydown', keyBindCreateComponent);
     };
   }, []);
+
+  const handleAlertClose = (
+    event: React.SyntheticEvent | Event,
+    reason?: string
+    ) => {
+      if (reason === 'clickaway') {
+        return;
+      }
+      setAlertOpen(false);
+    }
+
+  const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+    props,
+    ref
+  ) {
+    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+  });
+
   return (
+    <>
     <div className={`${classes.panelWrapper}`}>
       {/* Add a new component*/}
       <div className={classes.addComponentWrapper}>
@@ -229,6 +252,23 @@ const ComponentPanel = ({ isThemeLight }): JSX.Element => {
         </div>
       </div>
     </div>
+    <>
+        <Snackbar
+          open={alertOpen}
+          autoHideDuration={3000}
+          anchorOrigin={{ vertical: 'top', horizontal: 'center' }} 
+          onClose={handleAlertClose}
+        >
+          <Alert
+            onClose={handleAlertClose}
+            severity="success"
+            sx={{ width: '100%', color: 'white' }}
+          >
+            Component Created!
+          </Alert>
+        </Snackbar>
+    </>
+  </>
   );
 };
 
diff --git a/app/src/components/right/DeleteProjects.tsx b/app/src/components/right/DeleteProjects.tsx
@@ -18,15 +18,18 @@ import localforage from 'localforage';
 import { useSelector, useDispatch } from 'react-redux';
 import { setInitialState, initialState } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
+import Snackbar from '@mui/material/Snackbar';
 export interface ProjectDialogProps {
+  deleteAlert: () => void;
   open: boolean;
   projects: Array<Object>;
   onClose: () => void;
 }
 // The options to be rendered when dialog is open
 function ProjectsDialog(props: ProjectDialogProps) {
   const classes = useStyles();
-  const { onClose, open, projects } = props;
+  const { onClose, open, projects, deleteAlert } = props;
   const state = useSelector((store:RootState) => store.appState);
   const dispatch = useDispatch();
 
@@ -41,14 +44,17 @@ function ProjectsDialog(props: ProjectDialogProps) {
     const selectedProject = projects.filter(
       (project: any) => project._id === value
       )[0];
-    console.log('deleting this one', selectedProject)
-    deleteProject(selectedProject);
-    localforage.removeItem(window.localStorage.getItem('ssid'));
-    dispatch(setInitialState(initialState))
-    onClose();
+      console.log('deleting this one', selectedProject)
+      deleteProject(selectedProject);
+      localforage.removeItem(window.localStorage.getItem('ssid'));
+      dispatch(setInitialState(initialState))
+      // handleAlertOpen()
+      deleteAlert()
+      onClose()
   };
-
+  
   return (
+    <>
     <Dialog
       onClose={handleClose}
       aria-labelledby="project-dialog-title"
@@ -90,10 +96,11 @@ function ProjectsDialog(props: ProjectDialogProps) {
         ))}
       </List>
     </Dialog>
+  </>
   );
 }
 
-export default function ProjectsFolder() {
+export default function ProjectsFolder(props) {
   const [open, setOpen] = useState(false);
   const [projects, setProjects] = useState([{ hello: 'cat' }]);
 
@@ -110,6 +117,7 @@ export default function ProjectsFolder() {
     setOpen(false);
   };
 
+
   const keyBindDeleteProject = useCallback((e) => {
     if(e.key === 'Backspace' && e.metaKey || e.key === 'Backspace' && e.ctrlKey) {
       e.preventDefault();
@@ -123,6 +131,7 @@ export default function ProjectsFolder() {
       document.removeEventListener('keydown', keyBindDeleteProject)
     }
   }, []);
+
   return (
     <div>
       <Button
@@ -133,7 +142,7 @@ export default function ProjectsFolder() {
       >
         Delete Project
       </Button>
-      <ProjectsDialog open={open} onClose={handleClose} projects={projects} />
+      <ProjectsDialog open={open} onClose={handleClose} projects={projects} deleteAlert={props.deleteAlert}/>
     </div>
   );
 }
diff --git a/app/src/components/right/OpenProjects.tsx b/app/src/components/right/OpenProjects.tsx
@@ -16,14 +16,15 @@ import { openProject } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
 
 export interface ProjectDialogProps {
+  openAlert: () => void;
   open: boolean;
   projects: Array<Object>;
   onClose: () => void;
 }
 // The options to be rendered when dialog is open
 function ProjectsDialog(props: ProjectDialogProps) {
   const classes = useStyles();
-  const { onClose, open, projects } = props;
+  const { onClose, open, projects, openAlert } = props;
   const state = useSelector((store:RootState) => store.appState);
   const dispatch = useDispatch();
   // If no projects selected, keep the name of the current displayed
@@ -38,6 +39,7 @@ function ProjectsDialog(props: ProjectDialogProps) {
     // dispatch({ type: 'OPEN PROJECT', payload: selectedProject });
     console.log(selectedProject);
     dispatch(openProject(selectedProject))
+    openAlert()
     onClose();
   };
 
@@ -127,7 +129,7 @@ export default function ProjectsFolder(props) {
       >
         Open Project
       </Button>
-      <ProjectsDialog open={open} onClose={handleClose} projects={projects} />
+      <ProjectsDialog open={open} onClose={handleClose} projects={projects} openAlert={props.openAlert}/>
     </div>
   );
 }
diff --git a/app/src/components/right/SaveProjectButton.tsx b/app/src/components/right/SaveProjectButton.tsx
@@ -90,6 +90,7 @@ const dispatch = useDispatch();
             onChange={handleChange}
             helperText={invalidProjectNameMessage}
             error={invalidProjectName}
+            autoComplete="off"
           />
         </DialogContent>
         <DialogActions>
diff --git a/app/src/components/top/NavBar.tsx b/app/src/components/top/NavBar.tsx
diff --git a/app/src/components/top/NavBarButtons.tsx b/app/src/components/top/NavBarButtons.tsx
diff --git a/app/src/components/top/PublishModal.tsx b/app/src/components/top/PublishModal.tsx
diff --git a/app/src/containers/CustomizationPanel.tsx b/app/src/containers/CustomizationPanel.tsx
diff --git a/app/src/public/styles/style.css b/app/src/public/styles/style.css

Original file line number	Diff line number	Diff line change
`@@ -167,6 +167,7 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {`
`167`	`167`	`<Snackbar`
`168`	`168`	`open={alertOpen}`
`169`	`169`	`autoHideDuration={3000}`
	`170`	`+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}`
`170`	`171`	`onClose={handleAlertClose}`
`171`	`172`	`>`
`172`	`173`	`<Alert`