✨ Add group deletion button for owners of a group

frontend/src/components/elements/SafetyButton.module.css

@@ -0,0 +1,3 @@
+.SafetyButton[disabled] {
+    cursor: wait !important;
+}

frontend/src/components/elements/SafetyButton.tsx

@@ -0,0 +1,41 @@
+import {Button} from "@steffo/bluelib-react"
+import {ButtonProps} from "@steffo/bluelib-react/dist/components/inputs/Button"
+import classNames from "classnames"
+import * as React from "react"
+import Style from "./SafetyButton.module.css"
+
+
+export interface SafetyButtonProps extends ButtonProps {
+    timeout: number,
+}
+
+
+export function SafetyButton({timeout = 3, onClick, children, disabled, className, bluelibClassNames, ...props}: SafetyButtonProps): JSX.Element {
+    const [timerStarted, setTimerStarted] = React.useState<boolean>(false)
+    const [timerElapsed, setTimerElapsed] = React.useState<boolean>(false)
+
+    const startTimer =
+        React.useCallback(
+            async () => {
+                setTimerStarted(true)
+                await new Promise(resolve => setTimeout(resolve, timeout * 1000))
+                setTimerElapsed(true)
+            },
+            [timeout],
+        )
+
+    return (
+        <Button
+            onClick={timerElapsed ? onClick : startTimer}
+            disabled={disabled ||
+            (
+                timerStarted && !timerElapsed
+            )}
+            className={classNames(className, Style.SafetyButton)}
+            bluelibClassNames={classNames(timerStarted ? "color-orange" : "")}
+            {...props}
+        >
+            {timerStarted ? "Confirm?" : children}
+        </Button>
+    )
+}

frontend/src/components/group/GroupDeleteButton.tsx

@@ -0,0 +1,41 @@
+import {faTrash} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import * as React from "react"
+import {useAuthorizationContext} from "../../contexts/authorization"
+import {ManagedResource} from "../../hooks/useManagedViewSet"
+import {SophonResearchGroup} from "../../types/SophonTypes"
+import {SafetyButton} from "../elements/SafetyButton"
+
+
+export interface GroupDeleteButtonProps {
+    resource: ManagedResource<SophonResearchGroup>,
+}
+
+
+export function GroupDeleteButton({resource}: GroupDeleteButtonProps): JSX.Element | null {
+    const authorization = useAuthorizationContext()
+
+    const doDelete =
+        React.useCallback(
+            async () => {
+                await resource.destroy()
+            },
+            [resource],
+        )
+
+    if(!authorization) {
+        return null
+    }
+    if(!authorization.state.user) {
+        return null
+    }
+    if(resource.value.owner !== authorization.state.user.id) {
+        return null
+    }
+
+    return (
+        <SafetyButton timeout={5} onClick={doDelete}>
+            <FontAwesomeIcon icon={faTrash} pulse={resource.busy}/>&nbsp;Delete
+        </SafetyButton>
+    )
+}

frontend/src/components/group/GroupLeaveButton.tsx

@@ -34,12 +34,12 @@ export function GroupLeaveButton({resource}: GroupLeaveButtonProps): JSX.Element
     if(!trueMembers.includes(authorization.state.user.id)) {
         return null
     }
-
-    const isOwner = resource.value.owner === authorization.state.user.id
-    const canLeave = !resource.busy && !isOwner
+    if(resource.value.owner === authorization.state.user.id) {
+        return null
+    }
 
     return (
-        <Button disabled={!canLeave} onClick={doLeave} bluelibClassNames={resource.busy ? "color-yellow" : ""}>
+        <Button disabled={resource.busy} onClick={doLeave} bluelibClassNames={resource.busy ? "color-yellow" : ""}>
             <FontAwesomeIcon icon={faUserMinus} pulse={resource.busy}/>&nbsp;Leave
         </Button>
     )

frontend/src/components/group/GroupResourcePanel.tsx

@@ -5,6 +5,7 @@ import {ManagedResource} from "../../hooks/useManagedViewSet"
 import {SophonResearchGroup} from "../../types/SophonTypes"
 import {Link} from "../elements/Link"
 import {ResourcePanel} from "../elements/ResourcePanel"
+import {GroupDeleteButton} from "./GroupDeleteButton"
 import {GroupJoinButton} from "./GroupJoinButton"
 import {GroupLeaveButton} from "./GroupLeaveButton"
 
@@ -35,6 +36,7 @@ export function GroupResourcePanel({resource}: GroupResourcePanelProps): JSX.Ele
             <ResourcePanel.Buttons>
                 <GroupLeaveButton resource={resource}/>
                 <GroupJoinButton resource={resource}/>
+                <GroupDeleteButton resource={resource}/>
             </ResourcePanel.Buttons>
         </ResourcePanel>
     )