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

feat: stiching api profile and history transaction.js

Browse Source
This commit is contained in:
caturbgs 2021-12-15 20:36:48 +07:00
parent 6f743301e4
commit 28c42b3453
3 changed files with 97 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/pages/Profile/Profile.js
View File

@ -1,12 +1,13 @@
import React from "react";
import {Card, Col, Row, Typography} from "antd";
import React, {useEffect} from "react";
import {Card, Col, Row, Table, Typography} from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
const {Title, Text} = Typography;
export const Profile = () => {
export const Profile = observer(() => {
const store = useStore();
const routeData = [
{
@ -19,6 +20,35 @@ export const Profile = () => {
},
];
useEffect(() => {
(async () => {
await Promise.allSettled([
store.authentication.getProfile(),
store.transaction.getDataHistoryTransaction(),
]);
})()
}, []);
const columns = [
{
title: 'Markup Price',
dataIndex: 'mark_up_price',
key: 'mark_up_price',
width: '20%',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: '50%',
},
{
title: 'Transaction Date',
dataIndex: 'created_at',
key: 'created_at',
},
]
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
@ -27,26 +57,49 @@ export const Profile = () => {
<Col span={24}>
<div>
<Title strong>Profile</Title>
<Row>
<Col span={10}>
<Text strong>Name</Text>
</Col>
<Col span={14}>
<Text>{store.authentication.userData.username}</Text>
</Col>
<Col span={10}>
<Text strong>Role</Text>
</Col>
<Col span={14}>
<Text>{store.authentication.userData.role}</Text>
</Col>
</Row>
{/*<Row>*/}
{/* <Col span={10}>*/}
{/* <Text strong>Name</Text>*/}
{/* </Col>*/}
{/* <Col span={14}>*/}
{/* <Text>{store.authentication.profileData.username}</Text>*/}
{/* </Col>*/}
{/* <Col span={10}>*/}
{/* <Text strong>Role</Text>*/}
{/* </Col>*/}
{/* <Col span={14}>*/}
{/* <Text>{store.authentication.profileData.roles.name}</Text>*/}
{/* </Col>*/}
{/* <Col span={10}>*/}
{/* <Text strong>Superior</Text>*/}
{/* </Col>*/}
{/* <Col span={14}>*/}
{/* <Text>{store.authentication.profileData.superior.username}</Text>*/}
{/* </Col>*/}
{/* <Col span={10}>*/}
{/* <Text strong>Wallet</Text>*/}
{/* </Col>*/}
{/* <Col span={14}>*/}
{/* <Text>{store.authentication.profileData.wallet}</Text>*/}
{/* </Col>*/}
{/*</Row>*/}
</div>
</Col>
</Row>
<Row>
<Col span={24}>
<div>
<Title strong level={3}>History User Transaction</Title>
<Table
columns={columns}
dataSource={store.transaction.dataHistoryTransaction}
bordered
/>
</div>
</Col>
</Row>
<div/>
</Card>
</div>
)
};
});

11
src/store/authentication.js
View File

@ -6,6 +6,7 @@ export class Authentication {
isLoggedIn = false;
isLoginLoading = false;
ctx;
profileData = {};
constructor(ctx) {
this.ctx = ctx;
@ -49,6 +50,16 @@ export class Authentication {
}
}
async getProfile() {
try {
const response = await http.get('/auth/profile');
this.profileData = response.body.data;
} catch (e) {
console.error(e);
throw e;
}
}
logout() {
TokenUtil.clearAccessToken();
TokenUtil.persistToken();

16
src/store/transaction.js
View File

@ -1,5 +1,5 @@
import { makeAutoObservable } from "mobx";
import { http } from "../utils/http";
import {makeAutoObservable} from "mobx";
import {http} from "../utils/http";
export class Transaction {
page = 0;
@ -19,6 +19,11 @@ export class Transaction {
dataSubCategories = [];
total_dataSubCategories = 0;
pageHistoryTransaction = 0;
pageSizeHistoryTransaction = 10
dataHistoryTransaction = [];
total_dataHistoryTransaction = 0;
constructor(ctx) {
this.ctx = ctx;
makeAutoObservable(this);
@ -47,6 +52,13 @@ export class Transaction {
}
}
async getDataHistoryTransaction() {
const response = await http.get(`/transaction/history?page=${this.pageHistoryTransaction}&pageSize=${this.pageSizeHistoryTransaction}`);
this.dataHistoryTransaction = response.body.data ?? []
this.total_dataHistoryTransaction = response.body.total_data ?? 0
}
async create(data) {
const response = await http.post('/product').send(data);
await this.getData();