React Admin Hooks

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 9

React admin hooks

TC2007B: Integración de seguridad informática en redes y sistemas de


software (Gpo 401) - CSF
30.08.2023

Equipo 7
Pablo Banzo Prida, A01782031
Gabriel Rodríguez De los Reyes, A01782031
Miguel Angel Cabrera Victoria, A01782982
Luis Carlos Rico Almada, A01252831
Analizar cuatro hooks de React-Admin que puedan utilizar en sus
proyectos (uno de ellos será useLogin). La lista completa se encuentra
en la siguiente liga

● useLogin:

El hook useLogin sirve para llamar a una función que devuelve un callback del inicio de
sesión del proveedor de autenticación. Para llamarlo hay que utilizar react-admin y definir
una constante que tomará las propiedades del hook. Este elemento en realidad se llama al
método login de authProvider, para así utilizar las credenciales proporcionadas por el
usuario para iniciar sesión. Este hook maneja varios escenarios, como success, error,
redirecT, cómo se ve a continuación.

type AuthActionResponse = {
success: boolean;
redirectTo?: string;
error?: Error;
[key: string]: unknown;
};

El parámetro success responde si el usuario logró iniciar sesión o no. En el caso negativo el
mismo es notificado a través de un mensaje de error, como por ejemplo “invalid
credentials”. A su vez el parámetro redirectTo, como su nombre indica está encargado de
redirigir al usuario en el caso de que success tenga un resultado positivo.

Un ejemplo de uso sería:


● useUnique:

El hook useUnique de react-admin sirve para validar que no haya campos


repetidos a la hora de querer enviar un registro; Funciona llamando a
dataProvider.getList con un filtro para comprobar si ya existe un registro
con el valor actual.

Puede recibir como parámetro un objeto con las llaves: “message” para agregar
un mensaje personalizado que se va a mostrar cuando falla la validación, su
valor por defecto es “Must be unique”, “debounce” para especificar un tiempo
en milisegundos que esperara nuevos cambios antes de validar, “filter” para
agregar filtros adicionales por si se desea buscar que el valor sea único en un
subconjunto de los datos que regresa dataProvider.getList, “resource” se
utiliza para especificar un recurso específico que es generalmente una
colección de de registros, su valor por defecto se obtiene del más cercano
ResourceContext que es una herramienta de React para pasar datos a través
de un árbol de componentes.

Un ejemplo de uso sería:


Si un usuario intenta agregar un registro que ya se encuentra en la base de
datos viera este mensaje de error:

● useLocaleState:
El hook “useLocaleState” tiene una funcionalidad muy similar al típico hook
(default) useState, dado que regresa una tupla con un setter y un getter a una
variable. La variable que guarda useLocaleState debe ser el “locale string” o la
cadena de caracteres que describe a una traducción del website (por ejemplo, ‘es’,
‘en’ o ‘fr’ para español, inglés y francés respectivamente).

Dado que la utilización del setter suele ser en un botón, react admin incluye un
componente de tipo “botón” <LocalesMenuButton /> el cual llama internamente al
setter dado un dropdown de lenguajes que se obtiene a través del i18nProvider.

Consideramos que este hook es sumamente útil para que nuestra aplicación sea
más accesible para usuarios que hablen diferentes idiomas (uno de los
requerimientos).

Para incluir este hook a nuestra aplicación, decidimos que la mejor opción sería
utilizar el componente <LocalesMenuButton /> directamente para no llamar el hook
de forma manual. A continuación se presentan los cambios necesarios para su
implementación:

- Se modificó el archivo “i18nProvider.ts” para que regresara una lista de los


locales disponibles:
import { TranslationMessages } from "react-admin";
import { es } from "./spanishMessages";
import { en } from "./englishMessages";
import polyglotI18nProvider from "ra-i18n-polyglot";

const translations = {
es,
en,
} as { [key: string]: TranslationMessages };

export const i18nProvider = polyglotI18nProvider(


(locale) => translations[locale],
"es",
[
{ locale: "en", name: "English" },
{ locale: "es", name: "Español" },
]
);

- Se creó un “Custom Layout” component para que sea posible añadir el


<LocalesMenuButton /> al navbar.
import { Layout, LayoutProps } from "react-admin";
import { TopBar } from "./TopBar";
export const CustomLayout = (props: LayoutProps) => (
<Layout {...props} appBar={TopBar} />
);
—------------------------------------------------------------------------
import {
AppBar,
LocalesMenuButton,
RefreshIconButton,
} from "react-admin";

export const TopBar = () => (


<AppBar
toolbar={
<>
<LocalesMenuButton />
<RefreshIconButton />
</>
}
/>
);

- Se modificó “App.tsx” para importar el nuevo layout y utilizarlo:


export const App = () => {
return (
<Admin
dataProvider={dataProvider}
layout={CustomLayout}
darkTheme={{ palette: { mode: "dark" } }}
i18nProvider={i18nProvider}
>


● useTheme:

El hook “useTheme” está diseñado para proporcionar funcionalidades relacionadas con


el cambio y la obtención del tema actual en nuestra aplicación. Similarmente a
“useLocaleState”, este hook retorna una tupla con un setter y un getter. La variable que
maneja useTheme representa el tema actual que está siendo utilizado, como por
ejemplo, “dark” o “light” para los modos oscuro y claro respectivamente.

La necesidad de ofrecer diferentes temas surge de la intención de hacer nuestra


aplicación más accesible, permitiendo a los usuarios seleccionar el tema que mejor se
adapte a sus necesidades visuales. Al ofrecer un modo oscuro, por ejemplo, podemos
facilitar la lectura en ambientes con baja luminosidad o para usuarios con ciertas
condiciones visuales.

React admin, reconociendo la importancia de esta funcionalidad, proporciona el


componente “botón” <ToggleThemeButton />, que al ser presionado, cambia
automáticamente entre los temas disponibles. Este botón utiliza internamente el
setter proporcionado por el hook “useTheme”.

Dado que el cambio de tema es una acción que los usuarios podrían querer realizar con
frecuencia, decidimos integrar el <ToggleThemeButton /> directamente en nuestra
barra de navegación (navbar) para que esté fácilmente accesible. A continuación, se
detallan los cambios realizados para implementar esta funcionalidad:

Se actualizó el “Custom Layout” para incluir el <ToggleThemeButton /> en la barra de


navegación (similar a lo que se hizo para useLocaleState):

import {
AppBar,
LocalesMenuButton,
RefreshIconButton,
ToggleThemeButton,
} from "react-admin";

export const TopBar = () => (


<AppBar
toolbar={
<>
<LocalesMenuButton />
<ToggleThemeButton />
<RefreshIconButton />
</>
}
/>
);

Con esta inclusión, ahora los usuarios tienen la opción de cambiar el tema de la
aplicación directamente desde la barra de navegación, mejorando la accesibilidad y
experiencia del usuario.

También podría gustarte