forgeplus-react/src/home/ThirdEdition.jsx

import React,{ useState , useEffect , useMemo } from 'react';
import { Spin , Skeleton } from 'antd';
import T311 from './Img/3-1-1.png';
import T312 from './Img/3-1-2.png';
import T321 from './Img/3-2-1.png';
import T322 from './Img/3-2-2.png';
import T331 from './Img/3-3-1.png';
import T332 from './Img/3-3-2.png';
import T341 from './Img/3-4-1.png';
import T342 from './Img/3-4-2.png';
import bg3 from './Img/3-1.png';
import bg32 from './Img/3-2.png';
import bg33 from './Img/3-3.png';
import bg34 from './Img/3-4.png';

import './Index.scss';
import Axios from 'axios';

function ThirdEdition() {
  const [ active , setActive ] = useState(1);
  const [ isSpin , setIsSpin ] = useState(true);
  const [ flag , setFlag ] = useState(true);
  const [ list1, setList1 ] = useState([]);
  const [ list2, setList2 ] = useState([]);
  const [ list3, setList3 ] = useState([]);
  const [ list4, setList4 ] = useState([]);
  
  const doubleFlag = useMemo(()=>{
    return flag;
  },[flag])

  useEffect(()=>{
    // let box = document.getElementById('thirdUl');
    // var myTimer = setTimeout(intervalActive, 2500);
    // box.onmouseover = () => {
    //   clearTimeout(myTimer);
    //   setFlag(false);
    // }
    // box.onmouseleave = () => {
    //   myTimer = setTimeout(intervalActive, 2500);
    //   setFlag(true);
    // }
  },[active,flag])

  function intervalActive() {
    if(doubleFlag){
      if(active < 4){
        let i = active + 1;
        setActive(i);
      }else{
        setActive(1);
      }
    }
  }

  useEffect(()=>{
    if(active){
      getList(active);
    }
  },[active])

  function getList(a) {
    let params = a === 1 ? "activity_forum" : a===2 ? "excellent_project" : a=== 3 ? "pinned_forum" : "experience_forum";
    if(a===1 && (list1 && list1.length>0)){return}
    if(a===2 && (list2 && list2.length>0)){return}
    if(a===3 && (list3 && list3.length>0)){return}
    if(a===4 && (list4 && list4.length>0)){return}
    setIsSpin(true);
    const url = `/topics.json?topic_type=${params}`;
    Axios.get(url,{
      params:{
        limit:5
      }
    }).then(result=>{
      if(result){
        let l = result.data.topics;
        if(a===1){
          setList1(l);
        }else if(a===2){
          setList2(l);
        }else if(a===3){
          setList3(l);
        }else{
          setList4(l);
        }
        setIsSpin(false);
      }
    }).catch(error=>{})
  }

  return(
    <div className="thirdEdition">
      <p className="title">开发者的家园</p>
      <p className="subtitle">一个实现100%开源，产学研联合面向软件创新的开源社区</p>
      <div id="thirdUl">
        <ul className="thirdUl">
          <li className={active===1?"active":""}onClick={()=>{setFlag(false);setActive(1)}}>
            <div className="hoverli1">
              <img src={T311} alt="" width="38px" style={{top:"8px",left:"10px"}}/>
              <img src={T312} alt="" width="34px"/>
            </div>
            <span>平台动态</span>
          </li>
          <li className={active===2?"active":""}onClick={()=>{setFlag(false);setActive(2)}}>
            <div className="hoverli2">
              <img src={T321} alt="" width="32px" style={{left:"8px"}}/>
              <img src={T322} alt="" width="26px" style={{top:"8px"}}/>
            </div>
            <span>优秀仓库</span>
          </li>
          <li className={active===3?"active":""}onClick={()=>{setFlag(false);setActive(3)}}>
            <div className="hoverli3">
              <img src={T331} alt="" width="33px" style={{right:"3px",top:"8px"}}/>
              <img src={T332} alt="" width="29px" style={{top:"8px"}}/>
            </div>
            <span>精选文章</span>
          </li>
          <li className={active===4?"active":""}onClick={()=>{setFlag(false);setActive(4)}}>
            <div className="hoverli4">
              <img src={T341} alt="" width="42px"/>
              <img src={T342} alt="" width="26px" style={{top:"11px",left:"7px"}}/>
            </div>
            <span>经验分享</span>
          </li>
        </ul>
        <div className="thirdLists">
          <img src={active === 1 ? bg3 : active===2 ? bg32 :active===3 ? bg33 :bg34 } alt="" width="336px"/>
          <div className="listbox">
            <p className="listTitle">
              {active === 1 ? "GitLink分享最新平台资讯、社区活动通知、开源竞赛信息，把握开源生态发展脉搏" 
              : active===2 ? "GitLink汇聚精英企业仓库、前沿技术仓库、人气热门仓库，孵化优质开源创新成果"
              :active===3 ? "GitLink集萃社区精选项目介绍、平台使用技巧等优秀文章，助力开源开放协同创新" 
              :"GitLink甄选技术研究、心得体会、经验交流等高质量内容，推动社区健康稳定发展"}
            </p>
            <div style={{minHeight:"260px"}}>
              {
                active === 1 && 
                <React.Fragment>
                  {
                    list1 && list1.length > 0 ? list1.map((i,k)=>{
                      return(
                        <li>
                          <a href={i.url} target="_blank">{i.title}</a>
                          <span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span>
                          <span>{i.time}</span>
                        </li>
                      )
                    }):""
                  }
                  {
                    list1 && list1.length  === 0 && <Skeleton />
                  }
                </React.Fragment>
              }
              {
                active === 2 &&
                <React.Fragment>
                  {
                   list2 && list2.length > 0? list2.map((i,k)=>{
                    return(
                      <li>
                        <a href={i.url} target="_blank">{i.title}</a>
                        <span className="listboxcount" style={{marginRight:"40px"}}><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span>
                        {/* {i.time} */}
                      </li>
                    )
                  }):""
                  }
                  {
                    list2 && list2.length  === 0 && <Skeleton />
                  }
                </React.Fragment>
              }
              {
                active === 3 && 
                <React.Fragment>
                  {
                   list3 && list3.length > 0 ? list3.map((i,k)=>{
                    return(
                      <li>
                        <a href={i.url} target="_blank">{i.title}</a>
                        <span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span>
                        <span>{i.time}</span>
                      </li>
                    )
                  }):""
                }
                {
                  list3 && list3.length  === 0 && <Skeleton />
                }
                </React.Fragment>
              }
              {
                active === 4 && 
                <React.Fragment>
                  {
                   list4 && list4.length > 0 ? list4.map((i,k)=>{
                    return(
                      <li>
                        <a href={i.url} target="_blank">{i.title}</a>
                        <span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span>
                        <span>{i.time}</span>
                      </li>
                    )
                  }):""
                  }
                  {
                    list4 && list4.length  === 0 && <Skeleton />
                  }
                </React.Fragment>
              }
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
export default ThirdEdition;