From 2b76e32d5714fc410085b5a5ab5c1f4333190fe6 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Thu, 7 Mar 2024 09:34:06 -0300
Subject: time component

---
 .../demobank-ui/src/components/Cashouts/views.tsx  | 60 +++++++++---------
 packages/demobank-ui/src/components/Time.tsx       | 71 ++++++++++++++++++++++
 .../src/components/Transactions/views.tsx          | 15 ++---
 3 files changed, 109 insertions(+), 37 deletions(-)
 create mode 100644 packages/demobank-ui/src/components/Time.tsx

(limited to 'packages/demobank-ui/src/components')

diff --git a/packages/demobank-ui/src/components/Cashouts/views.tsx b/packages/demobank-ui/src/components/Cashouts/views.tsx
index 90ee6bc2f..09e986dd4 100644
--- a/packages/demobank-ui/src/components/Cashouts/views.tsx
+++ b/packages/demobank-ui/src/components/Cashouts/views.tsx
@@ -15,7 +15,9 @@
  */
 
 import {
+  AbsoluteTime,
   Amounts,
+  Duration,
   HttpStatusCode,
   TalerError,
   assertUnreachable,
@@ -31,6 +33,7 @@ import { useConversionInfo } from "../../hooks/circuit.js";
 import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
 import { ErrorLoadingWithDebug } from "../ErrorLoadingWithDebug.js";
 import { State } from "./index.js";
+import { Time } from "../Time.js";
 
 export function FailedView({ error }: State.Failed) {
   const { i18n } = useTranslationContext();
@@ -141,12 +144,6 @@ export function ReadyView({
                     </th>
                   </tr>
                   {txs.map((item) => {
-                    const creationTime =
-                      item.creation_time.t_s === "never"
-                        ? ""
-                        : format(item.creation_time.t_s * 1000, "HH:mm:ss", {
-                          locale: dateLocale,
-                        });
                     return (
                       <a
                         name="cashout details"
@@ -157,14 +154,17 @@ export function ReadyView({
                           cid: String(item.id),
                         })}
                       >
-                          <td class="relative py-2 pl-2 pr-2 text-sm ">
-                            <div class="font-medium text-gray-900">
-                              {creationTime}
-                            </div>
-                            {
-                              //FIXME: implement responsive view
-                            }
-                            {/* <dl class="font-normal sm:hidden">
+                        <td class="relative py-2 pl-2 pr-2 text-sm ">
+                          <div class="font-medium text-gray-900">
+                            <Time format="HH:mm:ss"
+                              timestamp={AbsoluteTime.fromProtocolTimestamp(item.creation_time)}
+                            // relative={Duration.fromSpec({ days: 1 })} 
+                            />
+                          </div>
+                          {
+                            //FIXME: implement responsive view
+                          }
+                          {/* <dl class="font-normal sm:hidden">
                         <dt class="sr-only sm:hidden"><i18n.Translate>Amount</i18n.Translate></dt>
                         <dd class="mt-1 truncate text-gray-700">
                           {item.negative ? i18n.str`sent` : i18n.str`received`} {item.amount ? (
@@ -185,24 +185,24 @@ export function ReadyView({
                           </pre>
                         </dd>
                       </dl> */}
-                          </td>
-                          <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-red-600 cursor-pointer">
-                            <RenderAmount
-                              value={Amounts.parseOrThrow(item.amount_debit)}
-                              spec={resp.body.regional_currency_specification}
-                            />
-                          </td>
-                          <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-green-600 cursor-pointer">
-                            <RenderAmount
-                              value={Amounts.parseOrThrow(item.amount_credit)}
-                              spec={resp.body.fiat_currency_specification}
-                            />
-                          </td>
+                        </td>
+                        <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-red-600 cursor-pointer">
+                          <RenderAmount
+                            value={Amounts.parseOrThrow(item.amount_debit)}
+                            spec={resp.body.regional_currency_specification}
+                          />
+                        </td>
+                        <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-green-600 cursor-pointer">
+                          <RenderAmount
+                            value={Amounts.parseOrThrow(item.amount_credit)}
+                            spec={resp.body.fiat_currency_specification}
+                          />
+                        </td>
 
-                          <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">
+                        <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">
 
-                            {item.subject}
-                          </td>
+                          {item.subject}
+                        </td>
                       </a>
                     );
                   })}
diff --git a/packages/demobank-ui/src/components/Time.tsx b/packages/demobank-ui/src/components/Time.tsx
new file mode 100644
index 000000000..39ce33f60
--- /dev/null
+++ b/packages/demobank-ui/src/components/Time.tsx
@@ -0,0 +1,71 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { AbsoluteTime, Duration } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { formatISO, format, formatDuration, intervalToDuration } from "date-fns";
+import { Fragment, h, VNode } from "preact";
+
+/**
+ * 
+ * @param timestamp time to be formatted
+ * @param relative duration threshold, if the difference is lower
+ * the timestamp will be formatted as relative time from "now"
+ * 
+ * @returns 
+ */
+export function Time({
+  timestamp,
+  relative,
+  format: formatString,
+}: {
+  timestamp: AbsoluteTime | undefined;
+  relative?: Duration,
+  format: string;
+}): VNode {
+  const { i18n, dateLocale } = useTranslationContext()
+  if (!timestamp) return <Fragment />
+
+  if (timestamp.t_ms === "never") {
+    return <time >{i18n.str`never`}</time>
+  }
+
+  const now = AbsoluteTime.now();
+  const diff = AbsoluteTime.difference(now, timestamp)
+  if (relative && now.t_ms !== "never" && Duration.cmp(diff, relative) === -1) {
+    const d = intervalToDuration({
+      start: now.t_ms,
+      end: timestamp.t_ms
+    })
+    d.seconds = 0
+    const duration = formatDuration(d, { locale: dateLocale })
+    const isFuture = AbsoluteTime.cmp(now, timestamp) < 0
+    if (isFuture) {
+      return <time dateTime={formatISO(timestamp.t_ms)}>
+        <i18n.Translate>in {duration}</i18n.Translate>
+      </time>
+    } else {
+      return <time dateTime={formatISO(timestamp.t_ms)}>
+        <i18n.Translate>{duration} ago</i18n.Translate>
+      </time>
+    }
+  }
+  return (
+    <time dateTime={formatISO(timestamp.t_ms)}>
+      {format(timestamp.t_ms, formatString, { locale: dateLocale })}
+    </time>
+  );
+}
diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx
index cdf134b2f..7da9fc5a9 100644
--- a/packages/demobank-ui/src/components/Transactions/views.tsx
+++ b/packages/demobank-ui/src/components/Transactions/views.tsx
@@ -20,6 +20,8 @@ import { Fragment, VNode, h } from "preact";
 import { useBankCoreApiContext } from "../../context/config.js";
 import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
 import { State } from "./index.js";
+import { Duration } from "@gnu-taler/taler-util";
+import { Time } from "../Time.js";
 
 export function ReadyView({
   transactions,
@@ -107,19 +109,18 @@ export function ReadyView({
                     </th>
                   </tr>
                   {txs.map((item) => {
-                    const time =
-                      item.when.t_ms === "never"
-                        ? ""
-                        : format(item.when.t_ms, "HH:mm:ss", {
-                          locale: dateLocale,
-                        });
                     return (
                       <tr
                         key={idx}
                         class="border-b border-gray-200 last:border-none"
                       >
                         <td class="relative py-2 pl-2 pr-2 text-sm ">
-                          <div class="font-medium text-gray-900">{time}</div>
+                          <div class="font-medium text-gray-900">
+                            <Time format="HH:mm:ss"
+                              timestamp={item.when}
+                            // relative={Duration.fromSpec({ days: 1 })} 
+                            />
+                          </div>
                           <dl class="font-normal sm:hidden">
                             <dt class="sr-only sm:hidden">
                               <i18n.Translate>Amount</i18n.Translate>
-- 
cgit v1.2.3