Add message bar

src/components/App/index.js

@@ -4,7 +4,9 @@ import {
   Switch,
   Route
 } from 'react-router-dom';
-import './App.css';
+import { UserProvider } from '../Contexts/UserContext';
+import { ProtectedRoute } from '../Routes/ProtectedRoute';
+import { MessageBar } from '../MessageBar';
 
 const SignInForm = React.lazy(() => import('../SignInForm'));
 const SignUpForm = React.lazy(() => import('../SignUpForm'));
@@ -13,6 +15,8 @@ const FileUploadForm = React.lazy(() => import('../FileUploadForm'));
 function App() {
   return (
     <Suspense fallback={"Loading..."}>
+      <UserProvider>
+        <MessageBar />
         <BrowserRouter>
           <Switch>
             <Route path="/" exact>
@@ -21,11 +25,10 @@ function App() {
             <Route path="/signup">
               <SignUpForm />
             </Route>
-          <Route path="/upload">
+            <ProtectedRoute path="/upload" render={() => <FileUploadForm />} />
-            <FileUploadForm />
-          </Route>
           </Switch>    
         </BrowserRouter>
+      </UserProvider>
     </Suspense>
   );
 }

src/components/MessageBar.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Snackbar } from "@material-ui/core";
+import { useUserContext }  from './Contexts/UserContext';
+
+export const MessageBar = () => {
+  const { error, setError } = useUserContext();
+  const open = (error !== null);
+
+  return (<Snackbar
+    open={open}
+    message={error}
+    anchorOrigin={{ vertical: "top", horizontal: "center" }}
+    autoHideDuration={10000}
+    onClose={() => setError(null)}/>)
+}