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

import React, { FC, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'

import { fetchCreatedApps } from 'src/actions/apps'
import { getCreatedApps } from 'src/selectors/apps'
import { setTitle } from 'src/utils'
import { AppState, App, AppThunkDispatch } from 'src/types'

import Title from 'src/components/title'
import Subtitle from 'src/components/subtitle'
import Section from 'src/components/section'
import HorizontalRule from 'src/components/horizontal-rule'
import PrimaryButton from 'src/components/controls/primary-button'

const Developers: FC = () => {
    const apps = useSelector<AppState, App[]>(getCreatedApps)
    const history = useHistory()
    const dispatch = useDispatch<AppThunkDispatch>()

    useEffect(() => {
        setTitle('Developers')
        dispatch(fetchCreatedApps())
    }, [])
    
    return (
        <div>
            <Section>
                <Title>Developers</Title>
                <Subtitle>Developer Documentation</Subtitle>
                <HorizontalRule />

                <p>Flexor apps allow users to express themselves on the network.</p>
                <br />
                <p>Developer documentation coming soon.</p>
                <HorizontalRule />

                <p>This is where you manage apps you create.</p>
                <br />

                <PrimaryButton text="Create a new App" icon={faPlusCircle} onClick={() => history.push('/developers/create')} />
            </Section>
        </div>
    )
}

export default Developers