jason-rails 0.3.0 → 0.4.0

data/client/lib/deepCamelizeKeys.d.ts

@@ -0,0 +1 @@
+export default function deepCamelizeKeys(item: any, excludeIf?: (k: any) => boolean): any;

data/client/lib/deepCamelizeKeys.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+function deepCamelizeKeys(item, excludeIf = k => false) {
+    function camelizeKey(key) {
+        if (excludeIf(key))
+            return key;
+        return lodash_1.default.camelCase(key);
+    }
+    if (lodash_1.default.isArray(item)) {
+        return lodash_1.default.map(item, item => deepCamelizeKeys(item, excludeIf));
+    }
+    else if (lodash_1.default.isObject(item)) {
+        return lodash_1.default.mapValues(lodash_1.default.mapKeys(item, (v, k) => camelizeKey(k)), (v, k) => deepCamelizeKeys(v, excludeIf));
+    }
+    else {
+        return item;
+    }
+}
+exports.default = deepCamelizeKeys;

data/client/lib/deepCamelizeKeys.test.d.ts

@@ -0,0 +1 @@
+export {};

data/client/lib/deepCamelizeKeys.test.js

@@ -0,0 +1,106 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const deepCamelizeKeys_1 = __importDefault(require("./deepCamelizeKeys"));
+test('scalar number', () => {
+    expect(deepCamelizeKeys_1.default(1)).toBe(1);
+});
+test('scalar number float', () => {
+    expect(deepCamelizeKeys_1.default(1.123)).toBe(1.123);
+});
+test('scalar string', () => {
+    expect(deepCamelizeKeys_1.default('test')).toBe('test');
+});
+test('scalar null', () => {
+    expect(deepCamelizeKeys_1.default(null)).toBe(null);
+});
+test('scalar boolean', () => {
+    expect(deepCamelizeKeys_1.default(true)).toBe(true);
+});
+test('object with existing camelized keys', () => {
+    expect(deepCamelizeKeys_1.default({ testMe: 'test' })).toStrictEqual({ testMe: 'test' });
+});
+test('array with existing camelized keys', () => {
+    expect(deepCamelizeKeys_1.default([{ testMe: 'test' }, { testMe2: 'test' }])).toStrictEqual([{ testMe: 'test' }, { testMe2: 'test' }]);
+});
+test('object with mixed keys', () => {
+    expect(deepCamelizeKeys_1.default({ testMe: 'test', test_2: 'dog', test_me2: true })).toStrictEqual({ testMe: 'test', test2: 'dog', testMe2: true });
+});
+test('array with mixed keys', () => {
+    expect(deepCamelizeKeys_1.default([
+        { testMe: 'test', test_2: 'dog', test_me2: true },
+        { testMe3: 'test', test_3: 'dog', test_me4: true }
+    ])).toStrictEqual([
+        { testMe: 'test', test2: 'dog', testMe2: true },
+        { testMe3: 'test', test3: 'dog', testMe4: true }
+    ]);
+});
+test('nested with object at top level', () => {
+    expect(deepCamelizeKeys_1.default({
+        test_me: {
+            test_me2: {
+                test_me3: [
+                    { test_it_out: '49' },
+                    { test_fun: 'what' }
+                ]
+            }
+        }
+    })).toStrictEqual({
+        testMe: {
+            testMe2: {
+                testMe3: [
+                    { testItOut: '49' },
+                    { testFun: 'what' }
+                ]
+            }
+        }
+    });
+});
+test('nested with object at top level', () => {
+    expect(deepCamelizeKeys_1.default([{
+            test_me: {
+                test_me2: {
+                    test_me3: [
+                        { test_it_out: '49' },
+                        { test_fun: 'what' }
+                    ]
+                }
+            }
+        }, {
+            test_it52: 'what?'
+        }])).toStrictEqual([{
+            testMe: {
+                testMe2: {
+                    testMe3: [
+                        { testItOut: '49' },
+                        { testFun: 'what' }
+                    ]
+                }
+            }
+        }, {
+            testIt52: 'what?'
+        }]);
+});
+test('excludes keys by function', () => {
+    expect(deepCamelizeKeys_1.default({
+        test_me: {
+            test_me2: {
+                test_me3: [
+                    { test_it_out: '49' },
+                    { test_fun: 'what' }
+                ]
+            }
+        }
+    }, k => (k === 'test_me2'))).toStrictEqual({
+        testMe: {
+            test_me2: {
+                testMe3: [
+                    { testItOut: '49' },
+                    { testFun: 'what' }
+                ]
+            }
+        }
+    });
+});

data/client/lib/index.d.ts

@@ -1,10 +1,10 @@
 import _useAct from './useAct';
 import _useSub from './useSub';
 export declare const JasonProvider: ({ reducers, middleware, extraActions, children }: {
-    reducers: any;
-    middleware: any;
-    extraActions: any;
-    children: any;
+    reducers?: any;
+    middleware?: any;
+    extraActions?: any;
+    children?: any;
 }) => any;
 export declare const useAct: typeof _useAct;
 export declare const useSub: typeof _useSub;

data/client/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@jamesr2323/jason",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "test": "jest"
   },
   "dependencies": {
     "@rails/actioncable": "^6.0.3-4",
@@ -17,11 +19,22 @@
     "uuid": "^8.3.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-typescript": "^7.12.7",
+    "@reduxjs/toolkit": "^1.5.0",
+    "@types/jest": "^26.0.19",
+    "babel-jest": "^26.6.3",
+    "jest": "^26.6.3",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "react-redux": "^7.2.2",
     "typescript": "^4.1.2"
   },
   "peerDependencies": {
+    "@reduxjs/toolkit": "^1.5.0",
     "react": "^16.8.3",
-    "react-redux": "^7.2.2",
-    "@reduxjs/toolkit": "^1.5.0"
+    "react-dom": "^16.8.3",
+    "react-redux": "^7.2.2"
   }
 }

data/client/src/JasonProvider.tsx

@@ -7,26 +7,54 @@ import { Provider } from 'react-redux'
 import { createEntityAdapter, createSlice, createReducer, configureStore } from '@reduxjs/toolkit'
 import createJasonReducers from './createJasonReducers'
 import createPayloadHandler from './createPayloadHandler'
+import createOptDis from './createOptDis'
 import makeEager from './makeEager'
 import { camelizeKeys } from 'humps'
 import md5 from 'blueimp-md5'
 import _ from 'lodash'
 import React, { useState, useEffect } from 'react'
+import { validate as isUuid } from 'uuid'
 
-const JasonProvider = ({ reducers, middleware, extraActions, children }) => {
+const JasonProvider = ({ reducers, middleware, extraActions, children }: { reducers?: any, middleware?: any, extraActions?: any, children?: React.FC }) => {
   const [store, setStore] = useState(null)
   const [value, setValue] = useState(null)
   const [connected, setConnected] = useState(false)
 
   const csrfToken = (document.querySelector("meta[name=csrf-token]") as any).content
   axios.defaults.headers.common['X-CSRF-Token'] = csrfToken
-  const restClient = applyCaseMiddleware(axios.create())
+  const restClient = applyCaseMiddleware(axios.create(), {
+    preservedKeys: (key) => {
+      return isUuid(key)
+    }
+  })
 
   useEffect(() => {
     restClient.get('/jason/api/schema')
     .then(({ data: snakey_schema }) => {
       const schema = camelizeKeys(snakey_schema)
 
+      const serverActionQueue = function() {
+        const queue: any[] = []
+        let inFlight = false
+
+        return {
+          addItem: (item) => queue.push(item),
+          getItem: () => {
+            if (inFlight) return false
+
+            const item = queue.shift()
+            if (item) {
+              inFlight = true
+              return item
+            }
+            return false
+          },
+          itemProcessed: () => inFlight = false,
+          fullySynced: () => queue.length === 0 && !inFlight,
+          getData: () => ({ queue, inFlight })
+        }
+      }()
+
       const consumer = createConsumer()
       const allReducers = {
         ...reducers,
@@ -67,7 +95,7 @@ const JasonProvider = ({ reducers, middleware, extraActions, children }) => {
         console.log('Subscribe with', config, md5Hash)
 
         _.map(config, (v, model) => {
-          payloadHandlers[`${model}:${md5Hash}`] = createPayloadHandler(store.dispatch, subscription, model, schema[model])
+          payloadHandlers[`${model}:${md5Hash}`] = createPayloadHandler(store.dispatch, serverActionQueue, subscription, model, schema[model])
         })
         subscription.send({ createSubscription: config })
 
@@ -81,8 +109,8 @@ const JasonProvider = ({ reducers, middleware, extraActions, children }) => {
           delete payloadHandlers[`${model}:${md5Hash}`]
         })
       }
-
-      const actions = createActions(schema, store, restClient, extraActions)
+      const optDis = createOptDis(schema, store.dispatch, restClient, serverActionQueue)
+      const actions = createActions(schema, store, restClient, optDis, extraActions)
       const eager = makeEager(schema)
 
       console.log({ actions })

data/client/src/actionFactory.ts

@@ -24,7 +24,7 @@ export default (dis, store, entity, { extraActions = {}, hasPriority = false } =
     return dis({ type: `${pluralize(entity)}/remove`, payload: id })
   }
 
-  const extraActionsResolved = _.mapValues(extraActions, v => v(dis, store, entity))
+  const extraActionsResolved = extraActions ? _.mapValues(extraActions, v => v(dis, store, entity)) : {}
 
   if (hasPriority) {
     return { add, upsert, setAll, remove, movePriority, ...extraActionsResolved }

data/client/src/createActions.ts

@@ -1,39 +1,8 @@
 import actionFactory from './actionFactory'
 import pluralize from 'pluralize'
 import _ from 'lodash'
-import { v4 as uuidv4 } from 'uuid'
-
-function enrich(type, payload) {
-  if (type.split('/')[1] === 'upsert' && !(type.split('/')[0] === 'session')) {
-    if (!payload.id) {
-      return { ...payload, id: uuidv4() }
-    }
-  }
-  return payload
-}
-
-function makeOptDis(schema, dispatch, restClient) {
-  const plurals = _.keys(schema).map(k => pluralize(k))
-
-  return function (action) {
-    const { type, payload } = action
-    const data = enrich(type, payload)
-
-    dispatch(action)
-
-    if (plurals.indexOf(type.split('/')[0]) > -1) {
-      return restClient.post('/jason/api/action', { type, payload: data } )
-        .catch(e => {
-          dispatch({ type: 'upsertLocalUi', data: { error: JSON.stringify(e) } })
-        })
-    }
-  }
-}
-
-function createActions(schema, store, restClient, extraActions) {
-  const dis = store.dispatch;
-  const optDis = makeOptDis(schema, dis, restClient)
 
+function createActions(schema, store, restClient, optDis, extraActions) {
   const actions =  _.fromPairs(_.map(schema, (config, model: string) => {
     if (config.priorityScope) {
       return [pluralize(model), actionFactory(optDis, store, model, { hasPriority: true })]
@@ -42,7 +11,7 @@ function createActions(schema, store, restClient, extraActions) {
     }
   }))
 
-  const extraActionsResolved = extraActions(optDis, store, restClient)
+  const extraActionsResolved = extraActions ? extraActions(optDis, store, restClient, actions) : {}
 
   return _.merge(actions, extraActionsResolved)
 }

data/client/src/createJasonReducers.ts

@@ -16,6 +16,7 @@ function generateSlices(schema) {
         add: adapter.addOne,
         setAll: adapter.setAll,
         remove: adapter.removeOne,
+        removeMany: adapter.removeMany,
         movePriority: (s, { payload: { id, priority, parentFilter } }) => {
           // Get IDs and insert our item at the new index
           var affectedIds = _.orderBy(_.filter(_.values(s.entities), parentFilter).filter(e => e.id !== id), 'priority').map(e => e.id)

data/client/src/createOptDis.ts

@@ -0,0 +1,47 @@
+import _ from 'lodash'
+import pluralize from 'pluralize'
+import { v4 as uuidv4 } from 'uuid'
+
+function enrich(type, payload) {
+  if (type.split('/')[1] === 'upsert' && !(type.split('/')[0] === 'session')) {
+    if (!payload.id) {
+      return { ...payload, id: uuidv4() }
+    }
+  }
+  return payload
+}
+
+export default function createOptDis(schema, dispatch, restClient, serverActionQueue) {
+  const plurals = _.keys(schema).map(k => pluralize(k))
+  let inFlight = false
+
+  function enqueueServerAction (action) {
+    serverActionQueue.addItem(action)
+  }
+
+  function dispatchServerAction() {
+    const action = serverActionQueue.getItem()
+    if (!action) return
+
+    inFlight = true
+    restClient.post('/jason/api/action', action)
+    .then(serverActionQueue.itemProcessed)
+    .catch(e => {
+      dispatch({ type: 'upsertLocalUi', data: { error: JSON.stringify(e) } })
+      serverActionQueue.itemProcessed()
+    })
+  }
+
+  setInterval(dispatchServerAction, 10)
+
+  return function (action) {
+    const { type, payload } = action
+    const data = enrich(type, payload)
+
+    dispatch({ type, payload: data })
+
+    if (plurals.indexOf(type.split('/')[0]) > -1) {
+      enqueueServerAction({ type, payload: data })
+    }
+  }
+}

data/client/src/createPayloadHandler.ts

@@ -1,16 +1,18 @@
 import { apply_patch } from 'jsonpatch'
-import { camelizeKeys } from 'humps'
+import deepCamelizeKeys from './deepCamelizeKeys'
 import pluralize from 'pluralize'
 import _ from 'lodash'
+import { validate as isUuid } from 'uuid'
 
 function diffSeconds(dt2, dt1) {
   var diff =(dt2.getTime() - dt1.getTime()) / 1000
   return Math.abs(Math.round(diff))
 }
 
-export default function createPayloadHandler(dispatch, subscription, model, config) {
+export default function createPayloadHandler(dispatch, serverActionQueue, subscription, model, config) {
   console.log({ model, config })
-  let payload = {}
+  let payload = [] as any[]
+  let previousPayload = [] as any[]
   let idx = 0
   let patchQueue = {}
 
@@ -23,20 +25,40 @@ export default function createPayloadHandler(dispatch, subscription, model, conf
     subscription.send({ getPayload: { model, config } })
   }
 
+  function camelizeKeys(item) {
+    return deepCamelizeKeys(item, key => isUuid(key))
+  }
+
   const tGetPayload = _.throttle(getPayload, 10000)
 
   function dispatchPayload() {
+    // We want to avoid updates from server overwriting changes to local state, so if there is a queue then wait.
+    if (!serverActionQueue.fullySynced()) {
+      console.log(serverActionQueue.getData())
+      setTimeout(dispatchPayload, 100)
+      return
+    }
+
     const includeModels = (config.includeModels || []).map(m => _.camelCase(m))
 
     console.log("Dispatching", { payload, includeModels })
 
     includeModels.forEach(m => {
       const subPayload = _.flatten(_.compact(camelizeKeys(payload).map(instance => instance[m])))
-      console.log({ type: `${pluralize(m)}/upsertMany`, payload: subPayload })
+      const previousSubPayload = _.flatten(_.compact(camelizeKeys(previousPayload).map(instance => instance[m])))
+
+      // Find IDs that were in the payload but are no longer
+      const idsToRemove = _.difference(previousSubPayload.map(i => i.id), subPayload.map(i => i.id))
+
       dispatch({ type: `${pluralize(m)}/upsertMany`, payload: subPayload })
+      dispatch({ type: `${pluralize(m)}/removeMany`, payload: idsToRemove })
     })
 
+    const idsToRemove = _.difference(previousPayload.map(i => i.id), payload.map(i => i.id))
+
     dispatch({ type: `${pluralize(model)}/upsertMany`, payload: camelizeKeys(payload) })
+    dispatch({ type: `${pluralize(model)}/removeMany`, payload: idsToRemove })
+    previousPayload = payload
   }
 
   function processQueue() {