From 2335c3418cfbcc8a0196f0f161bab31ade99acb2 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Thu, 20 Jul 2023 17:01:35 -0300
Subject: make signed request to exchange

---
 packages/aml-backoffice-ui/src/pages/Cases.tsx | 204 ++++++++++++++-----------
 1 file changed, 112 insertions(+), 92 deletions(-)

(limited to 'packages/aml-backoffice-ui/src/pages/Cases.tsx')

diff --git a/packages/aml-backoffice-ui/src/pages/Cases.tsx b/packages/aml-backoffice-ui/src/pages/Cases.tsx
index 28b9d2a88..d96e7a90c 100644
--- a/packages/aml-backoffice-ui/src/pages/Cases.tsx
+++ b/packages/aml-backoffice-ui/src/pages/Cases.tsx
@@ -1,15 +1,18 @@
-import { VNode, h } from "preact";
-import { Pages } from "../pages.js";
-import { AmlRecords, AmlState } from "../types.js";
-import { InputChoiceHorizontal } from "../handlers/InputChoiceHorizontal.js";
-import { createNewForm } from "../handlers/forms.js";
 import { TranslatedString } from "@gnu-taler/taler-util";
-import { amlStateConverter as amlStateConverter } from "./CaseDetails.js";
+import { VNode, h } from "preact";
 import { useState } from "preact/hooks";
-import { HandleAccountNotReady } from "./HandleAccountNotReady.js";
+import { createNewForm } from "../handlers/forms.js";
+import { useCases } from "../hooks/useCases.js";
 import { useOfficer } from "../hooks/useOfficer.js";
+import { Pages } from "../pages.js";
+import { AmlExchangeBackend } from "../types.js";
+import { amlStateConverter } from "./CaseDetails.js";
+import { HandleAccountNotReady } from "./HandleAccountNotReady.js";
+import { buildQuerySignature } from "../account.js";
+import { handleNotOkResult } from "../utils/errors.js";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 
-const response: AmlRecords = {
+const response: AmlExchangeBackend.AmlRecords = {
   records: [
     {
       current_state: 0,
@@ -56,7 +59,7 @@ const response: AmlRecords = {
 
 function doFilter(
   list: typeof response.records,
-  filter: AmlState | undefined,
+  filter: AmlExchangeBackend.AmlState | undefined,
 ): typeof response.records {
   if (filter === undefined) return list;
   return list.filter((r) => r.current_state === filter);
@@ -64,14 +67,27 @@ function doFilter(
 
 export function Cases() {
   const officer = useOfficer();
+  const { i18n } = useTranslationContext();
   if (officer.state !== "ready") {
     return <HandleAccountNotReady officer={officer} />;
   }
   const form = createNewForm<{
-    state: AmlState;
+    state: AmlExchangeBackend.AmlState;
   }>();
-  const initial = { state: AmlState.pending };
-  const [list, setList] = useState(doFilter(response.records, initial.state));
+
+  const signature =
+    officer.state === "ready"
+      ? buildQuerySignature(officer.account.signingKey)
+      : undefined;
+
+  const initial = AmlExchangeBackend.AmlState.pending;
+  const [stateFilter, setStateFilter] = useState(initial);
+  const list = useCases(officer.account.accountId, stateFilter, signature);
+
+  if (!list.ok && !list.loading) {
+    return handleNotOkResult(i18n)(list);
+  }
+
   return (
     <div>
       <div class="px-4 sm:px-6 lg:px-8">
@@ -85,9 +101,9 @@ export function Cases() {
             </p>
           </div>
           <form.Provider
-            initialValue={initial}
+            initialValue={{ state: stateFilter }}
             onUpdate={(v) => {
-              setList(doFilter(response.records, v.state));
+              setStateFilter(v.state ?? initial);
             }}
             onSubmit={(v) => {}}
           >
@@ -98,15 +114,15 @@ export function Cases() {
               choices={[
                 {
                   label: "Pending" as TranslatedString,
-                  value: AmlState.pending,
+                  value: AmlExchangeBackend.AmlState.pending,
                 },
                 {
                   label: "Frozen" as TranslatedString,
-                  value: AmlState.frozen,
+                  value: AmlExchangeBackend.AmlState.frozen,
                 },
                 {
                   label: "Normal" as TranslatedString,
-                  value: AmlState.normal,
+                  value: AmlExchangeBackend.AmlState.normal,
                 },
               ]}
             />
@@ -114,82 +130,86 @@ export function Cases() {
         </div>
         <div class="mt-8 flow-root">
           <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-              <Pagination />
-              <table class="min-w-full divide-y divide-gray-300">
-                <thead>
-                  <tr>
-                    <th
-                      scope="col"
-                      class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                    >
-                      Account Id
-                    </th>
-                    <th
-                      scope="col"
-                      class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                    >
-                      Status
-                    </th>
-                    <th
-                      scope="col"
-                      class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                    >
-                      Threshold
-                    </th>
-                  </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-200 bg-white">
-                  {list.map((r) => {
-                    return (
-                      <tr class="hover:bg-gray-100 ">
-                        <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500 ">
-                          <div class="text-gray-900">
-                            <a
-                              href={Pages.details.url({ account: r.h_payto })}
-                              class="text-indigo-600 hover:text-indigo-900"
-                            >
-                              {r.h_payto}
-                            </a>
-                          </div>
-                        </td>
-                        <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
-                          {((state: AmlState): VNode => {
-                            switch (state) {
-                              case AmlState.normal: {
-                                return (
-                                  <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
-                                    Normal
-                                  </span>
-                                );
-                              }
-                              case AmlState.pending: {
-                                return (
-                                  <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-green-600/20">
-                                    Pending
-                                  </span>
-                                );
-                              }
-                              case AmlState.frozen: {
-                                return (
-                                  <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-green-600/20">
-                                    Frozen
-                                  </span>
-                                );
+            {!list.data.records.length ? (
+              <div>empty result </div>
+            ) : (
+              <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+                <Pagination />
+                <table class="min-w-full divide-y divide-gray-300">
+                  <thead>
+                    <tr>
+                      <th
+                        scope="col"
+                        class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                      >
+                        Account Id
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                      >
+                        Status
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                      >
+                        Threshold
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody class="divide-y divide-gray-200 bg-white">
+                    {list.data.records.map((r) => {
+                      return (
+                        <tr class="hover:bg-gray-100 ">
+                          <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500 ">
+                            <div class="text-gray-900">
+                              <a
+                                href={Pages.details.url({ account: r.h_payto })}
+                                class="text-indigo-600 hover:text-indigo-900"
+                              >
+                                {r.h_payto}
+                              </a>
+                            </div>
+                          </td>
+                          <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
+                            {((state: AmlExchangeBackend.AmlState): VNode => {
+                              switch (state) {
+                                case AmlExchangeBackend.AmlState.normal: {
+                                  return (
+                                    <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
+                                      Normal
+                                    </span>
+                                  );
+                                }
+                                case AmlExchangeBackend.AmlState.pending: {
+                                  return (
+                                    <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-green-600/20">
+                                      Pending
+                                    </span>
+                                  );
+                                }
+                                case AmlExchangeBackend.AmlState.frozen: {
+                                  return (
+                                    <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-green-600/20">
+                                      Frozen
+                                    </span>
+                                  );
+                                }
                               }
-                            }
-                          })(r.current_state)}
-                        </td>
-                        <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-900">
-                          {r.threshold}
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-              <Pagination />
-            </div>
+                            })(r.current_state)}
+                          </td>
+                          <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-900">
+                            {r.threshold}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+                <Pagination />
+              </div>
+            )}
           </div>
         </div>
       </div>
-- 
cgit v1.2.3