jason-rails 0.4.1 → 0.6.2

data/client/src/createServerActionQueue.test.ts

@@ -0,0 +1,42 @@
+import createServerActionQueue from './createServerActionQueue'
+
+test('Adding items', () => {
+  const serverActionQueue = createServerActionQueue()
+  serverActionQueue.addItem({ type: 'entity/add', payload: { id: 'abc', attribute: 1 } })
+  const item = serverActionQueue.getItem()
+  expect(item).toStrictEqual({ type: 'entity/add', payload: { id: 'abc', attribute: 1 } })
+})
+
+test('Deduping of items that will overwrite each other', () => {
+  const serverActionQueue = createServerActionQueue()
+  serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute: 1 } })
+  serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute: 2 } })
+  serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute: 3 } })
+
+  const item = serverActionQueue.getItem()
+
+  expect(item).toStrictEqual({ type: 'entity/upsert', payload: { id: 'abc', attribute: 3 } })
+})
+
+test('Deduping of items with a superset', () => {
+  const serverActionQueue = createServerActionQueue()
+  serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute: 1 } })
+  serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute: 2, attribute2: 'test' } })
+
+  const item = serverActionQueue.getItem()
+
+  expect(item).toStrictEqual({ type: 'entity/upsert', payload: { id: 'abc', attribute: 2, attribute2: 'test' } })
+})
+
+test("doesn't dedupe items with some attributes missing", () => {
+  const serverActionQueue = createServerActionQueue()
+  serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute: 1 } })
+  serverActionQueue.addItem({ type: 'entity/upsert', payload: { id: 'abc', attribute2: 'test' } })
+
+  const item = serverActionQueue.getItem()
+  serverActionQueue.itemProcessed()
+  const item2 = serverActionQueue.getItem()
+
+  expect(item).toStrictEqual({ type: 'entity/upsert', payload: { id: 'abc', attribute: 1 } })
+  expect(item2).toStrictEqual({ type: 'entity/upsert', payload: { id: 'abc', attribute2: 'test' } })
+})

data/client/src/createServerActionQueue.ts

@@ -0,0 +1,47 @@
+// A FIFO queue with deduping of actions whose effect will be cancelled by later actions
+
+import _ from 'lodash'
+
+export default function createServerActionQueue() {
+  const queue: any[] = []
+  let inFlight = false
+
+  function addItem(item) {
+    // Check if there are any items ahead in the queue that this item would effectively overwrite.
+    // In that case we can remove them
+    // If this is an upsert && item ID is the same && current item attributes are a superset of the earlier item attributes
+    const { type, payload } = item
+    if (type.split('/')[1] !== 'upsert') {
+      queue.push(item)
+      return
+    }
+
+    _.remove(queue, item => {
+      const { type: itemType, payload: itemPayload } = item
+      if (type !== itemType) return false
+      if (itemPayload.id !== payload.id) return false
+
+      // Check that all keys of itemPayload are in payload.
+      return _.difference(_.keys(itemPayload),_.keys(payload)).length === 0
+    })
+
+    queue.push(item)
+  }
+
+  return {
+    addItem,
+    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 })
+  }
+}

data/client/src/createTransportAdapter.ts

@@ -0,0 +1,13 @@
+import actionCableAdapter from './transportAdapters/actionCableAdapter'
+import pusherAdapter from './transportAdapters/pusherAdapter'
+
+export default function createTransportAdapter(jasonConfig, handlePayload, dispatch, onConnect) {
+  const { transportService } = jasonConfig
+  if (transportService === 'action_cable') {
+    return actionCableAdapter(jasonConfig, handlePayload, dispatch, onConnect)
+  } else if (transportService === 'pusher') {
+    return pusherAdapter(jasonConfig, handlePayload, dispatch)
+  } else {
+    throw(`Transport adapter does not exist for ${transportService}`)
+  }
+}

data/client/src/index.ts

@@ -1,7 +1,9 @@
 import _JasonProvider from './JasonProvider'
 import _useAct from './useAct'
 import _useSub from './useSub'
+import _useEager from './useEager'
 
 export const JasonProvider = _JasonProvider
 export const useAct = _useAct
-export const useSub = _useSub
+export const useSub = _useSub
+export const useEager = _useEager

data/client/src/makeEager.ts

@@ -36,9 +36,9 @@ export default function (schema) {
 
   function useEager(entity, id = null, relations = []) {
     if (id) {
-      return useSelector(s => addRelations(s, { ...s[entity].entities[String(id)] }, entity, relations))
+      return useSelector(s => addRelations(s, { ...s[entity].entities[String(id)] }, entity, relations), _.isEqual)
     } else {
-      return useSelector(s => addRelations(s, _.values(s[entity].entities), entity, relations))
+      return useSelector(s => addRelations(s, _.values(s[entity].entities), entity, relations), _.isEqual)
     }
   }
 

data/client/src/pruneIdsMiddleware.ts

@@ -0,0 +1,24 @@
+import _ from 'lodash'
+import pluralize from 'pluralize'
+
+const pruneIdsMiddleware = schema => store => next => action => {
+  const { type, payload } = action
+  const result = next(action)
+
+  const state = store.getState()
+  if (type === 'jasonModels/setSubscriptionIds' || type === 'jasonModels/removeSubscriptionIds') {
+    const { model, ids } = payload
+
+    let idsInSubs = []
+    _.map(state.jasonModels[model], (subscribedIds, k) => {
+      idsInSubs = _.union(idsInSubs, subscribedIds)
+    })
+    // Find IDs currently in Redux that aren't in any subscription
+    const idsToRemove = _.difference(state[pluralize(model)].ids, idsInSubs)
+    store.dispatch({ type: `${pluralize(model)}/removeMany`, payload: idsToRemove })
+  }
+
+  return result
+}
+
+export default pruneIdsMiddleware

data/client/src/restClient.ts

@@ -0,0 +1,14 @@
+import axios from 'axios'
+import applyCaseMiddleware from 'axios-case-converter'
+import { validate as isUuid } from 'uuid'
+
+const csrfToken = (document?.querySelector("meta[name=csrf-token]") as any)?.content
+axios.defaults.headers.common['X-CSRF-Token'] = csrfToken
+
+const restClient = applyCaseMiddleware(axios.create() as any, {
+  preservedKeys: (key) => {
+    return isUuid(key)
+  }
+}) as any
+
+export default restClient

data/client/src/transportAdapters/actionCableAdapter.ts

@@ -0,0 +1,38 @@
+import { createConsumer } from "@rails/actioncable"
+
+export default function actionCableAdapter(jasonConfig, handlePayload, dispatch, onConnected) {
+  const consumer = createConsumer()
+  const subscription = (consumer.subscriptions.create({
+    channel: 'Jason::Channel'
+  }, {
+    connected: () => {
+      dispatch({ type: 'jason/upsert', payload: { connected: true } })
+      console.debug('Connected to ActionCable')
+
+      // When AC loses connection - all state is lost, so we need to re-initialize all subscriptions
+      onConnected()
+    },
+    received: payload => {
+      handlePayload(payload)
+      console.debug("ActionCable Payload received: ", payload)
+    },
+    disconnected: () => {
+      dispatch({ type: 'jason/upsert', payload: { connected: false } })
+      console.warn('Disconnected from ActionCable')
+    }
+  }));
+
+  function getPayload(config, options) {
+    subscription.send({ getPayload: config, ...options })
+  }
+
+  function createSubscription(config) {
+    subscription.send({ createSubscription: config })
+  }
+
+  function removeSubscription(config) {
+    subscription.send({ removeSubscription: config })
+  }
+
+  return { getPayload, createSubscription, removeSubscription }
+}

data/client/src/transportAdapters/pusherAdapter.ts

@@ -0,0 +1,72 @@
+import Pusher from 'pusher-js'
+import { createConsumer } from "@rails/actioncable"
+import restClient from '../restClient'
+import { v4 as uuidv4 } from 'uuid'
+import _ from 'lodash'
+
+export default function pusherAdapter(jasonConfig, handlePayload, dispatch) {
+  let consumerId = uuidv4()
+
+  const { pusherKey, pusherRegion, pusherChannelPrefix } = jasonConfig
+  const pusher = new Pusher(pusherKey, {
+    cluster: 'eu',
+    forceTLS: true,
+    authEndpoint: '/jason/api/pusher/auth'
+  })
+  pusher.connection.bind('state_change', ({ current }) => {
+    if (current === 'connected') {
+      dispatch({ type: 'jason/upsert', payload: { connected: true } })
+    } else {
+      dispatch({ type: 'jason/upsert', payload: { connected: false } })
+    }
+  })
+  pusher.connection.bind( 'error', error => {
+    dispatch({ type: 'jason/upsert', payload: { connected: false } })
+  });
+
+  const configToChannel = {}
+
+  function createSubscription(config) {
+    restClient.post('/jason/api/create_subscription', { config, consumerId })
+    .then(({ data: { channelName } }) => {
+      configToChannel[JSON.stringify(config)] = channelName
+      subscribeToChannel(channelName)
+    })
+    .catch(e => console.error(e))
+  }
+
+  function removeSubscription(config) {
+    const channelName = configToChannel[JSON.stringify(config)]
+    unsubscribeFromChannel(fullChannelName(channelName))
+    restClient.post('/jason/api/remove_subscription', { config, consumerId })
+    .catch(e => console.error(e))
+  }
+
+  function getPayload(config, options) {
+    restClient.post('/jason/api/get_payload', {
+      config,
+      options
+    })
+    .then(({ data }) => {
+      _.map(data, (payload, modelName) => {
+        handlePayload(payload)
+      })
+    })
+    .catch(e => console.error(e))
+  }
+
+  function subscribeToChannel(channelName) {
+    const channel = pusher.subscribe(fullChannelName(channelName))
+    channel.bind('changed', message => handlePayload(message))
+  }
+
+  function unsubscribeFromChannel(channelName) {
+    const channel = pusher.unsubscribe(fullChannelName(channelName))
+  }
+
+  function fullChannelName(channelName) {
+    return `private-${pusherChannelPrefix}-${channelName}`
+  }
+
+  return { getPayload, createSubscription, removeSubscription }
+}

data/client/src/useJason.test.ts

@@ -0,0 +1,87 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import useJason from './useJason'
+import restClient from './restClient'
+
+jest.mock('./restClient')
+
+test('it works', async () => {
+  const resp = { data: {
+    schema: { post: {} },
+    transportService: 'action_cable'
+  } };
+  // @ts-ignore
+  restClient.get.mockResolvedValue(resp);
+
+  const { result, waitForNextUpdate } = renderHook(() => useJason({ reducers: {
+    test: (s,a) => s || {}
+  }}));
+
+  await 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', async () => {
+  const resp = { data: {
+    schema: { post: {} },
+    transportService: 'action_cable'
+  } };
+
+  // @ts-ignore
+  restClient.get.mockResolvedValue(resp);
+
+  const { result, waitForNextUpdate } = renderHook(() => useJason({ reducers: {
+    test: (s,a) => s || {}
+  }}));
+
+  await 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/src/useJason.ts

@@ -0,0 +1,110 @@
+import createActions from './createActions'
+import createJasonReducers from './createJasonReducers'
+import createPayloadHandler from './createPayloadHandler'
+import createOptDis from './createOptDis'
+import createServerActionQueue from './createServerActionQueue'
+import restClient from './restClient'
+import pruneIdsMiddleware from './pruneIdsMiddleware'
+import createTransportAdapater from './createTransportAdapter'
+
+import { createEntityAdapter, createSlice, createReducer, configureStore } from '@reduxjs/toolkit'
+
+import makeEager from './makeEager'
+import { camelizeKeys } from 'humps'
+import md5 from 'blueimp-md5'
+import _ from 'lodash'
+import React, { useState, useEffect } from 'react'
+
+export default function useJason({ reducers, middleware = [], extraActions }: { reducers?: any, middleware?: any[], extraActions?: any }) {
+  const [store, setStore] = useState(null as any)
+  const [value, setValue] = useState(null as any)
+
+  useEffect(() => {
+    restClient.get('/jason/api/config')
+    .then(({ data: jasonConfig }) => {
+      const { schema: snakey_schema } = jasonConfig
+      const schema = camelizeKeys(snakey_schema)
+      console.debug({ schema })
+
+      const serverActionQueue = createServerActionQueue()
+
+
+      const allReducers = {
+        ...reducers,
+        ...createJasonReducers(schema)
+      }
+
+      console.debug({ allReducers })
+
+      const store = configureStore({ reducer: allReducers, middleware: [...middleware, pruneIdsMiddleware(schema)] })
+      const dispatch = store.dispatch
+
+      const optDis = createOptDis(schema, dispatch, restClient, serverActionQueue)
+      const actions = createActions(schema, store, restClient, optDis, extraActions)
+      const eager = makeEager(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 = createTransportAdapater(jasonConfig, handlePayload, dispatch, () => _.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 = _({ conditions: {}, includes: {}, ...config }).toPairs().sortBy(0).fromPairs().value()
+        const md5Hash = md5(JSON.stringify(hashableConfig))
+        payloadHandlers[md5Hash] = createPayloadHandler({ dispatch, serverActionQueue, transportAdapter, config })
+        configs[md5Hash] = hashableConfig
+        subOptions[md5Hash] = options
+
+        setTimeout(() => transportAdapter.createSubscription(hashableConfig), 500)
+        let pollInterval = null as any;
+
+        // 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 = md5(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]
+}