refactor: streamline URL handling and improve state management in For…

…mField and withMapper components
qoretechnologies · Dec 25, 2024 · ea9d707 · ea9d707
1 parent 5c4011d
commit ea9d707
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 265 deletions.
diff --git a/src/components/Field/FormField.tsx b/src/components/Field/FormField.tsx
@@ -1,7 +1,8 @@
-import { memo, useCallback, useEffect, useState } from 'react';
+import { isEqual } from 'lodash';
+import { memo, useCallback, useState } from 'react';
+import { useUpdateEffect } from 'react-use';
 import Auto from './auto';
 import { IQorusType, ITemplateFieldProps, TemplateField } from './template';
-import { isEqual } from 'lodash';
 
 export interface IFormField extends ITemplateFieldProps {}
 
@@ -19,21 +20,21 @@ export const FormField = memo(
       value,
     });
 
-    useEffect(() => {
+    useUpdateEffect(() => {
       if (!isEqual(value, localValue.value)) {
         setLocalValue((prev) => ({ ...prev, value }));
       }
     }, [JSON.stringify(value)]);
 
-    useEffect(() => {
+    useUpdateEffect(() => {
       setLocalValue((prev) => ({ ...prev, type, isFunction }));
     }, [type, isFunction]);
 
-    useEffect(() => {
+    useUpdateEffect(() => {
       if (!isEqual(value, localValue.value)) {
-        onChange?.(localValue?.name, localValue?.value, localValue?.type, localValue?.isFunction);
+        onChange?.(localValue.name, localValue.value, localValue.type, localValue.isFunction);
       }
-    }, [JSON.stringify(localValue)]);
+    }, [JSON.stringify(localValue), onChange]);
 
     const handleChange = useCallback((name, value, type, isFunction) => {
       setLocalValue({ name, value, type, isFunction });

diff --git a/src/components/Field/connectors/index.tsx b/src/components/Field/connectors/index.tsx
@@ -214,7 +214,7 @@ export const getUrlFromProvider: (
   const endsInSubtype = path.endsWith('/request') || path.endsWith('/response');
   const hasSubtype = subtype || endsInSubtype;
   const finalPath = hasSubtype
-    ? `${path.replace('/response', '').replace('/request', '')}${subtype}`
+    ? `${path.replace('/response', '').replace('/request', '')}${subtype ? `/${subtype}` : ''}`
     : path;
 
   // Build the suffix