add ability to delete record, add emojis for action buttons

lib/public/scripts.js

@@ -53,25 +53,49 @@
     updateStorage([ ...storageContents, record ])
   }
 
+  const deleteRecord = (order) => {
+    if (!useStorage) {
+      return
+    }
+
+    const storage = getStorage()
+    const storageContents = getStorageContents(storage)
+    const index = storageContents.findIndex((record) => {
+      return record.order === order
+    })
+
+    if (!Number.isFinite(index)) {
+      return
+    }
+
+    const nextStorage = [ ...storageContents ]
+    nextStorage.splice(index, 1)
+
+    updateStorage(nextStorage)
+  }
+
   const showTable = () => {
     list.classList.remove('hidden')
   }
 
+  const deleteTableRow = (order, row) => {
+    deleteRecord(order)
+
+    if (!useStorage) {
+      return
+    }
+
+    row.remove()
+  }
+
   const insertTableRow = ({ order, link, createdAt, title }) => {
     showTable()
 
-    const row = document.createElement('tr')
+    const newRow = document.createElement('tr')
 
     const orderCol = document.createElement('td')
     orderCol.innerText = order
 
-    const linkElement = document.createElement('a')
-    linkElement.setAttribute('href', link)
-    linkElement.innerText = 'Download'
-
-    const linkCol = document.createElement('td')
-    linkCol.appendChild(linkElement)
-
     const createdAtCol = document.createElement('td')
     const parsedCreatedAt = new Date(createdAt)
     createdAtCol.innerText = (parsedCreatedAt || new Date()).toLocaleString()
@@ -79,12 +103,26 @@
     const titleCol = document.createElement('td')
     titleCol.innerText = title
 
-    const newRow = document.createElement('tr')
+    const downloadEl = document.createElement('a')
+    downloadEl.setAttribute('href', link)
+    downloadEl.innerText = '⬇︎'
+
+    const deleteEl = document.createElement('a')
+    deleteEl.setAttribute('href', 'javascript:void(0)')
+    deleteEl.innerText = '✖︎'
+    deleteEl.addEventListener('click', (event) => {
+      event.preventDefault()
+      deleteTableRow(order, newRow)
+    })
+
+    const actionCol = document.createElement('td')
+    actionCol.appendChild(downloadEl)
+    actionCol.appendChild(deleteEl)
 
     newRow.appendChild(orderCol)
-    newRow.appendChild(linkCol)
     newRow.appendChild(createdAtCol)
     newRow.appendChild(titleCol)
+    newRow.appendChild(actionCol)
 
     tableBody.prepend(newRow)
   }

lib/public/service-worker.js

@@ -1,4 +1,4 @@
-// Worker v8
+// Worker v9
 
 self.addEventListener('install', (event) => {
   event.waitUntil(
@@ -6,7 +6,7 @@ self.addEventListener('install', (event) => {
       return cache.addAll([
         '/',
         '/favicon.ico',
-        '/scripts.js?4',
+        '/scripts.js?5',
         '/style.css?5',
         '/about?2',
         '/icon-512.png',

lib/views/index.ejs

@@ -63,8 +63,9 @@
           <thead>
             <tr>
               <td>#</td>
-              <td>Link</td>
               <td>Created at</td>
+              <td>Title</td>
+              <td></td>
             </tr>
           </thead>
           <tbody>
@@ -79,6 +80,6 @@
       <a href="/about" target="_blank" title="About the project">About</about>
     </footer>
 
-    <script src="/scripts.js?4"></script>
+    <script src="/scripts.js?5"></script>
   </body>
 </html>