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

import React, { FC, useEffect } from 'react'
import { RouteComponentProps } from 'react-router-dom'
import { setTitle } from 'src/utils'

import { Entity } from 'src/types'

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

interface Props extends RouteComponentProps {
    checked: boolean
    authenticated: boolean
    user?: Entity
}

const Self: FC<Props> = ({ checked, authenticated, user, history }) => {
    useEffect(() => {
        if (checked && !authenticated) history.push('/login')
    }, [checked, authenticated])

    useEffect(() => {
        if (user) setTitle(`${user.name} (@${user.id})`)
    }, [user])
    
    return (
        <div>
            <PageHeader title={user ? user.name as string : '?'} subtitle={user ? user.id : '?'} />

            <div className="main-content">
                <p>
                    Hello.
                </p>
            </div>
        </div>
    )
}

export default Self