koro

commit 37a04881aac253987dd368bb947857fcc5d96e9c
parent 76d46cc98703ee78717ece316960b8b336fcf9c4
Author: mokou <mokou@posteo.de>
Date:   Thu, 21 May 2020 20:44:14 +0200

fix: Homogenize Couch usage

Diffstat:
M
src/couch.js
 | 
13
++++++++++---
M
src/pages/Event.svelte
 | 
44
+++++++++++++++++++++++++++++++++-----------
M
src/pages/Index.svelte
 | 
5
+++--
M
webpack.config.js
 | 
3
++-

4 files changed, 48 insertions(+), 17 deletions(-)
diff --git a/src/couch.js b/src/couch.js
@@ -1,14 +1,21 @@
 import PouchDB from 'pouchdb-browser'
 
+export function pouch () {
+  return new PouchDB('koro', {
+    auto_compaction: true
+  })
+}
+
 export async function replicateToCouch() {
   PouchDB.replicate('koro', process.env.KORO_COUCHDB_URL, { live: false })
     .on('complete', (info) => info)
     .on('error', (err) => new Error(err))
 }
 
-export function syncDoc(id, onChange) {
-  return PouchDB.sync('koro', process.env.KORO_COUCHDB_URL, {
+export function syncDoc(id, onChange, onError) {
+  const db = pouch()
+  return db.sync(process.env.KORO_COUCHDB_URL, {
     live: true,
     selector: { _id: { $eq: id } }
-  }).on('change', onChange)
+  })
 }
diff --git a/src/pages/Event.svelte b/src/pages/Event.svelte
@@ -1,13 +1,12 @@
 <script>
   export let params
 
-  import PouchDB from 'pouchdb-browser'
   import day from 'dayjs'
   import utc from 'dayjs/plugin/utc'
   import relativeTime from 'dayjs/plugin/relativeTime'
-  import { onMount } from 'svelte'
+  import { onMount, onDestroy } from 'svelte'
   import { get } from 'svelte/store'
-  import { replicateToCouch, syncDoc } from '../couch'
+  import { pouch, replicateToCouch, syncDoc } from '../couch'
   import ResponseGrid from '../components/ResponseGrid.svelte'
   import { hasResponded } from '../stores'
   day.extend(utc)
@@ -35,7 +34,7 @@
     // TODO: Sync the document so we can make sure we have the
     // most recent available version, which would reduce conflicts.
 
-    const db = new PouchDB('koro')
+    const db = pouch()
     let responsesToPut = event.responses || new Object()
     responsesToPut[name] = responses
     try {
@@ -82,33 +81,56 @@
   }
 
   async function getEvent() {
-    const db = new PouchDB('koro')
+    const db = pouch()
     try {
       event = await db.get(params.id)
       loading = false
+      document.title = `${event.name} - Koro`
     } catch (e) {
       error =
         "Couldn't fetch the event you're looking for. Do you have the right link? Or maybe you're offline?"
       loading = false
+      throw new Error('No document exists!')
     }
   }
 
   onMount(async () => {
     // We make sure our changes are in the Couch, just in case we're coming
     // back from being offline.
-    await replicateToCouch()
+    try {
+      await replicateToCouch()
+    } catch (e) {
+      console.error(e)
+    }
+    // We try to fetch the event from the database first.
+    try {
+      await getEvent()
+    } catch (e) {
+      loading = true
+      error = ''
+    }
     // Then, we set up a two-way replication (a sync) between specifically the
     // current document and the local PouchDB. We only sync the current document
     // because syncing the whole DB would be completely overkill, and we only
     // really need to know about the documents that we can see.
-    live = syncDoc(params.id, () => {
+    live = syncDoc(params.id)
+    live.on('change', change => {
       // If a change to the document is detected, pull from the PouchDB, triggering
       // a rerender.
-      getEvent()
+      const db = pouch()
+      if (change.direction === 'pull') {
+        getEvent().catch(err => {
+          error = `Couldn't find the event. You might be offline!`
+        })
+      }
     })
-    // Fetch document details from the local PouchDB once.
-    await getEvent()
-    document.title = `${event.name} - Koro`
+    live.on('error', err => {
+      console.error(err)
+    })
+  })
+
+  onDestroy(() => {
+    live.cancel()
   })
 </script>
 
diff --git a/src/pages/Index.svelte b/src/pages/Index.svelte
@@ -1,11 +1,11 @@
 <script>
-  import PouchDB from 'pouchdb-browser'
   import autocomplete from 'accessible-autocomplete'
   import search from 'fuzzysearch'
   import day from 'dayjs'
   import utc from 'dayjs/plugin/utc'
   import { nanoid } from 'nanoid'
   import { onMount } from 'svelte'
+  import { pouch, replicateToCouch } from '../couch'
   import DateTimeGrid from '../components/DateTimeGrid.svelte'
   day.extend(utc)
 
@@ -58,12 +58,13 @@
       return
     }
 
-    const db = new PouchDB('koro')
+    const db = pouch()
     try {
       const res = await db.put({
         times: event.times.map((e) => day(e).utc().format()),
         ...event
       })
+      await replicateToCouch()
       success = true
       eventLink = `https://koro.moe/${res.id}`
     } catch (e) {
diff --git a/webpack.config.js b/webpack.config.js
@@ -39,7 +39,8 @@ module.exports = {
   },
   devtool: !prod && 'source-map',
   optimization: prod && {
-    minimizer: [new TerserWebpackPlugin({})]
+    minimizer: [new TerserWebpackPlugin({})],
+    sideEffects: false
   },
   resolve: {
     alias: {