fix: expires/expired text change

diced · Oct 31, 2022 · d2f3999 · d2f3999
1 parent 87fc9f2
commit d2f3999
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/components/pages/Invites.tsx b/src/components/pages/Invites.tsx
@@ -22,7 +22,7 @@ import MutedText from 'components/MutedText';
 import useFetch from 'hooks/useFetch';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { relativeTime } from 'lib/utils/client';
+import { expireText, relativeTime } from 'lib/utils/client';
 
 const expires = ['30m', '1h', '6h', '12h', '1d', '3d', '5d', '7d', 'never'];
 
@@ -202,16 +202,12 @@ export default function Uz2sers() {
                       </Title>
                       <Tooltip label={new Date(invite.created_at).toLocaleString()}>
                         <div>
-                          <MutedText size='sm'>
-                            Created: {relativeTime(new Date(invite.created_at))}
-                          </MutedText>
+                          <MutedText size='sm'>Created {relativeTime(new Date(invite.created_at))}</MutedText>
                         </div>
                       </Tooltip>
                       <Tooltip label={new Date(invite.expires_at).toLocaleString()}>
                         <div>
-                          <MutedText size='sm'>
-                            Expires: {relativeTime(new Date(invite.expires_at))}
-                          </MutedText>
+                          <MutedText size='sm'>{expireText(invite.expires_at)}</MutedText>
                         </div>
                       </Tooltip>
                     </Stack>

diff --git a/src/lib/utils/client.ts b/src/lib/utils/client.ts
@@ -91,3 +91,14 @@ export function percentChange(initial: number, final: number) {
 export function capitalize(str: string) {
   return str[0].toUpperCase() + str.slice(1).toLowerCase();
 }
+
+export function expireText(to_: string, from_: string = new Date().toLocaleString()) {
+  const from = new Date(from_);
+  const to = new Date(to_);
+
+  if (from.getTime() < to.getTime()) {
+    return `Expires ${dayjs(to).from(from)}`;
+  } else {
+    return `Expired ${dayjs(from).to(to)}`;
+  }
+}