feature: add parsing status to UI

lib/frontend/actions/events.js

@@ -1,5 +1,5 @@
 import { postURL } from '../services'
-import { requestStore } from '../stores'
+import { parseStatusStore, requestStore } from '../stores'
 import { Request } from '../records'
 import { uuidv4, parseStartTimeFromiCalString } from '../utils'
 import { extractEventDataFromHTML } from '../../../lib/services/ics-retriever'
@@ -29,16 +29,14 @@ const getEventHTML = async (url) => {
   }
 }
 
-const createICS = (html, url, { logger }) => {
+const createICS = async (html, url, { logger }) => {
   try {
-    // TODO: set parsing status in UI
+    parseStatusStore.set('Parsing event data...')
 
     const eventData = extractEventDataFromHTML(html, url, { logger })
-    generateICS(eventData)
-      .then((text) => {
-        const dataUri = encodeURIComponent(text)
-        const uri = `data:text/calendar;charset=utf-8,${dataUri}`
-        console.log(`SUCCESS - uri: ${uri}`)
+    const text = await generateICS(eventData)
+    const dataUri = encodeURIComponent(text)
+    const uri = `data:text/calendar;charset=utf-8,${dataUri}`
 
         // TODO: create download link
         // link.setAttribute('href', uri)
@@ -47,25 +45,20 @@ const createICS = (html, url, { logger }) => {
 
         // input.value = ''
 
-        const summaryMatch = text.match(/SUMMARY:.*/)[0]
-        const summary = summaryMatch ? summaryMatch.replace(/SUMMARY:/, '') : ''
-        const startTimeMatches = text.match(/DTSTART:.*/)
-        const startTimeMatch = text.length > 0 ?
-          (startTimeMatches[0] || '').replace(/DTSTART:/, '') :
-          ''
-        const startTime = parseStartTimeFromiCalString(startTimeMatch)
+    const summaryMatch = text.match(/SUMMARY:.*/)[0]
+    const summary = summaryMatch ? summaryMatch.replace(/SUMMARY:/, '') : ''
+    const startTimeMatches = text.match(/DTSTART:.*/)
+    const startTimeMatch = text.length > 0 ?
+      (startTimeMatches[0] || '').replace(/DTSTART:/, '') :
+      ''
+    const startTime = parseStartTimeFromiCalString(startTimeMatch)
 
-        // TODO: save record to a store
-        // createRecord(uri, summary, startTime)
+    // TODO: save record to a store
+    // createRecord(uri, summary, startTime)
 
-        // TODO: clear UI status
-        // clearStatuses()
-      })
-      // TODO: catch errors
-      .catch(alert)
+    parseStatusStore.set(null)
   } catch (err) {
-    // TODO: catch errors
-    alert(err)
+    parseStatusStore.set(err)
   }
 }
 

lib/frontend/components/Status.svelte

@@ -14,7 +14,7 @@
 </style>
 
 <script>
-  import { requestStore } from '../stores'
+  import { parseStatusStore, requestStore } from '../stores'
 
   $: error = ($requestStore && $requestStore.error) ? $requestStore.error : null
   $: pendingRequest = Boolean($requestStore && !$requestStore.error)
@@ -31,4 +31,9 @@
       Fetching event {$requestStore.url}
     </div>
   {/if}
+  {#if $parseStatusStore}
+    <div class='status-item'>
+      {$parseStatusStore}
+    </div>
+  {/if}
 </div>

lib/frontend/stores/index.js

@@ -1,9 +1,11 @@
 import configStore from './configStore'
 import eventStore from './eventStore'
+import parseStatusStore from './parseStatusStore'
 import requestStore from './requestStore'
 
 export {
   configStore,
   eventStore,
+  parseStatusStore,
   requestStore,
 }

lib/frontend/stores/parseStatusStore.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store'
+
+export default writable(null)