项目实战 -- 发布管理

   组件封装

先进行组件的封装，因为每一次待发布已发布这些格式是一样的，所以封装一个NewsPublish组件

import React from 'react';
import { Button,Table} from 'antd';

function NewsPublish(props) {
    //父组件传属性
    const columns = [
        {
          title: '新闻标题',
          dataIndex: 'title',
          render:(title,item)=>{
            return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
          }
        },
        {
          title: '作者',
          dataIndex: 'author',
        },
        {
          title: '新闻分类',
          dataIndex: 'category',
          render:(category)=>{
            return  <div>{category.title}</div>
          }
        },
        {
          title: '操作',
          render:(record)=>{
            return <div>
               <Button/>
            </div>
          }
        },
      ];

    return (
        <div>
            <Table dataSource={props.dataSource} columns={columns} pagination={{
              //一页显示几条数据
              pageSize:5
            }}
            rowKey={item=>item.id}
            />
        </div>
    );
}

export default NewsPublish;

需要使用的时候调用就好了

import React, { useEffect } from 'react'
import { useState } from 'react'
import NewsPublish from '../../../components/publish-manage/NewsPublish'
import axios from 'axios'

export default function Published() {
  const {username} = JSON.parse(localStorage.getItem('token'))
  const [dataSource,setDataSource] = useState([])
  useEffect(() => {
    axios(`/news?author=${username}&publishState=2&_expand=category`).then(res=>{
      setDataSource(res.data)
    })
  },[username])
  return (
    <div>
      <NewsPublish dataSource={dataSource}></NewsPublish>
    </div>
  )
}

在这里不论是待发布还是已发布，区别就只有筛选的时候状态是1还是2

所以使用自定义hooks简化一下代码

自定义hooks

自定义hooks方便进行代码的复用，状态可以直接传一个参数给自定义hooks，这样就可以复用了，传id的目的是要知道具体要增删哪条数据

import React,{ useEffect,useState } from 'react'
import axios from 'axios'

function usePublish(type) {
  //   不是组件，是自定义hooks
  const { username } = JSON.parse(localStorage.getItem('token'))
  const [dataSource, setDataSource] = useState([])
  useEffect(() => {
    axios(`/news?author=${username}&publishState=${type}&_expand=category`).then(
      (res) => {
        setDataSource(res.data)
      }
    )
  }, [username,type])

  const handlePublish = (id)=>{
    console.log(id)
  }
  const handleSunset = (id)=>{

  }
  const handleDelete = (id)=>{
    
  }

  return{
    dataSource,
    handlePublish,
    handleSunset,
    handleDelete,
  }
}

export default usePublish

import React, { useEffect } from 'react'
import NewsPublish from '../../../components/publish-manage/NewsPublish'
import usePublish from '../../../components/publish-manage/usePublish'
import { Button } from 'antd'

export default function Sunset() {
  const {dataSource,handleSunset} = usePublish(3)
  return (
    <div>
      <NewsPublish dataSource={dataSource} button={(id)=>
        <Button danger onClick={()=>handleSunset(id)}>
          删除
        </Button>
      }></NewsPublish>
    </div>
  )
}

实现方法

实现点击的时候调用的方法，每一个都不一样

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { notification } from 'antd'
import { useNavigate } from 'react-router-dom'

function usePublish(type) {
  //   不是组件，是自定义hooks
  const { username } = JSON.parse(localStorage.getItem('token'))
  const navigate = useNavigate()
  const [dataSource, setDataSource] = useState([])
  useEffect(() => {
    axios(
      `/news?author=${username}&publishState=${type}&_expand=category`
    ).then((res) => {
      setDataSource(res.data)
    })
  }, [username, type])

  const handlePublish = (id) => {
    setDataSource(dataSource.filter((item) => item.id !== id))
    axios.patch(`/news/${id}`, {
        "publishState": 2,
        "publishTime": Date.now(),
      }).then((res) => {
        navigate('/publish-manage/published')
       notification.info({
        message:`通知`,
        description:
        `您可以到[发布管理/已发布]中查看您的新闻`,
        placement: 'bottomRight',
      })
    }) 
  }
  const handleSunset = (id) => {
    setDataSource(dataSource.filter((item) => item.id !== id))
    axios.patch(`/news/${id}`, {
        "publishState": 3,
        "publishTime": Date.now(),
      }).then((res) => {
        navigate('/publish-manage/sunset')
       notification.info({
        message:`通知`,
        description:
        `您可以到[发布管理/已下线]中查看您的新闻`,
        placement: 'bottomRight',
      })
    }) 
  }
  const handleDelete = (id) => {
    setDataSource(dataSource.filter((item) => item.id !== id))
    axios.delete(`/news/${id}`).then((res) => {
       notification.info({
        message:`通知`,
        description:
        `您已经删除了已下线的新闻`,
        placement: 'bottomRight',
      })
    }) 
  }

  return {
    dataSource,
    handlePublish,
    handleSunset,
    handleDelete,
  }
}

export default usePublish

import React, { useEffect } from 'react'
import NewsPublish from '../../../components/publish-manage/NewsPublish'
import usePublish from '../../../components/publish-manage/usePublish'
import { Button } from 'antd'

export default function Sunset() {
  const {dataSource,handleDelete} = usePublish(3)
  return (
    <div>
      <NewsPublish dataSource={dataSource} button={(id)=>
        <Button danger onClick={()=>handleDelete(id)}>
          删除
        </Button>
      }></NewsPublish>
    </div>
  )
}

就这样