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

import React, { FC, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Link, useParams, useHistory } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUserPlus, faUserMinus, faUserClock, faBan } from '@fortawesome/free-solid-svg-icons'

import { handleApiError } from 'src/api/errors'
import { fetchUser, subscribe, unsubscribe } from 'src/actions/users'
import { fetchUserPosts } from 'src/actions/posts'
import { getEntity } from 'src/selectors/entities'
import { getAuthenticatedUser, getChecked } from 'src/selectors/authentication'
import { getUserPosts } from 'src/selectors/posts'

import { useDeepCompareEffect, useConfig } from 'src/hooks'
import { setTitle, urlForBlob } from 'src/utils'
import { AppState, EntityType, User, Post, AppThunkDispatch } from 'src/types'

import PageHeader from 'src/components/page-header'
import UserInfo from 'src/components/user-info'
import Loading from 'src/components/pages/loading'
import PostList from 'src/components/post-list'

interface Params {
    id: string
}

const ViewUser: FC = () => {
    const { id } = useParams<Params>()
    const checked = useSelector<AppState, boolean>(getChecked)
    const self = useSelector<AppState, User | undefined>(getAuthenticatedUser)
    const user = useSelector<AppState, User | undefined>(state => getEntity<User>(state, EntityType.User, id))
    const posts = useSelector<AppState, Post[]>(state => getUserPosts(state, id))
    const dispatch = useDispatch<AppThunkDispatch>()
    const config = useConfig()
    const history = useHistory()

    useEffect(() => {
        const init = async () => {
            try {
                await dispatch(fetchUser(id))
                await dispatch(fetchUserPosts(id))
            } catch (err) {
                handleApiError(err, dispatch, history)
            }
        }

        if (checked) init()
    }, [checked])

    useDeepCompareEffect(() => {
        if (user) setTitle(user.name)
    }, [user])

    if (!user) return <Loading />

    const isSelf = self && self.id === user.id
    const isGroup = self && self.group && user.group && self.group.id === user.group.id
    const imageUrl = user.imageUrl ? urlForBlob(config, user.imageUrl) : undefined
    const subscription = self && user.subscriptions ? user.subscriptions.find(subscription => subscription.from === self.id && subscription.to === user.id) : undefined
    const subscribed = subscription && !subscription.pending
    const subscriptionPending = subscription && subscription.pending

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

            <div className="main-content">
                <UserInfo user={user} />

                <div className="centered-content">
                    <article className="media">
                        {imageUrl &&
                            <figure className="media-left">
                                <p className="image is-32x32">
                                    <img src={imageUrl} style={{ width: 128 }} />
                                </p>
                            </figure>
                        }
                        <div className="media-content">
                            <div className="content">
                                <h1 className="is-size-3">
                                    <span className="is-size-3">{user.name}</span> <span className="is-size-4 has-text-weight-bold">@{user.id}</span>
                                </h1>
                                {user.group && <h2 className="is-size-4">Community: <Link to={`/c/${user.group.id}`}>{user.group.name}</Link></h2>}
                                <br />

                                <p>{user.about}</p>
                            </div>
                        </div>
                    </article>
                    <br />

                    <div className="buttons">
                        {subscribed &&
                            <button className="button is-danger" onClick={() => dispatch(unsubscribe(user.id))}>
                                <span className="icon is-small">
                                    <FontAwesomeIcon icon={faUserMinus} />
                                </span>
                                <span>Unsusbcribe</span>
                            </button>
                        }

                        {subscriptionPending &&
                            <button className="button is-warning">
                                <span className="icon is-small">
                                    <FontAwesomeIcon icon={faUserClock} />
                                </span>
                                <span>Pending</span>
                            </button>
                        }

                        {self && !isSelf && !subscribed && !subscriptionPending &&
                            <button className="button is-success" onClick={() => dispatch(subscribe(user.id))}>
                                <span className="icon is-small">
                                    <FontAwesomeIcon icon={faUserPlus} />
                                </span>
                                <span>Subscribe</span>
                            </button>
                        }

                        {!isSelf &&
                            <button className="button is-danger">
                                <span className="icon is-small">
                                    <FontAwesomeIcon icon={faBan} />
                                </span>
                                <span>Block</span>
                            </button>
                        }

                        {user.group && !isGroup &&
                            <button className="button is-danger">
                                <span className="icon is-small">
                                    <FontAwesomeIcon icon={faBan} />
                                </span>
                                <span>Block Community: {user.group.name}</span>
                            </button>
                        }
                    </div>
                </div>
            </div>

            <PostList posts={posts} />
        </div>
    )
}

export default ViewUser