✨ Implement group joining and leaving

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>
+    )
+}

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>
+    )
+}

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>
     )