Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Compatibility with react-admin base components

Aperta
#490 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
25/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
api, frontend

Direzione di ricerca

Inizia da pwa/admin/index.tsx e riproduci le combinazioni segnalate di HydraAdmin, ResourceGuesser, ListGuesser, TextField, List e Datagrid. Leggi l'integrazione di HydraAdmin e la configurazione del router e del tema di react-admin coinvolte negli errori. Il lavoro è completato quando i normali componenti di react-admin, il routing, il theming e il flusso di accesso JWT documentato funzionano senza gli errori segnalati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
516
Fork
134
Nessuna PR unita negli ultimi 30g

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di api-platform/admin

Tutte le issue di api-platform/admin

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.