如何在React Firebase中创建基于时间的交易历史记录

Question

我有一个网站显示如下：

如果点击提交按钮，发送到API的数据将是这样的：

{
    "-NjE-07WS5julczaO0ZD": {
        "bahanSampah": "Kertas",
        "beratSampah": "3",
        "harga": 22500,
        "jenisSampah": "Koran",
        "namaNasabah": "Ita Ibrahim",
        "satuan": "Kilogram",
        "tglSetor": "15 November 2023, 01:01"
    },
    "-NjGQMz_3DRlK5CUiFcH": {
        "bahanSampah": "Plastik",
        "beratSampah": "0.5",
        "harga": 1750,
        "jenisSampah": "Plastik Campur",
        "namaNasabah": "Erna",
        "satuan": "Kilogram",
        "tglSetor": "14 November 2023, 12:21"
    }
}

以上数据将显示在下表中：

如何根据发送到上面API的“存款日期”数据显示交易历史记录，图片如下：

这是我为上面的显示创建的代码：

import { Button, Col, Divider, Form, Input, Select } from "antd";
import React, { useState } from "react";
import DataTable from "./components/datatable";
import "../../../styles/inventaris/inventaris.css";
import { useSelector } from "react-redux";
import moment from "moment";
import DataTableTotal from "./components/datatableTotal";

function Inventaris({ createDataInventaris, loadingOnSubmit, handleDeleteDataSampah }) {
  const { data: dataNasabah } = useSelector((state) => state.dataNasabah);
  const { data: dataSampah } = useSelector((state) => state.dataSampah);
  const [selectedBahan, setSelectedBahan] = useState(""); 
  const { currentUser } = useSelector(state => state.auth)

  const [form] = Form.useForm();

  const handleSubmit = (values) => {
    const selectedBahanData = dataSampah[selectedBahan];
    if (selectedBahanData) {
      const data = {
        ...values,
        bahanSampah: selectedBahanData.bahan,
        tglSetor: moment().format("DD MMMM YYYY, HH:mm"),
      };
      createDataInventaris(data);
      form.resetFields();
    }
  };

  const handleBahanChange = (value) => {
    setSelectedBahan(value);
  };

  const isPetugas = Object.values(dataNasabah).some(user => user.status === "Petugas" && user.uid === currentUser.uid)

  return (
    <div>
      <Form disabled={!isPetugas} layout="vertical" form={form} onFinish={handleSubmit}>
        <Form.Item
          label="Nama Nasabah"
          colon={false}
          name="namaNasabah"
          rules={[
            {
              required: true,
              message: "Tolong masukkan nama nasabah!",
            },
          ]}
        >
          <Select
            showSearch
            style={{
              width: "100%",
            }}
            placeholder="Masukkan nama nasabah"
          >
            {Object.values(dataNasabah).map((nasabah) => (
              <Select.Option
                key={nasabah.namaLengkap}
                value={nasabah.namaLengkap}
              >
                {nasabah.namaLengkap}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          label="Bahan Sampah"
          colon={false}
          name="bahanSampah"
          rules={[
            {
              required: true,
              message: "Tolong masukkan nama bahan sampah!",
            },
          ]}
        >
          <Select
            showSearch
            style={{
              width: "100%",
            }}
            placeholder="Masukkan nama bahan sampah"
            onChange={handleBahanChange}
          >
            {Object.keys(dataSampah).map((sampahId) => (
              <Select.Option key={sampahId} value={sampahId}>
                {dataSampah[sampahId].bahan}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          label="Jenis Sampah"
          colon={false}
          name="jenisSampah"
          rules={[
            {
              required: true,
              message: "Tolong masukkan nama jenis sampah!",
            },
          ]}
        >
          <Select
            showSearch
            style={{
              width: "100%",
            }}
            placeholder="Masukkan nama jenis sampah"
            allowClear
          >
            {selectedBahan &&
              dataSampah[selectedBahan]?.jenis.map((jenis) => (
                <Select.Option key={jenis} value={jenis}>
                  {jenis}
                </Select.Option>
              ))}
          </Select>
        </Form.Item>

        <Form.Item
          label="Berat Sampah"
          colon={false}
          name="beratSampah"
          rules={[
            {
              required: true,
              message: "Tolong masukkan berat sampah!",
            },
          ]}
        >
          <Input
            style={{
              width: "100%",
            }}
            placeholder="Masukkan berat sampah"
          />
        </Form.Item>

        <Form.Item
          label="Satuan"
          colon={false}
          name="satuan"
          rules={[
            {
              required: true,
              message: "Tolong masukkan satuan harga sampah!",
            },
          ]}
        >
          <Select
            placeholder="Masukan satuan"
            allowClear
            options={[
              {
                value: "Kilogram",
                label: "Kilogram",
              },
              {
                value: "Biji",
                label: "Biji",
              },
              {
                value: "Liter",
                label: "Liter",
              },
            ]}
          />
        </Form.Item>

        <Form.Item className="btn-submit">
          <Button htmlType="submit" loading={loadingOnSubmit}>
            Submit
          </Button>
        </Form.Item>
      </Form>


      <Col className="datatable">
        <Divider orientation="left">Setoran Sampah</Divider>
        <DataTable handleDeleteDataSampah={handleDeleteDataSampah} />
      </Col>
      
      <Col className="datatable">
        <Divider orientation="left">Total Keseluruhan Setoran</Divider>
        <DataTableTotal />
      </Col>
    </div>
  );
}

export default Inventaris;

然后在“DataTableTotal”这一节中我显示提交数据的结果：

import React from 'react';
import { Table } from 'antd';
import { useSelector } from 'react-redux';

function DataTableTotal() {
  const { data } = useSelector((state) => state.dataInventaris);

  const getAggregatedData = () => {
    if (!data) return [];
    const aggregatedData = {};
    Object.values(data).forEach((item) => {
      const { namaNasabah, harga, beratSampah } = item;
      if (!aggregatedData[namaNasabah]) {
        aggregatedData[namaNasabah] = {
          namaNasabah,
          totalHarga: 0,
          totalBerat: 0,
        };
      }
      aggregatedData[namaNasabah].totalHarga += harga;
      aggregatedData[namaNasabah].totalBerat += parseFloat(beratSampah);
    });
    return Object.values(aggregatedData);
  };

  const columns = [
    {
      title: "No",
      width: 10,
      render: (text, record, index) => index + 1,
    },
    {
      title: "Nama Nasabah",
      dataIndex: "namaNasabah",
      width: 300,
    },
    {
      title: "Total Harga Setoran",
      dataIndex: "totalHarga",
      width: 200,
    },
    {
      title: "Total Berat Setoran",
      dataIndex: "totalBerat",
      width: 200,
    },
  ];

  return (
    <div>
      <Table dataSource={getAggregatedData()} columns={columns} pagination={false} />
    </div>
  );
}

export default DataTableTotal;

请帮助我！

Answer 1

据我从你的图片中了解到，你需要显示每天的交易历史记录。话虽这么说，您需要根据保存交易日期和时间的字段来查询数据库。正如我在您的数据库架构中看到的，包含此类数据的单个字段是

tglSetor

。这个字段的问题在于类型是字符串，如果要对字符串进行排序，顺序就是lexicography。所以这意味着你会得到错误的结果。

现在为了获取对应于一天的交易，您必须添加一个数字类型的新字段，其中应存储每笔交易的timestamp。通过这种方式，您将能够查询所有交易，并且仅获取与特定日期相对应的交易。例如，要获取与 11 月 15 日相对应的所有交易，您必须将

startAt()

的 unix 时间戳传递给

2023-11-15 00:00:01

函数，并将

endAt()

的 unix 时间戳传递给

2023-11-15 23:59:59

函数。