From 85c1733a5a123ddcde50582563566d3eed43bc5b Mon Sep 17 00:00:00 2001
From: Bart K <bartlomiej.ksiazek@icloud.com>
Date: Fri, 15 Nov 2024 09:27:28 +0100
Subject: [PATCH] fix(portal): env selection

---
 .../components/ActivityDiagrams/index.tsx     | 44 ++++++++++++-------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/kraken-app/kraken-app-portal/src/pages/HomePage/components/ActivityDiagrams/index.tsx b/kraken-app/kraken-app-portal/src/pages/HomePage/components/ActivityDiagrams/index.tsx
index 2e3c3afc..d5449e93 100644
--- a/kraken-app/kraken-app-portal/src/pages/HomePage/components/ActivityDiagrams/index.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/HomePage/components/ActivityDiagrams/index.tsx
@@ -53,13 +53,12 @@ const ActivityDiagrams = ({ envs }: Props) => {
   });
 
   const handleFormValues = useCallback(
-    (_: unknown, values: DiagramProps) => {
+    (values: DiagramProps) => {
       const { requestTime = [] } = values ?? {};
       if(requestTime?.[0]) {
         setSelectedRecentDate(undefined);
         setParams({
-          envId: values.envId || params.envId,
-          buyer: values.buyer || params.buyer,
+          ...params,
           requestStartTime: requestTime?.[0]
             ? dayjs(requestTime[0]).startOf("day").format(TIME_ZONE_FORMAT)
             : currentTime,
@@ -68,10 +67,24 @@ const ActivityDiagrams = ({ envs }: Props) => {
             : currentTime,
         });
       }
+      setParams({
+        ...params,
+        envId: values.envId || params.envId,
+        buyer: values.buyer || params.buyer,
+      })
+      
     },
     [setParams, params]
   );
 
+  const handleFormValuesChange = useCallback(
+    (t: any, values: any) => {
+      if (t.path) return;
+      handleFormValues(values);
+    },
+    [setParams]
+  );
+
   const envOptions = useMemo(() => {
     return (
       envs?.map((env) => ({
@@ -81,11 +94,16 @@ const ActivityDiagrams = ({ envs }: Props) => {
     );
   }, [envs]);
 
-  const setRecentDate = (e: RadioChangeEvent) => {
+  const setRecentDate = ({ target: { value } }: RadioChangeEvent) => {
     form.setFieldsValue({ requestTime: null });
-    const { requestStartTime, requestEndTime } = recentXDays(e.target.value);
-    setSelectedRecentDate(Number(e.target.value));
-    setParams({ ...params, requestStartTime, requestEndTime });
+    const { requestStartTime, requestEndTime } = recentXDays(value);
+
+    setSelectedRecentDate(Number(value));
+    setParams({
+      ...params,
+      requestStartTime,
+      requestEndTime,
+    });
   };
 
   return (
@@ -95,7 +113,7 @@ const ActivityDiagrams = ({ envs }: Props) => {
         form={form}
         layout="inline"
         colon={false}
-        onValuesChange={handleFormValues}
+        onValuesChange={handleFormValuesChange}
       >
         <Flex
           style={{ width: "100%", paddingBottom: "16px" }}
@@ -106,7 +124,7 @@ const ActivityDiagrams = ({ envs }: Props) => {
             <Text.BoldMedium>Activity diagrams</Text.BoldMedium>
             <Form.Item name="envId">
               <Select
-                value={params.envId}
+                value={form.getFieldValue("envId")}
                 options={envOptions}
                 popupMatchSelectWidth={false}
                 size="middle"
@@ -116,13 +134,7 @@ const ActivityDiagrams = ({ envs }: Props) => {
             </Form.Item>
             <Form.Item name="buyer">
               <Select
-                options={[
-                  {
-                    value: "all",
-                    label: "All buyers",
-                  },
-                ]}
-                value={params.buyer}
+                options={[{ value: "all", label: "All buyers" }]}
                 placeholder="All buyers"
                 popupMatchSelectWidth={false}
                 size="middle"