Spaces:
Sleeping
Sleeping
Hookup endpoints
Browse files- app/(home)/dashboard/page.tsx +44 -10
- app/lib/endpoints/index.ts +5 -0
app/(home)/dashboard/page.tsx
CHANGED
@@ -1,15 +1,14 @@
|
|
1 |
'use client';
|
2 |
import { Button, Table, Upload, message } from "antd";
|
3 |
import { UploadOutlined } from '@ant-design/icons';
|
4 |
-
import React from "react";
|
5 |
-
import {
|
6 |
-
import {
|
7 |
|
8 |
-
const
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
function handleUpload(info: UploadChangeParam<UploadFile<any>>) {
|
13 |
if (info.file.status !== 'uploading') {
|
14 |
console.log(info.file, info.fileList);
|
15 |
}
|
@@ -18,11 +17,46 @@ const Dashboard = () => {
|
|
18 |
} else if (info.file.status === 'error') {
|
19 |
message.error(`${info.file.name} file upload failed.`);
|
20 |
}
|
21 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
22 |
|
23 |
return (
|
24 |
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
25 |
-
<Upload
|
26 |
<Button icon={<UploadOutlined />}>Click to Upload</Button>
|
27 |
</Upload>
|
28 |
<Table dataSource={transactions} columns={columns} />
|
|
|
1 |
'use client';
|
2 |
import { Button, Table, Upload, message } from "antd";
|
3 |
import { UploadOutlined } from '@ant-design/icons';
|
4 |
+
import React, { useEffect, useState } from "react";
|
5 |
+
import { UploadProps } from "antd/es/upload";
|
6 |
+
import { fielUploadEndpoint, transactionsEndpoint } from "@/app/lib/endpoints";
|
7 |
|
8 |
+
const props: UploadProps = {
|
9 |
+
name: 'upload_file',
|
10 |
+
action: fielUploadEndpoint,
|
11 |
+
onChange(info) {
|
|
|
12 |
if (info.file.status !== 'uploading') {
|
13 |
console.log(info.file, info.fileList);
|
14 |
}
|
|
|
17 |
} else if (info.file.status === 'error') {
|
18 |
message.error(`${info.file.name} file upload failed.`);
|
19 |
}
|
20 |
+
},
|
21 |
+
};
|
22 |
+
|
23 |
+
const Dashboard = () => {
|
24 |
+
const [transactions, setTransactions] = useState([]);
|
25 |
+
useEffect(() => {
|
26 |
+
(async () => {
|
27 |
+
const resp = await fetch(transactionsEndpoint);
|
28 |
+
const t = await resp.json();
|
29 |
+
setTransactions(t);
|
30 |
+
})();
|
31 |
+
}, []);
|
32 |
+
const columns = [
|
33 |
+
{
|
34 |
+
title: 'Date',
|
35 |
+
dataIndex: 'transaction_date',
|
36 |
+
key: 'date',
|
37 |
+
},
|
38 |
+
{
|
39 |
+
title: 'Description',
|
40 |
+
dataIndex: 'name_description',
|
41 |
+
key: 'description',
|
42 |
+
},
|
43 |
+
{
|
44 |
+
title: 'Amount',
|
45 |
+
dataIndex: 'amount',
|
46 |
+
key: 'amount',
|
47 |
+
},
|
48 |
+
{
|
49 |
+
title: 'Category',
|
50 |
+
dataIndex: 'category',
|
51 |
+
key: 'category',
|
52 |
+
},
|
53 |
+
];
|
54 |
+
|
55 |
+
|
56 |
|
57 |
return (
|
58 |
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
59 |
+
<Upload {...props}>
|
60 |
<Button icon={<UploadOutlined />}>Click to Upload</Button>
|
61 |
</Upload>
|
62 |
<Table dataSource={transactions} columns={columns} />
|
app/lib/endpoints/index.ts
ADDED
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
|
2 |
+
const url = `${baseUrl}/api/v1`
|
3 |
+
|
4 |
+
export const transactionsEndpoint = `${url}/transactions/1`;
|
5 |
+
export const fielUploadEndpoint = `${url}/file_upload`;
|