From b0b49fe5e63d40913bebae76bdd6207c8e1a3fdd Mon Sep 17 00:00:00 2001
From: jwu-fisker <jwu@fiskerinc.com>
Date: Tue, 5 Jan 2021 17:30:25 -0800
Subject: [PATCH] Add message bar

---
 src/components/App/index.js   | 31 +++++++++++++++++--------------
 src/components/MessageBar.jsx | 15 +++++++++++++++
 2 files changed, 32 insertions(+), 14 deletions(-)
 create mode 100644 src/components/MessageBar.jsx

diff --git a/src/components/App/index.js b/src/components/App/index.js
index b324cd8..f1a9806 100644
--- a/src/components/App/index.js
+++ b/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>
   );
 }
diff --git a/src/components/MessageBar.jsx b/src/components/MessageBar.jsx
new file mode 100644
index 0000000..665b29f
--- /dev/null
+++ b/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)}/>)
+}