PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: const for routes and init profile page

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/component/ProductComponent.js
View File

@ -5,6 +5,7 @@ import {ExclamationCircleOutlined} from "@ant-design/icons";
import {useHistory} from "react-router-dom";
import {capitalize} from "lodash";
import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";
export const ProductComponent = observer((props) => {
const store = useStore();
@ -113,7 +114,7 @@ export const ProductComponent = observer((props) => {
console.log(id);
await store.product.delete(id);
message.success("Data Berhasil Dihapus");
history.push("/app/product");
history.push(LINKS.PRODUCT);
} catch (err) {
console.log("error", err);
message.error("Gagal menghapus");

42
src/pages/App/DesktopLayout.js
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>

19
src/pages/App/MenuList.js
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/>*/}

3
src/pages/Login/Login.js
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);

5
src/pages/Membership/Membership.js
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,11 +85,11 @@ export const Membership = observer(() => {
const routeData = [
{
route: "/app/home",
route: LINKS.HOME,
name: "Home",
},
{
route: "/app/membership",
route: LINKS.MEMBERSHIP,
name: <span style={{fontWeight: "bold"}}>Membership</span>,
},
];

5
src/pages/Product/Product.js
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>,
},
];

5
src/pages/Transaction/Transaction.js
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>,
},
];

24
src/routes/app.js
View File

@ -5,25 +5,37 @@ import {Membership} from "../pages/Membership/Membership";
import {Product} from "../pages/Product/Product";
import {Transaction} from "../pages/Transaction/Transaction";
export const LINKS = {
HOME: "/app/home",
ABOUT: "/app/about",
MEMBERSHIP: "/app/membership",
PRODUCT: "/app/product",
TRANSACTION: "/app/transaction",
PROFILE: "/app/profile",
};
export const AppRoute = () => {
return <Switch>
<Route path={"/app/home"}>
<Route path={LINKS.HOME}>
<Home/>
</Route>
<Route path={"/app/membership"}>
<Route path={LINKS.MEMBERSHIP}>
<Membership/>
</Route>
<Route path={"/app/product"}>
<Route path={LINKS.PRODUCT}>
<Product/>
</Route>
<Route path={"/app/transaction"}>
<Route path={LINKS.TRANSACTION}>
<Transaction/>
</Route>
<Route path={"/app/about"}>
<Route path={LINKS.ABOUT}>
<About/>
</Route>
<Route path={LINKS.PROFILE}>
<About/>
</Route>
<Route path="/app" exact>
<Redirect to={'/app/home'}/>
<Redirect to={LINKS.HOME}/>
</Route>
</Switch>
}