You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
6.5 KiB
159 lines
6.5 KiB
import React, { FC } from 'react'
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { Link, useHistory } from 'react-router-dom'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { faDoorOpen, faCheckCircle, faIdCard, faEnvelope, faUserShield } from '@fortawesome/free-solid-svg-icons'
|
|
|
|
import { unauthenticate, updateSelf } from 'src/actions/authentication'
|
|
import { initForm, initField } from 'src/actions/forms'
|
|
import { getAuthenticatedUser } from 'src/selectors/authentication'
|
|
import { getForm } from 'src/selectors/forms'
|
|
|
|
import { handleApiError } from 'src/api/errors'
|
|
import { PRIVACY_OPTIONS } from 'src/constants'
|
|
import { useAuthenticationCheck, useDeepCompareEffect, useTheme } from 'src/hooks'
|
|
import { setTitle, valueFromForm } from 'src/utils'
|
|
import { AppState, User, Form } from 'src/types'
|
|
|
|
import Title from 'src/components/title'
|
|
import Subtitle from 'src/components/subtitle'
|
|
import Section from 'src/components/section'
|
|
import HorizontalRule from 'src/components/horizontal-rule'
|
|
import PrimaryButton from 'src/components/controls/primary-button'
|
|
import SecondaryButton from 'src/components/controls/secondary-button'
|
|
import Loading from 'src/components/pages/loading'
|
|
import FieldLabel from 'src/components/controls/field-label'
|
|
import TextField from 'src/components/controls/text-field'
|
|
import TextareaField from 'src/components/controls/textarea-field'
|
|
import SelectField from 'src/components/controls/select-field'
|
|
import CheckboxField from 'src/components/controls/checkbox-field'
|
|
import ImageField from 'src/components/controls/image-field'
|
|
import CoverImageField from 'src/components/controls/cover-image-field'
|
|
import ThemeField from 'src/components/controls/theme-field'
|
|
|
|
const Self: FC = () => {
|
|
const theme = useTheme()
|
|
const dispatch = useDispatch()
|
|
const history = useHistory()
|
|
|
|
const user = useSelector<AppState, User | undefined>(getAuthenticatedUser)
|
|
const form = useSelector<AppState, Form>(getForm)
|
|
|
|
useAuthenticationCheck()
|
|
|
|
const handleLogout = () => {
|
|
localStorage.clear()
|
|
dispatch(unauthenticate())
|
|
window.location.href = '/'
|
|
}
|
|
|
|
const handleUpdate = () => {
|
|
const name = valueFromForm<string>(form, 'name', '')
|
|
const about = valueFromForm<string>(form, 'about', '')
|
|
const requiresApproval = valueFromForm<boolean>(form, 'requiresApproval', true)
|
|
const privacy = valueFromForm<string>(form, 'privacy', 'public')
|
|
const imageUrl = valueFromForm<string>(form, 'image', '')
|
|
const coverImageUrl = valueFromForm<string>(form, 'coverImage', '')
|
|
const theme = valueFromForm<string>(form, 'theme', '')
|
|
|
|
try {
|
|
dispatch(updateSelf({
|
|
name,
|
|
about,
|
|
requiresApproval,
|
|
privacy,
|
|
imageUrl,
|
|
coverImageUrl,
|
|
theme,
|
|
}))
|
|
} catch (err) {
|
|
handleApiError(err, dispatch, history)
|
|
}
|
|
}
|
|
|
|
useDeepCompareEffect(() => {
|
|
if (user) {
|
|
setTitle(`${user.name} @${user.id}`)
|
|
|
|
dispatch(initForm())
|
|
dispatch(initField('name', user.name))
|
|
dispatch(initField('about', user.about || ''))
|
|
dispatch(initField('requiresApproval', user.requiresApproval))
|
|
dispatch(initField('privacy', user.privacy))
|
|
dispatch(initField('image', user.imageUrl || ''))
|
|
dispatch(initField('coverImage', user.coverImageUrl || ''))
|
|
dispatch(initField('theme', user.theme))
|
|
}
|
|
}, [user])
|
|
|
|
if (!user) return <Loading />
|
|
|
|
return (
|
|
<div>
|
|
<Section>
|
|
<Title>{user.name || user.id}</Title>
|
|
<Subtitle>@{user.id}</Subtitle>
|
|
|
|
<HorizontalRule />
|
|
|
|
<Link style={{ color: theme.primary }} to={`/u/${user.id}`}>Your Page</Link>
|
|
|
|
<div className="field">
|
|
<FieldLabel>ID</FieldLabel>
|
|
<div className="control-container">
|
|
<div className="icon" style={{ backgroundColor: theme.primary, color: theme.primaryAlternate }}>
|
|
<FontAwesomeIcon icon={faIdCard} />
|
|
</div>
|
|
<div className="control">
|
|
<input
|
|
style={{ backgroundColor: theme.backgroundSecondary, borderColor: theme.secondary, color: theme.text }}
|
|
type="text"
|
|
value={user.id}
|
|
readOnly />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<FieldLabel>Email</FieldLabel>
|
|
<div className="control-container">
|
|
<div className="icon" style={{ backgroundColor: theme.primary, color: theme.primaryAlternate }}>
|
|
<FontAwesomeIcon icon={faEnvelope} />
|
|
</div>
|
|
<div className="control">
|
|
<input
|
|
style={{ backgroundColor: theme.backgroundSecondary, borderColor: theme.secondary, color: theme.text }}
|
|
type="email"
|
|
value={user.email}
|
|
readOnly />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<TextField name="name" label="Name" placeholder="Your Display Name" />
|
|
<TextareaField name="about" label="About" placeholder="Your Bio" />
|
|
<ThemeField name="color" label="Color" />
|
|
<SelectField name="privacy" label="Privacy" options={PRIVACY_OPTIONS} icon={faUserShield} />
|
|
<ImageField name="image" label="Avatar" />
|
|
<CoverImageField name="coverImage" />
|
|
<CheckboxField name="requiresApproval">
|
|
Approve each Subscription request from other users.
|
|
</CheckboxField>
|
|
|
|
<HorizontalRule />
|
|
|
|
<nav className="level">
|
|
<div>
|
|
<PrimaryButton text="Save" icon={faCheckCircle} onClick={() => handleUpdate()} />
|
|
</div>
|
|
|
|
<div>
|
|
<SecondaryButton text="Log Out" icon={faDoorOpen} onClick={() => handleLogout()} />
|
|
</div>
|
|
</nav>
|
|
</Section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Self
|