forgeplus-react/src/forge/Main/sub/Badge.jsx

import React, { useEffect, useState } from 'react';
import { AlignCenter , FlexAJ  } from '/home/gitlink/forgeplus/public/react/forgeplus-react/src/forge/Component/layout';
import { Link } from 'react-router-dom';
import { Popover , Spin , Button } from 'antd';
import { getImageUrl } from 'educoder';
import '../../Component/Component.scss';




// projectDetail && projectDetail.contributors && projectDetail.contributors.total_count >0 &&
// <Badge contributors={projectDetail.contributors} owner={owner} projectsId={projectsId} />?

function Badge({badges,owner}){
    const [ list , setList ]= useState(undefined);
    const [ total , setTotal ]= useState(0);
    const [ menu , setMenu ] = useState("");
    const [ login , setLogin ] = useState(undefined);
    const [ badge , setBadge ] = useState(undefined);

    useEffect(()=>{
        if(badges && badges.total_count>0){
            setTotal(badges.total_count);
            setList(badges.badge);
        }
    },[badges])

    useEffect(()=>{
        setMenusFunc(badge);
    },[badge])


    function setMenusFunc(data){
        if(data){
            let ele = (
                <AlignCenter>
                    <Link to={`/${data.login}`}><img src={data.image_url} alt="" className="radius" width="38px" height="38px"/></Link>
                    <div className="ml10">
                        <Link to={`/${data.login}`}>{data.name}</Link>
                        { data.description && <span className="leftline">{data.description}</span> }
                    </div>
                </AlignCenter>
            )
            setMenu(ele);
        }
    }


    function setVisibleFunc(flag,l,index){
        if(l !== badge){
            setBadge(l);
        }
        var lx = list.concat();
        lx.map(i=>i.visible =false);
        if(flag){
            lx[index].visible = flag;
        }
        lx.splice();
        setList(lx);
    }

    // {
    //     "list": [
    //     {
    //         "login": "many_stars",
    //         "image_url": "User",
    //         "description": "test description"
    //     },
    //     {
    //         "login": "many_stars",
    //         "image_url": "User",
    //         "description": "test description"
    //     }
    // ],
    //     "total_count": 2
    // }
    return(
        <div className="halfs">
            <Link to={`/${owner}/badge`} className="font-16 color-ooo hoverA">
                <span>徽章</span>
                { badges && badges.total_count > 0 && <span className="infoCount">{badges.total_count}</span>}
            </Link>

            <div className="attrBadge" onMouseLeave={()=>setVisibleFunc(false)}>
                {
                    total > 0 ?
                        list.map((item,key)=>{
                            return(
                                <Popover content={menu} visible={item.visible} overlayClassName="menuPanels" placement="top">
                                    <Link key={key} to={`/${item.login}`}>
                                        <img src={item.image_url} alt="" onMouseOver={()=>setVisibleFunc(true,item,key)}/>
                                    </Link>
                                </Popover>
                            )
                        })
                        :""
                }
            </div>
        </div>
    )
}
//{getImageUrl(`/${item.image_url}`)}
export default Badge;