✨ add auth routes final with loader

.eslintrc.json

@@ -1,16 +1,18 @@
 {
   "env": {
     "browser": true,
-    "es2021": true
+    "es6": true
   },
   "extends": ["plugin:react/recommended", "airbnb", "eslint:recommended"],
   "parserOptions": {
-    "ecmaVersion": 12,
+    "ecmaVersion": 2020,
     "sourceType": "module", // to use imports
     "ecmaFeatures": {
-      "jsx": true
+      "jsx": true,
+      "experimentalObjectRestSpread": true
     }
   },
+  "parser": "babel-eslint",
   "plugins": ["react"],
   "rules": {
     "react/jsx-filename-extension": [
@@ -32,6 +34,9 @@
     ],
     "import/no-unresolved": "off",
     "import/no-named-as-default-member": 0,
-    "import/no-named-as-default": 0
+    "import/no-named-as-default": 0,
+    "react/jsx-props-no-spreading": "off",
+    "no-confusing-arrow": "off",
+    "no-shadow": "off"
   }
-}
+}

.vscode/settings.json

@@ -13,8 +13,8 @@
   "prettier.endOfLine": "auto",
   "prettier.packageManager": "yarn",
   // https://stackoverflow.com/a/29972073/11674552
-  "editor.rulers": [80, 80],
-  "workbench.colorCustomizations": {
-    "editorRuler.foreground": "#cbfffb25"
-  }
-}
+  // "editor.rulers": [80, 80],
+  // "workbench.colorCustomizations": {
+  //   "editorRuler.foreground": "#cbfffb25"
+  // }
+}

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.20.0",
-    "lodash": "^4.17.20",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.1.0",
@@ -51,7 +51,7 @@
     ]
   },
   "devDependencies": {
-    "eslint": "^7.9.0",
+    "babel-eslint": "^10.1.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.0",

src/App.js

@@ -20,9 +20,6 @@ function App() {
             <PrivateRoute exact path="/edit" component={EditProfile} />
             <Route exact path="/signup" component={SignupContainer} />
             <Route exact path="/login" component={LoginContainer} />
-            {/* For testing */}
-            <Route exact path="/dashboard" component={Dashboard} />
-            <Route exact path="/edit-profile" component={EditProfile} />
           </Switch>
         </Router>
       </>

src/components/Loading.jsx

@@ -0,0 +1,84 @@
+import React from "react";
+import styled from "styled-components";
+
+const Parent = styled.div`
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Loader = styled.div`
+  &,
+  &::before,
+  &::after {
+    background: #ffffff;
+    animation: load1 1s infinite ease-in-out;
+    width: 15px;
+    height: 4em;
+  }
+
+  & {
+    color: #000;
+    text-indent: -9999em;
+    margin: 88px auto;
+    position: relative;
+    font-size: 15px;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    content: "";
+  }
+
+  &::before {
+    left: -1.5em;
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+
+  &::after {
+    left: 1.5em;
+  }
+
+  @-webkit-keyframes load1 {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 0;
+      height: 4em;
+    }
+    40% {
+      box-shadow: 0 -2em;
+      height: 5em;
+    }
+  }
+
+  @keyframes load1 {
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 0;
+      height: 4em;
+    }
+    40% {
+      box-shadow: 0 -2em;
+      height: 5em;
+    }
+  }
+`;
+
+const Loading = () => (
+  <Parent>
+    <Loader />
+  </Parent>
+);
+
+export default Loading;

src/containers/Dashboard.jsx

@@ -1,17 +1,18 @@
 import React from "react";
-
-import Layout from "./../components/Profile/Layout";
-import Navbar from "./../components/Profile/Navbar";
-import Titlebar from "./../components/Profile/Titlebar";
-import Infobox from "./../components/Profile/Infobox";
+import PropTypes from "prop-types";
 
 import { connect } from "react-redux";
-import { getUserProfile } from "./../redux/actions/authActions";
+import Layout from "../components/Profile/Layout";
+import Navbar from "../components/Profile/Navbar";
+import Titlebar from "../components/Profile/Titlebar";
+import Infobox from "../components/Profile/Infobox";
+
+import { fetchUserProfile } from "../redux/actions/authActions";
 
 class Dashboard extends React.Component {
   componentDidMount() {
-    console.log(this.props);
-    this.props.getUserProfile();
+    const { fetchUserProfile } = this.props;
+    fetchUserProfile();
   }
 
   render() {
@@ -25,4 +26,8 @@ class Dashboard extends React.Component {
   }
 }
 
-export default connect(null, { getUserProfile })(Dashboard);
+Dashboard.propTypes = {
+  fetchUserProfile: PropTypes.func.isRequired,
+};
+
+export default connect(null, { fetchUserProfile })(Dashboard);

src/containers/PrivateRoute.jsx

@@ -1,14 +1,37 @@
-import React from "react";
-import { connect } from "react-redux";
+/* eslint-disable no-nested-ternary */
+/* eslint-disable implicit-arrow-linebreak */
+
+import React, { useState, useEffect } from "react";
 import { Route, Redirect } from "react-router-dom";
+import axios from "axios";
 import PropTypes from "prop-types";
 
-const PrivateRoute = ({ component: Component, auth, ...rest }) => {
+import Loading from "../components/Loading";
+
+const PrivateRoute = ({ component: Component, ...rest }) => {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    axios
+      .get("/auth/state", { withCredentials: true })
+      .then((res) => {
+        setIsAuthenticated(res.data);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        setIsLoading(true);
+        throw new Error(err);
+      });
+  }, []);
+
   return (
     <Route
       {...rest}
       render={(props) =>
-        auth.isAuthenticated ? (
+        isLoading ? (
+          <Loading />
+        ) : isAuthenticated ? (
           <Component {...props} />
         ) : (
           <Redirect to="/login" />
@@ -19,11 +42,7 @@ const PrivateRoute = ({ component: Component, auth, ...rest }) => {
 };
 
 PrivateRoute.propTypes = {
-  auth: PropTypes.object.isRequired,
+  component: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
 };
 
-const mapStateToProps = (state) => ({
-  auth: state.auth,
-});
-
-export default connect(mapStateToProps)(PrivateRoute);
+export default PrivateRoute;

src/redux/actions/authActions.js

@@ -1,6 +1,10 @@
 import axios from "axios";
 
-import { SET_CURRENT_USER, GET_ERRORS, CLEAR_ERRORS } from "./types";
+import {
+  SET_CURRENT_USER,
+  GET_ERRORS,
+  CLEAR_ERRORS,
+} from "./types";
 
 export const setCurrentUser = (newUser) => ({
   type: SET_CURRENT_USER,
@@ -61,9 +65,9 @@ export const loginUser = (userData) => (dispatch) => {
 };
 
 // Get user profile
-export const getUserProfile = () => (dispatch) => {
+export const fetchUserProfile = () => (dispatch) => {
   axios
-    .get("/profile", { withCredentials: true })
+    .get("/auth/profile", { withCredentials: true })
     .then((res) => {
       const {
         name, bio, phone, local, google, facebook,

src/redux/actions/types.js

@@ -2,6 +2,7 @@ export const SET_CURRENT_USER = "SET_CURRENT_USER";
 export const USER_LOADING = "USER_LOADING";
 export const EDIT_USER = "EDIT_USER";
 export const DELETE_USER = "DELETE_USER";
+export const SET_AUTH_STATE = "SET_AUTH_STATE";
 
 export const GET_ERRORS = "GET_ERRORS";
 export const CLEAR_ERRORS = "CLEAR_ERRORS";

src/redux/reducers/authReducer.js

@@ -1,8 +1,6 @@
-import _ from "lodash";
 import { SET_CURRENT_USER } from "../actions/types";
 
 const initialState = {
-  isAuthenticated: false,
   user: {},
 };
 
@@ -11,7 +9,6 @@ const reducer = (state = initialState, action) => {
     case SET_CURRENT_USER:
       return {
         ...state,
-        isAuthenticated: !_.isEmpty(action.payload),
         user: action.payload,
       };
     default: