Fix profile pages

Author: piyushroshan

deploy/docker/docker-compose.yml

@@ -155,7 +155,9 @@ services:
     image: crapi/crapi-web:${VERSION:-latest}
     ports:
       - "${LISTEN_IP:-127.0.0.1}:8888:80"
+      - "${LISTEN_IP:-127.0.0.1}:30080:80"
       - "${LISTEN_IP:-127.0.0.1}:8443:443"
+      - "${LISTEN_IP:-127.0.0.1}:30443:443"
     environment:
       - COMMUNITY_SERVICE=crapi-community:${COMMUNITY_SERVER_PORT:-8087}
       - IDENTITY_SERVICE=crapi-identity:${IDENTITY_SERVER_PORT:-8080}

postman_collections/crAPI.postman_environment.json

@@ -3,12 +3,12 @@
     "name": "Crapi",
     "values": [{
             "key": "url",
-            "value": "http://127.0.0.1:8888",
+            "value": "http://127.0.0.1:30080",
             "enabled": true
         },
         {
             "key": "url_mail",
-            "value": "http://127.0.0.1:8025",
+            "value": "http://127.0.0.1:30080/mailhog",
             "enabled": true
         }
     ],

services/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "crapi-web",
   "version": "0.1.0",
-  "proxy": "http://localhost:8888",
+  "proxy": "http://localhost:30080",
   "private": true,
   "dependencies": {
     "@ant-design/cssinjs": "^1.21.1",

services/web/src/components/navBar/navBar.tsx

@@ -16,8 +16,10 @@
 import "./nav.css";
 
 import { Button, Dropdown, Menu, Avatar, Layout, Space } from "antd";
-import { LogoutOutlined, DownOutlined } from "@ant-design/icons";
+import { LogoutOutlined, EditOutlined, ProfileOutlined, CaretDownOutlined } from "@ant-design/icons";
 import React from "react";
+import roleTypes from "../../constants/roleTypes";
+import type { MenuProps } from 'antd';
 import { useNavigate } from "react-router-dom";
 import { connect, ConnectedProps } from "react-redux";
 import { logOutUserAction } from "../../actions/userActions";
@@ -30,6 +32,7 @@ interface RootState {
     accessToken: string;
     name: string;
     isLoggedIn: boolean;
+    role: string;
   };
   profileReducer: {
     profilePicData: string;
@@ -48,7 +51,7 @@ interface NavbarProps extends PropsFromRedux {}
  * dropdown alos consists the logout button
  */
 const Navbar: React.FC<NavbarProps> = (props) => {
-  const { logOutUser, isLoggedIn, name, profilePicData } = props;
+  const { logOutUser, isLoggedIn, name, role, profilePicData } = props;
   const navigate = useNavigate();
 
   const logout = () => {
@@ -59,39 +62,36 @@ const Navbar: React.FC<NavbarProps> = (props) => {
     });
   };
 
-  const takeMenuAction = (input: { key: string }) => {
-    if (input.key === "password") navigate(`/reset-password`);
-    else if (input.key === "profile") navigate(`/my-profile`);
-    else if (input.key === "logout") logout();
-  };
-
-  const menuSidebar = () => (
-    <Menu onClick={(key) => takeMenuAction(key)}>
-      <Menu.Item key="password">Change Password</Menu.Item>
-      <Menu.Item key="logout">
-        <LogoutOutlined /> Logout
-      </Menu.Item>
-    </Menu>
-  );
-
   const takeNavigationAction = (input: { key: string }) => {
     if (input.key === "dashboard") navigate(`/`);
     else if (input.key === "shop") navigate(`/shop`);
     else if (input.key === "forum") navigate(`/forum`);
   };
 
+  type MenuItem = Required<MenuProps>['items'][number];
+
+  const menuitems: MenuItem[] = []
+  menuitems.push({ key: "dashboard", label: "Dashboard" });
+  if (role !== roleTypes.ROLE_MECHANIC) {
+    menuitems.push({ key: "shop", label: "Shop" });
+    menuitems.push({ key: "forum", label: "Community" });
+  }
+
   const menuNavigation = () => (
     <Menu
       onClick={(key) => takeNavigationAction(key)}
       mode="horizontal"
       theme="dark"
-    >
-      <Menu.Item key="dashboard">Dashboard</Menu.Item>
-      <Menu.Item key="shop">Shop</Menu.Item>
-      <Menu.Item key="forum">Community</Menu.Item>
-    </Menu>
+      items={menuitems}
+    />
   );
 
+  const sideMenuItems: MenuProps['items'] = [
+    { key: "profile", label: "My Profile", onClick: () => navigate("/my-profile"), icon: <ProfileOutlined /> },
+    { key: "password", label: "Change Password", onClick: () => navigate("/reset-password"), icon: <EditOutlined /> },
+    { key: "logout", label: "Logout", onClick: logout, icon: <LogoutOutlined /> },
+  ]
+
   return (
     <Header>
       <Space className="top-nav-left">
@@ -111,9 +111,9 @@ const Navbar: React.FC<NavbarProps> = (props) => {
               onClick={() => navigate("/my-profile")}
             />
           </div>
-          <Dropdown overlay={menuSidebar()} placement="bottomRight">
+          <Dropdown menu={{ items: sideMenuItems }} placement="bottomRight">
             <div className="nav-items">
-              <DownOutlined />
+              <CaretDownOutlined />
             </div>
           </Dropdown>
         </Space>
@@ -146,6 +146,7 @@ const mapStateToProps = (state: RootState) => ({
   name: state.userReducer.name,
   isLoggedIn: state.userReducer.isLoggedIn,
   profilePicData: state.profileReducer.profilePicData,
+  role: state.userReducer.role,
 });
 
 const mapDispatchToProps = {