commit cdaaf4cb536e5beb6c9fda0b1caad1023aab9629
parent 010ec79d14a7f3a38942b0852db06a68e064d784
Author: Sebastian <sebasjm@gmail.com>
Date: Mon, 13 Dec 2021 11:59:33 -0300
-formatted with prettier
Diffstat:
1 file changed, 86 insertions(+), 58 deletions(-)
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
@@ -2,8 +2,7 @@ import useSWR, { SWRConfig } from "swr";
import { h, Fragment, ComponentChildren, VNode } from "preact";
import { useState, useEffect, StateUpdater } from "preact/hooks";
import axios from "axios";
-import { Buffer } from 'buffer';
-
+import { Buffer } from "buffer";
/**********************************************
* Type definitions for states and API calls. *
@@ -49,8 +48,10 @@ interface AccountStateType {
******************/
const getRootPath = () => {
- return typeof window !== undefined ? window.location.origin + window.location.pathname : '/';
-}
+ return typeof window !== undefined
+ ? window.location.origin + window.location.pathname
+ : "/";
+};
/*******************
* State managers. *
@@ -62,9 +63,9 @@ const getRootPath = () => {
* base URL.
*/
type BackendStateTypeOpt = BackendStateType | undefined;
-function useBackendState(state?: BackendStateType): [
- BackendStateTypeOpt, StateUpdater<BackendStateTypeOpt>
-] {
+function useBackendState(
+ state?: BackendStateType
+): [BackendStateTypeOpt, StateUpdater<BackendStateTypeOpt>] {
if (state) return useState<BackendStateTypeOpt>(state);
return useState<BackendStateTypeOpt>();
}
@@ -74,8 +75,9 @@ function useBackendState(state?: BackendStateType): [
* transactions history.
*/
type AccountStateTypeOpt = AccountStateType | undefined;
-function useAccountState(state?: AccountStateType): [
- AccountStateTypeOpt, StateUpdater<AccountStateTypeOpt>] {
+function useAccountState(
+ state?: AccountStateType
+): [AccountStateTypeOpt, StateUpdater<AccountStateTypeOpt>] {
if (state) return useState<AccountStateTypeOpt>(state);
return useState<AccountStateTypeOpt>();
}
@@ -84,7 +86,8 @@ function usePageState(
state: PageStateType = {
isLoggedIn: false,
hasProblem: false,
-}): [PageStateType, StateUpdater<PageStateType>] {
+ }
+): [PageStateType, StateUpdater<PageStateType>] {
return useState<PageStateType>(state);
}
@@ -126,7 +129,6 @@ function usePageState(
*
***/
-
/**
* This function requests GET /accounts/{account_name}.
*
@@ -141,15 +143,18 @@ async function accountInfoCall(
const handleResp = (respStatus: number) => {
switch (respStatus) {
case 200: {
- accountStateSetter(state => ({...state, balance: "1 EUR"}));
- break;
+ accountStateSetter((state) => ({ ...state, balance: "1 EUR" }));
+ break;
}
default: {
- accountStateSetter(state => ({...state, error: "Missing information."}));
+ accountStateSetter((state) => ({
+ ...state,
+ error: "Missing information.",
+ }));
}
}
};
- handleResp(200)
+ handleResp(200);
}
/**
@@ -163,27 +168,27 @@ async function registrationCall(
url: string,
req: RegistrationRequestType,
backendStateSetter: StateUpdater<BackendStateTypeOpt>,
- pageStateSetter: StateUpdater<PageStateType>,
+ pageStateSetter: StateUpdater<PageStateType>
// pageStateSetter: (fn: (state: PageStateType) => void) => void,
) {
console.log("Try to register", req);
var handleResp = (respStatus: number) => {
switch (respStatus) {
case 200: {
- pageStateSetter(state => ({...state, isLoggedIn: true}));
- backendStateSetter(state => ({
- ...state,
- url: url,
- username: req.username,
- password: req.password,
- }));
+ pageStateSetter((state) => ({ ...state, isLoggedIn: true }));
+ backendStateSetter((state) => ({
+ ...state,
+ url: url,
+ username: req.username,
+ password: req.password,
+ }));
break;
}
default: {
- pageStateSetter(state => ({...state, hasProblem: true}));
+ pageStateSetter((state) => ({ ...state, hasProblem: true }));
}
}
- }
+ };
handleResp(200);
}
@@ -194,7 +199,7 @@ async function registrationCall(
/**
* Show only the account's balance.
*/
-export function Account(props: {balance: string}) {
+export function Account(props: { balance: string }) {
return <p>Your balance is {props.balance}</p>;
}
@@ -209,9 +214,15 @@ function SWRWithCredentials(props: any): VNode {
`Basic ${Buffer.from(username + ":" + password).toString("base64")}`
);
return (
- <SWRConfig value={{fetcher: (url) => fetch(url, {headers: headers}).then(r => (r.json()))}}>
+ <SWRConfig
+ value={{
+ fetcher: (url) =>
+ fetch(url, { headers: headers }).then((r) => r.json()),
+ }}
+ >
{props.children}
- </SWRConfig>);
+ </SWRConfig>
+ );
}
/**
@@ -234,14 +245,17 @@ export function BankHome(): VNode {
if (pageState.isLoggedIn) {
if (typeof backendState === "undefined") {
console.log("Credentials not found in state, even after login.");
- pageStateSetter((state) => ({...state, hasProblem: true}));
+ pageStateSetter((state) => ({ ...state, hasProblem: true }));
return <p>Page has a problem</p>;
}
- return <SWRWithCredentials
+ return (
+ <SWRWithCredentials
username={backendState.username}
- password={backendState.password}>
- <p>Hey!</p>
- </SWRWithCredentials>
+ password={backendState.password}
+ >
+ <p>Hey!</p>
+ </SWRWithCredentials>
+ );
/**
* FIXME: need to offer a Taler withdraw button here.
@@ -255,31 +269,45 @@ export function BankHome(): VNode {
* status to the bank's backend.
*/
}
-
+
var registrationData: RegistrationRequestType;
- return <div>
- <input type="text"
- placeholder="username"
- required
- onInput={(e): void => {
- registrationData = {...registrationData, username: e.currentTarget.value};
- }}
- / >
- <input type="text"
- placeholder="password"
- required
- onInput={(e): void => {
- registrationData = {...registrationData, password: e.currentTarget.value};
- }}
- / >
+ return (
+ <div>
+ <input
+ type="text"
+ placeholder="username"
+ required
+ onInput={(e): void => {
+ registrationData = {
+ ...registrationData,
+ username: e.currentTarget.value,
+ };
+ }}
+ />
+ <input
+ type="text"
+ placeholder="password"
+ required
+ onInput={(e): void => {
+ registrationData = {
+ ...registrationData,
+ password: e.currentTarget.value,
+ };
+ }}
+ />
- <button
- onClick={() => {
- registrationCall(
- getRootPath(),
- registrationData,
- backendStateSetter,
- pageStateSetter,
- )}}>Submit</button>
- </div>
+ <button
+ onClick={() => {
+ registrationCall(
+ getRootPath(),
+ registrationData,
+ backendStateSetter,
+ pageStateSetter
+ );
+ }}
+ >
+ Submit
+ </button>
+ </div>
+ );
}
