refactor(Context): refactor context and add routing

Author: calz10

package.json

@@ -6,9 +6,13 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "react-toastify": "^6.0.8",
+    "react-transition-group": "^4.4.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,32 +1,70 @@
 import React, { useContext } from "react";
-import { store, dispatch, actions } from "./store";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
 
-function App() {
-  const { state, dispatch } = useContext(store);
+import { store, actions } from "./store";
+import { useTrivia, useStore } from "./hooks";
 
-  const handleReverse = () => {
-    dispatch(actions.setUserFetching(false));
-  };
+import {
+  BrowserRouter as Router,
+  Switch,
+} from "react-router-dom";
+
+import { ProtectedRoute, PublicRoute } from "./navigations";
+import Dashboard from "./pages/Dashboard";
+import Account from "./pages/Account";
+import Login from "./pages/Login";
+
+const App = () => {
+  
+  const { state } = useStore();
+
+  const {
+    authenticationState: { isAuthenticated },
+  } = state;
+
+  const AuthenticatedNavigations = () => (
+    <TransitionGroup>
+      <CSSTransition classNames="fade" timeout={3000}>
+        <Switch>
+          <ProtectedRoute
+            path="/dashboard"
+            component={Dashboard}
+            isAuthenticated={isAuthenticated}
+          />
+          <ProtectedRoute
+            path="/account"
+            component={Account}
+            isAuthenticated={isAuthenticated}
+          />
+        </Switch>
+      </CSSTransition>
+    </TransitionGroup>
+  );
+
+  const PublicNavigations = () => (
+    <TransitionGroup>
+      <CSSTransition classNames="fade" timeout={3000}>
+        <Switch>
+          <PublicRoute
+            path="/login"
+            exact
+            isAuthenticated={isAuthenticated}
+            component={Login}
+          />
+        </Switch>
+      </CSSTransition>
+    </TransitionGroup>
+  );
 
   return (
-    <div className="App">
-      authenticated:isLoading:
-      {state.authenticationState.isLoading ? " true\n" : "false\n"}
-      <br />
-      <button
-        onClick={() => {
-          dispatch(actions.setLoadingLogin());
-          dispatch(actions.setUserFetching(true));
-        }}
-      >
-        State Management
-      </button>
-      <br />
-      user:isFetching: {state.userState.isFetching ? " true\n" : "false\n"}
-      <br />
-      <button onClick={handleReverse}>Reverse fetching</button>
-    </div>
+    <>
+      <>{JSON.stringify(state)}</>
+      <Router>
+        <AuthenticatedNavigations />
+        <PublicNavigations />
+      </Router>
+    </>
   );
-}
+};
 
 export default App;

src/hooks/index.js

@@ -0,0 +1,2 @@
+export { useTrivia } from  './useTrivia'
+export { useStore } from  './useStore'

src/hooks/useStore.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { store, actions } from "../store";
+
+export const useStore = () => {
+  const { state, dispatch } = useContext(store);
+  const dispatchAction = (action) => dispatch(action);
+
+  return { state, dispatchAction, actions };
+};

src/hooks/useTrivia.js

@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+import { Axios } from "../utils";
+import { toast } from "react-toastify";
+
+
+export const useTrivia = (initialData = []) => {
+  const [trivias, setTrivias] = useState(initialData);
+
+  useEffect(() => {
+    async function fetchTrivias() {
+      try {
+        const { data } = await Axios.get("", {
+          params: {
+            amount: 15,
+          },
+        });
+
+        if (data) {
+          setTrivias(data.result);
+        }
+      } catch (error) {
+        setTrivias([]);
+        toast.error(error.message)
+      }
+    }
+
+    fetchTrivias();
+  }, []);
+
+  return [trivias, setTrivias];
+};

src/index.js

@@ -1,8 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import { toast } from 'react-toastify';
 import * as serviceWorker from "./serviceWorker";
+import App from "./App";
 import { GlobalStateProvider } from "./store";
+import 'react-toastify/dist/ReactToastify.css';
+
+toast.configure({
+  position: "top-right",
+  autoClose: 3000,
+});
 
 ReactDOM.render(
   <React.StrictMode>

src/navigations/ProtectedRoute.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Route, Redirect } from "react-router-dom";
+
+export const ProtectedRoute = ({
+  component: Component,
+  isAuthenticated = false,
+  ...rest
+}) => (
+  <Route
+    {...rest}
+    render={(props) =>
+      isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
+    }
+  />
+);

src/navigations/PublicRoute.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Route, Redirect } from "react-router-dom";
+
+export const PublicRoute = ({
+  component: Component,
+  isAuthenticated = false,
+  ...rest
+}) => (
+  <Route
+    {...rest}
+    render={(props) =>
+      isAuthenticated ? <Redirect to="/dashboard" /> : <Component {...props} />
+    }
+  />
+);

src/navigations/index.js

@@ -0,0 +1,2 @@
+export { ProtectedRoute } from './ProtectedRoute'
+export { PublicRoute } from './PublicRoute'

src/pages/Account/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+
+const Account = () => {
+  return <div> account </div>;
+};
+
+export default Account;
+