flexor-web/src/components/pages/view-app.tsx

import React, { FC, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Link, useParams, useHistory } from 'react-router-dom'
import classNames from 'classnames'
import moment from 'moment'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlusSquare, faMinusSquare } from '@fortawesome/free-solid-svg-icons'

import { handleApiError } from 'src/api/errors'
import { fetchApp, installApp, uninstallApp } from 'src/actions/apps'
import { getAuthenticatedUserId } from 'src/selectors/authentication'
import { getEntity } from 'src/selectors/entities'
import { getIsFetching } from 'src/selectors/requests'

import { setTitle } from 'src/utils'
import { AppState, AppThunkDispatch, EntityType, App, RequestKey, Installation } from 'src/types'

import { fetchInstallations } from 'src/actions/composer'
import { getInstallations } from 'src/selectors/composer'

import PageHeader from 'src/components/page-header'
import Loading from 'src/components/pages/loading'

import { ClassDictionary } from 'src/types'

interface Params {
    id: string
}

const ViewApp: FC = () => {
    const { id } = useParams<Params>()
    const app = useSelector<AppState, App | undefined>(state => getEntity<App>(state, EntityType.App, id))
    const installations = useSelector<AppState, Installation[]>(getInstallations)
    const selfId = useSelector<AppState, string | undefined>(getAuthenticatedUserId)
    const fetching = useSelector<AppState, boolean>(state => getIsFetching(state, RequestKey.InstallApp) || getIsFetching(state, RequestKey.UninstallApp))
    const dispatch = useDispatch<AppThunkDispatch>()
    const history = useHistory()

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

    useEffect(() => {
        if (app) setTitle(app.name)
    }, [app])

    if (!app) return <Loading />

    const isCreator = app.user.id === selfId
    const installed = !!installations.find(i => i.app.id === app.id)

    const renderButton = () => {
        const classes: ClassDictionary = {
            'button': true,
            'is-danger': installed,
            'is-success': !installed,
            'is-large': true,
            'is-loading': fetching,
        }

        if (installed) {
            const handleClick = async () => {
                await dispatch(uninstallApp(id))
                await dispatch(fetchApp(id))
            }

            return (
                <button className={classNames(classes)} onClick={() => handleClick()}>
                    <span className="icon is-small">
                        <FontAwesomeIcon icon={faMinusSquare} />
                    </span>
                    <span>Uninstall</span>
                </button>
            )
        } else {
            const handleClick = async () => {
                await dispatch(installApp(id))
                await dispatch(fetchApp(id))
            }

            return (
                <button className={classNames(classes)} onClick={() => handleClick()}>
                    <span className="icon is-small">
                        <FontAwesomeIcon icon={faPlusSquare} />
                    </span>
                    <span>Install</span>
                </button>
            )
        }
    }

    return (
        <div>
            <PageHeader title={app.name} />

            <div className="main-content">
                <div className="centered-content">
                    <nav className="level">
                        <div className="level-item has-text-centered">
                            <div>
                                <p className="heading">Users</p>
                                <p className="title">{app.users}</p>
                            </div>
                        </div>

                        <div className="level-item has-text-centered">
                            <div>
                                <p className="heading">Rating</p>
                                <p className="title">{app.rating}</p>
                            </div>
                        </div>

                        {app.companyName &&
                            <div className="level-item has-text-centered">
                                <div>
                                    <p className="heading">Company</p>
                                    <p className="title">{app.companyName}</p>
                                </div>
                            </div>
                        }

                        <div className="level-item has-text-centered">
                            <div>
                                <p className="heading">Updated</p>
                                <p className="title">{moment(app.updated).format('MMMM Do, YYYY')}</p>
                            </div>
                        </div>
                    </nav>

                    <p>{app.about}</p>
                    <br />

                    {renderButton()}

                    {isCreator &&
                        <div>
                            <hr />
                            <Link className="button is-warning" to={`/a/${id}/edit`}>Edit App</Link>
                        </div>
                    }
                </div>
            </div>
        </div>
    )
}

export default ViewApp