From bb70a4261a0da48f030c31651a1b3434cdcf3369 Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <85403429+aomafarag@users.noreply.github.com>
Date: Mon, 5 Dec 2022 12:14:02 +0100
Subject: [PATCH] feat: Adjust table width (#549)

---
 .../auction/collateral/CollateralAuction.vue     | 10 +++++-----
 .../CollateralAuctionBidTransactionTable.vue     |  2 +-
 .../CollateralAuctionSwapTransactionTable.vue    |  2 +-
 .../CollateralAuctionsTable.stories.js           | 15 +++++++++++++++
 .../collateral/CollateralAuctionsTable.vue       |  9 +++++----
 .../auction/collateral/TimeTillProfitable.vue    |  2 +-
 frontend/components/auction/debt/DebtAuction.vue |  4 ++--
 .../debt/DebtAuctionBidTransactionTable.vue      |  2 +-
 .../auction/debt/DebtAuctionsTable.stories.js    | 15 +++++++++++++++
 .../auction/debt/DebtAuctionsTable.vue           |  9 +++++----
 .../auction/surplus/SurplusAuction.vue           |  2 +-
 .../surplus/SurplusAuctionsTable.stories.js      | 15 +++++++++++++++
 .../auction/surplus/SurplusAuctionsTable.vue     |  6 ++++--
 .../common/formatters/TimeTill.stories.js        | 14 ++++++++++++++
 .../components/common/formatters/TimeTill.vue    |  1 -
 .../components/panels/CollectAuctionPanel.vue    |  2 +-
 frontend/components/vault/VaultsTable.stories.js | 15 +++++++++++++++
 frontend/components/vault/VaultsTable.vue        |  7 ++++---
 frontend/helpers/tillDuration.ts                 | 16 +++++++++++++---
 19 files changed, 118 insertions(+), 30 deletions(-)

diff --git a/frontend/components/auction/collateral/CollateralAuction.vue b/frontend/components/auction/collateral/CollateralAuction.vue
index 3397b1df5..a69f24c73 100644
--- a/frontend/components/auction/collateral/CollateralAuction.vue
+++ b/frontend/components/auction/collateral/CollateralAuction.vue
@@ -21,7 +21,7 @@
                         <tr>
                             <td>Auction Ends</td>
                             <td>
-                                <time-till :date="auction.endDate" />
+                                <TimeTill :date="auction.endDate" />
                             </td>
                         </tr>
                         <tr>
@@ -77,7 +77,7 @@
                         <tr>
                             <td>Estimated Profitability Time</td>
                             <td>
-                                <time-till-profitable :auction="auction" />
+                                <TimeTillProfitable :auction="auction" />
                             </td>
                         </tr>
                         <tr>
@@ -89,7 +89,7 @@
                                     />
                                     <span>Updating...</span>
                                 </div>
-                                <time-till v-else :date="auction.fetchedAt" />
+                                <TimeTill v-else :date="auction.fetchedAt" />
                             </td>
                         </tr>
                         <template v-if="isTableExpanded">
@@ -188,7 +188,7 @@
                         <format-currency :value="auction.approximateUnitPrice" currency="DAI" /> (meaning
                         <format-currency :value="auction.approximateUnitPrice" currency="DAI" />
                         per <format-currency :currency="auction.collateralSymbol" /> on average) after
-                        <time-till :date="auction.endDate" />.
+                        <TimeTill :date="auction.endDate" />.
                     </template>
                 </TextBlock>
 
@@ -281,7 +281,7 @@ import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
 import Loading from '~/components/common/other/Loading.vue';
 import Explain from '~/components/common/other/Explain.vue';
 import TimeTillProfitable from '~/components/auction/collateral/TimeTillProfitable.vue';
-import CollateralAuctionEventsBlock from '~/components/auction/collateral/CollateralAuctionEventsBlock';
+import CollateralAuctionEventsBlock from '~/components/auction/collateral/CollateralAuctionEventsBlock.vue';
 import AuctionRestartPanel from '~/components/panels/AuctionRestartPanel.vue';
 import LoadingIcon from '~/assets/icons/loading.svg';
 
diff --git a/frontend/components/auction/collateral/CollateralAuctionBidTransactionTable.vue b/frontend/components/auction/collateral/CollateralAuctionBidTransactionTable.vue
index fcbeb003c..2510247b5 100644
--- a/frontend/components/auction/collateral/CollateralAuctionBidTransactionTable.vue
+++ b/frontend/components/auction/collateral/CollateralAuctionBidTransactionTable.vue
@@ -3,7 +3,7 @@
         <div class="flex justify-between">
             <div>Auction Ends</div>
             <div>
-                <time-till :date="auctionTransaction.endDate" />
+                <TimeTill :date="auctionTransaction.endDate" />
             </div>
         </div>
         <div class="flex justify-between">
diff --git a/frontend/components/auction/collateral/CollateralAuctionSwapTransactionTable.vue b/frontend/components/auction/collateral/CollateralAuctionSwapTransactionTable.vue
index 03cbdecae..f19e66560 100644
--- a/frontend/components/auction/collateral/CollateralAuctionSwapTransactionTable.vue
+++ b/frontend/components/auction/collateral/CollateralAuctionSwapTransactionTable.vue
@@ -2,7 +2,7 @@
     <TextBlock class="flex flex-col space-y-1">
         <div class="flex w-full justify-between">
             <div>Auction Ends</div>
-            <div class="RightInfo"><time-till :date="auctionTransaction.endDate" /></div>
+            <div class="RightInfo"><TimeTill :date="auctionTransaction.endDate" /></div>
         </div>
         <div class="flex w-full justify-between">
             <div>Auction Amount</div>
diff --git a/frontend/components/auction/collateral/CollateralAuctionsTable.stories.js b/frontend/components/auction/collateral/CollateralAuctionsTable.stories.js
index 69e7b576d..88f39d205 100644
--- a/frontend/components/auction/collateral/CollateralAuctionsTable.stories.js
+++ b/frontend/components/auction/collateral/CollateralAuctionsTable.stories.js
@@ -12,6 +12,7 @@ const common = {
         auctions: fakeAuctions,
         selectedAuctionId: randomSelectedAuction.id,
         lastUpdated: new Date(faker.date.recent()),
+        isLoading: false,
     }),
 };
 
@@ -21,6 +22,20 @@ storiesOf('Auction/Collateral/CollateralAuctionsTable', module)
         template:
             '<CollateralAuctionsTable :auctions="auctions" :selectedAuctionId="selectedAuctionId" :last-updated="lastUpdated" />',
     }))
+    .add('Reset Updated Timer', () => ({
+        ...common,
+        created() {
+            setInterval(() => {
+                this.isLoading = true;
+                setTimeout(() => {
+                    this.isLoading = false;
+                }, 1000);
+                this.lastUpdated = new Date(faker.date.recent());
+            }, 10 * 1000);
+        },
+        template:
+            '<CollateralAuctionsTable :auctions="auctions" :selectedAuctionId="selectedAuctionId" :last-updated="lastUpdated" :is-loading="isLoading" />',
+    }))
     .add('Fetching With Auctions', () => ({
         ...common,
         template: '<CollateralAuctionsTable :auctions="auctions" :last-updated="lastUpdated" :is-loading="true" />',
diff --git a/frontend/components/auction/collateral/CollateralAuctionsTable.vue b/frontend/components/auction/collateral/CollateralAuctionsTable.vue
index 517fde9be..3364665ed 100644
--- a/frontend/components/auction/collateral/CollateralAuctionsTable.vue
+++ b/frontend/components/auction/collateral/CollateralAuctionsTable.vue
@@ -10,6 +10,8 @@
             :custom-row="customRowEvents"
             :get-popup-container="() => $el"
             :locale="{ emptyText: 'No active auctions' }"
+            :table-layout="auto"
+            :scroll="{ x: 'max-content' }"
             class="AuctionsTable relative overflow-visible"
         >
             <div slot="collateralAmount" slot-scope="collateralAmount, record" class="flex items-center space-x-2">
@@ -42,7 +44,7 @@
                 <span v-else-if="!record.isActive" class="opacity-50"> Requires Restart </span>
                 <span v-else>
                     Ends in
-                    <time-till :date="endDate" />
+                    <TimeTill :date="endDate" />
                 </span>
             </div>
             <div slot="updatingStatus" class="opacity-50 font-normal">
@@ -50,8 +52,8 @@
                     <LoadingIcon class="h-4 w-4 animate animate-spin fill-current dark:text-gray-300" />
                     <span>Updating...</span>
                 </div>
-                <span v-else-if="lastUpdated"> Last updated <TimeTill :date="lastUpdated" /></span>
-                <span v-else> Last updated unknown time ago </span>
+                <span v-else-if="lastUpdated">Updated <TimeTill :date="lastUpdated" /></span>
+                <span v-else>Updated <span class="opacity-50">unknown time</span> ago</span>
             </div>
             <div slot="action" slot-scope="text, record, index" class="w-full h-full">
                 <nuxt-link
@@ -186,7 +188,6 @@ export default Vue.extend({
                     dataIndex: 'endDate',
                     scopedSlots: { customRender: 'endDate' },
                     sorter: compareBy('endDate', (a: Date, b: Date) => compareAsc(a, b)),
-                    width: '200px',
                 },
                 {
                     slots: { title: 'updatingStatus', customRender: 'action' },
diff --git a/frontend/components/auction/collateral/TimeTillProfitable.vue b/frontend/components/auction/collateral/TimeTillProfitable.vue
index 1d6e9bf5c..10b3d377a 100644
--- a/frontend/components/auction/collateral/TimeTillProfitable.vue
+++ b/frontend/components/auction/collateral/TimeTillProfitable.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div v-if="transactionGrossProfitDate">
-            <time-till v-if="isProfitableBeforeEnding" :date="transactionGrossProfitDate" />
+            <TimeTill v-if="isProfitableBeforeEnding" :date="transactionGrossProfitDate" />
             <div v-else>Likely will not be profitable</div>
         </div>
         <div v-else-if="isAlreadyProfitable">Auction is profitable</div>
diff --git a/frontend/components/auction/debt/DebtAuction.vue b/frontend/components/auction/debt/DebtAuction.vue
index 7d434d76d..2bb248f6f 100644
--- a/frontend/components/auction/debt/DebtAuction.vue
+++ b/frontend/components/auction/debt/DebtAuction.vue
@@ -31,7 +31,7 @@
                                 <span v-else-if="requiresRestart">Requires restart</span>
                                 <span v-else-if="auction.state === 'ready-for-collection'">Ended </span>
                                 <span v-else>Collected </span>
-                                <time-till
+                                <TimeTill
                                     v-if="auction.earliestEndDate && !requiresRestart"
                                     :date="auction.earliestEndDate"
                                 />
@@ -100,7 +100,7 @@
                                     />
                                     <span>Updating...</span>
                                 </div>
-                                <time-till v-else :date="auction.fetchedAt" />
+                                <TimeTill v-else :date="auction.fetchedAt" />
                             </td>
                         </tr>
                     </tbody>
diff --git a/frontend/components/auction/debt/DebtAuctionBidTransactionTable.vue b/frontend/components/auction/debt/DebtAuctionBidTransactionTable.vue
index 4148c9e68..ae843f197 100644
--- a/frontend/components/auction/debt/DebtAuctionBidTransactionTable.vue
+++ b/frontend/components/auction/debt/DebtAuctionBidTransactionTable.vue
@@ -3,7 +3,7 @@
         <div class="flex justify-between">
             <div>Auction State</div>
             <div>
-                <time-till :date="auction.auctionEndDate" />
+                <TimeTill :date="auction.auctionEndDate" />
             </div>
         </div>
         <div class="flex justify-between">
diff --git a/frontend/components/auction/debt/DebtAuctionsTable.stories.js b/frontend/components/auction/debt/DebtAuctionsTable.stories.js
index d5b8ca66f..feff7ec5e 100644
--- a/frontend/components/auction/debt/DebtAuctionsTable.stories.js
+++ b/frontend/components/auction/debt/DebtAuctionsTable.stories.js
@@ -12,6 +12,7 @@ const common = {
         auctions: fakeAuctions,
         selectedAuctionId: randomSelectedAuction.id,
         lastUpdated: new Date(faker.date.recent()),
+        isLoading: false,
     }),
 };
 
@@ -21,6 +22,20 @@ storiesOf('Auction/Debt/DebtAuctionsTable', module)
         template:
             '<DebtAuctionsTable :auctions="auctions" :selectedAuctionId="selectedAuctionId" :last-updated="lastUpdated" />',
     }))
+    .add('Reset Updated Timer', () => ({
+        ...common,
+        created() {
+            setInterval(() => {
+                this.isLoading = true;
+                setTimeout(() => {
+                    this.isLoading = false;
+                }, 1000);
+                this.lastUpdated = new Date(faker.date.recent());
+            }, 10 * 1000);
+        },
+        template:
+            '<DebtAuctionsTable :auctions="auctions" :selectedAuctionId="selectedAuctionId" :last-updated="lastUpdated" :is-loading="isLoading" />',
+    }))
     .add('Fetching With Auctions', () => ({
         ...common,
         template: '<DebtAuctionsTable :auctions="auctions" :last-updated="lastUpdated" :is-loading="true" />',
diff --git a/frontend/components/auction/debt/DebtAuctionsTable.vue b/frontend/components/auction/debt/DebtAuctionsTable.vue
index 31e6cc49c..c2836abb5 100644
--- a/frontend/components/auction/debt/DebtAuctionsTable.vue
+++ b/frontend/components/auction/debt/DebtAuctionsTable.vue
@@ -10,6 +10,8 @@
             :custom-row="customRowEvents"
             :get-popup-container="() => $el"
             :locale="{ emptyText: 'No active auctions' }"
+            :table-layout="auto"
+            :scroll="{ x: 'max-content' }"
             class="AuctionsTable relative overflow-visible"
         >
             <div slot="bidAmountDai" slot-scope="bidAmountDai">
@@ -45,15 +47,15 @@
                 <span v-else-if="state === 'requires-restart'"> Requires Restart </span>
                 <span v-else-if="state === 'ready-for-collection'"> Collectable since </span>
                 <span v-else> Expires in </span>
-                <time-till v-if="state !== 'requires-restart'" :date="record.earliestEndDate" />
+                <TimeTill v-if="state !== 'requires-restart'" :date="record.earliestEndDate" />
             </div>
             <div slot="updatingStatus" class="opacity-50 font-normal">
                 <div v-if="isLoading" class="flex items-center space-x-2">
                     <LoadingIcon class="h-4 w-4 animate animate-spin fill-current dark:text-gray-300" />
                     <span>Updating...</span>
                 </div>
-                <span v-else-if="lastUpdated"> Last updated <TimeTill :date="lastUpdated" /></span>
-                <span v-else> Last updated unknown time ago </span>
+                <span v-else-if="lastUpdated">Updated <TimeTill :date="lastUpdated" /></span>
+                <span v-else>Updated <span class="opacity-50">unknown time</span> ago</span>
             </div>
             <div slot="action" slot-scope="text, record, index" class="w-full h-full">
                 <nuxt-link
@@ -234,7 +236,6 @@ export default Vue.extend({
                 {
                     slots: { title: 'updatingStatus', customRender: 'action' },
                     scopedSlots: { customRender: 'action' },
-                    width: '20%',
                 },
             ];
         },
diff --git a/frontend/components/auction/surplus/SurplusAuction.vue b/frontend/components/auction/surplus/SurplusAuction.vue
index e050efb46..e9a9dc61e 100644
--- a/frontend/components/auction/surplus/SurplusAuction.vue
+++ b/frontend/components/auction/surplus/SurplusAuction.vue
@@ -93,7 +93,7 @@
                                     />
                                     <span>Updating...</span>
                                 </div>
-                                <time-till v-else :date="auction.fetchedAt" />
+                                <TimeTill v-else :date="auction.fetchedAt" />
                             </td>
                         </tr>
                     </tbody>
diff --git a/frontend/components/auction/surplus/SurplusAuctionsTable.stories.js b/frontend/components/auction/surplus/SurplusAuctionsTable.stories.js
index 9639e8a5b..0d800af70 100644
--- a/frontend/components/auction/surplus/SurplusAuctionsTable.stories.js
+++ b/frontend/components/auction/surplus/SurplusAuctionsTable.stories.js
@@ -12,6 +12,7 @@ const common = {
         auctions: fakeAuctions,
         selectedAuctionId: randomSelectedAuction.id,
         lastUpdated: new Date(faker.date.recent()),
+        isLoading: false,
     }),
 };
 
@@ -21,6 +22,20 @@ storiesOf('Auction/Surplus/SurplusAuctionsTable', module)
         template:
             '<SurplusAuctionsTable :auctions="auctions" :selectedAuctionId="selectedAuctionId" :last-updated="lastUpdated" />',
     }))
+    .add('Reset Updated Timer', () => ({
+        ...common,
+        created() {
+            setInterval(() => {
+                this.isLoading = true;
+                setTimeout(() => {
+                    this.isLoading = false;
+                }, 1000);
+                this.lastUpdated = new Date(faker.date.recent());
+            }, 10 * 1000);
+        },
+        template:
+            '<SurplusAuctionsTable :auctions="auctions" :selectedAuctionId="selectedAuctionId" :last-updated="lastUpdated" :is-loading="isLoading" />',
+    }))
     .add('Fetching With Auctions', () => ({
         ...common,
         template: '<SurplusAuctionsTable :auctions="auctions" :last-updated="lastUpdated" :is-loading="true" />',
diff --git a/frontend/components/auction/surplus/SurplusAuctionsTable.vue b/frontend/components/auction/surplus/SurplusAuctionsTable.vue
index 5ece97514..39fc6beea 100644
--- a/frontend/components/auction/surplus/SurplusAuctionsTable.vue
+++ b/frontend/components/auction/surplus/SurplusAuctionsTable.vue
@@ -10,6 +10,8 @@
             :custom-row="customRowEvents"
             :get-popup-container="() => $el"
             :locale="{ emptyText: 'No active auctions' }"
+            :table-layout="auto"
+            :scroll="{ x: 'max-content' }"
             class="AuctionsTable relative overflow-visible"
         >
             <div slot="auctionAmount" slot-scope="receiveAmountDAI">
@@ -48,8 +50,8 @@
                     <LoadingIcon class="h-4 w-4 animate animate-spin fill-current dark:text-gray-300" />
                     <span>Updating...</span>
                 </div>
-                <span v-else-if="lastUpdated"> Last updated <TimeTill :date="lastUpdated" /></span>
-                <span v-else> Last updated unknown time ago </span>
+                <span v-else-if="lastUpdated">Updated <TimeTill :date="lastUpdated" /></span>
+                <span v-else>Updated <span class="opacity-50">unknown time</span> ago</span>
             </div>
             <div slot="action" slot-scope="text, record, index" class="w-full h-full">
                 <nuxt-link
diff --git a/frontend/components/common/formatters/TimeTill.stories.js b/frontend/components/common/formatters/TimeTill.stories.js
index 145df9f05..7d5596571 100644
--- a/frontend/components/common/formatters/TimeTill.stories.js
+++ b/frontend/components/common/formatters/TimeTill.stories.js
@@ -23,4 +23,18 @@ storiesOf('Common/Formatters/TimeTill', module)
             date: new Date(Date.now() + 5000).toUTCString(),
         }),
         template: `<TimeTill :date="date" />`,
+    }))
+    .add('Recent Past', () => ({
+        components: { TimeTill },
+        data: () => ({
+            date: faker.date.recent(),
+        }),
+        template: `<TimeTill :date="date" />`,
+    }))
+    .add('Late Past', () => ({
+        components: { TimeTill },
+        data: () => ({
+            date: faker.date.past(),
+        }),
+        template: `<TimeTill :date="date" />`,
     }));
diff --git a/frontend/components/common/formatters/TimeTill.vue b/frontend/components/common/formatters/TimeTill.vue
index 128f7ccdb..c0ae39c2f 100644
--- a/frontend/components/common/formatters/TimeTill.vue
+++ b/frontend/components/common/formatters/TimeTill.vue
@@ -41,7 +41,6 @@ export default Vue.extend({
             if (this.parsedDate) {
                 const now = new Date();
                 this.timeTill = formatInterval(now, this.parsedDate);
-
                 const duration = this.parsedDate.getTime() - now.getTime();
                 this.isEndingSoon = duration < ENDING_SOON_THRESHOLD && duration > 0;
             } else {
diff --git a/frontend/components/panels/CollectAuctionPanel.vue b/frontend/components/panels/CollectAuctionPanel.vue
index e404a435c..9640ecfbb 100644
--- a/frontend/components/panels/CollectAuctionPanel.vue
+++ b/frontend/components/panels/CollectAuctionPanel.vue
@@ -2,7 +2,7 @@
     <BasePanel :current-state="currentStateAndTitle.name">
         <template #title>
             {{ currentStateAndTitle.title }}
-            <time-till v-if="auction.state === 'have-bids'" :date="auction.earliestEndDate" />
+            <TimeTill v-if="auction.state === 'have-bids'" :date="auction.earliestEndDate" />
         </template>
 
         <TextBlock v-if="auction.state === 'ready-for-collection'">
diff --git a/frontend/components/vault/VaultsTable.stories.js b/frontend/components/vault/VaultsTable.stories.js
index d9add5e42..ed98bd011 100644
--- a/frontend/components/vault/VaultsTable.stories.js
+++ b/frontend/components/vault/VaultsTable.stories.js
@@ -12,6 +12,7 @@ const common = {
         vaultTransactions: fakeVaultTransaction,
         selectedVaultId: randomSelectedVault.id,
         lastUpdated: new Date(faker.date.recent()),
+        isLoading: false,
     }),
 };
 
@@ -21,6 +22,20 @@ storiesOf('Vault/VaultsTable', module)
         template:
             '<VaultsTable :vaultTransactions="vaultTransactions" :selectedVaultId="selectedVaultId" :last-updated="lastUpdated" />',
     }))
+    .add('Reset Updated Timer', () => ({
+        ...common,
+        created() {
+            setInterval(() => {
+                this.isLoading = true;
+                setTimeout(() => {
+                    this.isLoading = false;
+                }, 1000);
+                this.lastUpdated = new Date(faker.date.recent());
+            }, 10 * 1000);
+        },
+        template:
+            '<VaultsTable :vaultTransactions="vaultTransactions" :selectedVaultId="selectedVaultId" :last-updated="lastUpdated" :is-loading="isLoading" />',
+    }))
     .add('Fetching With Vaults', () => ({
         ...common,
         template:
diff --git a/frontend/components/vault/VaultsTable.vue b/frontend/components/vault/VaultsTable.vue
index 2e89e944a..b8d44d7e4 100644
--- a/frontend/components/vault/VaultsTable.vue
+++ b/frontend/components/vault/VaultsTable.vue
@@ -10,6 +10,8 @@
             :custom-row="customRowEvents"
             :get-popup-container="() => $el"
             :locale="{ emptyText: 'There are currently no vaults at risk.' }"
+            :table-layout="auto"
+            :scroll="{ x: 'max-content' }"
             class="VaultsTable relative overflow-visible"
         >
             <div slot="collateralAmount" slot-scope="collateralAmount, record">
@@ -44,8 +46,8 @@
                     <LoadingIcon class="h-4 w-4 animate animate-spin fill-current dark:text-gray-300" />
                     <span>Updating...</span>
                 </div>
-                <span v-else-if="lastUpdated"> Last updated <TimeTill :date="lastUpdated" /></span>
-                <span v-else> Last updated unknown time ago </span>
+                <span v-else-if="lastUpdated">Updated <TimeTill :date="lastUpdated" /></span>
+                <span v-else>Updated <span class="opacity-50">unknown time</span> ago</span>
             </div>
             <div slot="action" slot-scope="text, record, index" class="w-full h-full">
                 <nuxt-link
@@ -184,7 +186,6 @@ export default Vue.extend({
                 {
                     slots: { title: 'updatingStatus', customRender: 'action' },
                     scopedSlots: { customRender: 'action' },
-                    width: '20%',
                 },
             ];
         },
diff --git a/frontend/helpers/tillDuration.ts b/frontend/helpers/tillDuration.ts
index fe470d0e9..57f586c9e 100644
--- a/frontend/helpers/tillDuration.ts
+++ b/frontend/helpers/tillDuration.ts
@@ -1,4 +1,4 @@
-import { intervalToDuration, formatDistance, Duration } from 'date-fns';
+import { intervalToDuration, formatDistance, Duration, differenceInDays } from 'date-fns';
 
 const formatDuration = function (duration: Duration): string {
     // formats duration into `1y 2m 3d 4h 5m 6s` format
@@ -28,8 +28,18 @@ export const formatInterval = function (startDate: Date, endDate: Date): string
         });
         return formatDuration(duration);
     } else {
-        return formatDistance(endDate, startDate, {
-            addSuffix: true,
+        // check if difference between start and end dates is a day or more
+        if (differenceInDays(startDate, endDate) >= 1) {
+            // return less precise duration
+            return formatDistance(endDate, startDate, {
+                addSuffix: true,
+            });
+        }
+        // switch start and end dates to count up
+        const duration = intervalToDuration({
+            start: endDate,
+            end: startDate,
         });
+        return `${formatDuration(duration)} ago`;
     }
 };