mirror of
https://github.com/Steffo99/sophon.git
synced 2024-12-22 23:04:21 +00:00
🔧 Create useFormSlug
hook
This commit is contained in:
parent
9dc9d06185
commit
aeeca9736f
6 changed files with 38 additions and 15 deletions
|
@ -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(
|
||||
|
|
|
@ -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>(
|
||||
|
|
|
@ -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(
|
||||
|
|
18
frontend/src/hooks/useFormSlug.ts
Normal file
18
frontend/src/hooks/useFormSlug.ts
Normal file
|
@ -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],
|
||||
)
|
||||
}
|
|
@ -31,4 +31,12 @@ export interface WithResource<T> {
|
|||
*/
|
||||
export interface WithViewSet<T> {
|
||||
viewSet: ManagedViewSet<T>,
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Props including a slug.
|
||||
*/
|
||||
export interface WithSlug {
|
||||
slug: string,
|
||||
}
|
3
frontend/src/utils/Slug.ts
Normal file
3
frontend/src/utils/Slug.ts
Normal file
|
@ -0,0 +1,3 @@
|
|||
export function toSlug(str: string): string {
|
||||
return str.replaceAll(/[^A-Za-z0-9-]/g, "-").toLowerCase()
|
||||
}
|
Loading…
Reference in a new issue