forgeplus-react/src/forge/topic/index.jsx

import React, { useState } from 'react';
import { withRouter } from "react-router";
import { SnackbarHOC } from "educoder";
import { CNotificationHOC } from "../../modules/courses/common/CNotificationHOC";
import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
import './index.scss';
import { useEffect } from 'react';
import { Pagination, Select } from 'antd';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { getImageUrl } from 'educoder';
import Nodata from '../Nodata';
const Option = Select.Option;

export default withRouter((CNotificationHOC()(SnackbarHOC()(TPMIndexHOC((props) => {
  const {match:{params:{name, id}}, current_user:{user_id}} = props;
  const [languageList, setLanguageList] = useState(undefined);
  const [languageId, setLanguageId] = useState(undefined);
  const [sort, setSort] = useState("praises_count");
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(15);
  const [projectsList, setProjectsList] = useState(undefined);
  const [total, setTotal] = useState(undefined);

  useEffect(()=>{
    // 设置网页标题
    name && (document.title = `项目标签-${decodeURIComponent(name)}`);
    // 获取语言列表
    axios.get(`/project_languages.json`).then(result=>{
      result && setLanguageList(result.data.project_languages)
    })
  }, [])

  useEffect(()=>{
    axios.get(`/projects.json`, {
      params: {
        user_id: user_id,
        page,
        limit,
        sort_by: sort,
        language_id:languageId? languageId : undefined,
        topic_id:id
      }
    }).then((result) => {
      if (result) {
        setProjectsList(result.data.projects);
        setTotal(result.data.total_count);
      }
    }).catch((error) => {
      console.log('error', error);
    })
  }, [sort, page, languageId])

    return (
      <div className='topicRepoList pb50'>
        <h2 className='mt30 pl15'>#{decodeURIComponent(name)}</h2>
        <div className='flexBoxTopic topicRepoHead'>
          <span>平台共{total}个公开项目与此标签相匹配</span>
          <div>
            <Select defaultValue={0} showSearch placeholder="请选择语言" style={{minWidth:"104px", marginRight: '20px'}} onChange={(value)=>{setLanguageId(value)}} optionFilterProp="children" filterOption={(input,option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
              <Option key={0} value={0}>全部语言</Option>
              {
                languageList && languageList.length>0 && languageList.map((item,key)=>{
                  return(
                    <Option key={item.id} value={item.id}>{item.name}</Option>
                  )
                })
              }
            </Select>
            <Select defaultValue={"praises_count"} onChange={(value)=>{setSort(value)}} style={{minWidth:"104px"}}>
              <Option value="praises_count">最多点赞</Option>
              <Option value="updated_on">最近更新</Option>
              <Option value="forked_count">最多fork</Option>
              <Option value="watched_count">最多关注</Option>
              <Option value="created_on">最近创建</Option>
            </Select>
          </div>
        </div>
        {/* 无数据 */}
        {projectsList && projectsList.length === 0 && <div className='repoByTopicNodata'><Nodata _html="暂无数据"/></div>}
        {/* 项目列表 */}
        {projectsList && projectsList.length>0 && projectsList.map(i=>{
          return <div key={i.id} className='flexBoxTopic repoTopic'>
            {/* 仓库拥有者头像 */}
            <Link to={`/${i.author && i.author.login}`}><img src={getImageUrl(`/${i.author && i.author.image_url}`)} alt="" className='repoImg mr10'/></Link>
            <div className='rightInfo'>
              <div className="flexBoxTopic">
                {/* 仓库拥有者名称 */}
                <Link to={`/${i.author && i.author.login}/${i.identifier}`} className="repoTitle task-hide font-15">{i.author && i.author.name}/{i.name}</Link>
                {/* 点赞数 */}
                {i.praises_count > 0 ? <span className='mr10'><i className="iconfont icon-xingzhuang mr3 font-14"></i>{i.praises_count}</span> :"" }
                {/* fork数 */}
                {i.forked_count > 0 ? <span><i className="iconfont icon-yifuke_icon mr3 font-14"></i>{i.forked_count}</span>:""}
              </div>
              {/* 仓库描述 */}
              <div className="descTopic task-hide-2 mb5">{i.description}</div>
              {/* 项目标签 */}
              {i.topics && <div className='proListTopics'>
                {i.topics.map(item=><Link to={`/explore/topic/${item.id}/${encodeURIComponent(item.name)}`} className='proListTopic mr15 font-13 task-hide'>{item.name}</Link>)}
              </div>}
              <div className="flexBoxTopic info3 font-13 mt5">
                {/* 仓库类别 */}
                {i.category && i.category.id ? <span className="category">{i.category.name}</span> :"" }
                {/* 仓库语言 */}
                {i.language && i.language.id ? <span className={`language mr30 ${i.category && i.category.id ? 'hasCate' : ''}`}>{i.language.name}</span> :""}
                {/* 更新时间 */}
                <span style={{lineHeight:"15px",display:"flex"}}><i className="iconfont icon-shijian font-15 mr5"></i>更新于{i.time_ago}</span>
              </div>
            </div>
          </div>
        })}
        {/* 分页 */}
        {total > limit && <Pagination
          className='mt20 pagTopic'
          pageSize={limit}
          showQuickJumper={total > limit}
          onChange={(page) => { setPage(page) }}
          current={page}
          total={total}
          showTotal={total => `共 ${total} 条`}
        />}
      </div>
  )}
)))))