WIP

src/components/pages/view-user.tsx

@@ -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>
                         }
 

src/types/entities.ts

@@ -14,6 +14,13 @@ export enum GroupMembershipType {
     Member = 'member',
 }
 
+export interface UserSubscription {
+    from: string
+    to: string
+    pending: boolean
+    created: number
+}
+
 export interface Entity {
     [key: string]: any
     id: string
@@ -50,8 +57,7 @@ type BaseUser = Entity & {
     coverImageUrl?: string
     requiresApproval: boolean
     privacy: string
-    subscribed: boolean
-    subscribedToYou: boolean
+    subscriptions: UserSubscription[]
 }
 
 export type User = BaseUser & {