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/>*/}

View File

@@ -3,6 +3,7 @@ import {observer} from 'mobx-react-lite';
import {useStore} from "../../utils/useStore";
import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd';
import {useHistory} from "react-router-dom";
import {LINKS} from "../../routes/app";
export const Login = observer(() => {
const store = useStore();
@@ -15,7 +16,7 @@ export const Login = observer(() => {
username: params.username,
password: params.password,
});
history.push('/app/home');
history.push(LINKS.HOME);
} catch (e) {
if (e.response?.body?.message) {
message.error(e.response.body.message);

View File

@@ -5,6 +5,7 @@ import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {MembershipModal} from "./MembershipModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
const {Search} = Input;
@@ -84,12 +85,12 @@ export const Membership = observer(() => {
const routeData = [
{
route: "/app/home",
route: LINKS.HOME,
name: "Home",
},
{
route: "/app/membership",
name: <span style={{ fontWeight: "bold" }}>Membership</span>,
route: LINKS.MEMBERSHIP,
name: <span style={{fontWeight: "bold"}}>Membership</span>,
},
];

View File

@@ -5,6 +5,7 @@ import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {ProductComponent} from "../../component/ProductComponent";
import {LINKS} from "../../routes/app";
const {TabPane} = Tabs;
const {Search} = Input;
@@ -35,11 +36,11 @@ export const Product = observer(() => {
const routeData = [
{
route: "/app/home",
route: LINKS.HOME,
name: "Home",
},
{
route: "/app/product",
route: LINKS.PRODUCT,
name: <span style={{fontWeight: 'bold'}}>Product</span>,
},
];

View File

@@ -3,6 +3,7 @@ import {Button, Card, Col, Input, Row, Tabs} from "antd";
import {FilterOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {Pulsa} from "./Pulsa";
import {LINKS} from "../../routes/app";
const {TabPane} = Tabs;
const {Search} = Input;
@@ -13,11 +14,11 @@ export const Transaction = () => {
};
const routeData = [
{
route: "/app/home",
route: LINKS.HOME,
name: "Home",
},
{
route: "/app/transaction",
route: LINKS.TRANSACTION,
name: <span style={{fontWeight: 'bold'}}>Transaction</span>,
},
];