From d919e6d042d9d25b0cbf7126c267b9d31f806480 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sun, 10 Oct 2021 17:02:48 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Implement=20group=20joining=20and?=
 =?UTF-8?q?=20leaving?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/group/GroupJoinButton.tsx  | 43 ++++++++++++++++++
 .../src/components/group/GroupLeaveButton.tsx | 44 +++++++++++++++++++
 .../components/group/GroupResourcePanel.tsx   |  5 ++-
 3 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/group/GroupJoinButton.tsx
 create mode 100644 frontend/src/components/group/GroupLeaveButton.tsx

diff --git a/frontend/src/components/group/GroupJoinButton.tsx b/frontend/src/components/group/GroupJoinButton.tsx
new file mode 100644
index 0000000..75c0fd3
--- /dev/null
+++ b/frontend/src/components/group/GroupJoinButton.tsx
@@ -0,0 +1,43 @@
+import {faUserPlus} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import {Button} from "@steffo/bluelib-react"
+import * as React from "react"
+import {useAuthorizationContext} from "../../contexts/authorization"
+import {ManagedResource} from "../../hooks/useManagedViewSet"
+import {SophonResearchGroup} from "../../types/SophonTypes"
+
+
+export interface GroupJoinButtonProps {
+    resource: ManagedResource<SophonResearchGroup>,
+}
+
+
+export function GroupJoinButton({resource}: GroupJoinButtonProps): JSX.Element | null {
+    const authorization = useAuthorizationContext()
+
+    const doJoin =
+        React.useCallback(
+            async () => {
+                await resource.action("POST", "join", {})
+            },
+            [resource],
+        )
+
+    if(!authorization) {
+        return null
+    }
+    if(!authorization.state.user) {
+        return null
+    }
+    if(resource.value.members.includes(authorization.state.user.id)) {
+        return null
+    }
+
+    const canJoin = !resource.busy && resource.value.access === "OPEN"
+
+    return (
+        <Button disabled={!canJoin} onClick={doJoin} bluelibClassNames={resource.busy ? "color-yellow" : ""}>
+            <FontAwesomeIcon icon={faUserPlus}/>&nbsp;Join
+        </Button>
+    )
+}
diff --git a/frontend/src/components/group/GroupLeaveButton.tsx b/frontend/src/components/group/GroupLeaveButton.tsx
new file mode 100644
index 0000000..e4c0b93
--- /dev/null
+++ b/frontend/src/components/group/GroupLeaveButton.tsx
@@ -0,0 +1,44 @@
+import {faUserMinus} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import {Button} from "@steffo/bluelib-react"
+import * as React from "react"
+import {useAuthorizationContext} from "../../contexts/authorization"
+import {ManagedResource} from "../../hooks/useManagedViewSet"
+import {SophonResearchGroup} from "../../types/SophonTypes"
+
+
+export interface GroupLeaveButtonProps {
+    resource: ManagedResource<SophonResearchGroup>,
+}
+
+
+export function GroupLeaveButton({resource}: GroupLeaveButtonProps): JSX.Element | null {
+    const authorization = useAuthorizationContext()
+
+    const doLeave =
+        React.useCallback(
+            async () => {
+                await resource.action("DELETE", "leave", {})
+            },
+            [resource],
+        )
+
+    if(!authorization) {
+        return null
+    }
+    if(!authorization.state.user) {
+        return null
+    }
+    if(!resource.value.members.includes(authorization.state.user.id)) {
+        return null
+    }
+
+    const isOwner = resource.value.owner === authorization.state.user.id
+    const canLeave = !resource.busy && !isOwner
+
+    return (
+        <Button disabled={!canLeave} onClick={doLeave} bluelibClassNames={resource.busy ? "color-yellow" : ""}>
+            <FontAwesomeIcon icon={faUserMinus}/>&nbsp;Leave
+        </Button>
+    )
+}
diff --git a/frontend/src/components/group/GroupResourcePanel.tsx b/frontend/src/components/group/GroupResourcePanel.tsx
index de11059..42c485d 100644
--- a/frontend/src/components/group/GroupResourcePanel.tsx
+++ b/frontend/src/components/group/GroupResourcePanel.tsx
@@ -5,6 +5,8 @@ import {ManagedResource} from "../../hooks/useManagedViewSet"
 import {SophonResearchGroup} from "../../types/SophonTypes"
 import {Link} from "../elements/Link"
 import {ResourcePanel} from "../elements/ResourcePanel"
+import {GroupJoinButton} from "./GroupJoinButton"
+import {GroupLeaveButton} from "./GroupLeaveButton"
 
 
 export interface GroupResourcePanelProps {
@@ -30,7 +32,8 @@ export function GroupResourcePanel({resource}: GroupResourcePanelProps): JSX.Ele
                 {members} member{members !== 1 ? "s" : ""}
             </ResourcePanel.Text>
             <ResourcePanel.Buttons>
-
+                <GroupLeaveButton resource={resource}/>
+                <GroupJoinButton resource={resource}/>
             </ResourcePanel.Buttons>
         </ResourcePanel>
     )