refactor: Exposing onSuccess for better reusability. Removed routing …

…on success only notifications are used.

apps/web/src/components/specification/SpecificationContainer.tsx

@@ -1,8 +1,12 @@
 "use client";
 import { Center, Loader } from "@mantine/core";
+import { useRouter } from "next/navigation";
 import { isNotNilOrEmpty } from "ramda-adjunct";
-import { FC } from "react";
-import { SpecificationFormView } from "./SpecificationFormView";
+import { FC, useCallback } from "react";
+import {
+    SpecificationFormView,
+    SpecificationFormViewOnSuccess,
+} from "./SpecificationFormView";
 import { EditSpecificationNotFound } from "./components/EditSpecificationNotFound";
 import { useSpecification } from "./hooks/useSpecification";
 import { Specification } from "./types";
@@ -14,15 +18,21 @@ interface ContainerProps {
 export const SpecificationContainer: FC<ContainerProps> = ({
     specificationId,
 }) => {
+    const router = useRouter();
     const { getSpecification, fetching } = useSpecification();
-    const foundSpecification = specificationId
-        ? getSpecification(specificationId)
-        : undefined;
+    const foundSpecification = getSpecification(specificationId!);
 
     const displayLoader = isNotNilOrEmpty(specificationId) && fetching;
     const showNotFoundSpec =
         isNotNilOrEmpty(specificationId) && !fetching && !foundSpecification;
 
+    const onSuccess: SpecificationFormViewOnSuccess = useCallback(
+        ({ formMode }) => {
+            if (formMode === "EDITION") router.push("/specifications");
+        },
+        [router],
+    );
+
     if (displayLoader)
         return (
             <Center>
@@ -33,5 +43,10 @@ export const SpecificationContainer: FC<ContainerProps> = ({
     if (showNotFoundSpec)
         return <EditSpecificationNotFound id={specificationId!} />;
 
-    return <SpecificationFormView specification={foundSpecification} />;
+    return (
+        <SpecificationFormView
+            specification={foundSpecification}
+            onSuccess={onSuccess}
+        />
+    );
 };

apps/web/src/components/specification/SpecificationFormView.tsx

@@ -8,14 +8,18 @@ import {
     Stack,
 } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
-import { useRouter } from "next/navigation";
 import { propOr } from "ramda";
-import { isNilOrEmpty, isNotNilOrEmpty } from "ramda-adjunct";
+import { isFunction, isNilOrEmpty, isNotNilOrEmpty } from "ramda-adjunct";
 import { FC, useCallback, useState } from "react";
 import { TbLayoutColumns, TbLayoutList } from "react-icons/tb";
 import { DecodingPreview } from "./components/DecodingPreview";
 import { SpecificationForm } from "./form/SpecificationForm";
-import { SpecFormProvider, SpecFormValues, useSpecForm } from "./form/context";
+import {
+    FormMode,
+    SpecFormProvider,
+    SpecFormValues,
+    useSpecForm,
+} from "./form/context";
 import {
     specABIValidation,
     specAbiParamValidation,
@@ -49,12 +53,17 @@ const getInitialValues = (spec?: Specification): SpecFormValues => {
     return values;
 };
 
+type SuccessData = { spec: Specification; formMode: FormMode };
+export type SpecificationFormViewOnSuccess = (data: SuccessData) => void;
 interface ViewProps {
     specification?: Specification;
+    onSuccess?: SpecificationFormViewOnSuccess;
 }
 
-export const SpecificationFormView: FC<ViewProps> = ({ specification }) => {
-    const router = useRouter();
+export const SpecificationFormView: FC<ViewProps> = ({
+    specification,
+    onSuccess,
+}) => {
     const [layout, setLayout] = useState<Layout>("split_screen");
     const colSpan = layout === "split_screen" ? 6 : 12;
     const form = useSpecForm({
@@ -71,7 +80,7 @@ export const SpecificationFormView: FC<ViewProps> = ({ specification }) => {
     });
     const { formMode } = form.getTransformedValues();
 
-    const onSuccess = useCallback(
+    const onFinished = useCallback(
         (spec: Specification) => {
             const isEditionMode = formMode === "EDITION";
             const action = isEditionMode ? "Updated!" : "Saved!";
@@ -84,9 +93,9 @@ export const SpecificationFormView: FC<ViewProps> = ({ specification }) => {
                 message,
             });
 
-            if (isEditionMode) router.push("/specifications");
+            isFunction(onSuccess) && onSuccess({ formMode, spec });
         },
-        [formMode, router],
+        [formMode, onSuccess],
     );
 
     const onFailure = useCallback((reason: Error) => {
@@ -134,7 +143,7 @@ export const SpecificationFormView: FC<ViewProps> = ({ specification }) => {
                 <Grid>
                     <GridCol span={colSpan}>
                         <SpecificationForm
-                            onSuccess={onSuccess}
+                            onSuccess={onFinished}
                             onFailure={onFailure}
                         />
                     </GridCol>

apps/web/src/components/specification/form/SpecificationForm.tsx

@@ -10,7 +10,6 @@ import { FC, useCallback, useEffect, useRef, useState } from "react";
 
 import { useScrollIntoView } from "@mantine/hooks";
 import { formatAbi } from "abitype";
-import { useRouter } from "next/navigation";
 import { clone, pathOr, propOr } from "ramda";
 import { isFunction, isNotNilOrEmpty } from "ramda-adjunct";
 import { Abi } from "viem";
@@ -76,7 +75,6 @@ export const SpecificationForm: FC<SpecificationFormProps> = ({
     onSuccess,
 }) => {
     const [submitting, setSubmitting] = useState(false);
-    const router = useRouter();
     const { addSpecification, updateSpecification } = useSpecification();
     const form = useSpecFormContext();
     const transformedValues = form.getTransformedValues();