display date of the event instead of date of the creation of iCal file

lib/public/scripts.js

@@ -17,13 +17,31 @@
     )
   }
 
+  const parseStartTimeFromiCalString = (text = '') => {
+    const [ dateStr, timeStr ] = text.split('T')
+    const rawDate = dateStr || ''
+    const rawTime = timeStr || ''
+
+    const year = Number(rawDate.slice(0, 4))
+    const month = Number(Math.max(rawDate.slice(4, 6) - 1), 0)
+    const date = Number(rawDate.slice(6, 8))
+    const hour = Number(rawTime.slice(0, 2))
+    const minutes = Number(rawTime.slice(2, 4))
+    const seconds = Number(rawTime.slice(4, 6))
+
+    const parsedDate = new Date(year, month, date, hour, minutes, seconds)
+    return parsedDate.toString()
+  }
+
   const migrateRecord = (record) => {
-    // NOTE: v2 records
+    // NOTE: v3 records
     const id = record.id || record.order
+    const startTime = record.startTime || null
 
     return {
       ...record,
       id,
+      startTime,
     }
   }
 
@@ -52,7 +70,7 @@
     localStorage.setItem('fb-to-ical-events', encodedStorage)
   }
 
-  const saveRecord = (id, link, createdAt, title) => {
+  const saveRecord = ({ id, link, createdAt, startTime, title }) => {
     if (!useStorage) {
       return
     }
@@ -64,6 +82,7 @@
       id,
       link,
       createdAt: createdAt.toString(),
+      startTime: startTime.toString(),
       title,
     }
 
@@ -105,14 +124,15 @@
     row.remove()
   }
 
-  const insertTableRow = ({ id, link, createdAt, title }) => {
+  const insertTableRow = ({ id, link, createdAt, startTime, title }) => {
     showTable()
 
     const newRow = document.createElement('tr')
 
-    const createdAtCol = document.createElement('td')
-    const parsedCreatedAt = new Date(createdAt)
-    createdAtCol.innerText = (parsedCreatedAt || new Date()).toLocaleString()
+    const startTimeCol = document.createElement('td')
+    startTimeCol.innerText = startTime ?
+      new Date(startTime).toLocaleString() :
+      'N/A\xa0\xa0\xa0\xa0\xa0'
 
     const titleCol = document.createElement('td')
     titleCol.innerText = title
@@ -135,23 +155,30 @@
     actionCol.appendChild(downloadEl)
     actionCol.appendChild(deleteEl)
 
-    newRow.appendChild(createdAtCol)
+    newRow.appendChild(startTimeCol)
     newRow.appendChild(titleCol)
     newRow.appendChild(actionCol)
 
     tableBody.prepend(newRow)
   }
 
-  const createRecord = (uri, summary) => {
+  const createRecord = (uri, summary, startTime) => {
     const id = uuidv4()
     const createdAt = new Date()
 
-    saveRecord(id, uri, createdAt, summary)
+    saveRecord({
+      id,
+      link: uri,
+      createdAt,
+      startTime,
+      title: summary,
+    })
     insertTableRow({
       id,
       link: uri,
       createdAt,
       title: summary,
+      startTime
     })
   }
 
@@ -356,8 +383,13 @@
 
             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)
 
-            createRecord(uri, summary)
+            createRecord(uri, summary, startTime)
             clearStatuses()
           })
           .catch((err) => {

lib/public/style.css

@@ -87,6 +87,7 @@ input {
 }
 
 #list {
+  width: 100%;
 }
 
 .row {

lib/views/index.ejs

@@ -62,7 +62,7 @@
         <table id="list" class="hidden">
           <thead>
             <tr>
-              <td>Created at</td>
+              <td>Date</td>
               <td>Title</td>
               <td></td>
             </tr>