commit 5010f9ab3fab13a47b4be0441a76664cc2cec1a9
parent 8a0fbe79ef3c16cd256c4ebc35f4e8b0bc38dba3
Author: Sebastian <sebasjm@gmail.com>
Date: Thu, 11 Feb 2021 18:53:21 -0300
handling server errors
Diffstat:
7 files changed, 70 insertions(+), 33 deletions(-)
diff --git a/src/components/notifications/index.tsx b/src/components/notifications/index.tsx
@@ -24,7 +24,7 @@ export default function Notifications({ notifications }: Props): VNode {
<button class="delete" aria-label="delete" />
</div>
<div class="message-body">
- <Text id={`notification.${n.messageId}.description`} />
+ <Text id={`notification.${n.messageId}.description`} fields={n.params} />
</div>
</article>)}
</div>
diff --git a/src/declaration.d.ts b/src/declaration.d.ts
@@ -12,6 +12,7 @@ declare module "*.scss" {
interface Notification {
messageId: string;
type: MessageType;
+ params?: any;
}
type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS'
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -11,6 +11,30 @@ export default {
title: 'acceso no autorizado',
description: 'el servidor a denegado el acceso'
},
+ create_error: {
+ title: 'error creando',
+ description: 'la creación no se efectuó correctamente. el servidor dice: {{message}}'
+ },
+ create_success: {
+ title: 'creación correcta',
+ description: 'la creación se efectuó correctamente'
+ },
+ update_error: {
+ title: 'error actualizando',
+ description: 'la actualizacion no se efectuó correctamente. el servidor dice: {{message}}'
+ },
+ update_success: {
+ title: 'actualización correcta',
+ description: 'la actualizacion se efectuó correctamente'
+ },
+ delete_error: {
+ title: 'error eliminando',
+ description: 'la eliminación no se efectuó correctamente. el servidor dice: {{message}}'
+ },
+ delete_success: {
+ title: 'eliminación correcta',
+ description: 'la eliminación se efectuó correctamente'
+ },
},
cancel: 'cancelar',
confirm: 'confirmar',
@@ -30,7 +54,7 @@ export default {
},
payto_uris: {
label: 'PaytTO URI',
- placeholder: 'comma separated values',
+ placeholder: 'valores separados por coma',
help: 'payto://x-taler-bank/bank.taler:5882/blogger',
},
default_max_deposit_fee: {
@@ -53,7 +77,7 @@ export default {
merchant: 'Merchant',
list_of_configured_instances: 'Lista de instancias configuradas',
instance: {
- empty_list: 'No instance configured yet, setup one pressing the + button',
+ empty_list: 'No hay instancias configuradas, puede crear una usando el boton + ',
}
}
},
@@ -69,6 +93,30 @@ export default {
title: 'unauthorized access',
description: 'backend has denied access'
},
+ create_error: {
+ title: 'create error',
+ description: 'the create process went wrong, server says: {{info.hint}}'
+ },
+ create_success: {
+ title: 'create success',
+ description: 'the create process completed'
+ },
+ update_error: {
+ title: 'update error',
+ description: 'the update process went wrong, server says: {{info.hint}}'
+ },
+ update_success: {
+ title: 'update success',
+ description: 'the update process completed'
+ },
+ delete_error: {
+ title: 'delete error',
+ description: 'the delete process went wrong, server says: {{info.hint}}'
+ },
+ delete_success: {
+ title: 'delete success',
+ description: 'the delete process completed'
+ },
},
cancel: 'cancel',
confirm: 'confirm',
diff --git a/src/routes/instances/CardTable.tsx b/src/routes/instances/CardTable.tsx
@@ -56,7 +56,7 @@ export default function CardTable({ instances, onCreate, onSelect, selected }: P
<span class="icon"><i class="mdi mdi-trash-can" /></span>
</button>
<button class="card-header-icon" type="button" onClick={onCreate}>
- <span class="icon"><i class="mdi mdi-plus" /></span>
+ <span class="icon is-small" ><i class="mdi mdi-plus mdi-36px" /></span>
</button>
</header>
<div class="card-content">
diff --git a/src/routes/instances/EmptyTable.tsx b/src/routes/instances/EmptyTable.tsx
@@ -6,6 +6,6 @@ export default function EmptyTable(): VNode {
<p>
<span class="icon is-large"><i class="mdi mdi-emoticon-sad mdi-48px" /></span>
</p>
- <p><Text id="text.intance.empty_list" /></p>
+ <p><Text id="text.instance.empty_list" /></p>
</div>
}
diff --git a/src/routes/instances/UpdateModal.tsx b/src/routes/instances/UpdateModal.tsx
@@ -3,7 +3,7 @@ import { useState } from "preact/hooks";
import { MerchantBackend } from "../../declaration";
import * as yup from 'yup';
import ConfirmModal from '../../components/modal'
-import { Text } from "preact-i18n";
+import YupInput from "../../components/yup/YupInput";
function stringToArray(this: yup.AnySchema, current: any, original: string): string[] {
if (this.isType(current)) return current;
@@ -52,25 +52,7 @@ export default function UpdateModal({ element, onCancel, onConfirm }: Props): VN
{Object.keys(schema.fields).map(f => {
const info = schema.fields[f].describe()
-
- // Just text field for now
- return <div class="field is-horizontal">
- <div class="field-label is-normal">
- <label class="label"><Text id={`fields.instance.${f}.label`} /></label>
- </div>
- <div class="field-body">
- <div class="field">
- <p class="control is-expanded has-icons-left">
- <input class="input" type="text"
- placeholder={info?.meta?.placeholder} readonly={info?.meta?.readonly}
- name={f} value={value[f]}
- onChange={(e): void => valueHandler((prev: any) => ({ ...prev, [f]: e.currentTarget.value }))} />
- {info?.meta?.help}
- </p>
- {errors[f] ? <p class="help is-danger">{errors[f]}</p> : null}
- </div>
- </div>
- </div>
+ return <YupInput name={f} info={info} errors={errors} value={value} valueHandler={valueHandler} />
})}
diff --git a/src/routes/instances/index.tsx b/src/routes/instances/index.tsx
@@ -4,7 +4,6 @@ import LoginPage from '../../components/auth/LoginPage';
import { updateToken, useBackendInstance, useBackendInstances } from '../../components/hooks/backend';
import { useEffect, useState } from 'preact/hooks';
import { Notification } from '../../declaration';
-import { Localizer, Text } from 'preact-i18n';
interface Props {
pushNotification: (n: Notification) => void;
@@ -21,11 +20,7 @@ export default function Instances({ pushNotification }: Props): VNode {
const isLoadingTheDetails = (!details.data && !details.error)
useEffect(() => {
- if (requiresToken) pushNotification({
- title: 'unauthorized.title',
- description: 'unauthorized.description',
- type: 'ERROR'
- })
+ if (requiresToken) pushNotification({messageId: 'unauthorized', type: 'ERROR' })
}, [requiresToken])
if (requiresToken) {
@@ -34,8 +29,19 @@ export default function Instances({ pushNotification }: Props): VNode {
return <View instances={list.data?.instances || []}
isLoading={isLoadingTheList || isLoadingTheDetails}
- onCreate={list.create} onUpdate={details.update}
- onDelete={details.delete} onSelect={select}
+ onCreate={(d): Promise<void> => list.create(d)
+ .then((): void => pushNotification({messageId: 'create_success', type:'SUCCESS'}))
+ .catch((error): void => pushNotification({messageId: 'create_error', type:'ERROR', params: error}))
+ }
+ onUpdate={(id, d): Promise<void> => details.update(id, d)
+ .then((): void => pushNotification({messageId: 'update_success', type:'SUCCESS'}))
+ .catch((error): void => pushNotification({messageId: 'update_error', type:'ERROR', params: error}))
+ }
+ onDelete={(id): Promise<void> => details.delete(id)
+ .then((): void => pushNotification({messageId: 'delete_success', type:'SUCCESS'}))
+ .catch((error): void => pushNotification({messageId: 'delete_error', type:'ERROR', params: error}))
+ }
+ onSelect={select}
selected={!details.data || !selectedId ? undefined : { ...details.data, id: selectedId }}
/>;
}
