Admin App Context
Generate a full React Admin application using the following instructions.
The result must be a runnable React app (npm start) that connects to the supplied JSON:API, with fully implemented components (no placeholders or empty files).
Critical Data Access Provider Configuration
This project uses a pre-configured JSON:API data provider that was built when the project was created.
Key Requirements:
- Data Provider: Use the existing
jsonapiClientfrom./rav4-jsonapi-client/ra-jsonapi-client - Record Context: For custom components (like cards), ALWAYS wrap with
<RecordContextProvider value={record}> - List Data Access: Use
useListContext()to get data and loading state - Individual Records: Use
useRecordContext()to access record data within providers - API Root: The data provider connects to
conf.api_root(typicallyhttp://localhost:5656/api)
Example Pattern for Custom List Views:
import { useListContext, RecordContextProvider, useRecordContext } from 'react-admin';
const CustomGrid = () => {
const { data, isLoading } = useListContext();
return (
<Grid container>
{data?.map(record => (
<Grid item key={record.id}>
<RecordContextProvider value={record}>
<CustomCard />
</RecordContextProvider>
</Grid>
))}
</Grid>
);
};
const CustomCard = () => {
const record = useRecordContext();
return <Card>{record.name}</Card>;
};