feat: now user can check its topup & consume history (close #78, close #95)

web/src/components/Header.js

@@ -41,6 +41,11 @@ const headerButtons = [
     icon: 'user',
     admin: true,
   },
+  {
+    name: '日志',
+    to: '/log',
+    icon: 'book',
+  },
   {
     name: '设置',
     to: '/setting',

web/src/components/LogsTable.js

@@ -0,0 +1,186 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Label, Pagination, Table } from 'semantic-ui-react';
+import { API, showError, timestamp2string } from '../helpers';
+
+import { ITEMS_PER_PAGE } from '../constants';
+
+function renderTimestamp(timestamp) {
+  return (
+    <>
+      {timestamp2string(timestamp)}
+    </>
+  );
+}
+
+function renderType(type) {
+  switch (type) {
+    case 1:
+      return <Label basic color='green'> 充值 </Label>;
+    case 2:
+      return <Label basic color='olive'> 消费 </Label>;
+    default:
+      return <Label basic color='black'> 未知 </Label>;
+  }
+}
+
+const LogsTable = () => {
+  const [logs, setLogs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [activePage, setActivePage] = useState(1);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [searching, setSearching] = useState(false);
+
+  const loadLogs = async (startIdx) => {
+    const res = await API.get(`/api/log/self/?p=${startIdx}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (startIdx === 0) {
+        setLogs(data);
+      } else {
+        let newLogs = logs;
+        newLogs.push(...data);
+        setLogs(newLogs);
+      }
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const onPaginationChange = (e, { activePage }) => {
+    (async () => {
+      if (activePage === Math.ceil(logs.length / ITEMS_PER_PAGE) + 1) {
+        // In this case we have to load more data and then append them.
+        await loadLogs(activePage - 1);
+      }
+      setActivePage(activePage);
+    })();
+  };
+
+  const refresh = async () => {
+    setLoading(true);
+    await loadLogs(0);
+  };
+
+  useEffect(() => {
+    loadLogs(0)
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+  }, []);
+
+  const searchLogs = async () => {
+    if (searchKeyword === '') {
+      // if keyword is blank, load files instead.
+      await loadLogs(0);
+      setActivePage(1);
+      return;
+    }
+    setSearching(true);
+    const res = await API.get(`/api/log/self/search?keyword=${searchKeyword}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setLogs(data);
+      setActivePage(1);
+    } else {
+      showError(message);
+    }
+    setSearching(false);
+  };
+
+  const handleKeywordChange = async (e, { value }) => {
+    setSearchKeyword(value.trim());
+  };
+
+  const sortLog = (key) => {
+    if (logs.length === 0) return;
+    setLoading(true);
+    let sortedLogs = [...logs];
+    sortedLogs.sort((a, b) => {
+      return ('' + a[key]).localeCompare(b[key]);
+    });
+    if (sortedLogs[0].id === logs[0].id) {
+      sortedLogs.reverse();
+    }
+    setLogs(sortedLogs);
+    setLoading(false);
+  };
+
+  return (
+    <>
+      <Table basic>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortLog('created_time');
+              }}
+              width={3}
+            >
+              时间
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortLog('type');
+              }}
+              width={2}
+            >
+              类型
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortLog('content');
+              }}
+              width={11}
+            >
+              详情
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          {logs
+            .slice(
+              (activePage - 1) * ITEMS_PER_PAGE,
+              activePage * ITEMS_PER_PAGE
+            )
+            .map((log, idx) => {
+              if (log.deleted) return <></>;
+              return (
+                <Table.Row key={log.created_at}>
+                  <Table.Cell>{renderTimestamp(log.created_at)}</Table.Cell>
+                  <Table.Cell>{renderType(log.type)}</Table.Cell>
+                  <Table.Cell>{log.content}</Table.Cell>
+                </Table.Row>
+              );
+            })}
+        </Table.Body>
+
+        <Table.Footer>
+          <Table.Row>
+            <Table.HeaderCell colSpan='4'>
+              <Button size='small' onClick={refresh} loading={loading}>刷新</Button>
+              <Pagination
+                floated='right'
+                activePage={activePage}
+                onPageChange={onPaginationChange}
+                size='small'
+                siblingRange={1}
+                totalPages={
+                  Math.ceil(logs.length / ITEMS_PER_PAGE) +
+                  (logs.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
+                }
+              />
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Footer>
+      </Table>
+    </>
+  );
+};
+
+export default LogsTable;