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

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

import { fetchGroups } from 'src/actions/groups'
import { getGroups } from 'src/selectors/groups'
import { setTitle } from 'src/utils'
import { AppState, AppThunkDispatch, Group } from 'src/types'

import PageHeader from 'src/components/page-header'
import GroupListItem from 'src/components/group-list-item'

const Groups: FC = () => {
    const groups = useSelector<AppState, Group[]>(getGroups)
    const dispatch = useDispatch<AppThunkDispatch>()

    useEffect(() => {
        dispatch(fetchGroups())
        setTitle('Communities')
    }, [])

    return (
        <div>
            <PageHeader title="Communities" />

            <div className="main-content">
                {groups.map(group => <GroupListItem group={group} />)}
                <hr />

                <p className="has-text-centered">
                    <Link className="button is-primary" to="/register">
                        <span className="icon is-small">
                            <FontAwesomeIcon icon={faPlusCircle} />
                        </span>
                        <span>Create your own Community</span>
                    </Link>
                </p>
            </div>
        </div>
    )
}

export default Groups