51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
import PatronRoute from "../components/protected-route";
|
|
import { useMutateMetadata, useMetadata } from "../profile/hooks/useMetadata";
|
|
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import VibrateTest from "./vibrate-test";
|
|
import { useState, useEffect } from "react";
|
|
import { faSpinner, faXmarkCircle, faSave } from "@fortawesome/free-solid-svg-icons";
|
|
import Skeleton, { SkeletonTheme } from "react-loading-skeleton"
|
|
import 'react-loading-skeleton/dist/skeleton.css';
|
|
|
|
export default function PatronPerks() {
|
|
|
|
|
|
|
|
|
|
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 (
|
|
<>
|
|
<h2 className="title is-2">Patron Perks</h2>
|
|
<h3 className="title is-3">Website Shoutout</h3>
|
|
<PatronRoute featureName="Website shoutout" requiredUserRole="patron">
|
|
<div className="box">
|
|
<span className="mr-2">Display {(!!username) ? username : <SkeletonTheme baseColor="#000" highlightColor="#000"><Skeleton count={1} enableAnimation={false} width="10em" /></SkeletonTheme>} 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>
|
|
</PatronRoute>
|
|
|
|
|
|
<h3 className="title is-3">Vibrate (test)</h3>
|
|
<VibrateTest></VibrateTest>
|
|
|
|
</>
|
|
)
|
|
} |