flexor-web/src/components/pages/self.tsx

import React, { FC } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Link, useParams, useHistory } from 'react-router-dom'
import moment from 'moment'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDoorOpen, faCheckCircle, faPlusCircle, 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 } from 'src/hooks'
import { setTitle, valueFromForm } from 'src/utils'
import { AppState, User, Tab, Form } from 'src/types'

import PageHeader from 'src/components/page-header'
import Loading from 'src/components/pages/loading'
import TextField from 'src/components/forms/text-field'
import TextareaField from 'src/components/forms/textarea-field'
import SelectField from 'src/components/forms/select-field'
import CheckboxField from 'src/components/forms/checkbox-field'
import FileField from 'src/components/forms/file-field'

interface Params {
    tab: string
}

const tabs: Tab[] = [
    { id: '', label: 'Posts' },
    { id: 'settings', label: 'Settings' },
    { id: 'apps', label: 'Apps' },
]

const Self: FC = () => {
    const { tab = '' } = useParams<Params>()
    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', '')

        try {
            dispatch(updateSelf({
                name,
                about,
                requiresApproval,
                privacy,
                imageUrl,
                coverImageUrl,
            }))
        } 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 || ''))
        }
    }, [user])

    if (!user) return <Loading />

    return (
        <div>
            <PageHeader title={user.name || user.id} subtitle={`@${user.id}`} />

            <div className="main-content">
                <nav className="level">
                    <div className="level-item has-text-centered">
                        <div>
                            <div className="heading">Joined</div>
                            <div className="title">{moment(user.created).format('MMMM Do YYYY')}</div>
                        </div>
                    </div>
                </nav>

                <div className="centered-content">
                    <div className="tabs is-large">
                        <ul>
                            {tabs.map(t => (
                                <li key={t.id} className={tab === t.id ? 'is-active': ''}>
                                    <Link to={`/self/${t.id}`}>
                                        {t.label}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>

                    <div className="container">
                        {tab === '' &&
                            <p>No Posts.</p>
                        }

                        {tab === 'settings' &&
                            <div>
                                <div className="field">
                                    <label className="label">ID</label>
                                    <div className="control has-icons-left">
                                        <input className="input" type="text" value={user.id} readOnly />
                                        <span className="icon is-small is-left">
                                            <FontAwesomeIcon icon={faIdCard} />
                                        </span>
                                    </div>
                                </div>
                                <br />

                                <div className="field">
                                    <label className="label">Email</label>
                                    <div className="control has-icons-left">
                                        <input className="input" type="email" value={user.email} readOnly />
                                        <span className="icon is-small is-left">
                                            <FontAwesomeIcon icon={faEnvelope} />
                                        </span>
                                    </div>
                                </div>
                                <br />

                                <TextField name="name" label="Name" placeholder="Your Display Name" />
                                <br />
                                <TextareaField name="about" label="About" placeholder="Your Bio" />
                                <br />
                                <SelectField name="privacy" label="Privacy" options={PRIVACY_OPTIONS} icon={faUserShield} />
                                <br />
                                <FileField name="image" label="Image" />
                                <br />
                                <FileField name="coverImage" label="Cover Image" />
                                <br />
                                <CheckboxField name="requiresApproval">
                                    You must approve each Subscription request from other users.
                                </CheckboxField>
                                <br /><br />

                                <button className="button is-primary" onClick={() => handleUpdate()}>
                                    <span className="icon is-small">
                                        <FontAwesomeIcon icon={faCheckCircle} />
                                    </span>
                                    <span>Save</span>
                                </button>

                                <hr />

                                <button className="button is-danger" onClick={() => handleLogout()}>
                                    <span className="icon is-small">
                                        <FontAwesomeIcon icon={faDoorOpen} />
                                    </span>
                                    <span>Log Out</span>
                                </button>
                            </div>
                        }

                        {tab === 'apps' &&
                            <div>
                                <p>No Apps.</p>

                                <br />

                                <Link to="/developers/create" className="button is-primary">
                                    <span className="icon is-small">
                                        <FontAwesomeIcon icon={faPlusCircle} />
                                    </span>
                                    <span>Create a new App</span>
                                </Link>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Self