koro

commit 6d42a902de350da01ae689841b5974d20f9f8dc6
parent 955be22c6b1d867aed224e60dc66f01afd5532fb
Author: mokou <mokou@posteo.de>
Date:   Thu, 21 May 2020 16:20:19 +0200

feat: Save response status in localStorage

Diffstat:
M
src/pages/Event.svelte
 | 
70
+++++++++++++++++++++++++++++++++++++++++++---------------------------
A
src/stores.js
 | 
22
++++++++++++++++++++++

2 files changed, 65 insertions(+), 27 deletions(-)
diff --git a/src/pages/Event.svelte b/src/pages/Event.svelte
@@ -6,7 +6,9 @@
   import utc from 'dayjs/plugin/utc'
   import relativeTime from 'dayjs/plugin/relativeTime'
   import { onMount } from 'svelte'
+  import { get } from 'svelte/store'
   import ResponseGrid from '../components/ResponseGrid.svelte'
+  import { hasResponded } from '../stores'
   day.extend(utc)
   day.extend(relativeTime)
 
@@ -39,6 +41,12 @@
         responses: responsesToPut,
         ...event
       })
+      const newResponded = get(hasResponded) || new Object()
+      newResponded[params.id] = {
+        name
+      }
+      hasResponded.set(newResponded)
+      await getEvent()
     } catch (e) {
       console.error(e)
     }
@@ -71,7 +79,7 @@
     responses[d] = 'no'
   }
 
-  onMount(async () => {
+  async function getEvent () {
     const db = new PouchDB('koro')
     try {
       event = await db.get(params.id)
@@ -80,6 +88,10 @@
       error = 'Couldn\'t fetch the event you\'re looking for. Do you have the right link? Or maybe you\'re offline?'
       loading = false
     }
+  }
+
+  onMount(async () => {
+    await getEvent()
   })
 </script>
 
@@ -106,31 +118,35 @@
     <ResponseGrid times={event.times} responses={event.responses} />
   {/if}
 
-  <form class="mt-5 max-w-xl" on:submit|preventDefault={onSubmit}>
-    <label for="name" class="font-bold text-gray-600">Your name</label>
-    <input type="text" bind:value={name} />
-    <div class="grid mt-4 grid-cols-3-1">
-      <div class="text-center">Yes</div>
-      <div class="text-center">Maybe</div>
-      <div class="text-center">No</div>
-      <div></div>
-      {#each event.times.sort((a, b) => day.utc(a).isAfter(day.utc(b))) as t}
-        <div
-          class:bg-green-400={responses[day.utc(t).format()] === 'yes'}
-          class="border border-gray-200"
-          on:click={() => toggleYes(t)}></div>
-        <div
-          class:bg-yellow-400={responses[day.utc(t).format()] === 'maybe'}
-          class="border border-gray-200"
-          on:click={() => toggleMaybe(t)}></div>
-        <div
-          class:bg-red-400={responses[day.utc(t).format()] === 'no'}
-          class="border border-gray-200"
-          on:click={() => toggleNo(t)}></div>
-        <div class="ml-3"><span class="font-bold">{day.utc(t).local().format('DD/MM/YYYY hh:mm')}</span> ({day.utc(t).local().fromNow()})</div>
-      {/each}
-    </div>
+  {#if !$hasResponded || !$hasResponded[params.id]}
+    <form class="mt-5 max-w-xl" on:submit|preventDefault={onSubmit}>
+      <label for="name" class="font-bold text-gray-600">Your name</label>
+      <input type="text" bind:value={name} />
+      <div class="grid mt-4 grid-cols-3-1">
+        <div class="text-center">Yes</div>
+        <div class="text-center">Maybe</div>
+        <div class="text-center">No</div>
+        <div></div>
+        {#each event.times.sort((a, b) => day.utc(a).isAfter(day.utc(b))) as t}
+          <div
+            class:bg-green-400={responses[day.utc(t).format()] === 'yes'}
+            class="border border-gray-200"
+            on:click={() => toggleYes(t)}></div>
+          <div
+            class:bg-yellow-400={responses[day.utc(t).format()] === 'maybe'}
+            class="border border-gray-200"
+            on:click={() => toggleMaybe(t)}></div>
+          <div
+            class:bg-red-400={responses[day.utc(t).format()] === 'no'}
+            class="border border-gray-200"
+            on:click={() => toggleNo(t)}></div>
+          <div class="ml-3"><span class="font-bold">{day.utc(t).local().format('DD/MM/YYYY hh:mm')}</span> ({day.utc(t).local().fromNow()})</div>
+        {/each}
+      </div>
 
-    <button class="btn mt-5" on:click|preventDefault={onSubmit}>Submit</button>
-  </form>
+      <button class="btn mt-5" on:click|preventDefault={onSubmit}>Submit</button>
+    </form>
+  {:else}
+    <p class="max-w-xl mt-5 text-xl">You already responded to this event!</p>
+  {/if}
 {/if}
diff --git a/src/stores.js b/src/stores.js
@@ -0,0 +1,22 @@
+import { writable } from 'svelte/store'
+
+const localStorage = window.localStorage
+
+export const hasResponded = localStorageStore({})
+
+function localStorageStore (key) {
+  const item = localStorage.getItem(key)
+  const { subscribe, set } = writable(JSON.parse(item) || null)
+
+  return {
+    subscribe,
+    set: value => {
+      localStorage.setItem(key, JSON.stringify(value))
+      set(value)
+    },
+    clear: () => {
+      localStorage.removeItem(key)
+      set(null)
+    }
+  }
+}