chore(compass-aggregations): refactors project form, removes the improper use of useEffect (#4352)

Author: himanshusinghs

packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/project/project.spec.tsx

@@ -144,20 +144,25 @@ describe('project', function () {
       context(`when variant is ${variant}`, function () {
         it('should return correct project stage for provided form state', function () {
           const op = variant === 'exclude' ? 0 : 1;
-          expect(mapProjectFormStateToStageValue(variant, [])).to.deep.equal(
-            {}
-          );
+          expect(
+            mapProjectFormStateToStageValue({
+              projectionType: variant,
+              projectionFields: [],
+            })
+          ).to.deep.equal({});
 
           expect(
-            mapProjectFormStateToStageValue(variant, ['field1', 'field2'])
+            mapProjectFormStateToStageValue({
+              projectionType: variant,
+              projectionFields: ['field1', 'field2'],
+            })
           ).to.deep.equal({ field1: op, field2: op });
 
           expect(
-            mapProjectFormStateToStageValue(variant, [
-              'field1',
-              'field2',
-              'field1',
-            ])
+            mapProjectFormStateToStageValue({
+              projectionType: variant,
+              projectionFields: ['field1', 'field2', 'field1'],
+            })
           ).to.deep.equal({ field1: op, field2: op });
         });
       });

packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/project/project.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import {
   ComboboxWithCustomOption,
@@ -10,27 +10,34 @@ import {
 import type { WizardComponentProps } from '..';
 
 // Types
-type ProjectFormState = string[];
+type ProjectionFields = string[];
 export type ProjectionType = 'include' | 'exclude';
+type ProjectFormState = {
+  projectionFields: ProjectionFields;
+  projectionType: ProjectionType;
+};
 
 // Helpers
 export const SELECT_PLACEHOLDER_TEXT = 'Select projection type';
 export const COMBOBOX_PLACEHOLDER_TEXT = 'Select field names';
 
-export const mapProjectFormStateToStageValue = (
-  projectionType: ProjectionType,
-  formState: ProjectFormState
-) => {
-  return formState.reduce<{ [field: string]: 1 | 0 }>((projection, field) => {
-    if (field === null) {
-      return projection;
-    } else {
-      return {
-        ...projection,
-        [field]: projectionType === 'include' ? 1 : 0,
-      };
-    }
-  }, {});
+export const mapProjectFormStateToStageValue = ({
+  projectionFields,
+  projectionType,
+}: ProjectFormState) => {
+  return projectionFields.reduce<{ [field: string]: 1 | 0 }>(
+    (projection, field) => {
+      if (field === null) {
+        return projection;
+      } else {
+        return {
+          ...projection,
+          [field]: projectionType === 'include' ? 1 : 0,
+        };
+      }
+    },
+    {}
+  );
 };
 
 // Generates parent paths for a list of paths
@@ -96,27 +103,29 @@ const comboboxStyles = css({ width: '350px' });
 
 const ProjectForm = ({ fields, onChange }: WizardComponentProps) => {
   const fieldNames = useMemo(() => fields.map(({ name }) => name), [fields]);
-  const [projectionType, setProjectionType] =
-    useState<ProjectionType>('include');
-  const [projectFields, setProjectFields] = useState<ProjectFormState>([]);
-
-  useEffect(() => {
-    const stageValue = mapProjectFormStateToStageValue(
-      projectionType,
-      projectFields
-    );
 
+  const [projectFormState, setProjectFormState] = useState<ProjectFormState>({
+    projectionType: 'include',
+    projectionFields: [],
+  });
+
+  const handleProjectFormStateChange = <T extends keyof ProjectFormState>(
+    property: T,
+    value: ProjectFormState[T]
+  ) => {
+    const nextProjectState = {
+      ...projectFormState,
+      [property]: value,
+    };
+    setProjectFormState(nextProjectState);
+
+    const stageValue = mapProjectFormStateToStageValue(nextProjectState);
     onChange(
       JSON.stringify(stageValue),
       Object.keys(stageValue).length === 0
         ? new Error('No field selected')
         : null
     );
-  }, [projectFields, onChange, projectionType]);
-
-  const onSelectField = (value: string[]) => {
-    const nextProjectFields = [...value];
-    setProjectFields(nextProjectFields);
   };
 
   return (
@@ -128,8 +137,13 @@ const ProjectForm = ({ fields, onChange }: WizardComponentProps) => {
           className={selectStyles}
           allowDeselect={false}
           aria-label={SELECT_PLACEHOLDER_TEXT}
-          value={projectionType}
-          onChange={(value) => setProjectionType(value as ProjectionType)}
+          value={projectFormState.projectionType}
+          onChange={(value) =>
+            handleProjectFormStateChange(
+              'projectionType',
+              value as ProjectionType
+            )
+          }
         >
           <Option value="include">Include</Option>
           <Option value="exclude">Exclude</Option>
@@ -142,12 +156,16 @@ const ProjectForm = ({ fields, onChange }: WizardComponentProps) => {
           size="default"
           clearable={true}
           multiselect={true}
-          value={projectFields}
-          onChange={onSelectField}
+          value={projectFormState.projectionFields}
+          onChange={(fields) =>
+            handleProjectFormStateChange('projectionFields', [...fields])
+          }
           options={fieldNames}
           optionLabel="Field:"
           overflow="scroll-x"
-          isOptionDisabled={makeIsOptionDisabled(projectFields)}
+          isOptionDisabled={makeIsOptionDisabled(
+            projectFormState.projectionFields
+          )}
           // Used for testing to access the popover for a stage
           popoverClassName="project-form-field-combobox"
         />