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

import React, { FC, useEffect } from 'react'
import { RouteComponentProps } from 'react-router-dom'
import moment from 'moment'
import { useAuthenticationCheck } from 'src/hooks'

import { setTitle } from 'src/utils'
import { User } from 'src/types'

import PageHeader from 'src/components/page-header'

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

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

    useEffect(() => {
        if (user) setTitle(`${user.name} (@${user.id})`)
    }, [user])

    if (!user) {
        return (
            <div>
                <PageHeader title="Self" />
                <div className="main-content"></div>
            </div>
        )
    }

    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">
                        <p>
                            <div className="heading">Joined</div>
                            <div className="title">{moment(user.created).format('MMMM Do YYYY')}</div>
                        </p>
                    </div>
                </nav>

                <p>
                    <button className="button is-danger" onClick={() => logout()}>Log Out</button>
                </p>
            </div>
        </div>
    )
}

export default Self