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

import React, { FC } from 'react'
import { Link, RouteComponentProps } from 'react-router-dom'
import moment from 'moment'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDoorOpen, faCheckCircle, faPlusCircle, faIdCard, faEnvelope } from '@fortawesome/free-solid-svg-icons'

import { useAuthenticationCheck, useDeepCompareEffect } from 'src/hooks'
import { setTitle } from 'src/utils'
import { User, Tab } 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'

interface Params {
    tab: string
}

export interface Props extends RouteComponentProps<Params> {
    checked: boolean
    authenticated: boolean
    user?: User
    initForm: (user: User) => void
    logout: () => void
}

const Self: FC<Props> = ({ checked, authenticated, user, initForm, logout, history, match }) => {
    useAuthenticationCheck(checked, authenticated, history)

    const tab = match.params.tab || ''
    const tabs: Tab[] = [
        {
            id: '',
            label: 'Posts',
        },
        {
            id: 'settings',
            label: 'Settings',
        },
        {
            id: 'apps',
            label: 'Apps',
        },
    ]

    useDeepCompareEffect(() => {
        if (user) {
            setTitle(`${user.name} (@${user.id})`)
            initForm(user)
        }
    }, [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 />

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

                                <hr />

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

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

                                <br />

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

export default Self