add logout page to frontend

coderj001 · coderj001 · commit 09fe5679e6b3 · 2021-04-15T22:10:32.000+05:30
diff --git a/frontend/src/actions/userActions.jsx b/frontend/src/actions/userActions.jsx
@@ -33,3 +33,8 @@ export const login = (email, password) => async (dispatch) => {
     });
   }
 };
+
+export const logout = () => (dispatch) => {
+  localStorage.removeItem("userInfo");
+  dispatch({ type: USER_LOGOUT });
+};
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
@@ -1,10 +1,24 @@
 import React from "react";
-import { Navbar, Nav, Container } from "react-bootstrap";
+import { Navbar, Nav, Container, NavDropdown } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faShoppingCart, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
+import {
+  faShoppingCart,
+  faSignInAlt,
+  faSignOutAlt,
+  faUserAlt,
+} from "@fortawesome/free-solid-svg-icons";
 import { LinkContainer } from "react-router-bootstrap";
+import { useDispatch, useSelector } from "react-redux";
+import { logout } from "../actions/userActions";
 
 function Navigaton() {
+  const { userInfo } = useSelector((state) => state.userLogin);
+  const dispatch = useDispatch();
+
+  const logoutHandler = (e) => {
+    dispatch(logout());
+  };
+
   return (
     <div>
       <Navbar bg="dark" variant="dark" expand="lg" collapseOnSelect>
@@ -21,12 +35,27 @@ function Navigaton() {
                   Cart
                 </Nav.Link>
               </LinkContainer>
-              <LinkContainer to="/login">
-                <Nav.Link>
-                  <FontAwesomeIcon icon={faSignInAlt} />
-                  Login
-                </Nav.Link>
-              </LinkContainer>
+              {userInfo ? (
+                <NavDropdown title={userInfo.username} id="username">
+                  <LinkContainer to="/profile">
+                    <NavDropdown.Item>
+                      <FontAwesomeIcon icon={faUserAlt} />
+                      Profile
+                    </NavDropdown.Item>
+                  </LinkContainer>
+                  <NavDropdown.Item onClick={logoutHandler}>
+                    <FontAwesomeIcon icon={faSignOutAlt} />
+                    Logout
+                  </NavDropdown.Item>
+                </NavDropdown>
+              ) : (
+                <LinkContainer to="/login">
+                  <Nav.Link>
+                    <FontAwesomeIcon icon={faSignInAlt} />
+                    Login
+                  </Nav.Link>
+                </LinkContainer>
+              )}
             </Nav>
           </Navbar.Collapse>
         </Container>

Original file line number	Diff line number	Diff line change
`@@ -33,3 +33,8 @@ export const login = (email, password) => async (dispatch) => {`
`33`	`33`	`});`
`34`	`34`	`}`
`35`	`35`	`};`
	`36`	`+`
	`37`	`+export const logout = () => (dispatch) => {`
	`38`	`+ localStorage.removeItem("userInfo");`
	`39`	`+ dispatch({ type: USER_LOGOUT });`
	`40`	`+};`