38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
||
|
|
import { faCheckCircle, faSpinner, faXmarkCircle } from "@fortawesome/free-solid-svg-icons"
|
||
|
|
import { useMetadata, useMutateMetadata } from "../profile/hooks/useMetadata"
|
||
|
|
import { useState, useEffect } from 'react'
|
||
|
|
|
||
|
|
export default function UserMetadata() {
|
||
|
|
|
||
|
|
|
||
|
|
const { status, data, error, isFetching, isPending } = useMetadata()
|
||
|
|
const mutateMetadata = useMutateMetadata()
|
||
|
|
|
||
|
|
|
||
|
|
const username = `${data?.metadata?.first_name || ''} ${data?.metadata?.last_name || ''}`.trim();
|
||
|
|
const { metadata } = data || {};
|
||
|
|
|
||
|
|
const [ isUsernamePublic, setIsUsernamePublic ] = useState(metadata?.isUsernamePublic || false)
|
||
|
|
useEffect(() => {
|
||
|
|
mutateMetadata.mutate({ isUsernamePublic })
|
||
|
|
}, [ isUsernamePublic ])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
|
||
|
|
{isPending && <FontAwesomeIcon icon={faSpinner} className="fa-spin-pulse mr-2"></FontAwesomeIcon>}
|
||
|
|
|
||
|
|
<div className="box">
|
||
|
|
<span className="mr-2">Display {username} publicly?</span>
|
||
|
|
<input className="mr-2" type="checkbox" checked={isUsernamePublic} onChange={(evt) => setIsUsernamePublic(evt.target.checked)}/>
|
||
|
|
{(mutateMetadata.status === 'success') && <FontAwesomeIcon color="lime" icon={faCheckCircle}></FontAwesomeIcon>}
|
||
|
|
{(mutateMetadata.status === 'pending') && <FontAwesomeIcon icon={faSpinner}></FontAwesomeIcon>}
|
||
|
|
{(mutateMetadata.status === 'error') && <FontAwesomeIcon color="red" icon={faXmarkCircle}></FontAwesomeIcon>}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|