added redux store support [Work in progress]

Author: Vivek Chowdhury

src/app/Header/Header.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import "./Header.css";
-import { NavLink, Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import { connect } from "react-redux";
 
 function Header(props) {
@@ -78,16 +78,17 @@ function Header(props) {
                 Contact Us
               </NavLink>
             </li>
-            <Link
-              to=""
+            <button
               className={
                 doChangeBackground
                   ? "btn btn-outline-light"
                   : "btn btn-outline-primary"
               }
+              onClick={props.onSignIn}
             >
-              Sign In
-            </Link>
+              {" "}
+              {!props.user.isLoggedIn ? "Sign In" : "Sign Out"}
+            </button>
           </ul>
         </div>
       </div>

src/app/Login/Login.js

@@ -25,7 +25,7 @@ function Login(props) {
     if (props.user.error !== "") {
       updateErrorMessage();
     }
-  }, [props.history, props.user]);
+  }, [props.history, props.user, props]);
 
   const updateErrorMessage = () => {
     setError("Invalid User naem or Password, please try again !");

src/app/Login/loginActionTypes.js

@@ -2,3 +2,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";
+export const SIGN_OUT_LOGGEDIN_USER = "SIGN_OUT_LOGGEDIN_USER";

src/app/Login/loginActions.js

@@ -5,6 +5,9 @@ export function onSuccessfulValidation(response) {
   return { type: Actions.USER_VALIDATED_SUCCESSFULLY, response };
 }
 
+export function signOutUser() {
+  return { type: Actions.SIGN_OUT_LOGGEDIN_USER };
+}
 export function validateUser(user) {
   return function (dispatch) {
     return Services.validateUser(user.userId, user.password)

src/app/Login/loginReducer.js

@@ -4,6 +4,7 @@ const initialUser = {
   id: "",
   password: "",
   error: "",
+  isLoggedIn: false,
 };
 
 export default function loginReducer(state = initialUser, action) {
@@ -13,7 +14,10 @@ export default function loginReducer(state = initialUser, action) {
       return {
         ...state,
         ...action.response,
+        isLoggedIn: true,
       };
+    case Actions.SIGN_OUT_LOGGEDIN_USER:
+      return initialUser;
     default:
       return state;
   }

src/app/TechMarketShell.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Footer from "./Footer/Footer";
 import Header from "./Header/Header";
-import { Switch, Route, Redirect } from "react-router-dom";
+import { Switch, Route, Redirect, withRouter } from "react-router-dom";
 import "./TechMarketShell.css";
 
 import Feeds from "./Feeds/Feeds";
@@ -10,7 +10,7 @@ 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";
+import { signOutUser } from "./Login/loginActions";
 
 function TechMarketShell(props) {
   function enforceAuthentication(component, path, user) {
@@ -19,10 +19,20 @@ function TechMarketShell(props) {
     }
     return <Route exact path={path} component={component} />;
   }
-  console.log(process.env.BASE_URL, "BASE_URL===>");
+
+  const hangleSignIn = (event) => {
+    event.preventDefault();
+    if (!props.user.isLoggedIn) {
+      props.history.push("/");
+    } else {
+      props.signOutUser();
+      props.history.push("/");
+    }
+  };
+
   return (
     <div className="rootContainer">
-      <Header />
+      <Header onSignIn={hangleSignIn} />
       <div className="container-fluid contentContainer">
         <Switch>
           <Route path="/" exact component={Login} />
@@ -43,4 +53,11 @@ function mapStateToProps(state) {
     user: state.user,
   };
 }
-export default connect(mapStateToProps)(TechMarketShell);
+
+const mapDispatchToProps = {
+  signOutUser,
+};
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withRouter(TechMarketShell));