From 1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 15 Nov 2021 11:18:58 -0300
Subject: prettier

---
 .../src/wallet/BackupPage.tsx                      | 177 +++++++++++++--------
 1 file changed, 114 insertions(+), 63 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/wallet/BackupPage.tsx')

diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
index 712329bf8..c3be0203e 100644
--- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
@@ -14,15 +14,29 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */
 
-
 import { i18n, Timestamp } from "@gnu-taler/taler-util";
-import { ProviderInfo, ProviderPaymentStatus } from "@gnu-taler/taler-wallet-core";
-import { differenceInMonths, formatDuration, intervalToDuration } from "date-fns";
+import {
+  ProviderInfo,
+  ProviderPaymentStatus,
+} from "@gnu-taler/taler-wallet-core";
+import {
+  differenceInMonths,
+  formatDuration,
+  intervalToDuration,
+} from "date-fns";
 import { Fragment, JSX, VNode, h } from "preact";
 import {
-  BoldLight, ButtonPrimary, ButtonSuccess, Centered,
-  CenteredText, CenteredBoldText, PopupBox, RowBorderGray,
-  SmallText, SmallLightText, WalletBox
+  BoldLight,
+  ButtonPrimary,
+  ButtonSuccess,
+  Centered,
+  CenteredText,
+  CenteredBoldText,
+  PopupBox,
+  RowBorderGray,
+  SmallText,
+  SmallLightText,
+  WalletBox,
 } from "../components/styled";
 import { useBackupStatus } from "../hooks/useBackupStatus";
 import { Pages } from "../NavigationBar";
@@ -32,49 +46,68 @@ interface Props {
 }
 
 export function BackupPage({ onAddProvider }: Props): VNode {
-  const status = useBackupStatus()
+  const status = useBackupStatus();
   if (!status) {
-    return <div>Loading...</div>
+    return <div>Loading...</div>;
   }
-  return <BackupView providers={status.providers} onAddProvider={onAddProvider} onSyncAll={status.sync} />;
+  return (
+    <BackupView
+      providers={status.providers}
+      onAddProvider={onAddProvider}
+      onSyncAll={status.sync}
+    />
+  );
 }
 
 export interface ViewProps {
-  providers: ProviderInfo[],
+  providers: ProviderInfo[];
   onAddProvider: () => void;
   onSyncAll: () => Promise<void>;
 }
 
-export function BackupView({ providers, onAddProvider, onSyncAll }: ViewProps): VNode {
+export function BackupView({
+  providers,
+  onAddProvider,
+  onSyncAll,
+}: ViewProps): VNode {
   return (
     <WalletBox>
       <section>
-        {providers.map((provider) => <BackupLayout
-          status={provider.paymentStatus}
-          timestamp={provider.lastSuccessfulBackupTimestamp}
-          id={provider.syncProviderBaseUrl}
-          active={provider.active}
-          title={provider.name}
-        />
+        {providers.map((provider) => (
+          <BackupLayout
+            status={provider.paymentStatus}
+            timestamp={provider.lastSuccessfulBackupTimestamp}
+            id={provider.syncProviderBaseUrl}
+            active={provider.active}
+            title={provider.name}
+          />
+        ))}
+        {!providers.length && (
+          <Centered style={{ marginTop: 100 }}>
+            <BoldLight>No backup providers configured</BoldLight>
+            <ButtonSuccess onClick={onAddProvider}>
+              <i18n.Translate>Add provider</i18n.Translate>
+            </ButtonSuccess>
+          </Centered>
         )}
-        {!providers.length && <Centered style={{ marginTop: 100 }}>
-          <BoldLight>No backup providers configured</BoldLight>
-          <ButtonSuccess onClick={onAddProvider}><i18n.Translate>Add provider</i18n.Translate></ButtonSuccess>
-        </Centered>}
       </section>
-      {!!providers.length && <footer>
-        <div />
-        <div>
-          <ButtonPrimary onClick={onSyncAll}>{
-            providers.length > 1 ?
-              <i18n.Translate>Sync all backups</i18n.Translate> :
-              <i18n.Translate>Sync now</i18n.Translate>
-          }</ButtonPrimary>
-          <ButtonSuccess onClick={onAddProvider}>Add provider</ButtonSuccess>
-        </div>
-      </footer>}
+      {!!providers.length && (
+        <footer>
+          <div />
+          <div>
+            <ButtonPrimary onClick={onSyncAll}>
+              {providers.length > 1 ? (
+                <i18n.Translate>Sync all backups</i18n.Translate>
+              ) : (
+                <i18n.Translate>Sync now</i18n.Translate>
+              )}
+            </ButtonPrimary>
+            <ButtonSuccess onClick={onAddProvider}>Add provider</ButtonSuccess>
+          </div>
+        </footer>
+      )}
     </WalletBox>
-  )
+  );
 }
 
 interface TransactionLayoutProps {
@@ -92,55 +125,73 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element {
     timeStyle: "short",
   } as any);
 
-
   return (
     <RowBorderGray>
       <div style={{ color: !props.active ? "grey" : undefined }}>
-        <a href={Pages.provider_detail.replace(':pid', encodeURIComponent(props.id))}><span>{props.title}</span></a>
-
-        {dateStr && <SmallText style={{ marginTop: 5 }}>Last synced: {dateStr}</SmallText>}
-        {!dateStr && <SmallLightText style={{ marginTop: 5 }}>Not synced</SmallLightText>}
+        <a
+          href={Pages.provider_detail.replace(
+            ":pid",
+            encodeURIComponent(props.id),
+          )}
+        >
+          <span>{props.title}</span>
+        </a>
+
+        {dateStr && (
+          <SmallText style={{ marginTop: 5 }}>Last synced: {dateStr}</SmallText>
+        )}
+        {!dateStr && (
+          <SmallLightText style={{ marginTop: 5 }}>Not synced</SmallLightText>
+        )}
       </div>
       <div>
-        {props.status?.type === 'paid' ?
-          <ExpirationText until={props.status.paidUntil} /> :
+        {props.status?.type === "paid" ? (
+          <ExpirationText until={props.status.paidUntil} />
+        ) : (
           <div>{props.status.type}</div>
-        }
+        )}
       </div>
     </RowBorderGray>
   );
 }
 
 function ExpirationText({ until }: { until: Timestamp }) {
-  return <Fragment>
-    <CenteredText> Expires in </CenteredText>
-    <CenteredBoldText {...({ color: colorByTimeToExpire(until) })}> {daysUntil(until)} </CenteredBoldText>
-  </Fragment>
+  return (
+    <Fragment>
+      <CenteredText> Expires in </CenteredText>
+      <CenteredBoldText {...{ color: colorByTimeToExpire(until) }}>
+        {" "}
+        {daysUntil(until)}{" "}
+      </CenteredBoldText>
+    </Fragment>
+  );
 }
 
 function colorByTimeToExpire(d: Timestamp) {
-  if (d.t_ms === 'never') return 'rgb(28, 184, 65)'
-  const months = differenceInMonths(d.t_ms, new Date())
-  return months > 1 ? 'rgb(28, 184, 65)' : 'rgb(223, 117, 20)';
+  if (d.t_ms === "never") return "rgb(28, 184, 65)";
+  const months = differenceInMonths(d.t_ms, new Date());
+  return months > 1 ? "rgb(28, 184, 65)" : "rgb(223, 117, 20)";
 }
 
 function daysUntil(d: Timestamp) {
-  if (d.t_ms === 'never') return undefined
+  if (d.t_ms === "never") return undefined;
   const duration = intervalToDuration({
     start: d.t_ms,
     end: new Date(),
-  })
+  });
   const str = formatDuration(duration, {
-    delimiter: ', ',
+    delimiter: ", ",
     format: [
-      duration?.years ? 'years' : (
-        duration?.months ? 'months' : (
-          duration?.days ? 'days' : (
-            duration.hours ? 'hours' : 'minutes'
-          )
-        )
-      )
-    ]
-  })
-  return `${str}`
-}
\ No newline at end of file
+      duration?.years
+        ? "years"
+        : duration?.months
+        ? "months"
+        : duration?.days
+        ? "days"
+        : duration.hours
+        ? "hours"
+        : "minutes",
+    ],
+  });
+  return `${str}`;
+}
-- 
cgit v1.2.3