From 176cfa698a9c52e456d5deea76a1c31181cd9e00 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Mon, 11 Oct 2021 19:13:32 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20group=20deletion=20button=20f?=
 =?UTF-8?q?or=20owners=20of=20a=20group?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../elements/SafetyButton.module.css          |  3 ++
 .../src/components/elements/SafetyButton.tsx  | 41 +++++++++++++++++++
 .../components/group/GroupDeleteButton.tsx    | 41 +++++++++++++++++++
 .../src/components/group/GroupLeaveButton.tsx |  8 ++--
 .../components/group/GroupResourcePanel.tsx   |  2 +
 5 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/elements/SafetyButton.module.css
 create mode 100644 frontend/src/components/elements/SafetyButton.tsx
 create mode 100644 frontend/src/components/group/GroupDeleteButton.tsx

diff --git a/frontend/src/components/elements/SafetyButton.module.css b/frontend/src/components/elements/SafetyButton.module.css
new file mode 100644
index 0000000..f08e5ab
--- /dev/null
+++ b/frontend/src/components/elements/SafetyButton.module.css
@@ -0,0 +1,3 @@
+.SafetyButton[disabled] {
+    cursor: wait !important;
+}
\ No newline at end of file
diff --git a/frontend/src/components/elements/SafetyButton.tsx b/frontend/src/components/elements/SafetyButton.tsx
new file mode 100644
index 0000000..6230908
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/frontend/src/components/group/GroupDeleteButton.tsx b/frontend/src/components/group/GroupDeleteButton.tsx
new file mode 100644
index 0000000..2fb82a5
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/frontend/src/components/group/GroupLeaveButton.tsx b/frontend/src/components/group/GroupLeaveButton.tsx
index 078ff49..e6659fb 100644
--- a/frontend/src/components/group/GroupLeaveButton.tsx
+++ b/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>
     )
diff --git a/frontend/src/components/group/GroupResourcePanel.tsx b/frontend/src/components/group/GroupResourcePanel.tsx
index f8d2fa1..6c63e67 100644
--- a/frontend/src/components/group/GroupResourcePanel.tsx
+++ b/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>
     )