flexor-web/src/components/group-invitations/group-invitations.tsx

import React, { FC, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheckCircle, faStopwatch, faPauseCircle } from '@fortawesome/free-solid-svg-icons'
import noop from 'lodash/noop'
import moment from 'moment'

import { Invitation } from 'src/types'

import SelectField from 'src/components/forms/select-field'

export interface Props {
    group: string
    invitations?: Invitation[]
    expiration?: string
    limit?: string
    fetchInvitations?: () => void
    createInvitation?: (expiration: string, limit: string) => void
}

const GroupInvitations: FC<Props> = ({
    group,
    invitations = [],
    expiration = '0',
    limit = '0',
    fetchInvitations = noop,
    createInvitation = noop,
}) => {
    useEffect(() => {
        if (invitations.length === 0) fetchInvitations()
    }, [group, fetchInvitations])

    const expirationOptions = {
        '0': 'No Expiration',
        '1': '1 Day',
        '7': '1 Week',
        '30': '1 Month',
    }

    const limitOptions = {
        '0': 'No Limit',
        '1': '1',
        '5': '5',
        '20': '20',
    }

    return (
        <div>
            <h1 className="title is-size-4">Invitations</h1>
            <h2 className="subtitle is-size-6">Create an invitation for someone to create a new account in this Community.</h2>

            <div className="invitation-options">
                <SelectField name="expiration" label="Expires" options={expirationOptions} icon={faStopwatch} />
                <SelectField name="limit" label="Uses" options={limitOptions} icon={faPauseCircle} />
            </div>

            <div className="field">
                <div className="control">
                    <button className="button is-primary" onClick={() => createInvitation(expiration, limit)}>
                        <span className="icon is-small">
                            <FontAwesomeIcon icon={faCheckCircle} />
                        </span>
                        <span>Create</span>
                    </button>
                </div>
            </div>
            <br />

            {invitations.length > 0 &&
                <table className="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Created By</th>
                            <th>Uses</th>
                            <th>Limit</th>
                            <th>Expires</th>
                            <th>Created</th>
                        </tr>
                    </thead>
                    <tbody>
                        {invitations.map(invitation => (
                            <tr key={invitation.id}>
                                <td>{invitation.id}</td>
                                <td><Link to={`/u/${invitation.user.id}`}>{invitation.user.id}</Link></td>
                                <td>{invitation.uses || 0}</td>
                                <td>{invitation.limit || 'None'}</td>
                                <td>{invitation.expiration || 'Never'}</td>
                                <td>{moment(invitation.created).format('MMMM Do YYYY, h:mm:ss a')}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            }
        </div>
    )
}

export default GroupInvitations