Reactを使ってブログサイトを作る 10 - 文章ページの実装

https://github.com/KyleAndKelly/ArticleHub-React
## 静的な構造の構築
```jsx
    import { Link } from 'react-router-dom'
    import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select } from 'antd'
    import { Table, Tag, Space } from 'antd'
    import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
    // import img404 from '@/assets/error.png'
    const { Option } = Select
    const { RangePicker } = DatePicker
    const Article = () => {
    const columns = [
            {
    title: 'Cover',
    dataIndex: 'cover',
    width: 120,
    render: cover => {
    return <img src={cover.images[0] } width={80} height={60} alt="" />
              }
            },
            {
    title: 'Title',
    dataIndex: 'title',
    width: 220
            },
            {
    title: 'Staus',
    dataIndex: 'status',
    render: data => <Tag color="green">审核通过</Tag>
            },
            {
    title: 'time',
    dataIndex: 'pubdate'
            },
            {
    title: 'views',
    dataIndex: 'read_count'
            },
            {
    title: 'comments',
    dataIndex: 'comment_count'
            },
            {
    title: 'likes',
    dataIndex: 'like_count'
            },
            {
    title: 'more',
    render: data => {
    return (
    <Space size="middle">
    <Button type="primary" shape="circle" icon={<EditOutlined />} />
    <Button
    type="primary"
    danger
    shape="circle"
    icon={<DeleteOutlined />}
    />
    </Space>
                )
              }
            }
          ]
    const data = [
        {
    id: '8218',
    comment_count: 0,
    cover: {
    images: [],
            },
    like_count: 0,
    pubdate: '2019-03-11 09:00:00',
    read_count: 2,
    status: 2,
    title: 'wkwebview离线化加载h5资源解决方案'
        }
        ]
    return (
    <div>
    <Card
    title={
    <Breadcrumb items={[
                { title: <Link to={'/'}>Home</Link> },
                { title: 'Article List' },
              ]} />
    }
    style={{ marginBottom: 20 }}
    >
    <Form initialValues={{ status: '' }}>
    <Form.Item label="Status" name="status">
    <Radio.Group>
    <Radio value={''}>All</Radio>
    <Radio value={0}>Draft</Radio>
    <Radio value={2}>Submitted</Radio>
    </Radio.Group>
    </Form.Item>
    <Form.Item label="Channel" name="channel_id">
    <Select
    placeholder="Please select channel"
    defaultValue="lucy"
    style={{ width: 120 }}
    >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    </Select>
    </Form.Item>
    <Form.Item label="Date" name="date">
    {/* 传入locale属性 控制中文显示*/}
    <RangePicker ></RangePicker>
    </Form.Item>
    <Form.Item>
    <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
                  Filter
    </Button>
    </Form.Item>
    </Form>
    </Card>
    <Card title={`Results:`}>
    <Table rowKey="id" columns={columns} dataSource={data} />
    </Card>
    </div>
      )
    }
    export default Article


```
## チャンネルリストの取得
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/87c990bb-43f5-7797-7841-b1bc43f41eb2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/f0e07a01-bd8d-1865-8db9-44f20032092a.png)

## 記事リストの取得
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/fb519529-2d1d-a712-d862-79d9bce106d2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/6dc73a2b-60c9-6a81-56c7-50130d6afb9c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/8726ab1c-28a7-7100-fc9b-b15cf07f5ce1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/4ad8ea8e-9237-6623-7874-f38e8e534ee1.png)


## フィルター機能
- フィルター機能の本質：リスト取得APIに異なるパラメータを渡し、バックエンドから異なるデータを取得することです。
- 実装手順：
  1. 完全なリクエストパラメータオブジェクトを準備します。
  2. ユーザーが選択したフォームデータを取得します。
  3. フォームデータをAPIの対応するフィールドにセットします。
  4. 記事リストAPIを再呼び出し、Tableリストを再描画します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/e5e6058e-e9fd-5eed-8c68-be1fb2c3468e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/dfbacd75-db98-ccba-b94f-75bc223d31bd.png)

## ページネーション機能
- Tableコンポーネントにpagination属性を指定して、ページネーション効果を表示
- ページ切り替えイベントで、フィルターフォームから選択されたデータを取得
- 現在のページのデータを使って、paramsパラメータを更新し、APIを再呼び出しして最新データを取得
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/ac7a0aa4-ef01-4c6f-2952-85d10ad1dcce.png)


## 削除機能
- 削除ボタンにクリックイベントをバインド
- 確認ウィンドウを表示し、ユーザーに記事削除の確認を促す
- パラメータを取得して削除APIを呼び出し、リストを更新
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/b5de3707-272d-62c8-d6e7-e7cc26c0fa6d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/595d9aa7-7e55-e9db-3b9d-b9bab1d527f0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/b2fb5378-ef90-0f73-4754-e1ac4af5898f.png)




## 編集ページに遷移
- navigateを使用
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/8114a3ab-8c82-2265-1f4a-9c461d0850b9.png)


## 編集ページに基本データを回填
- 実装効果：ページ内の表紙以外のフィールドにデータを回填
- 実現方法：
  1. 記事IDを使って記事の詳細データを取得
  2. FormコンポーネントのインスタンスメソッドsetFieldsValueを使用してデータを回填
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/00a5d040-233a-8ed2-610e-a3625eb80888.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/5bfebc3c-ea43-0b3b-ce1d-7ca97be992ca.png)



## 編集ページに表紙データを回填
- 実装効果：表紙の種類とアップロードされた表紙画像を回填
- 実現方法：
  1. cover内のtypeフィールドを使って表紙の種類を回填
  2. cover内のimagesフィールドを使って表紙画像を回填
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/b95c8f04-09ea-1d7a-a477-9d67f4257f5c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/2b49a23e-3a3b-23b5-b4ac-b2b96d584cb0.png)


## ページタイトルを状態に応じて変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/4380ba4e-7148-7672-6183-4713d678d7ed.png)


## 更新の提出

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/be05ec0a-b1e3-308f-7aab-531c14e98a46.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916068/973ee4f1-7745-a71d-567f-bdcba567c45d.png)