Remove feed added successfully after some period

Seneca-CDOT · Apr 15, 2020 · c28c13b · c28c13b
1 parent 547ba78
commit c28c13b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/src/frontend/src/components/SnackBar/SnackBar.jsx b/src/frontend/src/components/SnackBar/SnackBar.jsx
@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import Snackbar from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 
-export default function SimpleSnackbar() {
+export default function SimpleSnackbar(props) {
+  const { message } = props;
   const [open, setOpen] = useState(true);
 
   const handleClose = (event, reason) => {
@@ -24,7 +26,7 @@ export default function SimpleSnackbar() {
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}
-        message="There is new content available!"
+        message={message}
         action={
           <>
             <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
@@ -36,3 +38,7 @@ export default function SimpleSnackbar() {
     </div>
   );
 }
+
+SimpleSnackbar.propTypes = {
+  message: PropTypes.string,
+};
diff --git a/src/frontend/src/pages/index.js b/src/frontend/src/pages/index.js
@@ -45,6 +45,7 @@ export default function IndexPage() {
   const [endOfPosts, setEndOfPosts] = useState(true);
   const { telescopeUrl } = useSiteMetaData();
   const savedCallback = useRef();
+  const snackbarMessage = 'There is new content available!';
 
   // Pagination
   const [nextPageLink, setNextPageLink] = useState(`/posts?page=${numPages}`);
@@ -151,7 +152,7 @@ export default function IndexPage() {
       <Banner />
       <ScrollToTop />
       <main className="main">
-        {posts.length > 0 ? <Posts posts={posts} /> : null}
+        <Posts posts={posts} />
 
         <Grid container spacing={0} direction="column" alignItems="center" justify="center">
           <Grid item xs={12} className={classes.content}>
@@ -167,7 +168,9 @@ export default function IndexPage() {
           </Grid>
         </Grid>
 
-        {currentNumPosts !== initNumPosts ? <CustomizedSnackBar posts={currentNumPosts} /> : null}
+        {currentNumPosts !== initNumPosts ? (
+          <CustomizedSnackBar posts={currentNumPosts} message={snackbarMessage} />
+        ) : null}
       </main>
     </PageBase>
   );

diff --git a/src/frontend/src/pages/myfeeds.js b/src/frontend/src/pages/myfeeds.js
@@ -9,6 +9,7 @@ import PageBase from './PageBase';
 import useSiteMetadata from '../hooks/use-site-metadata';
 import ExistingFeedList from '../components/MyFeedsPage/ExistingFeedList.jsx';
 import HelpPopoverButton from '../components/MyFeedsPage/HelpPopoverButton.jsx';
+import CustomizedSnackBar from '../components/SnackBar';
 
 const useStyles = makeStyles((theme) => ({
   margin: {
@@ -26,6 +27,7 @@ export default function MyFeeds() {
   const [submitStatus, setSubmitStatus] = useState({ message: '', isError: false });
   const [userInfo, setUserInfo] = useState({});
   const [feedHash, updateFeedHash] = useState({});
+  const [alert, setAlert] = useState('false');
 
   const { telescopeUrl } = useSiteMetadata();
 
@@ -52,6 +54,7 @@ export default function MyFeeds() {
   }, [telescopeUrl]);
 
   useEffect(() => {
+    setAlert(true);
     if (userInfo.id) {
       return;
     }
@@ -76,7 +79,7 @@ export default function MyFeeds() {
         console.error('Error hashing user feeds', error);
       }
     })();
-  }, [telescopeUrl, userInfo, feedHash]);
+  }, [telescopeUrl, userInfo, feedHash, alert]);
 
   async function addFeed() {
     try {
@@ -100,10 +103,10 @@ export default function MyFeeds() {
         throw new Error(data.message);
       }
     } catch (error) {
-      console.log(error.message);
       setSubmitStatus({ message: error.message, isError: true });
       console.error('Error adding feed', error);
     }
+    setAlert(false);
   }
 
   function handleChange(event) {
@@ -118,13 +121,15 @@ export default function MyFeeds() {
   function deletionCallback(id) {
     const updatedHash = { ...feedHash };
     delete updatedHash[id];
+    setSubmitStatus({ message: 'Feed removed successfully', isError: false });
+    setAlert(false);
     updateFeedHash(updatedHash);
   }
 
   return userInfo.id ? (
     <PageBase title="My Feeds">
       <div className={classes.margin}>
-        <ValidatorForm onSubmit={addFeed} instantValidate={false}>
+        <ValidatorForm onSubmit={() => addFeed()} instantValidate={false}>
           <Container maxWidth="xs" bgcolor="aliceblue">
             <Card>
               <Box px={2} py={1}>
@@ -175,12 +180,9 @@ export default function MyFeeds() {
                         <IconButton classes={{ root: classes.button }} type="submit">
                           <AddCircle color="secondary" />
                         </IconButton>
-                        <Typography
-                          color={submitStatus.isError ? 'error' : 'textPrimary'}
-                          align="center"
-                        >
-                          {submitStatus.message}
-                        </Typography>
+                        {alert === true && submitStatus.message !== '' ? (
+                          <CustomizedSnackBar message={submitStatus.message} open={alert} />
+                        ) : null}
                       </Grid>
                     </Grid>
                   </Grid>