refactor: replace event list table with Svelte version

lib/frontend/components/AppContainer.svelte

@@ -5,7 +5,7 @@
   import { configStore, eventStore } from '../stores'
 
   $: showTrackingPanel = $configStore.track === undefined
-  $: showEventList = $eventStore.length > 0
+  $: showEventList = $eventStore.events.length > 0
 </script>
 
 {#if showTrackingPanel}

lib/frontend/components/EventList.svelte

@@ -55,7 +55,7 @@
       </tr>
     </thead>
     <tbody>
-      {#each $eventStore as event (event.id)}
+      {#each $eventStore.events as event (event.id)}
         <tr>
           <td>
             {event.startTime

lib/frontend/services/storageListener.js

@@ -36,7 +36,7 @@ class StorageListener {
         configStore.set(JSON.parse(event.newValue))
         break
       case STORAGE_KEYS.EVENTS:
-        eventStore.set(JSON.parse(event.newValue))
+        eventStore.set({ events: JSON.parse(event.newValue) })
         break
       default:
         return
@@ -48,7 +48,7 @@ class StorageListener {
   }
 
   _handleEventStoreChange(value) {
-    localStorage.setItem(STORAGE_KEYS.EVENTS, JSON.stringify(value))
+    localStorage.setItem(STORAGE_KEYS.EVENTS, JSON.stringify(value.events || []))
   }
 }
 

lib/frontend/stores/eventStore.js

@@ -4,40 +4,53 @@ import { STORAGE_KEYS } from '../services/storageListener'
 import { migrateRecord, sortRecord }  from '../utils'
 
 const createEventStore = () => {
-  const state = JSON.parse(localStorage.getItem(STORAGE_KEYS.EVENTS) || '[]')
+  const storedState = JSON.parse(localStorage.getItem(STORAGE_KEYS.EVENTS) || '[]')
     .map(migrateRecord)
     .sort(sortRecord)
 
+  let state = { events: storedState }
+
+  const getState = () => state
+
   const { subscribe, set, update } = writable(state)
 
   const setCalculation = ({ id, link, createdAt, startTime, title }) => {
-    update((prevState) => ([
-      ...prevState,
-      {
-        id,
-        link,
-        createdAt: createdAt.toString(),
-        startTime: startTime.toString(),
-        title,
-      },
-    ]))
+    update((prevState) => {
+      const nextState = {
+        ...prevState,
+        events: [
+          ...prevState.events,
+          {
+            id,
+            link,
+            createdAt: createdAt.toString(),
+            startTime: startTime.toString(),
+            title,
+          },
+        ]
+      }
+
+      state = nextState
+      return nextState
+    })
   }
 
   const clearCalculation = (id) => {
-    const calculationIndex = state.findIndex((event) => event.id === id)
+    const calculationIndex = getState().events.findIndex((event) => event.id === id)
 
     if (calculationIndex === -1) {
       return
     }
 
-    const nextState = [ ...state ]
-    nextState.splice(calculationIndex, 1)
+    const nextEvents = [ ...getState().events ]
+    nextEvents.splice(calculationIndex, 1)
+
+    const nextState = { ...getState(), events: nextEvents }
+    state = nextState
 
     set(nextState)
   }
 
-  const getState = () => state
-
   return {
     ...state,
     subscribe,

lib/static/app/storage.js

@@ -1,29 +1,6 @@
 // TODO: this import should be removed once refactoring is finished
 import { eventStore } from '../../frontend/stores'
 
-const migrateRecord = (record) => {
-  // NOTE: v3 records
-  const id = record.id || record.order
-  const startTime = record.startTime || null
-
-  return {
-    ...record,
-    id,
-    startTime,
-  }
-}
-
-const getStorage = () => {
-  const storage = localStorage.getItem('fb-to-ical-events')
-
-  if (!storage) {
-    localStorage.setItem('fb-to-ical-events', JSON.stringify([]))
-    return "[]"
-  }
-
-  return storage
-}
-
 const getConfigStorage = () => {
   const storage = localStorage.getItem('fb-to-ical-config')
 
@@ -39,36 +16,12 @@ const getStorageContents = (storage) => {
   return JSON.parse(storage)
 }
 
-const updateStorage = (storageContents) => {
-  const encodedStorage = JSON.stringify(storageContents)
-
-  localStorage.setItem('fb-to-ical-events', encodedStorage)
-}
-
-const updateConfigStorage = (storageContents, key, value) => {
-  const encodedStorage = JSON.stringify({
-    ...storageContents,
-    [key]: value,
-  })
-
-  localStorage.setItem('fb-to-ical-config', encodedStorage)
-}
-
 const saveRecord = ({ id, link, createdAt, startTime, title }) => {
   eventStore.setCalculation({ id, link, createdAt, startTime, title })
 }
 
-const deleteRecord = (id) => {
-  eventStore.clearCalculation(id)
-}
-
 export {
-  migrateRecord,
-  getStorage,
   getConfigStorage,
   getStorageContents,
-  updateStorage,
-  updateConfigStorage,
   saveRecord,
-  deleteRecord,
 }

lib/static/index.html

@@ -56,23 +56,9 @@
 
       <br />
 
-      <div class="list-wrapper">
-        <table id="list" class="hidden">
-          <thead>
-            <tr>
-              <td>Date</td>
-              <td>Name</td>
-              <td></td>
-            </tr>
-          </thead>
-          <tbody>
-          </tbody>
-        </table>
-      </div>
+      <div id="root"></div>
     </article>
     
-    <div id="root"></div>
-
     <footer>
       v.<%= htmlWebpackPlugin.options.version %> ◆
       <a href="https://ondrejsynacek.com" target="_blank">Ondrej Synacek</a> (2019) ◆

lib/static/index.js

@@ -1,13 +1,8 @@
 import { uuidv4, parseStartTimeFromiCalString } from './app/utils'
 import {
-  migrateRecord,
-  getStorage,
   getConfigStorage,
   getStorageContents,
-  updateStorage,
-  updateConfigStorage,
   saveRecord,
-  deleteRecord,
 } from './app/storage'
 import logger from './app/logger'
 import { extractEventDataFromHTML } from '../../lib/services/ics-retriever'
@@ -18,53 +13,6 @@ import boot from '../frontend'
 (() => {
   document.addEventListener('DOMContentLoaded', boot)
 
-  const showTable = () => {
-    list.classList.remove('hidden')
-  }
-
-  const deleteTableRow = (id, row) => {
-    deleteRecord(id)
-
-    row.remove()
-  }
-
-  const insertTableRow = ({ id, link, createdAt, startTime, title }) => {
-    showTable()
-
-    const newRow = document.createElement('tr')
-
-    const startTimeCol = document.createElement('td')
-    startTimeCol.innerText = startTime ?
-      new Date(startTime).toLocaleString() :
-      'N/A\xa0\xa0\xa0\xa0\xa0'
-
-    const downloadEl = document.createElement('a')
-    downloadEl.setAttribute('href', link)
-    downloadEl.innerText = title
-
-    const titleCol = document.createElement('td')
-    titleCol.appendChild(downloadEl)
-
-    const deleteEl = document.createElement('a')
-    deleteEl.setAttribute('href', 'javascript:void(0)')
-    deleteEl.innerText = '✖︎'
-    deleteEl.classList.add('delete-record')
-    deleteEl.addEventListener('click', (event) => {
-      event.preventDefault()
-      deleteTableRow(id, newRow)
-    })
-
-    const actionCol = document.createElement('td')
-    actionCol.classList.add('actions')
-    actionCol.appendChild(deleteEl)
-
-    newRow.appendChild(startTimeCol)
-    newRow.appendChild(titleCol)
-    newRow.appendChild(actionCol)
-
-    tableBody.prepend(newRow)
-  }
-
   const createRecord = (uri, summary, startTime) => {
     const id = uuidv4()
     const createdAt = new Date()
@@ -76,43 +24,6 @@ import boot from '../frontend'
       startTime,
       title: summary,
     })
-    insertTableRow({
-      id,
-      link: uri,
-      createdAt,
-      title: summary,
-      startTime
-    })
-  }
-
-  const hydrateList = () => {
-    const prevStorage = getStorage()
-    const migratedStorageContents = getStorageContents(prevStorage).map((record) => {
-      return migrateRecord(record)
-    })
-    updateStorage(migratedStorageContents)
-    const storage = getStorage()
-    const storageContents = getStorageContents(storage)
-
-    if (storageContents.length > 0) {
-      showTable()
-    }
-
-    storageContents
-      .sort((a, b) => {
-        const aDate = new Date(a.createdAt)
-        const bDate = new Date(b.createdAt)
-        if (aDate < bDate) {
-          return -1
-        }
-        if (aDate > bDate) {
-          return 1
-        }
-        return 0
-      })
-      .forEach((record) => {
-        insertTableRow(record)
-      })
   }
 
   const configureLogger = (logger) => {
@@ -203,8 +114,6 @@ import boot from '../frontend'
   const submitButton = document.querySelector("#submit")
   const input = document.querySelector("#url")
   const link = document.querySelector("#current-download")
-  const table = document.querySelector('#list')
-  const tableBody = table.querySelector('tbody')
 
   if (window.navigator && window.navigator.serviceWorker) {
     const serviceWorker = window.navigator.serviceWorker
@@ -240,7 +149,6 @@ import boot from '../frontend'
     })
   }
 
-  hydrateList()
   configureLogger(logger)
 
   const handleHTMLResponse = (html, url) => {