use unique IDs to identify records

lib/public/scripts.js

@@ -5,11 +5,28 @@
 
   const useStorage = Boolean(window.localStorage)
 
-  if (!window.fetch || !window.Promise || !window.URLSearchParams) {
+  if (!window.fetch || !window.Promise || !window.URLSearchParams || !window.crypto) {
     console.info('JS features not available.')
     return
   }
 
+  // NOTE: Generate random IDs: https://stackoverflow.com/a/2117523/3056783
+  const uuidv4 = () => {
+    return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
+      (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+    )
+  }
+
+  const migrateRecord = (record) => {
+    // NOTE: v2 records
+    const id = record.id || record.order
+
+    return {
+      ...record,
+      id,
+    }
+  }
+
   const getStorage = () => {
     if (!useStorage) {
       return null
@@ -35,7 +52,7 @@
     localStorage.setItem('fb-to-ical-events', encodedStorage)
   }
 
-  const saveRecord = (order, link, createdAt, title) => {
+  const saveRecord = (id, link, createdAt, title) => {
     if (!useStorage) {
       return
     }
@@ -44,7 +61,7 @@
     const storageContents = getStorageContents(storage)
 
     const record = {
-      order,
+      id,
       link,
       createdAt: createdAt.toString(),
       title,
@@ -53,7 +70,7 @@
     updateStorage([ ...storageContents, record ])
   }
 
-  const deleteRecord = (order) => {
+  const deleteRecord = (id) => {
     if (!useStorage) {
       return
     }
@@ -61,7 +78,7 @@
     const storage = getStorage()
     const storageContents = getStorageContents(storage)
     const index = storageContents.findIndex((record) => {
-      return record.order === order
+      return record.id === id
     })
 
     if (!Number.isFinite(index)) {
@@ -78,8 +95,8 @@
     list.classList.remove('hidden')
   }
 
-  const deleteTableRow = (order, row) => {
-    deleteRecord(order)
+  const deleteTableRow = (id, row) => {
+    deleteRecord(id)
 
     if (!useStorage) {
       return
@@ -88,14 +105,11 @@
     row.remove()
   }
 
-  const insertTableRow = ({ order, link, createdAt, title }) => {
+  const insertTableRow = ({ id, link, createdAt, title }) => {
     showTable()
 
     const newRow = document.createElement('tr')
 
-    const orderCol = document.createElement('td')
-    orderCol.innerText = order
-
     const createdAtCol = document.createElement('td')
     const parsedCreatedAt = new Date(createdAt)
     createdAtCol.innerText = (parsedCreatedAt || new Date()).toLocaleString()
@@ -113,7 +127,7 @@
     deleteEl.classList.add('delete-record')
     deleteEl.addEventListener('click', (event) => {
       event.preventDefault()
-      deleteTableRow(order, newRow)
+      deleteTableRow(id, newRow)
     })
 
     const actionCol = document.createElement('td')
@@ -121,7 +135,6 @@
     actionCol.appendChild(downloadEl)
     actionCol.appendChild(deleteEl)
 
-    newRow.appendChild(orderCol)
     newRow.appendChild(createdAtCol)
     newRow.appendChild(titleCol)
     newRow.appendChild(actionCol)
@@ -130,12 +143,12 @@
   }
 
   const createRecord = (uri, summary) => {
-    const order = tableBody.querySelectorAll('tr').length + 1
+    const id = uuidv4()
     const createdAt = new Date()
 
-    saveRecord(order, uri, createdAt, summary)
+    saveRecord(id, uri, createdAt, summary)
     insertTableRow({
-      order,
+      id,
       link: uri,
       createdAt,
       title: summary,
@@ -147,6 +160,11 @@
       return
     }
 
+    const prevStorage = getStorage()
+    const migratedStorageContents = getStorageContents(prevStorage).map((record) => {
+      return migrateRecord(record)
+    })
+    updateStorage(migratedStorageContents)
     const storage = getStorage()
     const storageContents = getStorageContents(storage)
 
@@ -156,10 +174,10 @@
 
     storageContents
       .sort((a, b) => {
-        if (a.order < b.order) {
+        if (a.id < b.id) {
           return -1
         }
-        if (a.order > b.order) {
+        if (a.id > b.id) {
           return 1
         }
         return 0

lib/views/index.ejs

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