🧹 Improve GroupCreateBox code quality

frontend/src/components/group/GroupCreateBox.tsx

@@ -4,6 +4,7 @@ import {useAuthorizationContext} from "../../contexts/authorization"
 import {useCacheContext} from "../../contexts/cache"
 import {ManagedResource, ManagedViewSet} from "../../hooks/useManagedViewSet"
 import {SophonResearchGroup} from "../../types/SophonTypes"
+import {Validators} from "../../utils/Validators"
 
 
 /**
@@ -24,15 +25,66 @@ export interface GroupCreateBoxProps {
 }
 
 
+/**
+ * A {@link Box} to create or edit a {@link SophonResearchGroup}.
+ *
+ * @constructor
+ */
 export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.Element | null {
     const authorization = useAuthorizationContext()
     const cache = useCacheContext()
 
     const name =
-        useFormState<string>(resource?.value.name ?? "", val => val.length > 0 ? true : undefined)
+        useFormState<string>(
+            resource?.value.name ?? "",
+            Validators.notZeroLength,
+        )
 
     const description =
-        useFormState<string>(resource?.value.description ?? "", val => val.length > 0 ? true : undefined)
+        useFormState<string>(
+            resource?.value.description ?? "",
+            Validators.notZeroLength,
+        )
+
+    const members =
+        useFormState<number[]>(
+            resource?.value.members ?? [],
+            Validators.alwaysValid,
+        )
+
+    const access =
+        useFormState<"OPEN" | "MANUAL" | undefined>(
+            resource?.value.access ?? undefined,
+            Validators.notEmpty,
+        )
+
+    const slug =
+        React.useMemo(
+            () => resource ? resource.value.slug : name.value.replaceAll(/[^A-Za-z0-9-]/g, "-").toLowerCase(),
+            [resource, name],
+        )
+
+    const canAdministrate =
+        React.useMemo(
+            () => {
+                if(resource) {
+                    if(!authorization) {
+                        return false
+                    }
+                    if(!authorization.state.user) {
+                        return false
+                    }
+                    if(authorization.state.user.id !== resource.value.owner) {
+                        return false
+                    }
+                    return true
+                }
+                else {
+                    return true
+                }
+            },
+            [authorization, resource],
+        )
 
     const membersOptions: { [key: string]: number } | undefined =
         React.useMemo(
@@ -46,17 +98,7 @@ export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.El
             [authorization, cache],
         )
 
-    const members =
+    const applyChanges =
-        useFormState<number[]>(resource?.value.members ?? [], arr => arr.length > 0 ? true : undefined)
-
-    const access =
-        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 onSubmit =
         React.useCallback(
             async () => {
                 if(resource) {
@@ -68,8 +110,8 @@ export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.El
                         access: access.value,
                     })
                 }
-                else if(viewSet) {
+                else {
-                    await viewSet.create({
+                    await viewSet!.create({
                         name: name.value,
                         slug: slug,
                         description: description.value,
@@ -81,34 +123,25 @@ export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.El
             [viewSet, resource, name, slug, description, members, access],
         )
 
-    const canAdministrate =
+    const canApply =
-        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],
         )
 
-    if(!authorization?.state.token) {
+    const hasError =
-        return null
+        React.useMemo(
-    }
+            () => viewSet?.operationError || resource?.error,
-    if(!(
+            [viewSet, resource],
-        viewSet || resource
+        )
-    )) {
-        return null
-    }
-    if(!canAdministrate) {
-        return null
-    }
 
-    const hasError = viewSet?.operationError || resource?.error
+    if(!authorization?.state.token ||
+        !(
+            viewSet || resource
+        ) ||
+        !canAdministrate) {
+        return null
+    }
 
     return (
         <Box>
@@ -136,14 +169,15 @@ export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.El
                         />
                         <Form.Multiselect
                             label={"Members"}
-                            options={membersOptions ?? {}} {...members}
+                            options={membersOptions ?? {}}
+                            {...members}
                         />
                         <Form.Field
                             label={"Owner"}
                             required={true}
                             disabled={true}
-                            value={authorization?.state.user?.username}
+                            value={authorization.state.user.username}
-                            validity={Boolean(authorization?.state.user?.username)}
+                            validity={true}
                         />
                         <Form.Select
                             label={"Access"}
@@ -157,8 +191,8 @@ export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.El
                         <Form.Row>
                             <Form.Button
                                 type={"button"}
-                                onClick={onSubmit}
+                                onClick={applyChanges}
-                                disabled={!canSubmit}
+                                disabled={!canApply}
                                 builtinColor={hasError ? "red" : undefined}
                             >
                                 {resource ? "Edit" : "Create"}

frontend/src/utils/Validators.ts

@@ -0,0 +1,25 @@
+import {Validity} from "@steffo/bluelib-react/dist/types"
+
+
+export class Validators {
+    static alwaysValid<T>(val: T): Validity {
+        return true
+    }
+
+    static notEmpty<T>(val: T): Validity {
+        if(!val) {
+            return undefined
+        }
+        return true
+    }
+
+    static notZeroLength<T extends { length: number }>(val: T): Validity {
+        if(!val) {
+            return undefined
+        }
+        if(val.length === 0) {
+            return undefined
+        }
+        return true
+    }
+}