web3 takes out all completed orders from redux and renders them into the corresponding Table list

The above web3 React dapp project gets canceled and completed and all order data from the blockchain through events and stores them in redux.
In we have got our order from the block
Then we restore the above environment
ganache

ganache -d

Then log in to MetaMask

Then use our project to publish the contract

truffle migrate --reset

Then we run the test script to create orders and transfer exchange ETH and tokens

truffle exec .\scripts\test.js

Then we run our own dapp project

Then we find the Order.jsx component in the components directory under src
Let’s introduce the order data we wrote in redux

Here we take the order content we previously had in redux

Then let’s refresh the console and see

They are all empty at first, and then the data is loaded later.

Then let’s look at this data structure. The main useful thing is timestamp, a time of creation time.
Then the grtoken corresponding to amountGet and then the ETH corresponding to amountGive

In this way, we first render the completed order list through Fillorders under order
Find the Order.jsx component in the components directory under src and change the code as follows

import React from 'react';
import {<!-- -->Card, Col, Row,Table} from 'antd';
import {<!-- -->useSelector} from "react-redux"
export default function Order() {<!-- -->
  const order = useSelector(state => state.order)

  console.log(order)
  const dataSource = [
    {<!-- -->
      key: '1',
      name: 'Hu Yanbin',
      age: 32,
      address: 'No. 1 Hudi Park, Xihu District',
    },
    {<!-- -->
      key: '2',
      name: 'Hu Yanzu',
      age: 42,
      address: 'No. 1 Hudi Park, Xihu District',
    },
  ];
  
  const columns = [
    {<!-- -->
      title: 'ETH',
      dataIndex: 'amountGive'
    },
    {<!-- -->
      title: 'GrToken',
      dataIndex: 'amountGet'
    },
    {<!-- -->
      title: 'Creation time',
      dataIndex: 'timestamp'
    },
  ];
  
  return (
    <div style = {<!-- -->{<!-- -->marginTop:'10px'}}>
      <Row>
         <Col span={<!-- -->8}>
          <Card title="Completed" bordered={<!-- -->false} style = {<!-- -->{<!-- --> margin: '10px' }}>
            <Table dataSource={<!-- -->order.Fillorders} columns={<!-- -->columns} />
          </Card>
         </Col>
         <Col span={<!-- -->8}>
          <Card title="Created by me" bordered={<!-- -->false} style = {<!-- -->{<!-- --> margin: '10px' }}>
            <Table dataSource={<!-- -->dataSource} columns={<!-- -->columns} />
          </Card>
         </Col>
         <Col span={<!-- -->8}>
          <Card title="Other orders in transaction" bordered={<!-- -->false} style = {<!-- -->{<!-- --> margin: '10px' }}>
            <Table dataSource={<!-- -->dataSource} columns={<!-- -->columns} />
          </Card>
         </Col>
      </Row>
    </div>
  );
}

In this way, our list is bound to order.Fillorders and changes the configuration of the columns field.
The operation effect is as follows

Although our data is out, there are some problems with their format and we need to post-process it.
Let’s first change the code to this

import React from 'react';
import {<!-- -->Card, Col, Row,Table} from 'antd';
import {<!-- -->useSelector} from "react-redux"

function convert(unit) {<!-- -->
  return window.WebData ? unit & amp; & amp;window.WebData.web3.utils.fromWei(unit, "ether") : ""
}

export default function Order() {<!-- -->
  const order = useSelector(state => state.order)

  console.log(order)
  const dataSource = [
    {<!-- -->
      key: '1',
      name: 'Hu Yanbin',
      age: 32,
      address: 'No. 1 Hudi Park, Xihu District',
    },
    {<!-- -->
      key: '2',
      name: 'Hu Yanzu',
      age: 42,
      address: 'No. 1 Hudi Park, Xihu District',
    },
  ];
  
  const columns = [
    {<!-- -->
      title: 'ETH',
      dataIndex: 'amountGive',
      render:(amountGive)=><b>{<!-- --> convert(amountGive) }</b>,
      key: 'amountGive',
    },
    {<!-- -->
      title: 'GrToken',
      dataIndex: 'amountGet',
      render:(amountGet)=><b>{<!-- --> convert(amountGet) }</b>,
      key: 'amountGet',
    },
    {<!-- -->
      title: 'Creation time',
      dataIndex: 'timestamp',
      key: 'timestamp',
    },
  ];
  
  return (
    <div style = {<!-- -->{<!-- -->marginTop:'10px'}}>
      <Row>
         <Col span={<!-- -->8}>
          <Card title="Completed" bordered={<!-- -->false} style = {<!-- -->{<!-- --> margin: '10px' }}>
            <Table dataSource={<!-- -->order.Fillorders} columns={<!-- -->columns} />
          </Card>
         </Col>
         <Col span={<!-- -->8}>
          <Card title="Created by me" bordered={<!-- -->false} style = {<!-- -->{<!-- --> margin: '10px' }}>
            <Table dataSource={<!-- -->dataSource} columns={<!-- -->columns} />
          </Card>
         </Col>
         <Col span={<!-- -->8}>
          <Card title="Other orders in transaction" bordered={<!-- -->false} style = {<!-- -->{<!-- --> margin: '10px' }}>
            <Table dataSource={<!-- -->dataSource} columns={<!-- -->columns} />
          </Card>
         </Col>
      </Row>
    </div>
  );
}

We moved the convert function for unit conversion to
Then convert the units of amountGive and amountGet and run the code

This way our two units will be fine
Then rub it at this time
In fact, he is not entirely a clock. He is a second from 0:00 on January 1, 1970.
instead of milliseconds
Let’s execute it in the terminal first

npm i --save moment

Introduce moment

Then we change the code to this

import React from 'react';
import {<!-- -->Card, Col, Row,Table} from 'antd';
import {<!-- -->useSelector} from "react-redux"
import moment from "moment"

function converTime(t){<!-- -->
  return moment(t*1000).format("YYYY/MM/DD")
}

function convert(unit) {<!-- -->
  return window.WebData ? unit & amp; & amp;window.WebData.web3.utils.fromWei(unit, "ether") : ""
}

export default function Order() {<!-- -->
  const order = useSelector(state => state.order)

  console.log(order)
  const dataSource = [
    {<!-- -->
      key: '1',
      name: 'Hu Yanbin',
      age: 32,
      address: 'No. 1 Hudi Park, Xihu District',
    },
    {<!-- -->
      key: '2',
      name: 'Hu Yanzu',
      age: 42,
      address: 'No. 1 Hudi Park, Xihu District',
    },
  ];
  
  const columns = [
    {<!-- -->
      title: 'ETH',
      dataIndex: 'amountGive',
      render:(amountGive)=><b>{<!-- --> convert(amountGive) }</b>,
      key: 'amountGive'
    },
    {<!-- -->
      title: 'GrToken',
      dataIndex: 'amountGet',
      render:(amountGet)=><b>{<!-- --> convert(amountGet) }</b>,
      key: 'amountGet'
    },
    {<!-- -->
      title: 'Creation time',
      dataIndex: 'timestamp',
      render:(timestamp)=><div>{<!-- --> converTime(timestamp) }</div>,
      key: 'timestamp'
    },
  ];
  
  return (
    <div style = {<!-- -->{<!-- -->marginTop:'10px'}}>
      <Row>
         <Col span={<!-- -->8}>
          <Card title="Completed" bordered={<!-- -->false} style = {<!-- -->{<!-- --> margin: '10px' }}>
            <Table dataSource={<!-- -->order.Fillorders} columns={<!-- -->columns} />
          </Card>
         </Col>
         <Col span={<!-- -->8}>
          <Card title="Created by me" bordered={<!-- -->false} style = {<!-- -->{<!-- --> margin: '10px' }}>
            <Table dataSource={<!-- -->dataSource} columns={<!-- -->columns} />
          </Card>
         </Col>
         <Col span={<!-- -->8}>
          <Card title="Other orders in transaction" bordered={<!-- -->false} style = {<!-- -->{<!-- --> margin: '10px' }}>
            <Table dataSource={<!-- -->dataSource} columns={<!-- -->columns} />
          </Card>
         </Col>
      </Row>
    </div>
  );
}

Here we define a converTime function. We first multiply the parameters passed in by 1000.
Because we are not milliseconds, but seconds. We need to change the unit.
Then convert it to the specified time format through the format provided by moment, and then convert it in render.
The running results are as follows

This way our time will be freed up

But now our console keeps reporting an error

Say that the dataSource of our form is missing the key field
Because every piece of data on the list needs to have a unique identifier
In fact, there is a unique identification field id in our order.

So this is a wonderful misunderstanding. The field we set is called id, but the list component requires it to be called key.

Here we only need to add a rowKey label attribute
This is the antd Table component specific component that sets the key.

Here we give the field id and let him read each id into key