import { ApolloError , gql , useQuery } from "@apollo/client" ; import React , { FC , useState } from "react" ; import styled from "styled-components" ; import { ProfileIconQuery } from "../../__generated__/ProfileIconQuery" ; import { skeletonLoaderAttributes , skeletonLoaderBase } from "../../library/mixin/mixin" ; import { ProfilePopup } from "./ProfilePopup" ; const Wrapper = styled . div `
    position: relative;
` ; const Icon = styled . img `
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: ${ ( { theme } ) => theme . palette . primary [ 700 ] };
    cursor: pointer;
` ; const IconSkeletonLoader = styled . div . attrs ( skeletonLoaderAttributes ) `
 width: 4rem;
 height: 4rem;
 border-radius: 50%;
 ${ skeletonLoaderBase }
` ; const PROFILE_ICON_QUERY = gql `
    query ProfileIconQuery {
        me {
            id
            avatar
            username
        }
    }
` ; export const ProfileIconDataContainer = ( ) => { const { loading , data , error } = useQuery < ProfileIconQuery > ( PROFILE_ICON_QUERY , { fetchPolicy : "network-only" } ) ; return ( < ProfileIcon loading = { loading } data = { data } error = { error } / > ) ; } ; type ProfileIconProperties = Readonly < { data : ProfileIconQuery ; loading : boolean ; error : ApolloError ; } > ; export const ProfileIcon = ( { loading , error , data } ) => { const [ expanded , setExpanded ] = useState ( false ) ; if ( loading || error ) { return ( < Wrapper > < IconSkeletonLoader /> < /Wrapper>); } return ( < Wrapper > < Icon src = { data ?. me . avatar } onClick = { ( ) => { setExpanded ( ! expanded ) ; } } /> { expanded && < ProfilePopup />} < /Wrapper>); } ;