diff --git a/frontend/src/components/group/GroupCreateBox.tsx b/frontend/src/components/group/GroupCreateBox.tsx index af464fd..ea501cc 100644 --- a/frontend/src/components/group/GroupCreateBox.tsx +++ b/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 {useApplyChanges} from "../../hooks/useApplyChanges" import {useFormSlug} from "../../hooks/useFormSlug" import {ManagedResource, ManagedViewSet} from "../../hooks/useManagedViewSet" import {SophonResearchGroup} from "../../types/SophonTypes" @@ -97,29 +98,13 @@ export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.El ) const applyChanges = - React.useCallback( - async () => { - if(resource) { - await resource.update({ - name: name.value, - slug: slug, - description: description.value, - members: members.value, - access: access.value, - }) - } - else { - await viewSet!.create({ - name: name.value, - slug: slug, - description: description.value, - members: members.value, - access: access.value, - }) - } - }, - [viewSet, resource, name, slug, description, members, access], - ) + useApplyChanges(viewSet, resource, { + name: name.value, + slug: slug, + description: description.value, + members: members.value, + access: access.value, + }) const canApply = React.useMemo( diff --git a/frontend/src/components/notebook/NotebookCreateBox.tsx b/frontend/src/components/notebook/NotebookCreateBox.tsx index dfe7dd3..12a664b 100644 --- a/frontend/src/components/notebook/NotebookCreateBox.tsx +++ b/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 {useApplyChanges} from "../../hooks/useApplyChanges" import {useFormSlug} from "../../hooks/useFormSlug" import {ManagedResource, ManagedViewSet} from "../../hooks/useManagedViewSet" import {SophonNotebook} from "../../types/SophonTypes" @@ -33,33 +34,13 @@ export function NotebookCreateBox({viewSet, resource}: NotebookCreateBoxProps): Validators.alwaysValid, ) - // TODO: Fix this const applyChanges = - React.useCallback( - async () => { - if(!project) { - return - } - - if(resource) { - await resource.update({ - name: name.value, - slug: slug, - container_image: image.value, - project: project?.value.slug, - }) - } - else { - await viewSet!.create({ - name: name.value, - slug: slug, - container_image: image.value, - project: project?.value.slug, - }) - } - }, - [viewSet, resource, name, slug, image, project], - ) + useApplyChanges(viewSet, resource, { + name: name.value, + slug: slug, + container_image: image.value, + project: project!.value.slug, + }) const canApply = React.useMemo( diff --git a/frontend/src/components/project/ProjectCreateBox.tsx b/frontend/src/components/project/ProjectCreateBox.tsx index 40de85c..c18720e 100644 --- a/frontend/src/components/project/ProjectCreateBox.tsx +++ b/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 {useApplyChanges} from "../../hooks/useApplyChanges" import {useFormSlug} from "../../hooks/useFormSlug" import {ManagedResource, ManagedViewSet} from "../../hooks/useManagedViewSet" import {SophonResearchProject} from "../../types/SophonTypes" @@ -67,29 +68,13 @@ export function ProjectCreateBox({viewSet, resource}: ProjectCreateBoxProps): JS ) const applyChanges = - React.useCallback( - async () => { - if(resource) { - await resource.update({ - name: name.value, - slug: slug, - description: description.value, - visibility: visibility.value, - group: group!.value.slug, - }) - } - else { - await viewSet!.create({ - name: name.value, - slug: slug, - description: description.value, - visibility: visibility.value, - group: group!.value.slug, - }) - } - }, - [viewSet, resource, name, slug, description, visibility, group], - ) + useApplyChanges(viewSet, resource, { + name: name.value, + slug: slug, + description: description.value, + visibility: visibility.value, + group: group!.value.slug, + }) const canApply = React.useMemo( diff --git a/frontend/src/hooks/useApplyChanges.ts b/frontend/src/hooks/useApplyChanges.ts new file mode 100644 index 0000000..1fd05c3 --- /dev/null +++ b/frontend/src/hooks/useApplyChanges.ts @@ -0,0 +1,20 @@ +import * as React from "react" +import {ManagedResource, ManagedViewSet} from "./useManagedViewSet" + + +export function useApplyChanges(viewSet: ManagedViewSet | undefined, resource: ManagedResource | undefined, values: Partial) { + return React.useCallback( + async () => { + if(resource) { + await resource.update(values) + } + else if(viewSet) { + await viewSet.create(values) + } + else { + console.error("applyChanges called when both viewSet and resources were falsy, ignoring the call...") + } + }, + [viewSet, resource, values], + ) +}