WIP

src/components/pages/view-group.tsx

@@ -15,6 +15,7 @@ import { AppState, EntityType, Group, GroupMembershipType, AppThunkDispatch } fr
 import PageHeader from 'src/components/page-header'
 import GroupInfo from 'src/components/group-info'
 import Loading from 'src/components/pages/loading'
+import { getAuthenticated } from 'src/selectors/authentication'
 
 interface Params {
     id: string
@@ -23,6 +24,7 @@ interface Params {
 const ViewGroup: FC = () => {
     const { id } = useParams<Params>()
     const group = useSelector<AppState, Group | undefined>(state => getEntity<Group>(state, EntityType.Group, id))
+    const authenticated = useSelector<AppState, boolean>(getAuthenticated)
     const dispatch = useDispatch<AppThunkDispatch>()
     const config = useConfig()
     const history = useHistory()
@@ -42,6 +44,7 @@ const ViewGroup: FC = () => {
     if (!group) return <Loading />
 
     const isAdmin = group.membership === GroupMembershipType.Admin
+    const isMember = !!group.membership
     const imageUrl = group.imageUrl ? urlForBlob(config, group.imageUrl) : undefined
 
     return (
@@ -72,19 +75,23 @@ const ViewGroup: FC = () => {
                     <br />
 
                     <div className="buttons">
-                        <Link to={`/c/${group.id}/register`} className="button is-success">
-                            <span className="icon is-small">
-                                <FontAwesomeIcon icon={faUserCheck} />
-                            </span>
-                            <span>Create an Account</span>
-                        </Link>
-
-                        <button className="button is-danger">
-                            <span className="icon is-small">
-                                <FontAwesomeIcon icon={faBan} />
-                            </span>
-                            <span>Block</span>
-                        </button>
+                        {!authenticated &&
+                            <Link to={`/c/${group.id}/register`} className="button is-success">
+                                <span className="icon is-small">
+                                    <FontAwesomeIcon icon={faUserCheck} />
+                                </span>
+                                <span>Create an Account</span>
+                            </Link>
+                        }
+
+                        {!isMember &&
+                            <button className="button is-danger">
+                                <span className="icon is-small">
+                                    <FontAwesomeIcon icon={faBan} />
+                                </span>
+                                <span>Block</span>
+                            </button>
+                        }
 
                         {isAdmin &&
                             <Link to={`/c/${group.id}/admin/`} className="button is-warning">

src/components/pages/view-user.tsx

@@ -7,6 +7,7 @@ import { faUserPlus, faUserMinus, faBan } from '@fortawesome/free-solid-svg-icon
 import { handleApiError } from 'src/api/errors'
 import { fetchUser } from 'src/actions/users'
 import { getEntity } from 'src/selectors/entities'
+import { getAuthenticatedUser } from 'src/selectors/authentication'
 
 import { useDeepCompareEffect, useConfig } from 'src/hooks'
 import { setTitle, urlForBlob } from 'src/utils'
@@ -15,7 +16,6 @@ import { AppState, EntityType, User, 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 GroupAdmin from './group-admin'
 
 interface Params {
     id: string
@@ -23,6 +23,7 @@ interface Params {
 
 const ViewUser: FC = () => {
     const { id } = useParams<Params>()
+    const self = useSelector<AppState, User | undefined>(getAuthenticatedUser)
     const user = useSelector<AppState, User | undefined>(state => getEntity<User>(state, EntityType.User, id))
     const dispatch = useDispatch<AppThunkDispatch>()
     const config = useConfig()
@@ -41,6 +42,9 @@ const ViewUser: FC = () => {
     }, [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
 
     return (
@@ -81,14 +85,16 @@ const ViewUser: FC = () => {
                             <span>Susbcribe</span>
                         </button>
 
-                        <button className="button is-danger">
-                            <span className="icon is-small">
-                                <FontAwesomeIcon icon={faBan} />
-                            </span>
-                            <span>Block</span>
-                        </button>
+                        {!isSelf &&
+                            <button className="button is-danger">
+                                <span className="icon is-small">
+                                    <FontAwesomeIcon icon={faBan} />
+                                </span>
+                                <span>Block</span>
+                            </button>
+                        }
 
-                        {user.group &&
+                        {user.group && !isGroup &&
                             <button className="button is-danger">
                                 <span className="icon is-small">
                                     <FontAwesomeIcon icon={faBan} />