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,