🔧 Create useApplyChanges 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 {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(
+        useApplyChanges(viewSet, resource, {
-            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],
-        )
 
     const canApply =
         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 {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(
+        useApplyChanges(viewSet, resource, {
-            async () => {
-                if(!project) {
-                    return
-                }
-
-                if(resource) {
-                    await resource.update({
             name: name.value,
             slug: slug,
             container_image: image.value,
-                        project: project?.value.slug,
+            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],
-        )
 
     const canApply =
         React.useMemo(

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(
+        useApplyChanges(viewSet, resource, {
-            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],
-        )
 
     const canApply =
         React.useMemo(

frontend/src/hooks/useApplyChanges.ts

@@ -0,0 +1,20 @@
+import * as React from "react"
+import {ManagedResource, ManagedViewSet} from "./useManagedViewSet"
+
+
+export function useApplyChanges<T>(viewSet: ManagedViewSet<T> | undefined, resource: ManagedResource<T> | undefined, values: Partial<T>) {
+    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],
+    )
+}