From ebb22c3b5e1deb33eac1c94dd64dffddd46b5042 Mon Sep 17 00:00:00 2001
From: James <metal.lunchbox@gmail.com>
Date: Fri, 12 Apr 2019 14:41:07 +0800
Subject: [PATCH] Add better subscriptions client for auto-reconnect

---
 .eslintrc.js                               |   3 +-
 .vscode/settings.json                      |   5 +
 package.json                               |   9 +-
 rollup.config.js                           |  16 +--
 src/components/GroupSelect.svelte          |   1 -
 src/components/dashboard/Dashboard.svelte  |  53 +---------
 src/components/sessions/EditSession.svelte |   2 +-
 src/components/sessions/Sessions.svelte    |  13 +++
 src/components/sessions/data.js            |  55 ++++++----
 src/components/sessions/queries.js         |  50 +++++++++
 src/data/timer.js                          |   8 ++
 src/data/ws-client.js                      |  32 ++++++
 src/data/ws-client2.js                     | 113 +++++++++++++++++++++
 src/utils.js                               |  13 +++
 14 files changed, 292 insertions(+), 81 deletions(-)
 create mode 100644 src/data/ws-client2.js
 create mode 100644 src/utils.js

diff --git a/.eslintrc.js b/.eslintrc.js
index dcc5c85..2da5922 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,6 +3,7 @@ module.exports = {
   plugins: ['svelte3'],
   rules: {
     "unicorn/filename-case": 0,
-    "no-labels": 0
+    "no-labels": 0,
+    "import/first": 0
   }
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7193140..7e16d03 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,6 +2,11 @@
   "files.associations": {
     "*.svelte": "html"
   },
+  "files.watcherExclude": {
+    "public/bundle": true
+  },
+  "editor.formatOnType": true,
+  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
   "eslint.autoFixOnSave": true,
   "eslint.validate": [
     "javascript",
diff --git a/package.json b/package.json
index f67cd12..8c5f6c7 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,10 @@
   "scripts": {
     "build": "npm run clean && rollup -c",
     "clean": "rm -rf public/bundle",
-    "dev": "rollup -c -w",
-    "start": "sirv public --single"
+    "start": "sirv public --single",
+    "autobuild": "rollup -c -w",
+    "dev": "run-p start:dev autobuild",
+    "start:dev": "sirv public --dev --single"
   },
   "devDependencies": {
     "bulma": "^0.7.4",
@@ -17,6 +19,7 @@
     "eslint-plugin-svelte3": "^0.4.7",
     "eslint-plugin-unicorn": "^8.0.1",
     "node-sass": "^4.11.0",
+    "npm-run-all": "^4.1.5",
     "rollup": "^1.9.0",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-commonjs-alternate": "0.0.5",
@@ -34,7 +37,9 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.8.1",
     "date-fns": "^2.0.0-alpha.27",
+    "eslint-plugin-import": "^2.16.0",
     "flatpickr": "^4.5.7",
+    "graphql-subscriptions-client": "^0.10.0",
     "navaid": "^1.0.0"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
index b60e0dc..367460d 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -33,14 +33,14 @@ module.exports = [{
     }),
     resolve(),
     commonjs(),
-    !production && serve({
-      contentBase: 'public',
-      historyApiFallback: true,
-      port: 5050
-    }),
-    !production && livereload({
-      watch: 'public'
-    }),
+    // !production && serve({
+    //   contentBase: 'public',
+    //   historyApiFallback: true,
+    //   port: 5050
+    // }),
+    // !production && livereload({
+    //   watch: 'public'
+    // }),
     notify(),
 
     // If we're building for production (npm run build
diff --git a/src/components/GroupSelect.svelte b/src/components/GroupSelect.svelte
index 36dea0a..ac5660d 100644
--- a/src/components/GroupSelect.svelte
+++ b/src/components/GroupSelect.svelte
@@ -16,7 +16,6 @@
     }
   })
 
-  $: console.log(groups)
   function checkValidity () {
     error = !selectElement.validity.valid && selectElement.validationMessage
       ? selectElement.validationMessage
diff --git a/src/components/dashboard/Dashboard.svelte b/src/components/dashboard/Dashboard.svelte
index 575de6f..0f8cff6 100644
--- a/src/components/dashboard/Dashboard.svelte
+++ b/src/components/dashboard/Dashboard.svelte
@@ -1,56 +1,7 @@
 <script>
-  import { subRequest } from '../../data/ws-client'
-  import { request } from '../../data/fetch-client'
-  import { GET_SESSIONS } from '../sessions/queries'
-  import { onMount } from 'svelte'
+  import { todaysSessions } from '../sessions/data'
 
-  let sessions = []
-
-  onMount(async () => {
-    const response = await request(GET_SESSIONS)
-    sessions = response.classSessions
-  })
-
-  const query = `
-  subscription {
-  classSessions {
-     mutation
-      updatedFields
-    previousValues{
-      id
-      stage
-      startsAt
-      endsAt
-    }
-      node {
-        id
-        stage
-        startsAt
-        endsAt
-        number
-        group {
-          id
-          name
-        }
-      }
-  }
-}`
-
-  subRequest(query, null, function (data) {
-    const { mutation, node, previousValues } = data.classSessions
-    if (mutation === 'CREATED') {
-      sessions = [...sessions, node]
-    } else if (mutation === 'UPDATED') {
-      sessions = sessions.map(s => {
-        if (s.id === node.id) return s
-        return node
-      })
-    } else if (mutation === 'DELETED') {
-      sessions = sessions.filter(s => s.id !== previousValues.id)
-    }
-  })
-
-  $: console.log(sessions)
+  $: console.log($todaysSessions)
 
 </script>
 <svelte:head>
diff --git a/src/components/sessions/EditSession.svelte b/src/components/sessions/EditSession.svelte
index e0788a1..5a03371 100644
--- a/src/components/sessions/EditSession.svelte
+++ b/src/components/sessions/EditSession.svelte
@@ -22,7 +22,7 @@
     input.endsAt = new Date(input.endsAt).toISOString()
     loading = true
     try {
-      const updatedSession = await sessions.update(id, input, groupId)
+      const updatedSession = await sessions.patch(id, input, groupId)
       const date = formatRelative(new Date(input.startsAt), new Date(), { addSuffix: true })
       notifications.add({ text: `Update session to ${date} with ${updatedSession.group.name} class`, type: 'success' })
       reset()
diff --git a/src/components/sessions/Sessions.svelte b/src/components/sessions/Sessions.svelte
index 64d73e5..3deeef5 100644
--- a/src/components/sessions/Sessions.svelte
+++ b/src/components/sessions/Sessions.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { onMount, onDestroy } from 'svelte'
   import { sessions, sessionsFilter } from './data'
   import Upcoming from './UpcomingSessions.svelte'
   import SessionsList from './SessionsList.svelte'
@@ -7,6 +8,16 @@
 
   let activeComponent = Upcoming
   let active = 'upcoming'
+  let refetch
+
+  onMount(() => {
+    sessions.get()
+    refetch = setInterval(sessions.get, 5 * 6e+4)
+  })
+
+  onDestroy(() => {
+    refetch && clearInterval(refetch)
+  })
 
   const switchTab = (tab) => {
     let where = null
@@ -41,6 +52,8 @@
 
 <AddSession />
 
+<button class="button" on:click={sessions.get}><i class="fas fa-sync"></i></button>
+
 <nav class="buttons has-addons is-centered">
   <button class="button is-link" class:is-outlined={active!=='upcoming' } on:click={()=>
     switchTab('upcoming')}>
diff --git a/src/components/sessions/data.js b/src/components/sessions/data.js
index 4ad90c4..abe629e 100644
--- a/src/components/sessions/data.js
+++ b/src/components/sessions/data.js
@@ -1,18 +1,20 @@
-import { writable, readable, get } from 'svelte/store'
+import { writable, get, readable } from 'svelte/store'
 import { request } from '../../data/fetch-client'
-import { GET_SESSIONS, GET_TODAYS_SESSIONS } from './queries'
+import { GET_SESSIONS, SESSIONS_SUB, GET_TODAYS_SESSIONS } from './queries'
 import { CREATE_SESSION, DELETE_SESSION, UPDATE_SESSION } from './mutations'
+import { ws } from '../../data/ws-client2'
 
 export const semester = writable()
 
 const createSessionsStore = () => {
-  const { subscribe, set } = writable()
+  const { subscribe, set, update } = writable()
   return {
     subscribe,
+    update,
     get: async () => {
       const where = (get(sessionsFilter))
-      const getres = await request(GET_SESSIONS, { where })
-      set(getres.classSessions)
+      const response = await request(GET_SESSIONS, { where })
+      set(response.classSessions)
     },
     create: async (input, groupId) => {
       const response = await request(CREATE_SESSION, { input, groupId })
@@ -24,7 +26,7 @@ const createSessionsStore = () => {
       sessions.get()
       return response.deleteClassSession
     },
-    update: async (id, input, groupId) => {
+    patch: async (id, input, groupId) => {
       const response = await request(UPDATE_SESSION, { id, input, groupId })
       sessions.get()
       return response.updateClassSession
@@ -36,14 +38,8 @@ export const sessionsFilter = writable()
 
 export const sessions = createSessionsStore()
 
-const fetchTodaysSessions = async () => {
-  const now = new Date()
-  const latest = new Date(now.getTime() + 24 * 3.6e+6)
-  const response = await request(GET_TODAYS_SESSIONS, { now, latest })
-  return response.classSessions
-}
-
 const sortSessions = (sessions) => {
+  if (!sessions) return
   const time = new Date()
   const in15Min = new Date(time.getTime() + 15 * 60000).toISOString()
   const in24hrs = new Date(time.getTime() + 24 * 3.6e+6).toISOString()
@@ -59,6 +55,19 @@ const sortSessions = (sessions) => {
   return { now, soon, later }
 }
 
+const fetchTodaysSessions = async () => {
+  const now = new Date()
+  const latest = new Date(now.getTime() + 24 * 3.6e+6)
+  const response = await request(GET_TODAYS_SESSIONS, { now, latest })
+  return response.classSessions
+}
+
+// get the initial sessions list from today
+// then resort that list every 15 seconds
+// listen to a subscription on all sessions
+// the new or the old value was within 24 hours, refetch.
+// also automatically refetch if data is stale
+
 export const todaysSessions = readable(null, set => {
   // get the initial data
   let updatedAt = new Date()
@@ -67,11 +76,20 @@ export const todaysSessions = readable(null, set => {
     sessions = result
     set({ ...sortSessions(result), updatedAt })
   })
-
+  const subscription = ws.request({ query: SESSIONS_SUB }).subscribe({
+    next (message) {
+      if (message.data && message.data.classSessions) {
+        fetchTodaysSessions().then(result => {
+          sessions = result
+          set({ ...sortSessions(result), updatedAt: new Date() })
+        })
+      }
+    }
+  })
   const interval = setInterval(() => {
-    // refetch data every 5 minutes
+    // refetch data periodically
     const now = new Date()
-    const expiry = new Date(now - 5 * 60000)
+    const expiry = new Date(now - 3.6e+6)
     if (updatedAt < expiry) {
       fetchTodaysSessions().then(result => {
         sessions = result
@@ -83,5 +101,8 @@ export const todaysSessions = readable(null, set => {
     }
   }, 15000)
 
-  return () => clearInterval(interval)
+  return () => {
+    subscription && subscription.unsubscribe()
+    clearInterval(interval)
+  }
 })
diff --git a/src/components/sessions/queries.js b/src/components/sessions/queries.js
index a6eb848..ebc3617 100644
--- a/src/components/sessions/queries.js
+++ b/src/components/sessions/queries.js
@@ -48,3 +48,53 @@ query todaysSessions($now: DateTime, $latest: DateTime){
     }
   }
 }`
+
+export const SESSIONS_SUB = /* GraphQL */`
+subscription {
+  classSessions {
+    mutation
+    updatedFields
+    previousValues{
+      id
+      stage
+      startsAt
+      endsAt
+    }
+      node {
+        id
+        stage
+        startsAt
+        endsAt
+        number
+        group {
+          id
+          name
+        }
+      }
+  }
+}`
+
+export const TODAYS_SESSIONS_SUB = /* GraphQL */`
+subscription {
+  classSessions {
+    mutation
+    updatedFields
+    previousValues {
+      id
+      stage
+      startsAt
+      endsAt
+    }
+    node {
+      id
+      stage
+      startsAt
+      endsAt
+      number
+      group {
+        id
+        name
+      }
+    }
+  }
+}`
diff --git a/src/data/timer.js b/src/data/timer.js
index 00a5bda..1982e5f 100644
--- a/src/data/timer.js
+++ b/src/data/timer.js
@@ -7,3 +7,11 @@ export const time = readable(new Date(), set => {
 
   return () => clearInterval(interval)
 })
+
+export const everyMinute = readable(new Date(), set => {
+  const interval = setInterval(() => {
+    set(new Date())
+  }, 6e+4)
+
+  return () => clearInterval(interval)
+})
diff --git a/src/data/ws-client.js b/src/data/ws-client.js
index d06e0e4..6ef34c1 100644
--- a/src/data/ws-client.js
+++ b/src/data/ws-client.js
@@ -27,8 +27,10 @@ const formatRequest = (query, variables, id) => {
 }
 
 export const subRequest = (query, variables, callback) => {
+  console.log(variables)
   const id = randomId()
   const request = formatRequest(query, variables, id)
+  console.log('request:', request)
   if (ws.readyState === 1) {
     ws.send(request)
   } else {
@@ -75,3 +77,33 @@ export const wsQueryRequest = (query, variables) => {
     }
   })
 }
+
+export const subscribeToMore = (query, variables, store) => {
+  const pattern = /{\n?\s*(\w+)/
+  const dataName = query.match(pattern)[1]
+  console.log(store)
+  subRequest(query, variables, function (data) {
+    console.log('subscribe to more got something')
+    if (!data) return
+    const { mutation, node, previousValues } = data[dataName]
+    if (mutation === 'CREATED') {
+      console.log('CREATED')
+      store.update(previous => {
+        return [...previous, node]
+      })
+    } else if (mutation === 'UPDATED') {
+      console.log('UPDATED')
+      store.update(previous => {
+        return previous.map(item => {
+          if (item.id !== node.id) return item
+          return node
+        })
+      })
+    } else if (mutation === 'DELETED') {
+      console.log('DELETED')
+      store.update(previous => {
+        return previous.filter(item => item.id !== previousValues.id)
+      })
+    }
+  })
+}
diff --git a/src/data/ws-client2.js b/src/data/ws-client2.js
new file mode 100644
index 0000000..591b351
--- /dev/null
+++ b/src/data/ws-client2.js
@@ -0,0 +1,113 @@
+import { SubscriptionClient } from 'graphql-subscriptions-client'
+
+const randomId = (size = 6) => {
+  let id = ''
+  // eslint-disable-next-line no-undef
+  let bytes = crypto.getRandomValues(new Uint8Array(size))
+  while (size-- > 0) {
+    id += 'Uint8ArdomValuesObj012345679BCDEFGHIJKLMNPQRSTWXYZ_cfghkpqvwxyz-'[bytes[size] & 63]
+  }
+  return id
+}
+
+const host = 'ws://localhost:4000'
+
+export const ws = new SubscriptionClient(host, {
+  reconnect: true,
+  connectionCallback: error => {
+    error && console.log(error)
+  }
+})
+
+export const wsQueryRequest = (query, variables) => {
+  const id = randomId()
+  const request = formatRequest(query, variables, id)
+  return new Promise((resolve, reject) => {
+    const onOpen = () => ws.send(request)
+    const onMessage = event => {
+      const data = JSON.parse(event.data)
+      if (data.type === 'data' && data.id === id) {
+        if (data.payload.errors) {
+          reject(data.payload.errors)
+        }
+        resolve(data.payload.data)
+        ws.removeEventListener('message', onMessage)
+        ws.removeEventListener('open', onOpen)
+      }
+    }
+    try {
+      ws.addEventListener('message', onMessage)
+      if (ws.readyState === 1) {
+        ws.send(request)
+      } else {
+        ws.addEventListener('open', onOpen)
+      }
+    } catch (error) {
+      reject(error)
+      ws.removeEventListener('message', onMessage)
+      ws.removeEventListener('open', onOpen)
+    }
+  })
+}
+
+export const maintainStore = (data, store, type) => {
+  console.log("maintainstore got called")
+  if (!data || !data[type]) return
+  const { mutation, node, previousValues } = data[type]
+  console.log(mutation, node, previousValues)
+  const mutateStore = {
+    CREATED: function () {
+      console.log("created")
+      store.update(previous => {
+        return [...previous, node]
+      })
+    },
+    UPDATED: function () {
+      console.log('mutated', node)
+      store.update(previous => {
+        return previous.map(item => {
+          console.log("item in previous", item)
+          if (item.id !== node.id) { console.log("not the changed one"); return item }
+          console.log("a match")
+          return node
+        })
+      })
+    },
+    DELETED: function () {
+      console.log('deleted', node)
+      store.update(previous => {
+        return previous.filter(item => item.id !== previousValues.id)
+      })
+    }
+  }
+  mutateStore[mutation]()
+}
+export const subscribeToMore = (query, variables, store) => {
+  const pattern = /{\n?\s*(\w+)/
+  const dataName = query.match(pattern)[1]
+  console.log(store)
+  subRequest(query, variables, function (data) {
+    console.log('subscribe to more got something')
+    if (!data) return
+    const { mutation, node, previousValues } = data[dataName]
+    if (mutation === 'CREATED') {
+      console.log('CREATED')
+      store.update(previous => {
+        return [...previous, node]
+      })
+    } else if (mutation === 'UPDATED') {
+      console.log('UPDATED')
+      store.update(previous => {
+        return previous.map(item => {
+          if (item.id !== node.id) return item
+          return node
+        })
+      })
+    } else if (mutation === 'DELETED') {
+      console.log('DELETED')
+      store.update(previous => {
+        return previous.filter(item => item.id !== previousValues.id)
+      })
+    }
+  })
+}
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..9e29ca2
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,13 @@
+// safely access nested object properties that might be undefined
+const isObject = object => object && typeof object === 'object'
+
+const hasKey = (object, key) => key in object
+
+export function getIfExists(object, property, callback) {
+  return property.split('.').reduce((item, key) => {
+    if (isObject(item) && hasKey(item, key)) {
+      return item[key]
+    }
+    return typeof callback !== 'undefined' ? callback : undefined
+  }, object)
+}