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 {useHistory} from "react-router-dom";
import {capitalize} from "lodash"; import {capitalize} from "lodash";
import {useStore} from "../utils/useStore"; import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";
export const ProductComponent = observer((props) => { export const ProductComponent = observer((props) => {
const store = useStore(); const store = useStore();
@ -113,7 +114,7 @@ export const ProductComponent = observer((props) => {
console.log(id); console.log(id);
await store.product.delete(id); await store.product.delete(id);
message.success("Data Berhasil Dihapus"); message.success("Data Berhasil Dihapus");
history.push("/app/product"); history.push(LINKS.PRODUCT);
} catch (err) { } catch (err) {
console.log("error", err); console.log("error", err);
message.error("Gagal menghapus"); 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 {Button, Drawer, Layout, Menu, Popover, Typography,} from "antd";
import {MenuList} from "./MenuList"; import {MenuList} from "./MenuList";
import {Link, useHistory} from "react-router-dom"; import {Link, useHistory} from "react-router-dom";
import {CalendarOutlined, HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons"; import {HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
import {AppRoute} from "../../routes/app"; import {AppRoute, LINKS} from "../../routes/app";
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {useMediaQuery} from "react-responsive"; import {useMediaQuery} from "react-responsive";
@ -104,35 +104,41 @@ export const DesktopLayout = observer(() => {
> >
<Menu> <Menu>
<Menu.Item key="home"> <Menu.Item key="home">
<Link to={'/app/home'}> <Link to={LINKS.HOME}>
<HomeOutlined/> <HomeOutlined/>
<span>Home</span> <span>Home</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="membership"> {store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
<Link to={'/app/membership'}> <Link to={LINKS.MEMBERSHIP}>
<HomeOutlined/> <HomeOutlined/>
<span>Membership</span> <span>Membership</span>
</Link> </Link>
</Menu.Item> </Menu.Item>}
<Menu.Item key="product"> {store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
<Link to={'/app/product'}> <Link to={LINKS.PRODUCT}>
<HomeOutlined/> <HomeOutlined/>
<span>Product</span> <span>Product</span>
</Link> </Link>
</Menu.Item> </Menu.Item>}
<Menu.Item key="transaction"> {store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
<Link to={'/app/transaction'}> <Link to={LINKS.TRANSACTION}>
<HomeOutlined/> <HomeOutlined/>
<span>Transaction</span> <span>Transaction</span>
</Link> </Link>
</Menu.Item> </Menu.Item>}
<Menu.Item key="about"> <Menu.Item key="profile">
<Link to={'/app/about'}> <Link to={LINKS.PROFILE}>
<CalendarOutlined/> <UserOutlined/>
<span>About</span> <span>Profile</span>
</Link> </Link>
</Menu.Item> </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.Divider style={{background: "transparent", paddingTop: 15}}/>
</Menu> </Menu>
</div> </div>
@ -261,7 +267,7 @@ export const DesktopLayout = observer(() => {
mode="inline" mode="inline"
> >
<Menu.Item> <Menu.Item>
<Link to="/app/profile"> <Link to={LINKS.PROFILE}>
<span>Profile</span> <span>Profile</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
@ -352,7 +358,7 @@ export const DesktopLayout = observer(() => {
mode="inline" mode="inline"
> >
<Menu.Item key={'profile'}> <Menu.Item key={'profile'}>
<Link to="/app/profile"> <Link to={LINKS.PROFILE}>
<span>Profile</span> <span>Profile</span>
</Link> </Link>
</Menu.Item> </Menu.Item>

19
src/pages/App/MenuList.js
View File

@ -1,9 +1,10 @@
import React, {useEffect, useState} from "react"; import React, {useEffect, useState} from "react";
import {Menu} from "antd"; import {Menu} from "antd";
import {Link} from "react-router-dom"; 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 {observer} from "mobx-react-lite";
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {LINKS} from "../../routes/app";
const {SubMenu} = Menu; const {SubMenu} = Menu;
@ -34,29 +35,35 @@ export const MenuList = observer((props) => {
forceSubMenuRender={true} forceSubMenuRender={true}
> >
<Menu.Item key="home"> <Menu.Item key="home">
<Link to={'/app/home'}> <Link to={LINKS.HOME}>
<HomeOutlined/> <HomeOutlined/>
<span>Home</span> <span>Home</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership"> {store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
<Link to={'/app/membership'}> <Link to={LINKS.MEMBERSHIP}>
<HomeOutlined/> <HomeOutlined/>
<span>Membership</span> <span>Membership</span>
</Link> </Link>
</Menu.Item>} </Menu.Item>}
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product"> {store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
<Link to={'/app/product'}> <Link to={LINKS.PRODUCT}>
<HomeOutlined/> <HomeOutlined/>
<span>Product</span> <span>Product</span>
</Link> </Link>
</Menu.Item>} </Menu.Item>}
{store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction"> {store.authentication.userData.role === ('Supervisor' || 'Sales') && <Menu.Item key="transaction">
<Link to={'/app/transaction'}> <Link to={LINKS.TRANSACTION}>
<HomeOutlined/> <HomeOutlined/>
<span>Transaction</span> <span>Transaction</span>
</Link> </Link>
</Menu.Item>} </Menu.Item>}
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined/>
<span>Profile</span>
</Link>
</Menu.Item>
{/*<Menu.Item key="about">*/} {/*<Menu.Item key="about">*/}
{/* <Link to={'/app/about'}>*/} {/* <Link to={'/app/about'}>*/}
{/* <CalendarOutlined/>*/} {/* <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 {useStore} from "../../utils/useStore";
import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd'; import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd';
import {useHistory} from "react-router-dom"; import {useHistory} from "react-router-dom";
import {LINKS} from "../../routes/app";
export const Login = observer(() => { export const Login = observer(() => {
const store = useStore(); const store = useStore();
@ -15,7 +16,7 @@ export const Login = observer(() => {
username: params.username, username: params.username,
password: params.password, password: params.password,
}); });
history.push('/app/home'); history.push(LINKS.HOME);
} catch (e) { } catch (e) {
if (e.response?.body?.message) { if (e.response?.body?.message) {
message.error(e.response.body.message); message.error(e.response.body.message);

7
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 {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {MembershipModal} from "./MembershipModal"; import {MembershipModal} from "./MembershipModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
const {Search} = Input; const {Search} = Input;
@ -84,12 +85,12 @@ export const Membership = observer(() => {
const routeData = [ const routeData = [
{ {
route: "/app/home", route: LINKS.HOME,
name: "Home", name: "Home",
}, },
{ {
route: "/app/membership", route: LINKS.MEMBERSHIP,
name: <span style={{ fontWeight: "bold" }}>Membership</span>, 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 {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {ProductComponent} from "../../component/ProductComponent"; import {ProductComponent} from "../../component/ProductComponent";
import {LINKS} from "../../routes/app";
const {TabPane} = Tabs; const {TabPane} = Tabs;
const {Search} = Input; const {Search} = Input;
@ -35,11 +36,11 @@ export const Product = observer(() => {
const routeData = [ const routeData = [
{ {
route: "/app/home", route: LINKS.HOME,
name: "Home", name: "Home",
}, },
{ {
route: "/app/product", route: LINKS.PRODUCT,
name: <span style={{fontWeight: 'bold'}}>Product</span>, 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 {FilterOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {Pulsa} from "./Pulsa"; import {Pulsa} from "./Pulsa";
import {LINKS} from "../../routes/app";
const {TabPane} = Tabs; const {TabPane} = Tabs;
const {Search} = Input; const {Search} = Input;
@ -13,11 +14,11 @@ export const Transaction = () => {
}; };
const routeData = [ const routeData = [
{ {
route: "/app/home", route: LINKS.HOME,
name: "Home", name: "Home",
}, },
{ {
route: "/app/transaction", route: LINKS.TRANSACTION,
name: <span style={{fontWeight: 'bold'}}>Transaction</span>, 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 {Product} from "../pages/Product/Product";
import {Transaction} from "../pages/Transaction/Transaction"; 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 = () => { export const AppRoute = () => {
return <Switch> return <Switch>
<Route path={"/app/home"}> <Route path={LINKS.HOME}>
<Home/> <Home/>
</Route> </Route>
<Route path={"/app/membership"}> <Route path={LINKS.MEMBERSHIP}>
<Membership/> <Membership/>
</Route> </Route>
<Route path={"/app/product"}> <Route path={LINKS.PRODUCT}>
<Product/> <Product/>
</Route> </Route>
<Route path={"/app/transaction"}> <Route path={LINKS.TRANSACTION}>
<Transaction/> <Transaction/>
</Route> </Route>
<Route path={"/app/about"}> <Route path={LINKS.ABOUT}>
<About/>
</Route>
<Route path={LINKS.PROFILE}>
<About/> <About/>
</Route> </Route>
<Route path="/app" exact> <Route path="/app" exact>
<Redirect to={'/app/home'}/> <Redirect to={LINKS.HOME}/>
</Route> </Route>
</Switch> </Switch>
} }