From 7ebc8a82d899891a646905701f98143397f893b6 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 12 Oct 2021 05:27:39 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20group=20edit=20box?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                         |   2 +-
 frontend/src/App.tsx                          |   1 +
 .../src/components/group/GroupCreateBox.tsx   | 109 ++++++++++++------
 frontend/yarn.lock                            |   8 +-
 4 files changed, 81 insertions(+), 39 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 8112b80..098bf8e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,7 +8,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@fortawesome/react-fontawesome": "^0.1.15",
         "@reach/router": "^1.3.4",
-        "@steffo/bluelib-react": "^4.0.4",
+        "@steffo/bluelib-react": "^4.0.5",
         "@testing-library/jest-dom": "^5.11.4",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1db2de7..33c68e2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -57,6 +57,7 @@ function App({..._}: RouteComponentProps) {
                                                 groupPk={selection.value.slug}
                                                 unselectedRoute={({viewSet}) => <>
                                                     <ProjectListBox viewSet={viewSet}/>
+                                                    <GroupCreateBox resource={selection}/>
                                                 </>}
                                                 selectedRoute={({selection}) => <>
                                                     <NotebookRouter
diff --git a/frontend/src/components/group/GroupCreateBox.tsx b/frontend/src/components/group/GroupCreateBox.tsx
index fa54381..346cc01 100644
--- a/frontend/src/components/group/GroupCreateBox.tsx
+++ b/frontend/src/components/group/GroupCreateBox.tsx
@@ -1,28 +1,28 @@
-import {Box, Details, Form, useFormState} from "@steffo/bluelib-react"
+import {Box, Details, Form, Idiomatic as I, useFormState} from "@steffo/bluelib-react"
 import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
 import {useCacheContext} from "../../contexts/cache"
 import {useInstanceContext} from "../../contexts/instance"
-import {ManagedViewSet} from "../../hooks/useManagedViewSet"
+import {ManagedResource, ManagedViewSet} from "../../hooks/useManagedViewSet"
 import {SophonResearchGroup} from "../../types/SophonTypes"
-import {ErrorBox} from "../errors/ErrorBox"
 
 
 export interface GroupCreateBoxProps {
-    viewSet: ManagedViewSet<SophonResearchGroup>
+    viewSet?: ManagedViewSet<SophonResearchGroup>,
+    resource?: ManagedResource<SophonResearchGroup>,
 }
 
 
-export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | null {
+export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.Element | null {
     const instance = useInstanceContext()
     const authorization = useAuthorizationContext()
     const cache = useCacheContext()
 
     const name =
-        useFormState<string>("", val => val.length > 0 ? true : undefined)
+        useFormState<string>(resource?.value.name ?? "", val => val.length > 0 ? true : undefined)
 
     const description =
-        useFormState<string>("", val => val.length > 0 ? true : undefined)
+        useFormState<string>(resource?.value.description ?? "", val => val.length > 0 ? true : undefined)
 
     const membersOptions: { [key: string]: number } | undefined =
         React.useMemo(
@@ -37,30 +37,65 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
         )
 
     const members =
-        useFormState<number[]>([], arr => arr.length > 0 ? true : undefined)
+        useFormState<number[]>(resource?.value.members ?? [], arr => arr.length > 0 ? true : undefined)
 
     const access =
-        useFormState<"OPEN" | "MANUAL" | undefined>(undefined, val => (
-                                                                          val?.length
-                                                                      ) ? true : undefined)
+        useFormState<"OPEN" | "MANUAL" | undefined>(resource?.value.access ?? undefined, val => (
+                                                                                                    val?.length
+                                                                                                ) ? true : undefined)
 
     const slug = name.value.replaceAll(/[^A-Za-z0-9-]/g, "-").toLowerCase()
 
-    const doCreate =
+    const onSubmit =
         React.useCallback(
             async () => {
-                await viewSet.create({
-                    name: name.value,
-                    slug: slug,
-                    description: description.value,
-                    members: members.value,
-                    access: access.value,
-                })
+                if(resource) {
+                    await resource.update({
+                        name: name.value,
+                        slug: slug,
+                        description: description.value,
+                        members: members.value,
+                        access: access.value,
+                    })
+                }
+                else if(viewSet) {
+                    await viewSet.create({
+                        name: name.value,
+                        slug: slug,
+                        description: description.value,
+                        members: members.value,
+                        access: access.value,
+                    })
+                }
             },
-            [viewSet, name, slug, description, members, access],
+            [viewSet, resource, name, slug, description, members, access],
         )
 
-    const canCreate =
+    const trueMembers =
+        React.useMemo(
+            () => resource ? [...new Set([resource.value.owner, ...resource.value.members])] : undefined,
+            [resource],
+        )
+
+    const canEdit =
+        React.useMemo(
+            () => !resource ||
+                (
+                    authorization && authorization.state.user && trueMembers?.includes(authorization.state.user.id)
+                ),
+            [authorization, resource],
+        )
+
+    const canAdministrate =
+        React.useMemo(
+            () => !resource ||
+                (
+                    authorization && authorization.state.user && authorization.state.user.id === resource.value.owner
+                ),
+            [authorization, resource],
+        )
+
+    const canSubmit =
         React.useMemo(
             () => name.validity === true && access.validity === true && Boolean(authorization?.state.user?.username),
             [name, access, authorization],
@@ -69,22 +104,31 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
     if(!authorization?.state.token) {
         return null
     }
+    if(!(
+        viewSet || resource
+    )) {
+        return null
+    }
+    if(!canEdit) {
+        return null
+    }
 
     return (
         <Box>
             <Details>
                 <Details.Summary>
-                    Create a new group
+                    {resource ? <>Edit <I>{resource.value.name}</I></> : "Create a new group"}
                 </Details.Summary>
                 <Details.Content>
                     <Form>
-                        <Form.Field label={"Name"} required {...name}/>
+                        <Form.Field label={"Name"} required disabled={!canEdit} {...name}/>
                         <Form.Field label={"Slug"} required disabled={true} value={slug} validity={slug.length > 0 ? true : undefined}/>
-                        <Form.Area label={"Description"} {...description}/>
-                        <Form.Multiselect label={"Members"} options={membersOptions ?? {}} {...members}/>
+                        <Form.Area label={"Description"} disabled={!canEdit} {...description}/>
+                        <Form.Multiselect label={"Members"} disabled={!canAdministrate} options={membersOptions ?? {}} {...members}/>
                         <Form.Field label={"Owner"} required disabled={true} value={authorization?.state.user?.username} validity={Boolean(authorization?.state.user?.username)}/>
                         <Form.Select
                             label={"Access"}
+                            disabled={!canAdministrate}
                             options={{
                                 "": undefined,
                                 "⛔️ Collaborators must be added manually": "MANUAL",
@@ -92,16 +136,13 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
                             }}
                             {...access}
                         />
-                        {
-                            viewSet.operationError ?
-                            <Form.Row>
-                                <ErrorBox error={viewSet.operationError ?? undefined}/>
-                            </Form.Row>
-                                                   : null
-                        }
                         <Form.Row>
-                            <Form.Button type={"button"} onClick={doCreate} disabled={!canCreate}>
-                                Create
+                            <Form.Button
+                                type={"button"} onClick={onSubmit} disabled={!canSubmit} builtinColor={(
+                                                                                                           viewSet?.operationError || resource?.error
+                                                                                                       ) ? "red" : undefined}
+                            >
+                                {resource ? "Edit" : "Create"}
                             </Form.Button>
                         </Form.Row>
                     </Form>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index de9f918..7f862ad 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1617,10 +1617,10 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@steffo/bluelib-react@^4.0.4":
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@steffo/bluelib-react/-/bluelib-react-4.0.4.tgz#1a4f4ccd3ee185603a95b7a0a183a919f29e9d32"
-  integrity sha512-ZwnAqbZ4LaYbQu56fMX0OIKBJA1X4LUfTIJsxnkJbPrr2qX0D+zQUl2vI2Jm/wlZdltvwm5ftCTLDwpqg/1h/g==
+"@steffo/bluelib-react@^4.0.5":
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/@steffo/bluelib-react/-/bluelib-react-4.0.5.tgz#6128454b03fc1888c4e7f4dbb1675f71fba2153c"
+  integrity sha512-W2TguaP5vixV0C1/chQ+SO69YydBMLWG+ml7TVgRIHoRtr3cKHpp8VVij8qxovdZ1dnkBMD9/z3skcdoRpToag==
   dependencies:
     "@babel/runtime" "^7.15.3"
     classnames "^2.3.1"