Merge pull request #405 from keen/refactor/filters-serialize

Refactor Schema Serialize

lib/js/app/queryCreator/modules/events/actions.ts

@@ -4,15 +4,27 @@ import {
   FETCH_COLLECTION_SCHEMA,
   FETCH_COLLECTION_SCHEMA_ERROR,
   FETCH_COLLECTION_SCHEMA_SUCCESS,
+  SCHEMA_COMPUTED,
 } from './constants';
 
-import { EventsActions } from './types';
+import { EventsActions, CollectionSchema } from './types';
 
 export const setEventsCollections = (collections: string[]): EventsActions => ({
   type: SET_EVENTS_COLLECTIONS,
   payload: { collections },
 });
 
+export const computeSchemaSuccess = (
+  collection: string,
+  schema: Partial<CollectionSchema>
+): EventsActions => ({
+  type: SCHEMA_COMPUTED,
+  payload: {
+    collection,
+    schema,
+  },
+});
+
 export const setCollectionSchemaLoading = (
   colletion: string,
   isLoading: boolean

lib/js/app/queryCreator/modules/events/constants.ts

@@ -7,3 +7,4 @@ export const FETCH_COLLECTION_SCHEMA_ERROR =
   '@query-creator/FETCH_COLLECTION_SCHEMA_ERROR';
 export const SET_COLLETION_SCHEMA_LOADING =
   '@query-creator/SET_COLLETION_SCHEMA_LOADING';
+export const SCHEMA_COMPUTED = '@query-creator/SCHEMA_COMPUTED';

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

@@ -5,6 +5,7 @@ import {
   fetchCollectionSchema,
   fetchCollectionSchemaSuccess,
   fetchCollectionSchemaError,
+  computeSchemaSuccess,
 } from './actions';
 import {
   getEventsCollections,
@@ -15,6 +16,7 @@ import {
 import {
   FETCH_COLLECTION_SCHEMA,
   FETCH_COLLECTION_SCHEMA_SUCCESS,
+  SCHEMA_COMPUTED,
 } from './constants';
 import { ReducerState, FetchCollectionSchemaAction } from './types';
 
@@ -30,7 +32,12 @@ export {
   getCollectionSchema,
   getSchemas,
   getSchemaLoading,
+  computeSchemaSuccess,
   ReducerState,
   FetchCollectionSchemaAction,
 };
-export { FETCH_COLLECTION_SCHEMA, FETCH_COLLECTION_SCHEMA_SUCCESS };
+export {
+  FETCH_COLLECTION_SCHEMA,
+  FETCH_COLLECTION_SCHEMA_SUCCESS,
+  SCHEMA_COMPUTED,
+};

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

@@ -1,12 +1,10 @@
 import { ReducerState, EventsActions } from './types';
 
-import { createTree } from '../../utils/createTree';
-import { createCollection } from '../../utils/createCollection';
-
 import {
   SET_EVENTS_COLLECTIONS,
   SET_COLLETION_SCHEMA_LOADING,
   FETCH_COLLECTION_SCHEMA_SUCCESS,
+  SCHEMA_COMPUTED,
 } from './constants';
 
 export const initialState: ReducerState = {
@@ -29,15 +27,27 @@ export const eventsReducer = (
               (collection) => collection !== action.payload.colletion
             ),
       };
+    case SCHEMA_COMPUTED:
+      return {
+        ...state,
+        schemas: {
+          ...state.schemas,
+          [action.payload.collection]: {
+            ...state.schemas[action.payload.collection],
+            ...action.payload.schema,
+          },
+        },
+      };
     case FETCH_COLLECTION_SCHEMA_SUCCESS:
       return {
         ...state,
         schemas: {
           ...state.schemas,
           [action.payload.collection]: {
+            ...state.schemas[action.payload.collection],
             schema: action.payload.schema,
-            tree: createTree(action.payload.schema),
-            list: createCollection(action.payload.schema),
+            tree: {},
+            list: {},
           },
         },
       };

lib/js/app/queryCreator/modules/events/types.ts

@@ -4,6 +4,7 @@ import {
   FETCH_COLLECTION_SCHEMA_ERROR,
   FETCH_COLLECTION_SCHEMA_SUCCESS,
   SET_COLLETION_SCHEMA_LOADING,
+  SCHEMA_COMPUTED,
 } from './constants';
 
 export type CollectionSchema = {
@@ -18,6 +19,14 @@ export type ReducerState = {
   schemas: Record<string, CollectionSchema>;
 };
 
+export interface SchemaComputedAction {
+  type: typeof SCHEMA_COMPUTED;
+  payload: {
+    collection: string;
+    schema: Partial<CollectionSchema>;
+  };
+}
+
 export interface SetCollectionSchemaLoadingAction {
   type: typeof SET_COLLETION_SCHEMA_LOADING;
   payload: {
@@ -60,4 +69,5 @@ export type EventsActions =
   | SetEventsCollectionsAction
   | FetchCollectionSchemaAction
   | FetchCollectionSchemaSuccessAction
-  | FetchCollectionSchemaErrorAction;
+  | FetchCollectionSchemaErrorAction
+  | SchemaComputedAction;

lib/js/app/queryCreator/saga.ts

@@ -6,6 +6,7 @@ import {
   takeLatest,
   getContext,
   fork,
+  take,
   put,
 } from 'redux-saga/effects';
 import moment from 'moment-timezone';
@@ -51,12 +52,17 @@ import {
   setEventsCollections,
   setCollectionSchemaLoading,
   getSchemas,
+  computeSchemaSuccess,
   FETCH_COLLECTION_SCHEMA_SUCCESS,
   FETCH_COLLECTION_SCHEMA,
+  SCHEMA_COMPUTED,
 } from './modules/events';
 
 import { serializeOrderBy, serializeFilters } from './serializers';
 
+import { createTree } from './utils/createTree';
+import { createCollection } from './utils/createCollection';
+
 import { Filter, OrderBy } from './types';
 import { SetGroupByAction } from './modules/query/types';
 
@@ -83,6 +89,21 @@ function* fetchProject() {
   }
 }
 
+function* transformSchema(
+  collection: string,
+  properties: Record<string, string>
+) {
+  const tree = yield createTree(properties);
+  const list = yield createCollection(properties);
+
+  const schema = {
+    tree,
+    list,
+  };
+
+  yield put(computeSchemaSuccess(collection, schema));
+}
+
 function* fetchSchema(action: FetchCollectionSchemaAction) {
   const collection = action.payload.collection;
   const client = yield getContext('keenClient');
@@ -96,6 +117,7 @@ function* fetchSchema(action: FetchCollectionSchemaAction) {
     const { properties } = yield fetch(url).then((response) => response.json());
 
     yield put(fetchCollectionSchemaSuccess(collection, properties));
+    yield fork(transformSchema, collection, properties);
   } catch (err) {
     yield put(fetchCollectionSchemaError(err));
   } finally {
@@ -149,16 +171,18 @@ function* storeEventSchemas() {
 }
 
 function* transformFilters(collection: string, filters: Filter[]) {
-  const schemas = yield select(getSchemas);
+  let schemas = yield select(getSchemas);
   let collectionSchema = schemas[collection];
 
   if (!collectionSchema) {
-    const client = yield getContext('keenClient');
-    const url = client.url(`/3.0/projects/{projectId}/events/${collection}`, {
-      api_key: client.config.readKey,
-    });
-    const { properties } = yield fetch(url).then((response) => response.json());
-    collectionSchema = { schema: properties };
+    while (true) {
+      yield take(FETCH_COLLECTION_SCHEMA_SUCCESS);
+      schemas = yield select(getSchemas);
+      if (schemas[collection]) {
+        collectionSchema = schemas[collection];
+        break;
+      }
+    }
   }
 
   const { schema } = collectionSchema;
@@ -260,7 +284,7 @@ function* watcher() {
   yield takeLatest(FETCH_COLLECTION_SCHEMA, fetchSchema);
   yield takeLatest(SELECT_TIMEZONE, selectTimezone);
   yield takeLatest(SELECT_EVENT_COLLECTION, selectCollection);
-  yield takeLatest(FETCH_COLLECTION_SCHEMA_SUCCESS, storeEventSchemas);
+  yield takeLatest(SCHEMA_COMPUTED, storeEventSchemas);
   yield takeLatest(
     SELECT_FUNNEL_STEP_EVENT_COLLECTION,
     selectFunnelStepCollection