jason-rails 0.4.0 → 0.6.1

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/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]
+}

data/client/src/useSub.ts

@@ -1,10 +1,13 @@
 import JasonContext from './JasonContext'
 import { useContext, useEffect } from 'react'
 
-export default function useSub(config) {
+export default function useSub(config, options = {}) {
+  // useEffect uses strict equality
+  const configJson = JSON.stringify(config)
   const subscribe = useContext(JasonContext).subscribe
 
   useEffect(() => {
-    return subscribe(config)
-  }, [])
+    // @ts-ignore
+    return subscribe(config, options).remove
+  }, [configJson])
 }

data/client/yarn.lock

@@ -813,7 +813,7 @@
     "@babel/helper-validator-option" "^7.12.1"
     "@babel/plugin-transform-typescript" "^7.12.1"
 
-"@babel/runtime@^7.12.1", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.8.4":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -1082,6 +1082,18 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@testing-library/react-hooks@^5.0.3":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-5.0.3.tgz#dd0d2048817b013b266d35ca45e3ea48a19fd87e"
+  integrity sha512-UrnnRc5II7LMH14xsYNm/WRch/67cBafmrSQcyFh0v+UUmSf1uzfB7zn5jQXSettGwOSxJwdQUN7PgkT0w22Lg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@types/react" ">=16.9.0"
+    "@types/react-dom" ">=16.9.0"
+    "@types/react-test-renderer" ">=16.9.0"
+    filter-console "^0.1.1"
+    react-error-boundary "^3.1.0"
+
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
   version "7.1.12"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.12.tgz#4d8e9e51eb265552a7e4f1ff2219ab6133bdfb2d"
@@ -1164,6 +1176,33 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.1.5.tgz#b6ab3bba29e16b821d84e09ecfaded462b816b00"
   integrity sha512-UEyp8LwZ4Dg30kVU2Q3amHHyTn1jEdhCIE59ANed76GaT1Vp76DD3ZWSAxgCrw6wJ0TqeoBpqmfUHiUDPs//HQ==
 
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
+"@types/react-dom@>=16.9.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.0.tgz#b3b691eb956c4b3401777ee67b900cb28415d95a"
+  integrity sha512-lUqY7OlkF/RbNtD5nIq7ot8NquXrdFrjSOR6+w9a9RFQevGi1oZO1dcJbXMeONAPKtZ2UrZOEJ5UOCVsxbLk/g==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-test-renderer@>=16.9.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.0.tgz#9be47b375eeb906fced37049e67284a438d56620"
+  integrity sha512-nvw+F81OmyzpyIE1S0xWpLonLUZCMewslPuA8BtjSKc5XEbn8zEQBXS7KuOLHTNnSOEM2Pum50gHOoZ62tqTRg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@>=16.9.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
+  integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/stack-utils@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
@@ -1742,6 +1781,11 @@ cssstyle@^2.2.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^3.0.2:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.6.tgz#865d0b5833d7d8d40f4e5b8a6d76aea3de4725ef"
+  integrity sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -2081,6 +2125,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+filter-console@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/filter-console/-/filter-console-0.1.1.tgz#6242be28982bba7415bcc6db74a79f4a294fa67c"
+  integrity sha512-zrXoV1Uaz52DqPs+qEwNJWJFAWZpYJ47UNmpN9q4j+/EYsz85uV0DC9k8tRND5kYmoVzL0W+Y75q4Rg8sRJCdg==
+
 find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -3596,12 +3645,19 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+pusher-js@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/pusher-js/-/pusher-js-7.0.3.tgz#f81c78cdf2ad32f546caa7532ec7f9081ef00b8d"
+  integrity sha512-HIfCvt00CAqgO4W0BrdpPsDcAwy51rB6DN0VMC+JeVRRbo8mn3XTeUeIFjmmlRLZLX8rPhUtLRo7vPag6b8GCw==
+  dependencies:
+    tweetnacl "^1.0.3"
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
-react-dom@^16.8.3:
+react-dom@^16.9.x:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
   integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
@@ -3611,6 +3667,13 @@ react-dom@^16.8.3:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-error-boundary@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.0.tgz#9487443df2f9ba1db90d8ab52351814907ea4af3"
+  integrity sha512-lmPrdi5SLRJR+AeJkqdkGlW/CRkAUvZnETahK58J4xb5wpbfDngasEGu+w0T1iXEhVrYBJZeW+c4V1hILCnMWQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -3632,7 +3695,7 @@ react-redux@^7.2.2:
     prop-types "^15.7.2"
     react-is "^16.13.1"
 
-react@^16.8.3:
+react@^16.9.x:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
   integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
@@ -4302,6 +4365,11 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
   integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
 
+tweetnacl@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-1.0.3.tgz#ac0af71680458d8a6378d0d0d050ab1407d35596"
+  integrity sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==
+
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"