App.tsx

import * as React from "react";
import {
  Admin,
  Create,
  CreateProps,
  Resource,
  List,
  Datagrid,
  Filter,
  FilterProps,
  SearchInput,
  TextField,
  NumberField,
  ReferenceField,
  Edit,
  SimpleForm,
  TextInput,
  NumberInput,
  ReferenceInput,
  AutocompleteInput,
  EditProps,
  ShowProps,
  ListProps,
  Show,
  SimpleShowLayout,
  DataProvider,
  ReferenceArrayField,
} from "react-admin";
import { client } from "@logilab/cwclientlibjs";
import { createDataProvider } from "ra-cubicweb/dist";

import { schema } from "./schema";

const MuseumShow = (props: ShowProps) => (
  <Show {...props}>
    <SimpleShowLayout>
      <TextField source="id" />
      <TextField source="name" />
      <TextField source="postal_address" />
      <ReferenceField label="City" link="show" reference="City" source="is_in">
        <TextField source="name" />
      </ReferenceField>
      <NumberField source="longitude" />
      <NumberField source="latitude" />
    </SimpleShowLayout>
  </Show>
);

const MuseumEdit = (props: EditProps) => (
  <Edit {...props}>
    <SimpleForm>
      <NumberInput source="id" />
      <TextInput source="name" />
      <NumberInput source="latitude" />
      <NumberInput source="longitude" />
      <TextInput source="postal_address" />
    </SimpleForm>
  </Edit>
);

const MuseumCreate = (props: CreateProps) => (
  <Create {...props}>
    <SimpleForm>
      <TextInput source="name" />
      <NumberInput source="latitude" />
      <NumberInput source="longitude" />
      <TextInput source="postal_address" />
      <ReferenceInput
        label="City"
        source="is_in"
        reference="City"
        sort={{ field: "name", order: "ASC" }}
        filterToQuery={(text: string) => ({ name: text })}
      >
        <AutocompleteInput optionText="name" />
      </ReferenceInput>
    </SimpleForm>
  </Create>
);

const MuseumFilter = (props: Omit<FilterProps, "children">) => (
  <Filter {...props}>
    <SearchInput source="name" alwaysOn />
  </Filter>
);

const MuseumList = (props: ListProps) => (
  <List {...props} filters={<MuseumFilter />}>
    <Datagrid rowClick="show">
      <NumberField source="id" />
      <TextField source="name" />
      <NumberField source="latitude" />
      <NumberField source="longitude" />
      <TextField source="postal_address" />
    </Datagrid>
  </List>
);

const CityList = (props: ListProps) => (
  <List {...props}>
    <Datagrid rowClick="show">
      <TextField source="id" />
      <TextField source="name" />
      <NumberField source="zip_code" />
    </Datagrid>
  </List>
);

const CityShow = (props: ShowProps) => (
  <Show {...props}>
    <SimpleShowLayout>
      <TextField source="id" />
      <TextField source="name" />
      <NumberField source="zip_code" />
      <ReferenceArrayField
        label="Museum"
        reference="Museum"
        source="reverse_is_in"
      >
        <Datagrid rowClick="show">
          <TextField source="name" />
        </Datagrid>
      </ReferenceArrayField>
    </SimpleShowLayout>
  </Show>
);

const httpClient = new client.CwSimpleHttpClient("http://localhost:8080", true);
const rqlClient = new client.CwRqlClient(httpClient);

const dataProvider = createDataProvider(rqlClient, schema);

const App = (): JSX.Element => (
  <Admin dataProvider={dataProvider as DataProvider}>
    {
      // authProvider={authProvider}
      // use cwclientlibjs to get list of CWETypes
      // and add one <Resource  per type
    }
    <Resource
      name="Museum"
      list={MuseumList}
      show={MuseumShow}
      edit={MuseumEdit}
      create={MuseumCreate}
    />
    <Resource name="City" list={CityList} show={CityShow} />
  </Admin>
);

export default App;