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

Hernan/alerts

Author: dentonwong

app/src/components/marketplace/MarketplaceCard.tsx

@@ -22,7 +22,9 @@ import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../redux/store';
 import { saveProject } from '../../helperFunctions/projectGetSaveDel';
 import { useHistory } from 'react-router-dom';
-import { openProject, resetAllState } from '../../redux/reducers/slice/appStateSlice';
+import { openProject } from '../../redux/reducers/slice/appStateSlice';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
+import Snackbar from '@mui/material/Snackbar';
 
 interface Project {
   forked: String,
@@ -43,16 +45,16 @@ const MarketplaceCard = ({proj} :{proj: Project}) => {
   const history = useHistory();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
+  const [alertOpen, setAlertOpen] = React.useState<boolean>(false)
   const state = useSelector((store:RootState) => store.appState);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClone = async () => { // creates a copy of the project 
     const docId = proj._id;
     const response = await axios.get(`/cloneProject/${docId}`, { params: { username: window.localStorage.getItem('username') } });//passing in username as a query param is query params
-    const project = response.data;
-    console.log('handleClone project', response.data)
-    alert('Project cloned!');
+    const project = response.data.project;
+    setAlertOpen(true);
     setAnchorEl(null);
     return {_id: project._id, name: project.name, published: project.published, ...project.project};
   };
@@ -62,11 +64,29 @@ const MarketplaceCard = ({proj} :{proj: Project}) => {
     history.push('/');
     dispatch(openProject(project));
   };
+  
   const handleClose = () => {
     setAnchorEl(null);
   };
 
 
+  const handleAlertClose = (
+    event: React.SyntheticEvent | Event,
+    reason?: string
+    ) => {
+      if (reason === 'clickaway') {
+        return;
+      }
+      setAlertOpen(false);
+      setAnchorEl(null)
+    }
+
+  const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+    props,
+    ref
+  ) {
+    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+  });
 
 
   return (
@@ -135,6 +155,19 @@ const MarketplaceCard = ({proj} :{proj: Project}) => {
             Clone and open
           </MenuItem>
         </Menu>
+          <Snackbar
+          open={alertOpen}
+          autoHideDuration={3000}
+          onClose={handleAlertClose}
+        >
+          <Alert
+            onClose={handleAlertClose}
+            severity="success"
+            sx={{ width: '100%', color: 'white' }}
+          >
+            Project Cloned!
+          </Alert>
+        </Snackbar>
       </Card>
     </>
   );

app/src/helperFunctions/projectGetSaveDel.ts

@@ -142,7 +142,7 @@ export const deleteProject = (project: any): Promise<Object> => {
     body
   })
     .then((res) => res.json())
-    .then((data) => {
+    .then((data) => { console.log(data)
       return {_id: data._id, name: data.name, published:data.published, ...data.project};
     })
     .catch((err) => console.log(`Error deleting project ${err}`));

server/controllers/projectController.ts

@@ -69,31 +69,31 @@ const projectController: ProjectController = {
   deleteProject: async (req, res, next) => {
     // pull project name and userId from req.body
     const { _id, userId } = req.body;
-    try {
-      const response = await Projects.findOneAndDelete({ _id: _id, username: userId });
-      res.locals.deleted = response;
-      return next()
-    } catch (err) {
-      return next({
-        log: `Error in projectController.deleteProject: ${err}`,
-        message: {
-          err: 'Error in projectController.deleteProject, check server logs for details'
-        }
-      });
-    }
+    // try {
+    //   const response = await Projects.findOneAndDelete({ _id: _id, username: userId });
+    //   res.locals.deleted = response;
+    //   return next()
+    // } catch (err) {
+    //   return next({
+    //     log: `Error in projectController.deleteProject: ${err}`,
+    //     message: {
+    //       err: 'Error in projectController.deleteProject, check server logs for details'
+    //     }
+    //   });
+    // }
     // @Denton, rewrote the above syntax for async await, would be good to test this further
-  //   Projects.findOneAndDelete({ _id, userId }, null, (err, deleted) => {
-  //     if (err) {
-  //       return next({
-  //         log: `Error in projectController.deleteProject: ${err}`,
-  //         message: {
-  //           err: 'Error in projectController.deleteProject, check server logs for details'
-  //         }
-  //       });
-  //     }
-  //     res.locals.deleted = deleted;
-  //     return next();
-  //   });
+    Projects.findOneAndDelete({ _id, userId }, null, (err, deleted) => {
+      if (err) {
+        return next({
+          log: `Error in projectController.deleteProject: ${err}`,
+          message: {
+            err: 'Error in projectController.deleteProject, check server logs for details'
+          }
+        });
+      }
+      res.locals.deleted = deleted;
+      return next();
+    });
   }
 };
 export default projectController;