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,19 +15,20 @@ const FileUploadForm = React.lazy(() => import('../FileUploadForm'));
 function App() {
   return (
     <Suspense fallback={"Loading..."}>
-      <BrowserRouter>
-        <Switch>
-          <Route path="/" exact>
-            <SignInForm />
-          </Route>
-          <Route path="/signup">
-            <SignUpForm />
-          </Route>
-          <Route path="/upload">
-            <FileUploadForm />
-          </Route>
-        </Switch>    
-      </BrowserRouter>
+      <UserProvider>
+        <MessageBar />
+        <BrowserRouter>
+          <Switch>
+            <Route path="/" exact>
+              <SignInForm />
+            </Route>
+            <Route path="/signup">
+              <SignUpForm />
+            </Route>
+            <ProtectedRoute path="/upload" render={() => <FileUploadForm />} />
+          </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)}/>)
+}