🔧 Create useFormSlug hook

frontend/src/components/group/GroupCreateBox.tsx

@@ -2,6 +2,7 @@ import {Box, Details, Form, Idiomatic as I, useFormState} from "@steffo/bluelib-
 import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
 import {useCacheContext} from "../../contexts/cache"
+import {useFormSlug} from "../../hooks/useFormSlug"
 import {ManagedResource, ManagedViewSet} from "../../hooks/useManagedViewSet"
 import {SophonResearchGroup} from "../../types/SophonTypes"
 import {Validators} from "../../utils/Validators"
@@ -37,7 +38,7 @@ export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.El
     const name =
         useFormState<string>(
             resource?.value.name ?? "",
-            Validators.notZeroLength,
+            Validators.mustContainElements,
         )
 
     const description =
@@ -59,10 +60,7 @@ export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.El
         )
 
     const slug =
-        React.useMemo(
-            () => resource ? resource.value.slug : name.value.replaceAll(/[^A-Za-z0-9-]/g, "-").toLowerCase(),
-            [resource, name],
-        )
+        useFormSlug(resource, name.value)
 
     const canAdministrate =
         React.useMemo(

frontend/src/components/notebook/NotebookCreateBox.tsx

@@ -2,6 +2,7 @@ import {Box, Details, Form, Idiomatic as I, useFormState} from "@steffo/bluelib-
 import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
 import {useProjectContext} from "../../contexts/project"
+import {useFormSlug} from "../../hooks/useFormSlug"
 import {ManagedResource, ManagedViewSet} from "../../hooks/useManagedViewSet"
 import {SophonNotebook} from "../../types/SophonTypes"
 import {Validators} from "../../utils/Validators"
@@ -20,14 +21,11 @@ export function NotebookCreateBox({viewSet, resource}: NotebookCreateBoxProps):
     const name =
         useFormState<string>(
             resource?.value.name ?? "",
-            Validators.notZeroLength,
+            Validators.mustContainElements,
         )
 
     const slug =
-        React.useMemo(
-            () => resource ? resource.value.slug : name.value.replaceAll(/[^A-Za-z0-9-]/g, "-").toLowerCase(),
-            [resource, name],
-        )
+        useFormSlug(resource, name.value)
 
     const image =
         useFormState<string>(

frontend/src/components/project/ProjectCreateBox.tsx

@@ -2,6 +2,7 @@ import {Box, Details, Form, Idiomatic as I, useFormState} from "@steffo/bluelib-
 import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
 import {useGroupContext} from "../../contexts/group"
+import {useFormSlug} from "../../hooks/useFormSlug"
 import {ManagedResource, ManagedViewSet} from "../../hooks/useManagedViewSet"
 import {SophonResearchProject} from "../../types/SophonTypes"
 import {Validators} from "../../utils/Validators"
@@ -20,7 +21,7 @@ export function ProjectCreateBox({viewSet, resource}: ProjectCreateBoxProps): JS
     const name =
         useFormState<string>(
             resource?.value.name ?? "",
-            Validators.notZeroLength,
+            Validators.mustContainElements,
         )
 
     const description =
@@ -36,10 +37,7 @@ export function ProjectCreateBox({viewSet, resource}: ProjectCreateBoxProps): JS
         )
 
     const slug =
-        React.useMemo(
-            () => resource ? resource.value.slug : name.value.replaceAll(/[^A-Za-z0-9-]/g, "-").toLowerCase(),
-            [resource, name],
-        )
+        useFormSlug(resource, name.value)
 
     const canAdministrate =
         React.useMemo(

frontend/src/hooks/useFormSlug.ts

@@ -0,0 +1,18 @@
+import * as React from "react"
+import {WithSlug} from "../types/ExtraTypes"
+import {toSlug} from "../utils/Slug"
+import {ManagedResource} from "./useManagedViewSet"
+
+
+/**
+ * Hook to simplify displaying the "Slug" form field.
+ *
+ * @param resource - The {@link ManagedResource} that is currently being edited; if set, the slug will be fixed to the one of the resource.
+ * @param str - The string to convert to a slug if no resource is set.
+ */
+export function useFormSlug<T extends WithSlug>(resource: ManagedResource<T> | undefined, str: string): string {
+    return React.useMemo(
+        () => resource ? resource.value.slug : toSlug(str),
+        [resource, str],
+    )
+}

frontend/src/types/ExtraTypes.ts

@@ -32,3 +32,11 @@ export interface WithResource<T> {
 export interface WithViewSet<T> {
     viewSet: ManagedViewSet<T>,
 }
+
+
+/**
+ * Props including a slug.
+ */
+export interface WithSlug {
+    slug: string,
+}

frontend/src/utils/Slug.ts

@@ -0,0 +1,3 @@
+export function toSlug(str: string): string {
+    return str.replaceAll(/[^A-Za-z0-9-]/g, "-").toLowerCase()
+}