Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Compatibility with react-admin base components

Abierto
#490 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
25/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
api, frontend

Línea de trabajo

Comienza con pwa/admin/index.tsx y reproduce las combinaciones reportadas de HydraAdmin, ResourceGuesser, ListGuesser, TextField, List y Datagrid. Lee la integración de HydraAdmin y la configuración del router y del tema de react-admin implicadas por los errores. Se considera terminado cuando los componentes normales de react-admin, el enrutamiento, el theming y el flujo de inicio de sesión JWT documentado funcionan sin los errores reportados.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

API Platform version(s) affected: 3.4.3 (api platform admin version)

Description
I am having multiple issues when trying to use regular react-admin components.
For example trying to use a 'TextField' in ListGuesser doesn't display anything.
Worse, if i try to replace the ListGuesser with a regular List + Datagrid, I am getting error about useNavigate() needing a Router. If i encapsulate HydraAdmin with BrowserRouter, i am getting a 'theme' is null error instead... and on and on... I am just wondering if this is something i am doing wrong, or if it's just not ready at the moment ?
I managed to get to login with jwt, but ran into numerous issues too despite using the code in the documentation. Basically, can't replace the login page either, running also in the router + theme issues...

How to reproduce
only modification from the base project, in the pwa/admin/index.tsx page

import Head from "next/head";
import { useEffect, useState } from "react";
import {FieldGuesser, ListGuesser, ResourceGuesser} from "@api-platform/admin";
import {TextField} from "react-admin";

const GreetingList = props => (
  <ListGuesser {...props}>
    <FieldGuesser source={"name"} />
    <TextField source={"name"} />
  </ListGuesser>
);

const Admin = () => {
  // Load the admin client-side
  const [DynamicAdmin, setDynamicAdmin] = useState(<p>Loading...</p>);
  useEffect(() => {
    (async () => {
      const HydraAdmin = (await import("@api-platform/admin")).HydraAdmin;

      setDynamicAdmin(<HydraAdmin entrypoint={window.origin}>
        <ResourceGuesser name={"greetings"} list={GreetingList} />
      </HydraAdmin>);
    })();
  }, []);

  return (
    <>
      <Head>
        <title>API Platform Admin</title>
      </Head>

      {DynamicAdmin}
    </>
  );
};
export default Admin;

Possible Solution

Additional Context

Lenguaje dominante
TypeScript
Estrellas
516
Forks
134
Métricas de merge de PR
Sin PR fusionados en 30 d

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de api-platform/admin

Todos los issues de api-platform/admin

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.