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 {
    authenticated: boolean
    user?: Entity
}

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

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

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

export default Self