Show Basket Time to Deletion (#106)

Users should be able to see what date their baskets expire on.
Currently, Pantry will refresh the TTL of a basket after each CRUD
operation. Stale baskets will expire after a few days. We should at
a minimum display the TTL of each basket on the dashboard so users
can view which baskets are stale.

* Introduce a TTL function to the dataStore
* Change the response type of Account.getBlocks()
* Add FontAwesome to the frontend
* Display the expiry date (TTL) of each basket beside it's name

Resolves #79

.eslintrc.js

@@ -94,7 +94,7 @@ module.exports = {
         "@typescript-eslint/no-empty-function": "warn",
         "@typescript-eslint/no-empty-interface": "error",
         "@typescript-eslint/no-explicit-any": "warn",
-        "@typescript-eslint/no-unsafe-assignment": "warn",
+        "@typescript-eslint/no-unsafe-assignment": "off",
         "@typescript-eslint/no-unsafe-call": "off",
         "@typescript-eslint/no-unsafe-member-access": "off",
         "@typescript-eslint/no-unsafe-return": "warn",

package.json

@@ -65,6 +65,9 @@
     "webpack-merge": "^4.1.3"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^2.0.2",
     "@sendgrid/mail": "^7.1.1",
     "airtable": "^0.8.1",
     "axios": "^0.21.2",

src/app/components/landingRight.ts

@@ -202,6 +202,11 @@ const landingRight = {
 
       return _positiveStatus ? _positiveMessage : _negativeMessage
     },
+    getDateOfDeletion(ttl: number): string {
+      const _currentDate = new Date()
+      _currentDate.setSeconds(ttl)
+      return _currentDate.toISOString().split('T')[0]
+    },
   },
   mounted() {
     this.fetchURLParams()

src/app/index.ts

@@ -1,9 +1,16 @@
 // External Files
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faEye, faEyeSlash, faClipboard } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 const vue = require('vue')
 const vueClipboard = require('vue-clipboard2')
 
 // Vue Setup
 vue.use(vueClipboard)
+vue.component('font-awesome-icon', FontAwesomeIcon)
+library.add(faClipboard)
+library.add(faEye)
+library.add(faEyeSlash)
 
 // CSS
 require('./scss/main.scss')

src/app/scss/_text.scss

@@ -50,10 +50,7 @@ a:any-link {
     float: right;
     color: $secondary-color;
     cursor: pointer;
-    margin: 0 3px;
-    &--no-float {
-      float: inherit;
-    }
+    margin: 0 5px;
   }
   &--light {
     color: $secondary-color;

src/app/templates/landingRight.html

@@ -161,16 +161,26 @@ <h2>
       <template v-if="pantry.data.baskets && pantry.data.baskets.length !== 0">
         <div class="basket__container">
           <ul>
-            <template v-for="basketName in pantry.data.baskets">
+            <template v-for="{ name, ttl } in pantry.data.baskets">
               <li class="text__container">
-                {{ basketName }}
-                <span class="text__button" @click="toggleBasket(basketName)">
-                  {{ activeBasket === basketName ? 'Hide' : 'Show' }} Contents
+                {{ name }} - 
+                <small>
+                  Expiry Date: {{ getDateOfDeletion(ttl) }} 
+                </small>
+                <span class="text__button" title="View Contents"
+                  @click="toggleBasket(name)">
+                  <template v-if="activeBasket === name">
+                    <font-awesome-icon icon="eye-slash" />
+                  </template>
+                  <template v-else>
+                    <font-awesome-icon icon="eye" />
+                  </template>
                 </span>
-                <span class="text__button text__button--no-float" @click="copyBasketLink(basketName)">
-                  Copy Link
+                <span class="text__button" title="Copy Direct Link"
+                  @click="copyBasketLink(name)">
+                  <font-awesome-icon icon="clipboard" />
                 </span>
-                <template v-if="activeBasket === basketName">
+                <template v-if="activeBasket === name">
                   <div class="basket__payload-container">
                     <json-view
                       :deep="1"

src/controllers/account.ts

@@ -74,9 +74,10 @@ class AccountController {
       const _blocks = await _account.getBlocks()
 
       logger.info(`Deleting account: ${uuid}`)
-      for (const _blockName of _blocks) {
-        logger.info(`Deleting block ${_blockName} in account: ${uuid}`)
-        const _block = await Block.get(uuid, _blockName)
+      for (const _item of _blocks) {
+        const { name } = _item
+        logger.info(`Deleting block ${name} in account: ${uuid}`)
+        const _block = await Block.get(uuid, name)
         await _block.delete()
       }
       await _account.delete()

src/interfaces/account.ts

@@ -1,3 +1,5 @@
+import { IBlockInfo } from './block'
+
 export interface IAccountParams {
   name: string,
   description: string,
@@ -25,6 +27,6 @@ export interface IAccountPrivate extends IAccountBase {
 }
 
 export interface IAccountPublic extends IAccountBase {
-  baskets: string[],
+  baskets: IBlockInfo[],
   percentFull: number,
 }

src/interfaces/block.ts

@@ -3,3 +3,8 @@ export interface IBlock {
   name: string,
   payload: any,
 }
+
+export interface IBlockInfo {
+  name: string,
+  ttl: number,
+}

src/models/account.ts

@@ -17,6 +17,7 @@ import * as mailer from '../services/mailer'
 
 // Interfaces
 import { IAccountPrivate, IAccountPublic, IAccountUpdateParams } from '../interfaces/account'
+import { IBlockInfo } from '../interfaces/block'
 
 const KEYS_PER_SCAN_ITERATION = 1_000_000
 
@@ -157,13 +158,16 @@ class Account {
     await this.store()
   }
 
-  public async getBlocks(): Promise<string[]> {
+  public async getBlocks(): Promise<IBlockInfo[]> {
     const _accountKey = Account.generateRedisKey(this.uuid)
-    const _blocks = await dataStore.find(`${_accountKey}::block:*`)
-
-    const _blocksSanitized = _blocks.map((block) => block.split(':')[4])
-
-    return _blocksSanitized
+    const _blockKeys = await dataStore.find(`${_accountKey}::block:*`)
+    const _blocks: IBlockInfo[] = await Promise.all(_blockKeys.map(async (key) => {
+      const _ttl = await dataStore.ttl(key)
+      const _sanitizedName = key.split(':')[4]
+      return({name: _sanitizedName, ttl: _ttl})
+    }))
+
+    return(_blocks)
   }
 
   public async saveError(message: string): Promise<void> {

src/services/__mocks__/dataStore.ts

@@ -5,6 +5,7 @@ const dataStore = {
   find: jest.fn(async () => { }),
   scan: jest.fn(async () => { }),
   ping: jest.fn(async () => { }),
+  ttl: jest.fn(async () => { }),
 }
 
 export = dataStore

src/services/dataStore.ts

@@ -133,3 +133,17 @@ export async function ping(): Promise<boolean> {
     return false
   }
 }
+
+export async function ttl(key: string): Promise<number> {
+  try {
+    const _redisClient = redis.createClient()
+    const _ttl = promisify(_redisClient.ttl).bind(_redisClient)
+    const _response = await _ttl(key)
+    _redisClient.quit()
+
+    return _response
+  } catch (error) {
+    logger.error(`Error when fetching ttl: ${error.message}`)
+    return -1
+  }
+}