From e58c8d80e91d3673ca730e73f4daa9bfb3a194a5 Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Fri, 15 Oct 2021 16:51:34 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Create=20useApplyChanges=20hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/group/GroupCreateBox.tsx | 31 +++++------------ .../components/notebook/NotebookCreateBox.tsx | 33 ++++--------------- .../components/project/ProjectCreateBox.tsx | 31 +++++------------ frontend/src/hooks/useApplyChanges.ts | 20 +++++++++++ 4 files changed, 43 insertions(+), 72 deletions(-) create mode 100644 frontend/src/hooks/useApplyChanges.ts 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], + ) +}