refactor(events-web): improve useParameterValue hook for improved parameter handling

Author: yordan-st

packages/pluggableWidgets/events-web/src/Events.tsx

@@ -3,7 +3,7 @@ import { EditableValue } from "mendix";
 import { ReactElement, createElement, useRef } from "react";
 import { EventsContainerProps } from "../typings/EventsProps";
 import { useActionTimer } from "./hooks/timer";
-import { useDelayAndInterval } from "./hooks/delayAndInterval";
+import { useParameterValue } from "./hooks/parameterValue";
 import "./ui/Events.scss";
 
 export default function Events(props: EventsContainerProps): ReactElement {
@@ -25,16 +25,20 @@ export default function Events(props: EventsContainerProps): ReactElement {
     } = props;
     const prevOnChangeAttributeValue = useRef<EditableValue<any> | undefined>();
 
-    const [delayValue, intervalValue] = useDelayAndInterval({
-        componentLoadDelayParameterType,
-        componentLoadRepeatIntervalParameterType,
-        onEventChangeDelayParameterType,
-        componentLoadDelay,
-        componentLoadRepeatInterval,
-        onEventChangeDelay,
-        componentLoadRepeatIntervalExpression,
-        componentLoadDelayExpression,
-        onEventChangeDelayExpression
+    const delayValue = useParameterValue({
+        parameterType: componentLoadDelayParameterType,
+        parameterValue: componentLoadDelay,
+        parameterExpression: componentLoadDelayExpression
+    });
+    const intervalValue = useParameterValue({
+        parameterType: componentLoadRepeatIntervalParameterType,
+        parameterValue: componentLoadRepeatInterval,
+        parameterExpression: componentLoadRepeatIntervalExpression
+    });
+    const onEventChangeDelayValue = useParameterValue({
+        parameterType: onEventChangeDelayParameterType,
+        parameterValue: onEventChangeDelay,
+        parameterExpression: onEventChangeDelayExpression
     });
 
     useActionTimer({
@@ -60,7 +64,7 @@ export default function Events(props: EventsContainerProps): ReactElement {
                 }
             }
         },
-        delay: delayValue,
+        delay: onEventChangeDelayValue,
         interval: 0,
         repeat: false,
         attribute: onEventChangeAttribute

packages/pluggableWidgets/events-web/src/hooks/delayAndInterval.ts

@@ -32,6 +32,14 @@ export function useDelayAndInterval(props: ParameterTypeProps): [number | undefi
                 ? componentLoadDelayExpression.value.toNumber()
                 : undefined;
     }
+    if (onEventChangeDelayParameterType === "number") {
+        delayValue = onEventChangeDelay;
+    } else {
+        delayValue =
+            onEventChangeDelayExpression?.status === "available" && onEventChangeDelayExpression.value !== undefined
+                ? onEventChangeDelayExpression.value.toNumber()
+                : undefined;
+    }
     if (componentLoadRepeatIntervalParameterType === "number") {
         intervalValue = componentLoadRepeatInterval;
     } else {
@@ -41,13 +49,5 @@ export function useDelayAndInterval(props: ParameterTypeProps): [number | undefi
                 ? componentLoadRepeatIntervalExpression.value.toNumber()
                 : undefined;
     }
-    if (onEventChangeDelayParameterType === "number") {
-        delayValue = onEventChangeDelay;
-    } else {
-        delayValue =
-            onEventChangeDelayExpression?.status === "available" && onEventChangeDelayExpression.value !== undefined
-                ? onEventChangeDelayExpression.value.toNumber()
-                : undefined;
-    }
     return [delayValue, intervalValue];
 }

packages/pluggableWidgets/events-web/src/hooks/parameterValue.ts

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+
+interface parameterValueProps {
+    parameterType: "number" | "expression";
+    parameterValue: number | undefined;
+    parameterExpression: { status: string; value: { toNumber: () => number } | undefined } | undefined;
+}
+
+export function useParameterValue({
+    parameterType,
+    parameterValue,
+    parameterExpression
+}: parameterValueProps): number | undefined {
+    return useMemo(() => {
+        if (parameterType === "number") {
+            return parameterValue;
+        }
+
+        return parameterExpression?.status === "available" && parameterExpression.value !== undefined
+            ? parameterExpression.value.toNumber()
+            : undefined;
+    }, [parameterType, parameterValue, parameterExpression]);
+}