diff --git a/client/components/LinksTable.tsx b/client/components/LinksTable.tsx index 1164cb555..f1b2a2614 100644 --- a/client/components/LinksTable.tsx +++ b/client/components/LinksTable.tsx @@ -8,6 +8,8 @@ import { ifProp } from "styled-tools"; import getConfig from "next/config"; import QRCode from "qrcode.react"; import Link from "next/link"; +import differenceInMilliseconds from "date-fns/differenceInMilliseconds"; +import ms from "ms"; import { removeProtocol, withComma, errorMessage } from "../utils"; import { useStoreActions, useStoreState } from "../store"; @@ -112,7 +114,8 @@ interface BanForm { interface EditForm { target: string; address: string; - description: string; + description?: string; + expire_in?: string; } const Row: FC = ({ index, link, setDeleteModal }) => { @@ -124,7 +127,12 @@ const Row: FC = ({ index, link, setDeleteModal }) => { { target: link.target, address: link.address, - description: link.description + description: link.description, + expire_in: link.expire_in + ? ms(differenceInMilliseconds(new Date(link.expire_in), new Date()), { + long: true + }) + : "" }, { withIds: true } ); @@ -189,9 +197,20 @@ const Row: FC = ({ index, link, setDeleteModal }) => { )} - {`${formatDistanceToNow( - new Date(link.created_at) - )} ago`} + + {formatDistanceToNow(new Date(link.created_at))} ago + {link.expire_in && ( + + Expires in{" "} + {ms( + differenceInMilliseconds(new Date(link.expire_in), new Date()), + { + long: true + } + )} + + )} + {copied ? ( = ({ index, link, setDeleteModal }) => { - + = ({ index, link, setDeleteModal }) => { /> + + + Expire in: + + + + +