import React, { useState } from 'react' import { RefreshIcon } from '@heroicons/react/outline' import { useRouter } from 'next/router' import { AddFundsButton } from 'web/components/add-funds-button' import { Page } from 'web/components/page' import { SEO } from 'web/components/SEO' import { Title } from 'web/components/title' import { formatMoney } from 'common/util/format' import { cleanDisplayName, cleanUsername } from 'common/util/clean-username' import { changeUserInfo } from 'web/lib/firebase/api' import { uploadImage } from 'web/lib/firebase/storage' import { Col } from 'web/components/layout/col' import { Row } from 'web/components/layout/row' import { User, PrivateUser } from 'common/user' import { getUserAndPrivateUser, updateUser } from 'web/lib/firebase/users' import { defaultBannerUrl } from 'web/components/user-page' import { SiteLink } from 'web/components/site-link' import Textarea from 'react-expanding-textarea' import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth' import { generateNewApiKey } from 'web/lib/api/api-key' import { TwitchPanel } from 'web/components/profile/twitch-panel' export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => { return { props: { auth: await getUserAndPrivateUser(creds.uid) } } }) function EditUserField(props: { user: User field: 'bio' | 'website' | 'bannerUrl' | 'twitterHandle' | 'discordHandle' label: string }) { const { user, field, label } = props const [value, setValue] = useState(user[field] ?? '') async function updateField() { // Note: We trim whitespace before uploading to Firestore await updateUser(user.id, { [field]: value.trim() }) } return (
{field === 'bio' ? (