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,
  AutocompleteArrayInput,
  ReferenceArrayInput,
  FunctionField,
  SingleFieldList,
} from "react-admin";
import { client } from "@logilab/cwclientlibjs";
import { createDataProvider } from "ra-cubicweb/dist";
import Chip from "@material-ui/core/Chip";

import { schema } from "./schema";
import { formHelpers } from "./formHelpers";

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>
      <ReferenceArrayField
        label="Director"
        reference="Person"
        source="director"
      >
        <SingleFieldList>
          <FunctionField<{ id: string; name: string }>
            render={(person) => person && <Chip label={`${person.name}`} />}
          />
        </SingleFieldList>
      </ReferenceArrayField>
      <NumberField source="longitude" />
      <NumberField source="latitude" />
    </SimpleShowLayout>
  </Show>
);

const MuseumEdit = (props: EditProps) => {
  const inputProps = formHelpers["Museum"].getInputProps;
  return (
    <Edit {...props}>
      <SimpleForm>
        <NumberField source="id" />
        <TextInput {...inputProps("name")} />
        <NumberInput {...inputProps("latitude")} />
        <NumberInput {...inputProps("longitude")} />
        <TextInput {...inputProps("postal_address")} />
      </SimpleForm>
    </Edit>
  );
};

const MuseumCreate = (props: CreateProps) => {
  const inputProps = formHelpers["Museum"].getInputProps;
  return (
    <Create {...props}>
      <SimpleForm>
        <TextInput {...inputProps("name")} />
        <NumberInput {...inputProps("latitude")} />
        <NumberInput {...inputProps("longitude")} />
        <TextInput {...inputProps("postal_address")} />
        <ReferenceInput
          label="City"
          source="is_in"
          reference="City"
          sort={{ field: "name", order: "ASC" }}
          filterToQuery={(text: string) => ({ name: text })}
        >
          <AutocompleteInput optionText="name" />
        </ReferenceInput>
        <ReferenceArrayInput
          label="Director"
          source="director"
          reference="Person"
          sort={{ field: "name", order: "ASC" }}
          filterToQuery={(text: string) => ({ name: text })}
        >
          <AutocompleteArrayInput optionText="name" />
        </ReferenceArrayInput>
      </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" />
      <TextField source="country" />
    </Datagrid>
  </List>
);

const CityEdit = (props: ListProps) => {
  const inputProps = formHelpers["City"].getInputProps;
  return (
    <Edit {...props}>
      <SimpleForm>
        <TextInput {...inputProps("name")} />
        <NumberInput {...inputProps("zip_code")} />
        <TextInput {...inputProps("country")} />
      </SimpleForm>
    </Edit>
  );
};

const CityCreate = (props: ListProps) => {
  const inputProps = formHelpers["City"].getInputProps;
  return (
    <Create {...props}>
      <SimpleForm>
        <TextInput {...inputProps("name")} />
        <NumberInput {...inputProps("zip_code")} />
        <TextInput {...inputProps("country")} />
      </SimpleForm>
    </Create>
  );
};

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

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

const PersonEdit = (props: ListProps) => {
  const inputProps = formHelpers["Person"].getInputProps;
  return (
    <Edit {...props}>
      <SimpleForm>
        <TextInput {...inputProps("name")} />
        <TextInput {...inputProps("email")} />
      </SimpleForm>
    </Edit>
  );
};

const PersonCreate = (props: ListProps) => {
  const inputProps = formHelpers["Person"].getInputProps;
  return (
    <Create {...props}>
      <SimpleForm>
        <TextInput {...inputProps("name")} />
        <TextInput {...inputProps("email")} />
      </SimpleForm>
    </Create>
  );
};

const PersonShow = (props: ShowProps) => (
  <Show {...props}>
    <SimpleShowLayout>
      <TextField source="id" />
      <TextField source="name" />
      <TextField source="email" />
      <ReferenceArrayField
        label="Museum"
        reference="Museum"
        source="reverse_director"
      >
        <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}
      edit={CityEdit}
      create={CityCreate}
    />
    <Resource
      name="Person"
      list={PersonList}
      show={PersonShow}
      edit={PersonEdit}
      create={PersonCreate}
    />
  </Admin>
);

export default App;