From 0c487473e212fba93af3d2a98c6542f283efe2c8 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Mon, 11 Oct 2021 18:53:28 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Count=20the=20owner=20of=20the?=
 =?UTF-8?q?=20group=20in=20its=20members?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/group/GroupJoinButton.tsx    | 4 +++-
 frontend/src/components/group/GroupLeaveButton.tsx   | 4 +++-
 frontend/src/components/group/GroupResourcePanel.tsx | 5 +++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/group/GroupJoinButton.tsx b/frontend/src/components/group/GroupJoinButton.tsx
index bb4ee7f..6066648 100644
--- a/frontend/src/components/group/GroupJoinButton.tsx
+++ b/frontend/src/components/group/GroupJoinButton.tsx
@@ -15,6 +15,8 @@ export interface GroupJoinButtonProps {
 export function GroupJoinButton({resource}: GroupJoinButtonProps): JSX.Element | null {
     const authorization = useAuthorizationContext()
 
+    const trueMembers = [resource.value.owner, ...resource.value.members]
+
     const doJoin =
         React.useCallback(
             async () => {
@@ -29,7 +31,7 @@ export function GroupJoinButton({resource}: GroupJoinButtonProps): JSX.Element |
     if(!authorization.state.user) {
         return null
     }
-    if(resource.value.members.includes(authorization.state.user.id)) {
+    if(trueMembers.includes(authorization.state.user.id)) {
         return null
     }
 
diff --git a/frontend/src/components/group/GroupLeaveButton.tsx b/frontend/src/components/group/GroupLeaveButton.tsx
index 8c96c14..078ff49 100644
--- a/frontend/src/components/group/GroupLeaveButton.tsx
+++ b/frontend/src/components/group/GroupLeaveButton.tsx
@@ -15,6 +15,8 @@ export interface GroupLeaveButtonProps {
 export function GroupLeaveButton({resource}: GroupLeaveButtonProps): JSX.Element | null {
     const authorization = useAuthorizationContext()
 
+    const trueMembers = [resource.value.owner, ...resource.value.members]
+
     const doLeave =
         React.useCallback(
             async () => {
@@ -29,7 +31,7 @@ export function GroupLeaveButton({resource}: GroupLeaveButtonProps): JSX.Element
     if(!authorization.state.user) {
         return null
     }
-    if(!resource.value.members.includes(authorization.state.user.id)) {
+    if(!trueMembers.includes(authorization.state.user.id)) {
         return null
     }
 
diff --git a/frontend/src/components/group/GroupResourcePanel.tsx b/frontend/src/components/group/GroupResourcePanel.tsx
index 42c485d..f8d2fa1 100644
--- a/frontend/src/components/group/GroupResourcePanel.tsx
+++ b/frontend/src/components/group/GroupResourcePanel.tsx
@@ -16,7 +16,8 @@ export interface GroupResourcePanelProps {
 
 export function GroupResourcePanel({resource}: GroupResourcePanelProps): JSX.Element {
     const icon = resource.value.access === "OPEN" ? faGlobe : faEnvelope
-    const members = resource.value.members.length
+
+    const trueMembers = [resource.value.owner, ...resource.value.members]
 
     return (
         <ResourcePanel>
@@ -29,7 +30,7 @@ export function GroupResourcePanel({resource}: GroupResourcePanelProps): JSX.Ele
                 </Link>
             </ResourcePanel.Name>
             <ResourcePanel.Text>
-                {members} member{members !== 1 ? "s" : ""}
+                {trueMembers.length} member{trueMembers.length !== 1 ? "s" : ""}
             </ResourcePanel.Text>
             <ResourcePanel.Buttons>
                 <GroupLeaveButton resource={resource}/>