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

import React, { FC, useEffect } from 'react'
import { RouteComponentProps, Link } from 'react-router-dom'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'

import { useDeepCompareEffect } from 'src/hooks'
import { setTitle } from 'src/utils'
import { Group, GroupMembershipType, Tab } from 'src/types'

import PageHeader from 'src/components/page-header'
import TextareaField from 'src/components/forms/textarea-field'
import MemberList from 'src/components/member-list'
import GroupInvitations from 'src/components/group-invitations'
import GroupLogs from 'src/components/group-logs'
import Loading from 'src/components/pages/loading'

interface Params {
    id: string
    tab: string
}

export interface Props extends RouteComponentProps<Params> {
    group?: Group
    about?: string
    fetchGroup: () => void
    initForm: (group: Group) => void
    updateGroup: (about: string) => void
}

const GroupAdmin: FC<Props> = ({
    group,
    about = '',
    fetchGroup,
    initForm,
    updateGroup,
    match,
    history,
}) => {
    const tab = match.params.tab || ''
    const tabs: Tab[] = [
        {
            id: '',
            label: 'General',
        },
        {
            id: 'members',
            label: 'Members',
        },
        {
            id: 'logs',
            label: 'Logs',
        },
    ]

    useEffect(() => {
        fetchGroup()
    }, [])

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

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

    if (!group) return <Loading />

    return (
        <div>
            <PageHeader title={group.name} subtitle="Administration" />

            <div className="main-content">
                <div className="centered-content">
                    <div className="tabs is-large">
                        <ul>
                            {tabs.map(t => (
                                <li key={t.id} className={tab === t.id ? 'is-active': ''}>
                                    <Link to={`/c/${group.id}/admin/${t.id}`}>
                                        {t.label}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>

                    <div className="container">
                        {tab === '' &&
                            <div>
                                <div className="field">
                                    <label className="label">ID</label>
                                    <div className="control">
                                        <input className="input" type="text" value={group.id} readOnly />
                                    </div>
                                </div>
                                <br />

                                <div className="field">
                                    <label className="label">Name</label>
                                    <div className="control">
                                        <input className="input" type="text" value={group.name} readOnly />
                                    </div>
                                </div>
                                <br />

                                <TextareaField name="about" label="About" placeholder="About this Community" />
                                <br />

                                <button className="button is-primary" onClick={e => updateGroup(about)}>
                                    <span className="icon is-small">
                                        <FontAwesomeIcon icon={faCheckCircle} />
                                    </span>
                                    <span>Save</span>
                                </button>
                            </div>
                        }

                        {tab === 'members' &&
                            <div>
                                <GroupInvitations group={match.params.id} />
                                <hr />

                                <h1 className="title is-size-4">Members</h1>
                                <MemberList group={match.params.id} />
                            </div>
                        }

                        {tab === 'logs' && <GroupLogs group={match.params.id} />}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default GroupAdmin