Day 24 Done ✨

Day_024/src/App.js

@@ -1,31 +1,41 @@
-import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Home from "./pages/Home";
 import Secrets from "./pages/Secrets";
 import LayoutWrapper from "./pages/Layout";
+import { GlobalProvider } from "./store";
+import ProtectedRoute from "./ProtectedRoute";
+import { Login } from "./pages/Login";
 
 function App() {
   return (
-    <div className="App">
-      <Router>
-        <Switch>
-          <Route path="/" exact>
-            <LayoutWrapper>
-              <Home />
-            </LayoutWrapper>
-          </Route>
-          <Route path="/secrets" exact>
-            <LayoutWrapper>
-              <Secrets />
-            </LayoutWrapper>
-          </Route>
-          <Route path="*">
-            <LayoutWrapper>
-              <h1 style={{ textAlign: "center" }}>404: page not found :(</h1>
-            </LayoutWrapper>
-          </Route>
-        </Switch>
-      </Router>
-    </div>
+    <GlobalProvider>
+      <div className="App">
+        <Router>
+          <Switch>
+            <Route path="/" exact>
+              <LayoutWrapper>
+                <Home />
+              </LayoutWrapper>
+            </Route>
+            <Route path="/login">
+              <LayoutWrapper>
+                <Login />
+              </LayoutWrapper>
+            </Route>
+            <ProtectedRoute path="/secrets" exact>
+              <LayoutWrapper>
+                <Secrets />
+              </LayoutWrapper>
+            </ProtectedRoute>
+            <Route path="*">
+              <LayoutWrapper>
+                <h1 style={{ textAlign: "center" }}>404: page not found :(</h1>
+              </LayoutWrapper>
+            </Route>
+          </Switch>
+        </Router>
+      </div>
+    </GlobalProvider>
   );
 }
 

Day_024/src/ProtectedRoute.js

@@ -0,0 +1,28 @@
+import { useContext } from "react";
+import { Redirect, Route } from "react-router";
+import { GlobalContext } from "./store";
+
+const ProtectedRoute = ({ children, ...rest }) => {
+  const { state } = useContext(GlobalContext);
+  const { auth } = state;
+  console.log("Protected Route was called");
+  return (
+    <Route
+      {...rest}
+      render={({ location }) =>
+        auth.isAuth ? (
+          children
+        ) : (
+          <Redirect
+            to={{
+              pathname: "/login",
+              state: { from: location },
+            }}
+          />
+        )
+      }
+    />
+  );
+};
+
+export default ProtectedRoute;

Day_024/src/pages/Layout.jsx

@@ -1,6 +1,7 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import React, { useContext, useEffect } from "react";
+import { Link, Redirect } from "react-router-dom";
 import styled from "styled-components";
+import { GlobalContext } from "../store";
 
 //styled-components
 const AppContainer = styled.div`
@@ -47,6 +48,13 @@ const Content = styled.main`
 `;
 
 const Layout = ({ children }) => {
+  const { state } = useContext(GlobalContext);
+  useEffect(() => {
+    if (state.auth.isAuth) {
+      console.log("Should Redirect to Secrets");
+      <Redirect to="/secrets" />;
+    }
+  }, [state]);
   return (
     <AppContainer>
       <NavBarContainer>

Day_024/src/pages/Login.jsx

@@ -0,0 +1,8 @@
+import React, { useContext, useEffect } from "react";
+import { GlobalContext } from "../store";
+import { Redirect } from "react-router";
+
+export const Login = () => {
+  const { dispatch } = useContext(GlobalContext);
+  return <div onClick={() => dispatch({ type: "LOGIN" })}>Login</div>;
+};

Day_024/src/pages/Secrets.jsx

@@ -1,7 +1,12 @@
-import React from "react";
+import React, { useContext } from "react";
+import { GlobalContext } from "../store";
 
 const Secrets = () => {
-  return <div>Secrets</div>;
+  const { state } = useContext(GlobalContext);
+  React.useEffect(() => {
+    console.log(state);
+  }, [state]);
+  return <div>{state.auth.isLoaded}</div>;
 };
 
 export default Secrets;

Day_024/src/store.js

@@ -0,0 +1,38 @@
+import React, { useReducer } from "react";
+
+//Gobal initialState
+export const initialState = {
+  auth: {
+    isLoaded: false,
+    isAuth: false,
+    authObj: null,
+  },
+  theme: {
+    light: { background: "#fff" },
+    dark: { background: "#111" },
+  },
+};
+
+//Global Context
+export const GlobalContext = React.createContext();
+
+//Global Reducer
+const GlobalReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case "LOGIN":
+      console.log("logged in");
+      return { ...state, auth: { isAuth: true, isLoaded: true } };
+    default:
+      return state;
+  }
+};
+
+//GlobalContext Provider
+export const GlobalProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(GlobalReducer, initialState);
+  return (
+    <GlobalContext.Provider value={{ state, dispatch }}>
+      {children}
+    </GlobalContext.Provider>
+  );
+};