refactored backup sync UI

2 files changed, 58 insertions, 18 deletions

diff --git a/packages/taler-wallet-webextension/src/hooks/useBackupDeviceName.ts b/packages/taler-wallet-webextension/src/hooks/useBackupDeviceName.ts
new file mode 100644
index 000000000..e322c6727
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/hooks/useBackupDeviceName.ts
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "preact/hooks";
+import * as wxApi from "../wxApi";
+
+
+export interface BackupDeviceName {
+  name: string;
+  update: (s:string) => Promise<void>
+}
+
+
+export function useBackupDeviceName(): BackupDeviceName {
+  const [status, setStatus] = useState<BackupDeviceName>({
+    name: '',
+    update: () => Promise.resolve()
+  })
+
+  useEffect(() => {
+    async function run() {
+      //create a first list of backup info by currency
+      const status = await wxApi.getBackupInfo()
+
+      async function update(newName: string) {
+        await wxApi.setWalletDeviceId(newName)
+        setStatus(old => ({ ...old, name: newName }))  
+      }
+
+      setStatus({ name: status.deviceId, update })
+    }
+    run()
+  }, [])
+
+  return status
+}
+
diff --git a/packages/taler-wallet-webextension/src/hooks/useProvidersByCurrency.ts b/packages/taler-wallet-webextension/src/hooks/useProvidersByCurrency.ts
index 8c35705e1..09f61e468 100644
--- a/packages/taler-wallet-webextension/src/hooks/useProvidersByCurrency.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useProvidersByCurrency.ts
@@ -1,37 +1,43 @@
 import { Amounts } from "@gnu-taler/taler-util";
-import { ProviderInfo } from "@gnu-taler/taler-wallet-core";
+import { ProviderInfo, ProviderPaymentPaid, ProviderPaymentStatus, ProviderPaymentType } from "@gnu-taler/taler-wallet-core";
 import { useEffect, useState } from "preact/hooks";
 
 import * as wxApi from "../wxApi";
 
-export interface ProvidersByCurrency {
-  [s: string]: ProviderInfo | undefined
-}
 export interface BackupStatus {
   deviceName: string;
-  providers: ProvidersByCurrency
+  providers: ProviderInfo[]
+}
+
+function getStatusTypeOrder(t: ProviderPaymentStatus) {
+  return [
+    ProviderPaymentType.InsufficientBalance,
+    ProviderPaymentType.TermsChanged,
+    ProviderPaymentType.Unpaid,
+    ProviderPaymentType.Paid,
+    ProviderPaymentType.Pending,
+  ].indexOf(t.type)
+}
+
+function getStatusPaidOrder(a: ProviderPaymentPaid, b: ProviderPaymentPaid) {
+  return a.paidUntil.t_ms === 'never' ? -1 :
+    b.paidUntil.t_ms === 'never' ? 1 :
+      a.paidUntil.t_ms - b.paidUntil.t_ms
 }
 
 export function useBackupStatus(): BackupStatus | undefined {
   const [status, setStatus] = useState<BackupStatus | undefined>(undefined)
+
   useEffect(() => {
     async function run() {
       //create a first list of backup info by currency
       const status = await wxApi.getBackupInfo()
-      const providers = status.providers.reduce((p, c) => {
-        if (c.terms) {
-          p[Amounts.parseOrThrow(c.terms.annualFee).currency] = c
-        }
-        return p
-      }, {} as ProvidersByCurrency)
-
-      //add all the known currency with no backup info
-      const list = await wxApi.listKnownCurrencies()
-      const currencies = list.exchanges.map(e => e.name).concat(list.auditors.map(a => a.name))
-      currencies.forEach(c => {
-        if (!providers[c]) {
-          providers[c] = undefined
+
+      const providers = status.providers.sort((a, b) => {
+        if (a.paymentStatus.type === ProviderPaymentType.Paid && b.paymentStatus.type === ProviderPaymentType.Paid) {
+          return getStatusPaidOrder(a.paymentStatus, b.paymentStatus)
         }
+        return getStatusTypeOrder(a.paymentStatus) - getStatusTypeOrder(b.paymentStatus)
       })
 
       setStatus({ deviceName: status.deviceId, providers })