feat: const for routes and init profile page

This commit is contained in:
caturbgs
2021-12-10 14:54:25 +07:00
parent 6a364fe8b4
commit 537e009380
8 changed files with 69 additions and 39 deletions

View File

@@ -2,8 +2,8 @@ import React, {useState} from "react";
import {Button, Drawer, Layout, Menu, Popover, Typography,} from "antd";
import {MenuList} from "./MenuList";
import {Link, useHistory} from "react-router-dom";
import {CalendarOutlined, HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
import {AppRoute} from "../../routes/app";
import {HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
import {AppRoute, LINKS} from "../../routes/app";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {useMediaQuery} from "react-responsive";
@@ -104,35 +104,41 @@ export const DesktopLayout = observer(() => {
>
<Menu>
<Menu.Item key="home">
<Link to={'/app/home'}>
<Link to={LINKS.HOME}>
<HomeOutlined/>
<span>Home</span>
</Link>
</Menu.Item>
<Menu.Item key="membership">
<Link to={'/app/membership'}>
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<HomeOutlined/>
<span>Membership</span>
</Link>
</Menu.Item>
<Menu.Item key="product">
<Link to={'/app/product'}>
</Menu.Item>}
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
<Link to={LINKS.PRODUCT}>
<HomeOutlined/>
<span>Product</span>
</Link>
</Menu.Item>
<Menu.Item key="transaction">
<Link to={'/app/transaction'}>
</Menu.Item>}
{store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<HomeOutlined/>
<span>Transaction</span>
</Link>
</Menu.Item>
<Menu.Item key="about">
<Link to={'/app/about'}>
<CalendarOutlined/>
<span>About</span>
</Menu.Item>}
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined/>
<span>Profile</span>
</Link>
</Menu.Item>
{/*<Menu.Item key="about">*/}
{/* <Link to={'/app/about'}>*/}
{/* <CalendarOutlined/>*/}
{/* <span>About</span>*/}
{/* </Link>*/}
{/*</Menu.Item>*/}
<Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
</Menu>
</div>
@@ -261,7 +267,7 @@ export const DesktopLayout = observer(() => {
mode="inline"
>
<Menu.Item>
<Link to="/app/profile">
<Link to={LINKS.PROFILE}>
<span>Profile</span>
</Link>
</Menu.Item>
@@ -352,7 +358,7 @@ export const DesktopLayout = observer(() => {
mode="inline"
>
<Menu.Item key={'profile'}>
<Link to="/app/profile">
<Link to={LINKS.PROFILE}>
<span>Profile</span>
</Link>
</Menu.Item>

View File

@@ -1,9 +1,10 @@
import React, {useEffect, useState} from "react";
import {Menu} from "antd";
import {Link} from "react-router-dom";
import {HomeOutlined,} from "@ant-design/icons";
import {HomeOutlined, UserOutlined,} from "@ant-design/icons";
import {observer} from "mobx-react-lite";
import {useStore} from "../../utils/useStore";
import {LINKS} from "../../routes/app";
const {SubMenu} = Menu;
@@ -34,29 +35,35 @@ export const MenuList = observer((props) => {
forceSubMenuRender={true}
>
<Menu.Item key="home">
<Link to={'/app/home'}>
<Link to={LINKS.HOME}>
<HomeOutlined/>
<span>Home</span>
</Link>
</Menu.Item>
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
<Link to={'/app/membership'}>
<Link to={LINKS.MEMBERSHIP}>
<HomeOutlined/>
<span>Membership</span>
</Link>
</Menu.Item>}
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
<Link to={'/app/product'}>
<Link to={LINKS.PRODUCT}>
<HomeOutlined/>
<span>Product</span>
</Link>
</Menu.Item>}
{store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
<Link to={'/app/transaction'}>
{store.authentication.userData.role === ('Supervisor' || 'Sales') && <Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<HomeOutlined/>
<span>Transaction</span>
</Link>
</Menu.Item>}
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined/>
<span>Profile</span>
</Link>
</Menu.Item>
{/*<Menu.Item key="about">*/}
{/* <Link to={'/app/about'}>*/}
{/* <CalendarOutlined/>*/}