FZ12OK-55 Major fixes

infoshareacademy · Feb 22, 2020 · 2a98afe · 2a98afe
1 parent 7f0108f
commit 2a98afe
Show file tree

Hide file tree

Showing 14 changed files with 466 additions and 382 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,16 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "firebase": "^7.8.1",
     "@material-ui/core": "^4.7.2",
     "@material-ui/icons": "^4.5.1",
+    "firebase": "^7.8.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-minimal-pie-chart": "^6.0.1",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.3.0",
-    "semantic-ui-react": "^0.88.1"
+    "semantic-ui-react": "^0.88.1",
+    "uid": "0.0.2"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/App.js b/src/App.js
@@ -7,49 +7,56 @@ import MainList from './main-list/Main-list';
 import Dashboard from './dashboard/Dashboard';
 import ItemDetails from './item-details/Item-details';
 import UserList from './user-list/User-list';
-import { AuthContext }   from './auth/Auth';
+import { AuthContext } from './auth/Auth';
 import UserProfile from './user-profile/User-profile';
 import { ItemForm } from './item-form/Item-form';
+import AuthProtected from './auth/AuthProtected';
 
 
 
 function App() {
   return (
-    <AuthContext>
-    <BrowserRouter>
-      <Navigation />
-      <Container text style={{marginTop: '78px'}} >
-        <Switch>
-          <Route
-            path="/user-list"
-            component={UserList}
-          />
-          <Route
-            path="/item-form"
-            component={ItemForm}
-          />
-          <Route
-              path='/userProfile'
-              component={UserProfile}
-            />
-          <Route
-            path="/dashboard"
-            component={Dashboard}
-          />
-          <Route
-            path="/items/:id"
-            component={ItemDetails}
-            exact
-          />
-          <Route
-            path="/"
-            component={MainList}
-          />
-          <Redirect to="/" />
-        </Switch>
+
+      <BrowserRouter>
+        <Navigation />
+        <Container style={{ paddingTop: '78px'}} >
+          <AuthProtected>
+            <Switch>
+              <Route
+                path="/user-list"
+                component={UserList}
+              />
+              <Route
+                path="/item-form"
+                component={ItemForm}
+              />
+              <Route
+                path='/userProfile'
+                component={UserProfile}
+              />
+              <Route
+                path="/dashboard"
+                component={Dashboard}
+              />
+              <Route
+                path="/item-add"
+                component={ItemForm}
+              />
+              <Route
+                path="/items/:id"
+                component={ItemDetails}
+                exact
+              />
+              <Route
+                path="/"
+                component={MainList}
+              />
+              <Redirect to="/" />
+            </Switch>
+          </AuthProtected>
         </Container>
       </BrowserRouter>
-    </AuthContext>
+
   );
 }
 

diff --git a/src/auth/Auth.js b/src/auth/Auth.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import firebase from "firebase";
 import { Login } from './LogIn';
+import Navigation from '../navigation/Navigation';
 export const MyContext = React.createContext(null);
 
 
@@ -52,17 +53,12 @@ export class AuthContext extends React.Component {
         }))
     }
     render() {
-        return this.state.user
-            ? <MyContext.Provider value={{
-                state: this.state,
-                addToList: this.addToList,
-                removeFromList: this.removeFromList,
-            }}>
-                {this.props.children}
-            </MyContext.Provider>
-            : <>
-                <Login />
-
-            </>
+        return <MyContext.Provider value={{
+            state: this.state,
+            addToList: this.addToList,
+            removeFromList: this.removeFromList,
+        }}>
+            {this.props.children}
+        </MyContext.Provider>
     }
 }
diff --git a/src/auth/AuthProtected.jsx b/src/auth/AuthProtected.jsx
@@ -0,0 +1,12 @@
+import React, { useContext } from 'react'
+import { MyContext } from './Auth'
+import { Login } from './LogIn'
+
+ const AuthProtected = (props) => {
+
+    const context = useContext(MyContext)
+
+    return context.state.user ? { ...props.children } : <Login />
+}
+
+export default AuthProtected