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 { setTitle } from 'src/utils'
import { Group, GroupMembershipType, User } from 'src/types'

import PageHeader from 'src/components/page-header'
import MemberList from 'src/components/member-list'

interface Tab {
    id: string
    label: string
}

interface Params {
    id: string
    tab: string
}

export interface Props extends RouteComponentProps<Params> {
    group?: Group
    members?: User[]
    fetchGroup: () => void
}

const GroupAdmin: FC<Props> = ({ group, members = [], fetchGroup, match, history }) => {
    useEffect(() => {
        fetchGroup()
    }, [])

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

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

    if (!group) {
        return (
            <div>
                <PageHeader title="Group" />
                <div className="main-content"></div>
            </div>
        )
    }

    const selectedTab = match.params.tab ? match.params.tab : ''
    const tabs: Tab[] = [
        {
            id: '',
            label: 'General',
        },
        {
            id: 'members',
            label: 'Members',
        }
    ]

    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={selectedTab === t.id ? 'is-active': ''}>
                                    <Link to={`/c/${group.id}/admin/${t.id}`}>
                                        {t.label}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>

                    <div className="container">
                        {selectedTab === '' &&
                            <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 />

                                <div className="field">
                                    <label className="label">About</label>
                                    <div className="control">
                                        <textarea className="textarea" placeholder="About This Community" value={group.about as string}></textarea>
                                    </div>
                                </div>
                                <br />

                                <button className="button is-primary">
                                    <span className="icon is-small">
                                        <FontAwesomeIcon icon={faCheckCircle} />
                                    </span>
                                    <span>Save</span>
                                </button>
                            </div>
                        }

                        {match.params.tab === 'members' &&
                            <MemberList members={members} />
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}

export default GroupAdmin