import React , { useState , useEffect } from "react" ; import ContentLoader from "react-content-loader" ; import { Box , useColorMode , chakra } from "components/core" ; type Props = { project : BestOfJS . Project ; size : number ; } ; export const ProjectAvatar = ( { project , size = 100 } ) => { const { colorMode } = useColorMode ( ) ; const { src , srcSet } = getProjectImageProps ( { project , size , colorMode } ) ; const [ isImageLoaded , setIsImageLoaded ] = useState ( false ) ; const isMounted = React . useRef ( true ) ; useEffect ( ( ) => { const image = new Image ( ) ; image . src = src ; if ( srcSet ) { image . srcset = srcSet ; } image . onload = ( ) => { if ( isMounted . current ) setIsImageLoaded ( true ) ; } ; return ( ) => { isMounted . current = false ; } ; } , [ ] ) ; return isImageLoaded ? ( < chakra . img src = { src } srcSet = { srcSet } boxSize = { `${ size }px` } alt = { project . name } maxW = "unset" borderRadius = "5px" / > ) : ( < ImagePlaceHolder size = { size } / > ) ; } ; function getProjectImageProps ( { project , size , colorMode } ) { const retinaURL = ! project . icon && getProjectAvatarUrl ( project , size * 2 , colorMode ) ; return { src : getProjectAvatarUrl ( project , size , colorMode ) , srcSet : retinaURL ? `${ retinaURL } 2x` : undefined , } ; } const ImagePlaceHolder = ( { size } ) => { return ( < Box w = { `${ size }px` } h = { `${ size }px` } > < ContentLoader viewBox = "0 0 100 100" backgroundColor = "var(--graphBackgroundColor)" foregroundColor = "var(--iconColor)" > < circle cx = "50" cy = "50" r = "40" / > < /ContentLoader> < /Box>); } ; function getProjectLogoURL ( input , colorMode ) { const [ main , extension ] = input . split ( "." ) ; const filename = colorMode === "dark" ? `${ main }.dark.${ extension }` : input ; return `/logos/${ filename }` ; } function getGitHubOwnerAvatarURL ( owner_id , size ) { return `https://avatars.githubusercontent.com/u/${ owner_id }?v=3&s=${ size }` ; } export function getProjectAvatarUrl ( project , size , colorMode ) { return project . icon ? getProjectLogoURL ( project . icon , colorMode ) : getGitHubOwnerAvatarURL ( project . owner_id , size ) ; }