GHHub/src/views/reservation/Newest.jsx

import { useParams } from "react-router-dom";
import { useEffect } from 'react';
import { observer } from "mobx-react";
import { toJS } from "mobx";
import moment from "moment";
import { Row, Col, Space, Button, Table, Tag, Typography, DatePicker } from 'antd';
import { useStore } from '../../stores/StoreContext.js';

const { Title } = Typography;

const reservationListColumns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    ),
  },
];

function Newest() {

  const { reservationStore } = useStore();
  const { reservationList } = reservationStore;

  useEffect(() => {
    console.info('Newest.useEffect');
  }, []);

  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      <Title level={3}>Newest Plans</Title>
      <Row gutter={{ md: 24 }} justify="end">
        <Col span={6}>
        <Space direction="horizontal" style={{ width: '100%' }}>
        Group Date: 
          <DatePicker.RangePicker
            allowClear={false}
          />
          </Space>
        </Col>
        <Col span={12}>
          <Button type='primary' onClick={() => plan.fetchRecent()}>Search</Button>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Table columns={reservationListColumns} dataSource={toJS(reservationList)} />
        </Col>
      </Row>
    </Space>
  );
}

export default observer(Newest);