flexor-web/src/app/components/pages/group-admin.tsx

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

import { handleApiError } from '../../api/errors'
import { initForm, initField } from '../../actions/forms'
import { fetchGroup, updateGroup } from '../../actions/groups'
import { getEntity } from '../../selectors/entities'
import { getForm } from '../../selectors/forms'

import { useDeepCompareEffect, useTheme } from '../../hooks'
import { setTitle, valueFromForm } from '../../utils'
import {
    AppState,
    AppThunkDispatch,
    Group,
    GroupMembershipType,
    Tab,
    EntityType,
} from '../../types'

import Title from '../../components/title'
import Subtitle from '../../components/subtitle'
import Section from '../../components/section'
import HorizontalRule from '../../components/horizontal-rule'
import PrimaryButton from '../../components/controls/primary-button'
import MemberList from '../../components/member-list'
import GroupInvitations from '../../components/group-invitations'
import GroupLogs from '../../components/group-logs'
import Loading from '../../components/pages/loading'

import TextareaField from '../../components/controls/textarea-field'
import ImageField from '../../components/controls/image-field'
import CoverImageField from '../../components/controls/cover-image-field'
import IconImageField from '../../components/controls/icon-image-field'
import StaticField from '../../components/controls/static-field'

interface Params {
    id: string
    tab: string
}

const tabs: Tab[] = [
    { id: '', label: 'General' },
    { id: 'members', label: 'Members' },
    { id: 'logs', label: 'Logs' },
]

const GroupAdmin: FC = () => {
    const theme = useTheme()
    const { id, tab = '' } = useParams<Params>()
    const history = useHistory()
    const group = useSelector<AppState, Group | undefined>(state => getEntity<Group>(state, EntityType.Group, id))
    const form = useSelector(getForm)

    const dispatch = useDispatch<AppThunkDispatch>()

    useEffect(() => {
        try {
            dispatch(fetchGroup(id))
        } catch (err) {
            handleApiError(err, dispatch, history)
        }
    }, [])

    useDeepCompareEffect(() => {
        if (group && group.membership) {
            if (group.membership !== GroupMembershipType.Admin) {
                history.push(`/c/${group.id}`)
                return
            }

            dispatch(initForm())
            dispatch(initField('about', group.about))
            dispatch(initField('expiration', '0'))
            dispatch(initField('limit', '0'))
            dispatch(initField('image', group.imageUrl))
            dispatch(initField('coverImage', group.coverImageUrl))
            dispatch(initField('iconImage', group.iconImageUrl))

            setTitle(`${group.name} Administration`)
        }
    }, [group])

    const handleUpdateGroup = async () => {
        try {
            await dispatch(updateGroup(id, {
                about: valueFromForm<string>(form, 'about'),
                imageUrl: valueFromForm<string>(form, 'image'),
                coverImageUrl: valueFromForm<string>(form, 'coverImage'),
                iconImageUrl: valueFromForm<string>(form, 'iconImage'),
            }))

            await dispatch(fetchGroup(id))
        } catch (err) {
            handleApiError(err, dispatch, history)
        }
    }

    if (!group) return <Loading />

    return (
        <div>
            <Section>
                <Title>{group.name}</Title>
                <Subtitle>Administration</Subtitle>
                <HorizontalRule />

                <div className="tabs" style={{ backgroundColor: theme.backgroundSecondary }}>
                    {tabs.map(t => (
                        <div key={t.id} className={tab === t.id ? 'active': ''} style={{ borderColor: theme.primary }}>
                            <Link style={{ color: theme.secondary}} to={`/c/${group.id}/admin/${t.id}`}>
                                {t.label}
                            </Link>
                        </div>
                    ))}
                </div>

                <div>
                    {tab === '' &&
                        <div>
                            <StaticField label="ID" icon={faIdCard} value={group.id} />
                            <StaticField label="Name" value={group.name} />
                            <TextareaField name="about" label="About" placeholder="About this Community" />
                            <ImageField name="image" />
                            <CoverImageField name="coverImage" />
                            <IconImageField name="iconImage" />
                            <br />

                            <PrimaryButton text="Save" icon={faCheckCircle} onClick={e => handleUpdateGroup()} />
                        </div>
                    }

                    {tab === 'members' &&
                        <div>
                            <GroupInvitations group={id} />
                            <HorizontalRule />

                            <Subtitle>Members</Subtitle>
                            <MemberList group={id} />
                        </div>
                    }

                    {tab === 'logs' &&
                        <div>
                            <GroupLogs group={id} />
                        </div>
                    }
                </div>
            </Section>
        </div>
    )
}

export default GroupAdmin