Alerts edit

Author: raulclassico7

app/src/components/marketplace/MarketplaceCard.tsx

@@ -23,6 +23,8 @@ import { RootState } from '../../redux/store';
 import { saveProject } from '../../helperFunctions/projectGetSaveDel';
 import { useHistory } from 'react-router-dom';
 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,6 +45,7 @@ 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);
@@ -51,7 +54,7 @@ const MarketplaceCard = ({proj} :{proj: 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.project;
-    alert('Project cloned!');
+    setAlertOpen(true);
     setAnchorEl(null);
     return project;
   };
@@ -61,11 +64,31 @@ 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 (
     <>
       <Card
@@ -132,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>
     </>
   );