fix: 🐛 steps order

lib/js/app/components/Editor/Editor.tsx

@@ -50,6 +50,7 @@ const Editor: FC<Props> = ({
   const isQueryLimitReached = useSelector(getQueryLimitReached);
 
   const updateQuery = useCallback((query: Record<string, any>) => {
+    console.log(query, 'QUERY UPDATE');
     dispatch(setQuerySettings(query));
   }, []);
 

lib/js/app/queryCreator/modules/query/index.ts

@@ -63,6 +63,8 @@ import {
   SELECT_FUNNEL_STEP_EVENT_COLLECTION,
   DEFAULT_TIMEZONE,
   DEFAULT_TIMEFRAME,
+  DEFAULT_FUNNEL_STEP,
+  DEFAULT_FILTER,
   SERIALIZE_QUERY,
   UPDATE_FUNNEL_STEP_TIMEZONE,
 } from './constants';
@@ -147,5 +149,7 @@ export {
   SELECT_FUNNEL_STEP_EVENT_COLLECTION,
   DEFAULT_TIMEFRAME,
   DEFAULT_TIMEZONE,
+  DEFAULT_FUNNEL_STEP,
+  DEFAULT_FILTER,
   UPDATE_FUNNEL_STEP_TIMEZONE,
 };

lib/js/app/queryCreator/modules/query/reducer.test.ts

@@ -14,6 +14,7 @@ import {
   addFunnelStep,
   cloneFunnelStep,
   addFunnelStepFilter,
+  changeFunnelStepsOrder,
   updateFunnelStepFilter,
   updateFunnelStepTimezone,
   removeFunnelStepFilter,
@@ -367,6 +368,31 @@ test('remove funnel step filter', () => {
   expect(steps).toMatchSnapshot();
 });
 
+test('updates funnel steps order', () => {
+  const funnelSteps = [
+    {
+      ...DEFAULT_FUNNEL_STEP,
+      eventCollection: 'purchases',
+      id: 'id2',
+      inverted: true,
+      optional: true,
+    },
+    {
+      ...DEFAULT_FUNNEL_STEP,
+      eventCollection: 'clicks',
+      id: 'id1',
+    },
+  ];
+
+  const action = changeFunnelStepsOrder(funnelSteps);
+  const { steps } = queryReducer(initialState, action);
+
+  const [firstStep] = steps;
+
+  expect(firstStep.inverted).toBeFalsy();
+  expect(firstStep.optional).toBeFalsy();
+});
+
 test('update funnel step timezone', () => {
   const stepsState = {
     steps: [

lib/js/app/queryCreator/modules/query/reducer.ts

@@ -63,8 +63,6 @@ export const queryReducer = (
   state: ReducerState = initialState,
   action: QueryActions
 ) => {
-  console.log(action, 'sasaas');
-
   switch (action.type) {
     case ADD_FILTER:
       return {
@@ -187,8 +185,21 @@ export const queryReducer = (
             })),
         ],
       };
-    case SET_FUNNEL_STEPS:
     case CHANGE_FUNNEL_STEPS_ORDER:
+      return {
+        ...state,
+        steps: action.payload.steps.map((step, idx) => {
+          if (idx === 0) {
+            return {
+              ...step,
+              inverted: false,
+              optional: false,
+            };
+          }
+          return step;
+        }),
+      };
+    case SET_FUNNEL_STEPS:
       return {
         ...state,
         steps: action.payload.steps,

lib/js/app/queryCreator/saga.ts

@@ -245,7 +245,7 @@ function* serializeQuery(action: SetQueryAction) {
     if (stepsFilters && stepsFilters.length) {
       yield all(
         stepsFilters.map(({ eventCollection, filters, id }) =>
-          spawn(transformStepFilters, eventCollection, filters, id)
+          fork(transformStepFilters, eventCollection, filters, id)
         )
       );
     }

lib/js/app/queryCreator/serializers/funnelSteps.test.ts

@@ -0,0 +1,61 @@
+import { serializeFunnelSteps } from './funnelSteps';
+
+import { DEFAULT_FUNNEL_STEP } from '../modules/query';
+
+import { FunnelStep } from '../types';
+
+jest.mock('uuid', () => {
+  return {
+    v4: jest.fn(() => 'id'),
+  };
+});
+
+test('serializes funnel steps', () => {
+  const steps: FunnelStep[] = [
+    {
+      ...DEFAULT_FUNNEL_STEP,
+      eventCollection: 'purchases',
+      actorProperty: 'user.id',
+      filters: [
+        {
+          propertyName: 'keen.id',
+          operator: 'eq',
+          propertyValue: '10',
+        },
+      ],
+    },
+  ];
+
+  const result = serializeFunnelSteps(steps);
+
+  expect(result).toMatchInlineSnapshot(`
+    Object {
+      "stepsFilters": Array [
+        Object {
+          "eventCollection": "purchases",
+          "filters": Array [
+            Object {
+              "operator": "eq",
+              "propertyName": "keen.id",
+              "propertyValue": "10",
+            },
+          ],
+          "id": "id",
+        },
+      ],
+      "transformedSteps": Array [
+        Object {
+          "actorProperty": "user.id",
+          "eventCollection": "purchases",
+          "filters": Array [],
+          "id": "id",
+          "inverted": false,
+          "optional": false,
+          "timeframe": "this_14_days",
+          "timezone": undefined,
+          "withActors": false,
+        },
+      ],
+    }
+  `);
+});