added redux store support [Work in progress]

Author: Vivek Chowdhury

package-lock.json

@@ -10,6 +10,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "redux": "^4.0.5",
@@ -42,6 +43,7 @@
   "devDependencies": {
     "cross-env": "^7.0.2",
     "json-server": "^0.16.1",
-    "npm-run-all": "^4.1.5"
+    "npm-run-all": "^4.1.5",
+    "redux-immutable-state-invariant": "^2.1.0"
   }
 }

package.json

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import "./Header.css";
 import { NavLink, Link } from "react-router-dom";
+import { connect } from "react-redux";
 
 function Header(props) {
   const [isListening, setIsListening] = useState(false);
@@ -42,16 +43,18 @@ function Header(props) {
                 Feeds
               </NavLink>
             </li>
-            <li className="nav-item">
-              <NavLink
-                className={
-                  doChangeBackground ? "nav_link_light" : "nav_link_dark"
-                }
-                to="/profile"
-              >
-                Profile
-              </NavLink>
-            </li>
+            {props.user.id && (
+              <li className="nav-item">
+                <NavLink
+                  className={
+                    doChangeBackground ? "nav_link_light" : "nav_link_dark"
+                  }
+                  to="/profile"
+                >
+                  Profile
+                </NavLink>
+              </li>
+            )}
           </ul>
 
           <ul className="navbar-nav right-options">
@@ -92,4 +95,9 @@ function Header(props) {
   );
 }
 
-export default Header;
+function mapToStateProps(state) {
+  return {
+    user: state.user,
+  };
+}
+export default connect(mapToStateProps)(Header);

src/app/Header/Header.js

@@ -1,8 +1,11 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "./Login.css";
 import LoginForm from "./LoginForm/LoginForm";
 import bubbleimage from "./../../assets/placeholders/bubble-image.png";
-import * as LoginServices from "./../../api/LoginServices";
+// import * as LoginServices from "./../../api/LoginServices";
+import { connect } from "react-redux";
+import * as validateUser from "./loginActions";
+import { bindActionCreators } from "redux";
 
 function Login(props) {
   const [user, setUser] = useState({ userId: "", password: "" });
@@ -15,18 +18,31 @@ function Login(props) {
     });
   };
 
+  useEffect(() => {
+    if (props.user.id !== "") {
+      props.history.push("/feeds");
+    }
+    if (props.user.error !== "") {
+      updateErrorMessage();
+    }
+  }, [props.history, props.user]);
+
+  const updateErrorMessage = () => {
+    setError("Invalid User naem or Password, please try again !");
+  };
+
   const handleSubmit = (event) => {
     event.preventDefault();
-    console.log(user);
-    LoginServices.validateUser(user.userId, user.password).then((response) => {
-      console.log(response);
-      if (!response.error) {
-        props.history.push("/feeds");
-      } else {
-        setError("Invalid User naem or Password, please try again !");
-        // TODO: Need to display error message
-      }
-    });
+    // LoginServices.validateUser(user.userId, user.password).then((response) => {
+    //   console.log(response);
+    //   if (!response.error) {
+    //     props.history.push("/feeds");
+    //   } else {
+    //     setError("Invalid User naem or Password, please try again !");
+    //     // TODO: Need to display error message
+    //   }
+    // });
+    props.actions.validateUser(user);
   };
 
   return (
@@ -48,4 +64,16 @@ function Login(props) {
   );
 }
 
-export default Login;
+function mapStateToProps(state) {
+  return {
+    user: state.user,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(validateUser, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Login);

src/app/Login/Login.js

@@ -0,0 +1,4 @@
+export const VALIDATE_USER = "VALIDATE_USER";
+export const USER_VALIDATED_SUCCESSFULLY = "USER_VALIDATED_SUCCESSFULLY";
+export const USER_VALIDATION_FAILED = "USER_VALIDATION_FAILED";
+export const REMEMBER_ME = "REMEMBER_ME";

src/app/Login/loginActionTypes.js

@@ -0,0 +1,18 @@
+import * as Actions from "./loginActionTypes";
+import * as Services from "./../../api/LoginServices";
+
+export function onSuccessfulValidation(response) {
+  return { type: Actions.USER_VALIDATED_SUCCESSFULLY, response };
+}
+
+export function validateUser(user) {
+  return function (dispatch) {
+    return Services.validateUser(user.userId, user.password)
+      .then((response) => {
+        dispatch(onSuccessfulValidation(response));
+      })
+      .catch((error) => {
+        throw error;
+      });
+  };
+}

src/app/Login/loginActions.js

@@ -0,0 +1,20 @@
+import * as Actions from "./loginActionTypes";
+
+const initialUser = {
+  id: "",
+  password: "",
+  error: "",
+};
+
+export default function loginReducer(state = initialUser, action) {
+  //   debugger;
+  switch (action.type) {
+    case Actions.USER_VALIDATED_SUCCESSFULLY:
+      return {
+        ...state,
+        ...action.response,
+      };
+    default:
+      return state;
+  }
+}

src/app/Login/loginReducer.js

@@ -9,10 +9,12 @@ import Profile from "./Profile/Profile";
 import About from "./About/About";
 import ContactUs from "./ContactUs/ContactUs";
 import Login from "./Login/Login";
+import { connect } from "react-redux";
+// import { validateUser } from "./Login/loginActions";
 
 function TechMarketShell(props) {
   function enforceAuthentication(component, path, user) {
-    if (!user) {
+    if (!user.userId && !user.password) {
       return <Redirect exact from={path} to="/" />;
     }
     return <Route exact path={path} component={component} />;
@@ -24,9 +26,9 @@ function TechMarketShell(props) {
       <div className="container-fluid contentContainer">
         <Switch>
           <Route path="/" exact component={Login} />
-          <Route path="/feeds" component={Feeds} />
-          {/* <Route path="/profile" component={Profile} /> */}
-          {enforceAuthentication(Profile, "/profile", {})}
+          {/* <Route path="/feeds" component={Feeds} /> */}
+          {enforceAuthentication(Feeds, "/feeds", props.user)}
+          <Route path="/profile" component={Profile} />
           <Route path="/about" component={About} />
           <Route path="/contact" component={ContactUs} />
         </Switch>
@@ -36,4 +38,9 @@ function TechMarketShell(props) {
   );
 }
 
-export default TechMarketShell;
+function mapStateToProps(state) {
+  return {
+    user: state.user,
+  };
+}
+export default connect(mapStateToProps)(TechMarketShell);

src/app/TechMarketShell.js

@@ -0,0 +1,16 @@
+import { createStore, compose, applyMiddleware } from "redux";
+import reduxImmutableStateInvariant from "redux-immutable-state-invariant";
+import rootReducer from "./rootReducer";
+import thunk from "redux-thunk";
+
+export default function configureStore(initialState) {
+  const composeEnhancer =
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // This will add support to redux devtools
+  return createStore(
+    rootReducer,
+    initialState,
+    //  reduxImmutableStateInvariant: This middleware is used to make sure no one update the state directly.
+    //  thunk: is middle ware used to handle async api handling. it automaitcally inject dispatch in action creator
+    composeEnhancer(applyMiddleware(thunk, reduxImmutableStateInvariant()))
+  );
+}

src/app/configureStore.js

@@ -0,0 +1,8 @@
+import { combineReducers } from "redux";
+import loginReducer from "./Login/loginReducer";
+
+const rootReducer = combineReducers({
+  user: loginReducer,
+});
+
+export default rootReducer;