|
|
@ -2,13 +2,13 @@ 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, faBan } from '@fortawesome/free-solid-svg-icons' |
|
|
|
import { faUserPlus, faUserMinus, faUserClock, faBan } from '@fortawesome/free-solid-svg-icons' |
|
|
|
|
|
|
|
import { handleApiError } from 'src/api/errors' |
|
|
|
import { fetchUser } from 'src/actions/users' |
|
|
|
import { fetchUser, subscribe, unsubscribe } from 'src/actions/users' |
|
|
|
import { fetchUserPosts } from 'src/actions/posts' |
|
|
|
import { getEntity } from 'src/selectors/entities' |
|
|
|
import { getAuthenticatedUser } from 'src/selectors/authentication' |
|
|
|
import { getAuthenticatedUser, getChecked } from 'src/selectors/authentication' |
|
|
|
import { getUserPosts } from 'src/selectors/posts' |
|
|
|
|
|
|
|
import { useDeepCompareEffect, useConfig } from 'src/hooks' |
|
|
@ -26,6 +26,7 @@ interface Params { |
|
|
|
|
|
|
|
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)) |
|
|
@ -43,8 +44,8 @@ const ViewUser: FC = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
init() |
|
|
|
}, []) |
|
|
|
if (checked) init() |
|
|
|
}, [checked]) |
|
|
|
|
|
|
|
useDeepCompareEffect(() => { |
|
|
|
if (user) setTitle(user.name) |
|
|
@ -52,9 +53,14 @@ const ViewUser: FC = () => { |
|
|
|
|
|
|
|
if (!user) return <Loading /> |
|
|
|
|
|
|
|
console.log('user', user) |
|
|
|
|
|
|
|
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> |
|
|
@ -87,8 +93,8 @@ const ViewUser: FC = () => { |
|
|
|
<br /> |
|
|
|
|
|
|
|
<div className="buttons"> |
|
|
|
{user.subscribed && |
|
|
|
<button className="button is-danger"> |
|
|
|
{subscribed && |
|
|
|
<button className="button is-danger" onClick={() => dispatch(unsubscribe(user.id))}> |
|
|
|
<span className="icon is-small"> |
|
|
|
<FontAwesomeIcon icon={faUserMinus} /> |
|
|
|
</span> |
|
|
@ -96,12 +102,21 @@ const ViewUser: FC = () => { |
|
|
|
</button> |
|
|
|
} |
|
|
|
|
|
|
|
{user.subscribed && |
|
|
|
<button className="button is-success"> |
|
|
|
{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>Susbcribe</span> |
|
|
|
<span>Subscribe</span> |
|
|
|
</button> |
|
|
|
} |
|
|
|
|
|
|
|