resolve errors, banner warnings, use React.Fragment shorthand (#1006)

Seneca-CDOT · Apr 15, 2020 · 301790a · 301790a
1 parent fd70912
commit 301790a
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 43 deletions.
diff --git a/src/frontend/plugins/gatsby-plugin-top-layout/TopLayout.js b/src/frontend/plugins/gatsby-plugin-top-layout/TopLayout.js
@@ -7,7 +7,7 @@ import theme from '../../src/theme';
 
 export default function TopLayout(props) {
   return (
-    <React.Fragment>
+    <>
       <Helmet>
         <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
         <link
@@ -20,7 +20,7 @@ export default function TopLayout(props) {
         <CssBaseline />
         {props.children}
       </ThemeProvider>
-    </React.Fragment>
+    </>
   );
 }
 

diff --git a/src/frontend/src/components/Banner/Banner.jsx b/src/frontend/src/components/Banner/Banner.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Fab from '@material-ui/core/Fab';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
@@ -170,6 +170,20 @@ function RetrieveBannerDynamicAssets() {
       // Ensure we are using an image which fits correctly to user's viewspace
       const dimensions = `${window.innerWidth}x${window.innerHeight}`;
 
+      async function getStats() {
+        await getDynamicAsset(`${telescopeUrl}/stats/year`, (response) => {
+          const localeStats = {
+            posts: response.posts.toLocaleString(),
+            authors: response.authors.toLocaleString(),
+            words: response.words.toLocaleString(),
+          };
+          setStats(localeStats);
+
+          // Ease in Background
+          setTransitionBackground(false);
+        });
+      }
+
       await getDynamicAsset(
         `https://source.unsplash.com/collection/894/${dimensions}/`,
         (response) => {
@@ -183,20 +197,6 @@ function RetrieveBannerDynamicAssets() {
       );
     }
 
-    async function getStats() {
-      await getDynamicAsset(`${telescopeUrl}/stats/year`, (response) => {
-        const localeStats = {
-          posts: response.posts.toLocaleString(),
-          authors: response.authors.toLocaleString(),
-          words: response.words.toLocaleString(),
-        };
-        setStats(localeStats);
-
-        // Ease in Background
-        setTransitionBackground(false);
-      });
-    }
-
     getBackgroundImgSrc();
   }, [telescopeUrl]);
 
@@ -256,15 +256,13 @@ export default function Banner() {
   }, [telescopeUrl]);
 
   return (
-    <React.Fragment>
+    <>
       <CssBaseline />
       <div className={classes.heroBanner}>
         <RetrieveBannerDynamicAssets />
-        <ThemeProvider>
-          <Typography variant="h1" className={classes.h1}>
-            {'Telescope'}
-          </Typography>
-        </ThemeProvider>
+        <Typography variant="h1" className={classes.h1}>
+          {'Telescope'}
+        </Typography>
 
         <a
           href={`${gitInfo.gitHubUrl}`}
@@ -281,6 +279,6 @@ export default function Banner() {
           </ScrollDown>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
diff --git a/src/frontend/src/components/Posts/Posts.jsx b/src/frontend/src/components/Posts/Posts.jsx
@@ -15,23 +15,23 @@ const useStyles = makeStyles({
 const Posts = ({ posts }) => {
   const classes = useStyles();
 
-  return (
+  return posts.length > 0 ? (
     <Container className={classes.root}>
-      {posts.length > 0
-        ? posts.map(({ id, feed, html, title, url, updated }) => (
-            <Post
-              key={id}
-              id={id}
-              author={feed.author}
-              url={url}
-              html={html}
-              title={title}
-              date={updated}
-              link={feed.link}
-            />
-          ))
-        : null}
+      {posts.map(({ id, feed, html, title, url, updated }) => (
+        <Post
+          key={id}
+          id={id}
+          author={feed.author}
+          url={url}
+          html={html}
+          title={title}
+          date={updated}
+          link={feed.link}
+        />
+      ))}
     </Container>
+  ) : (
+    <></>
   );
 };
 

diff --git a/src/frontend/src/components/ScrollToTop/ScrollToTop.jsx b/src/frontend/src/components/ScrollToTop/ScrollToTop.jsx
@@ -56,14 +56,14 @@ ScrollTop.propTypes = {
 
 export default function BackToTop(props) {
   return (
-    <React.Fragment>
+    <>
       <CssBaseline />
       <Toolbar id="back-to-top-anchor" />
       <ScrollTop {...props}>
         <Fab color="primary" aria-label="scroll back to top">
           <KeyboardArrowUpIcon fontSize="large" />
         </Fab>
       </ScrollTop>
-    </React.Fragment>
+    </>
   );
 }
diff --git a/src/frontend/src/components/SnackBar/SnackBar.jsx b/src/frontend/src/components/SnackBar/SnackBar.jsx
@@ -26,11 +26,11 @@ export default function SimpleSnackbar() {
         onClose={handleClose}
         message="There is new content available!"
         action={
-          <React.Fragment>
+          <>
             <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
               <CloseIcon fontSize="small" />
             </IconButton>
-          </React.Fragment>
+          </>
         }
       />
     </div>