jason-rails 0.3.0 → 0.6.0

data/client/lib/useJason.d.ts

@@ -0,0 +1,5 @@
+export default function useJason({ reducers, middleware, extraActions }: {
+    reducers?: any;
+    middleware?: any[];
+    extraActions?: any;
+}): any[];

data/client/lib/useJason.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const createActions_1 = __importDefault(require("./createActions"));
+const createJasonReducers_1 = __importDefault(require("./createJasonReducers"));
+const createPayloadHandler_1 = __importDefault(require("./createPayloadHandler"));
+const createOptDis_1 = __importDefault(require("./createOptDis"));
+const createServerActionQueue_1 = __importDefault(require("./createServerActionQueue"));
+const restClient_1 = __importDefault(require("./restClient"));
+const pruneIdsMiddleware_1 = __importDefault(require("./pruneIdsMiddleware"));
+const createTransportAdapter_1 = __importDefault(require("./createTransportAdapter"));
+const toolkit_1 = require("@reduxjs/toolkit");
+const makeEager_1 = __importDefault(require("./makeEager"));
+const humps_1 = require("humps");
+const blueimp_md5_1 = __importDefault(require("blueimp-md5"));
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = require("react");
+function useJason({ reducers, middleware = [], extraActions }) {
+    const [store, setStore] = react_1.useState(null);
+    const [value, setValue] = react_1.useState(null);
+    react_1.useEffect(() => {
+        restClient_1.default.get('/jason/api/config')
+            .then(({ data: jasonConfig }) => {
+            const { schema: snakey_schema } = jasonConfig;
+            const schema = humps_1.camelizeKeys(snakey_schema);
+            console.debug({ schema });
+            const serverActionQueue = createServerActionQueue_1.default();
+            const allReducers = Object.assign(Object.assign({}, reducers), createJasonReducers_1.default(schema));
+            console.debug({ allReducers });
+            const store = toolkit_1.configureStore({ reducer: allReducers, middleware: [...middleware, pruneIdsMiddleware_1.default(schema)] });
+            const dispatch = store.dispatch;
+            const optDis = createOptDis_1.default(schema, dispatch, restClient_1.default, serverActionQueue);
+            const actions = createActions_1.default(schema, store, restClient_1.default, optDis, extraActions);
+            const eager = makeEager_1.default(schema);
+            let payloadHandlers = {};
+            let configs = {};
+            let subOptions = {};
+            function handlePayload(payload) {
+                const { md5Hash } = payload;
+                const { handlePayload } = payloadHandlers[md5Hash];
+                if (handlePayload) {
+                    handlePayload(payload);
+                }
+                else {
+                    console.warn("Payload arrived with no handler", payload, payloadHandlers);
+                }
+            }
+            const transportAdapter = createTransportAdapter_1.default(jasonConfig, handlePayload, dispatch, () => lodash_1.default.keys(configs).forEach(md5Hash => createSubscription(configs[md5Hash], subOptions[md5Hash])));
+            function createSubscription(config, options = {}) {
+                // We need the hash to be consistent in Ruby / Javascript
+                const hashableConfig = lodash_1.default(Object.assign({ conditions: {}, includes: {} }, config)).toPairs().sortBy(0).fromPairs().value();
+                const md5Hash = blueimp_md5_1.default(JSON.stringify(hashableConfig));
+                payloadHandlers[md5Hash] = createPayloadHandler_1.default({ dispatch, serverActionQueue, transportAdapter, config });
+                configs[md5Hash] = hashableConfig;
+                subOptions[md5Hash] = options;
+                setTimeout(() => transportAdapter.createSubscription(hashableConfig), 500);
+                let pollInterval = null;
+                // This is only for debugging / dev - not prod!
+                // @ts-ignore
+                if (options.pollInterval) {
+                    // @ts-ignore
+                    pollInterval = setInterval(() => transportAdapter.getPayload(hashableConfig, { forceRefresh: true }), options.pollInterval);
+                }
+                return {
+                    remove() {
+                        removeSubscription(hashableConfig);
+                        if (pollInterval)
+                            clearInterval(pollInterval);
+                    },
+                    md5Hash
+                };
+            }
+            function removeSubscription(config) {
+                transportAdapter.removeSubscription(config);
+                const md5Hash = blueimp_md5_1.default(JSON.stringify(config));
+                payloadHandlers[md5Hash].tearDown();
+                delete payloadHandlers[md5Hash];
+                delete configs[md5Hash];
+                delete subOptions[md5Hash];
+            }
+            setValue({
+                actions: actions,
+                subscribe: createSubscription,
+                eager,
+                handlePayload
+            });
+            setStore(store);
+        });
+    }, []);
+    return [store, value];
+}
+exports.default = useJason;

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

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

data/client/lib/useJason.test.js

@@ -0,0 +1,85 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_hooks_1 = require("@testing-library/react-hooks");
+const useJason_1 = __importDefault(require("./useJason"));
+const restClient_1 = __importDefault(require("./restClient"));
+jest.mock('./restClient');
+test('it works', () => __awaiter(void 0, void 0, void 0, function* () {
+    const resp = { data: {
+            schema: { post: {} },
+            transportService: 'action_cable'
+        } };
+    // @ts-ignore
+    restClient_1.default.get.mockResolvedValue(resp);
+    const { result, waitForNextUpdate } = react_hooks_1.renderHook(() => useJason_1.default({ reducers: {
+            test: (s, a) => s || {}
+        } }));
+    yield waitForNextUpdate();
+    const [store, value, connected] = result.current;
+    const { handlePayload, subscribe } = value;
+    const subscription = subscribe({ post: {} });
+    handlePayload({
+        type: 'payload',
+        model: 'post',
+        payload: [{ id: 4, name: 'test' }],
+        md5Hash: subscription.md5Hash,
+        idx: 1
+    });
+    handlePayload({
+        id: 4,
+        model: 'post',
+        destroy: true,
+        md5Hash: subscription.md5Hash,
+        idx: 2
+    });
+    handlePayload({
+        id: 5,
+        model: 'post',
+        payload: { id: 5, name: 'test2' },
+        md5Hash: subscription.md5Hash,
+        idx: 3
+    });
+}));
+test('pruning IDs', () => __awaiter(void 0, void 0, void 0, function* () {
+    const resp = { data: {
+            schema: { post: {} },
+            transportService: 'action_cable'
+        } };
+    // @ts-ignore
+    restClient_1.default.get.mockResolvedValue(resp);
+    const { result, waitForNextUpdate } = react_hooks_1.renderHook(() => useJason_1.default({ reducers: {
+            test: (s, a) => s || {}
+        } }));
+    yield waitForNextUpdate();
+    const [store, value, connected] = result.current;
+    const { handlePayload, subscribe } = value;
+    const subscription = subscribe({ post: {} });
+    handlePayload({
+        type: 'payload',
+        model: 'post',
+        payload: [{ id: 4, name: 'test' }],
+        md5Hash: subscription.md5Hash,
+        idx: 1
+    });
+    handlePayload({
+        type: 'payload',
+        model: 'post',
+        payload: [{ id: 5, name: 'test it out' }],
+        md5Hash: subscription.md5Hash,
+        idx: 2
+    });
+    // The ID 4 should have been pruned
+    expect(store.getState().posts.ids).toStrictEqual([5]);
+}));

data/client/lib/useSub.d.ts

@@ -1 +1 @@
-export default function useSub(config: any): void;
+export default function useSub(config: any, options?: {}): void;

data/client/lib/useSub.js

@@ -5,10 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const JasonContext_1 = __importDefault(require("./JasonContext"));
 const react_1 = require("react");
-function useSub(config) {
+function useSub(config, options = {}) {
+    // useEffect uses strict equality
+    const configJson = JSON.stringify(config);
     const subscribe = react_1.useContext(JasonContext_1.default).subscribe;
     react_1.useEffect(() => {
-        return subscribe(config);
-    }, []);
+        // @ts-ignore
+        return subscribe(config, options).remove;
+    }, [configJson]);
 }
 exports.default = useSub;

data/client/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@jamesr2323/jason",
-  "version": "0.3.0",
+  "version": "0.6.0",
   "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "test": "jest"
   },
   "dependencies": {
     "@rails/actioncable": "^6.0.3-4",
@@ -14,14 +16,27 @@
     "jsonpatch": "^3.0.1",
     "lodash": "^4.17.20",
     "pluralize": "^8.0.0",
+    "pusher-js": "^7.0.3",
     "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",
+    "@testing-library/react-hooks": "^5.0.3",
+    "@types/jest": "^26.0.19",
+    "babel-jest": "^26.6.3",
+    "jest": "^26.6.3",
+    "react": "^16.9.x",
+    "react-dom": "^16.9.x",
+    "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

@@ -1,102 +1,12 @@
-import createActions from './createActions'
-import { createConsumer } from "@rails/actioncable"
-import JasonContext from './JasonContext'
-import axios from 'axios'
-import applyCaseMiddleware from 'axios-case-converter'
+import React from 'react'
+import useJason from './useJason'
 import { Provider } from 'react-redux'
-import { createEntityAdapter, createSlice, createReducer, configureStore } from '@reduxjs/toolkit'
-import createJasonReducers from './createJasonReducers'
-import createPayloadHandler from './createPayloadHandler'
-import makeEager from './makeEager'
-import { camelizeKeys } from 'humps'
-import md5 from 'blueimp-md5'
-import _ from 'lodash'
-import React, { useState, useEffect } from 'react'
-
-const JasonProvider = ({ reducers, middleware, extraActions, children }) => {
-  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())
-
-  useEffect(() => {
-    restClient.get('/jason/api/schema')
-    .then(({ data: snakey_schema }) => {
-      const schema = camelizeKeys(snakey_schema)
-
-      const consumer = createConsumer()
-      const allReducers = {
-        ...reducers,
-        ...createJasonReducers(schema)
-      }
-
-      console.log({ schema, allReducers })
-      const store = configureStore({ reducer: allReducers, middleware })
-
-      let payloadHandlers = {}
-      function handlePayload(payload) {
-        const { model, md5Hash } = payload
-        console.log({ md5Hash, fn: `${model}:${md5Hash}`, payloadHandlers, model: _.camelCase(model), payload })
-        const handler = payloadHandlers[`${_.camelCase(model)}:${md5Hash}`]
-        if (handler) {
-          handler({ ...payload, model: _.camelCase(model) })
-        }
-      }
-
-      const subscription = (consumer.subscriptions.create({
-        channel: 'Jason::Channel'
-      }, {
-        connected: () => {
-          setConnected(true)
-        },
-        received: payload => {
-          console.log("Payload received", payload)
-          handlePayload(payload)
-        },
-        disconnected: () => console.warn('Disconnected from ActionCable')
-      }));
-
-      console.log('sending message')
-      subscription.send({ message: 'test' })
-
-      function createSubscription(config) {
-        const md5Hash = md5(JSON.stringify(config))
-        console.log('Subscribe with', config, md5Hash)
-
-        _.map(config, (v, model) => {
-          payloadHandlers[`${model}:${md5Hash}`] = createPayloadHandler(store.dispatch, subscription, model, schema[model])
-        })
-        subscription.send({ createSubscription: config })
-
-        return () => removeSubscription(config)
-      }
-
-      function removeSubscription(config) {
-        subscription.send({ removeSubscription: config })
-        const md5Hash = md5(JSON.stringify(config))
-        _.map(config, (v, model) => {
-          delete payloadHandlers[`${model}:${md5Hash}`]
-        })
-      }
-
-      const actions = createActions(schema, store, restClient, extraActions)
-      const eager = makeEager(schema)
-
-      console.log({ actions })
+import JasonContext from './JasonContext'
 
-      setValue({
-        actions: actions,
-        subscribe: (config) => createSubscription(config),
-        eager
-      })
-      setStore(store)
-    })
-  }, [])
+const JasonProvider = ({ reducers, middleware, extraActions, children }: { reducers?: any, middleware?: any, extraActions?: any, children?: React.FC }) => {
+  const [store, value] = useJason({ reducers, middleware, extraActions })
 
-  if(!(store && value && connected)) return <div /> // Wait for async fetch of schema to complete
+  if(!(store && value)) return <div /> // Wait for async fetch of schema to complete
 
   return <Provider store={store}>
     <JasonContext.Provider value={value}>{ children }</JasonContext.Provider>

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

@@ -2,8 +2,8 @@ import { createEntityAdapter, createSlice } from '@reduxjs/toolkit'
 import pluralize from 'pluralize'
 import _ from 'lodash'
 
-function generateSlices(schema) {
-  const sliceNames = schema.map(k => pluralize(k))
+function generateSlices(models) {
+  const sliceNames = models.map(k => pluralize(k))
   const adapter = createEntityAdapter()
 
   return _.fromPairs(_.map(sliceNames, name => {
@@ -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)
@@ -29,6 +30,59 @@ function generateSlices(schema) {
   }))
 }
 
+function generateJasonSlices(models) {
+  const initialState = _.fromPairs(_.map(models, (model_name) => {
+    return [model_name, {}]
+  }))
+
+  const modelSliceReducer = createSlice({
+    name: 'jasonModels',
+    initialState,
+    reducers: {
+      setSubscriptionIds(s,a) {
+        const { payload } = a
+        const { subscriptionId, model, ids } = payload
+        console.log({ initialState })
+        s[model][subscriptionId] = ids
+      },
+      addSubscriptionId(s,a) {
+        const { payload } = a
+        const { subscriptionId, model, id } = payload
+        s[model][subscriptionId] = _.union(s[model][subscriptionId] || [], [id])
+      },
+      removeSubscriptionId(s,a) {
+        const { payload } = a
+        const { subscriptionId, model, id } = payload
+        s[model][subscriptionId] = _.remove(s[model][subscriptionId] || [], id)
+      },
+      removeSubscription(s, a) {
+        const { payload: { subscriptionId } } = a
+        _.map(models, model => {
+          delete s[model][subscriptionId]
+        })
+      }
+    }
+  }).reducer
+
+  const jasonSliceReducer = createSlice({
+    name: 'jason',
+    initialState: {
+      connected: false,
+      queueSize: 0
+    },
+    reducers: {
+      upsert: (s,a) => ({ ...s, ...a.payload })
+    }
+  }).reducer
+
+  return { jason: jasonSliceReducer, jasonModels: modelSliceReducer }
+}
+
 export default function createJasonReducers(schema) {
-  return generateSlices(_.keys(schema))
+  const models = _.keys(schema)
+
+  return {
+    ...generateSlices(models),
+    ...generateJasonSlices(models)
+  }
 }