refactor: Makes some touch up

Author: megaconfidence

src/components/CustomerList.js

@@ -3,7 +3,7 @@ import { List, Filter, Datagrid, TextField, SearchInput, } from 'react-admin';
 
 const CustomerFilter = (props) => (
   <Filter {...props}>
-    <SearchInput placeholder='Email' source='email' resettable alwaysOn />
+    <SearchInput placeholder='Customer Email' source='email' resettable alwaysOn />
   </Filter>
 );
 

src/components/RentalCreate.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import {
   Create,
   SimpleForm,
@@ -7,65 +7,50 @@ import {
   useNotify,
   useRefresh,
   useRedirect,
-  useQuery,
+  ReferenceInput,
 } from 'react-admin';
 
 const RentalCreate = (props) => {
   const notify = useNotify();
   const refresh = useRefresh();
   const redirect = useRedirect();
 
-  const onSuccess = ({data}) => {
+  const onSuccess = ({ data }) => {
     notify(`New Rental created `);
     redirect(`/rentals?filter=%7B"id"%3A"${data.id}"%7D`);
     refresh();
   };
 
-  const [customers, setCustomers] = useState([]);
-  const { data: customer } = useQuery({
-    type: 'getList',
-    resource: 'customers',
-    payload: {
-      pagination: { page: 1, perPage: 600 },
-      sort: { field: 'email', order: 'ASC' },
-      filter: {},
-    },
-  });
-  useEffect(() => {
-    if (customer)
-      setCustomers(customer.map((d) => ({ id: d.id, name: d.email })));
-  }, [customer]);
-
-  const [films, setFilms] = useState([]);
-  const { data: film } = useQuery({
-    type: 'getList',
-    resource: 'films',
-    payload: {
-      pagination: { page: 1, perPage: 1000 },
-      sort: { field: 'title', order: 'ASC' },
-      filter: {},
-    },
-  });
-  useEffect(() => {
-    if (film) setFilms(film.map((d) => ({ id: d.id, name: d.title })));
-  }, [film]);
-
   return (
     <Create {...props} title='Create new Rental' onSuccess={onSuccess}>
       <SimpleForm>
-        <SelectInput source='customer_id' choices={customers} />
-
-        <SelectInput source='film_id' choices={films} />
+        <ReferenceInput
+          label='Customer'
+          source='customer_id'
+          reference='customers'
+          perPage={600}
+          sort={{ field: 'email', order: 'ASC' }}
+        >
+          <SelectInput optionText='email' />
+        </ReferenceInput>
+        <ReferenceInput
+          label='Film'
+          source='film_id'
+          reference='films'
+          perPage={1000}
+          sort={{ field: 'title', order: 'ASC' }}
+        >
+          <SelectInput optionText='title' />
+        </ReferenceInput>
         <SelectInput
           source='status'
-          defaultValue='new'
+          defaultValue='borrowed'
+          disabled
           choices={[
-            { id: 'new', name: 'new' },
-            { id: 'paid', name: 'paid' },
-            { id: 'outbound', name: 'outbound' },
-            { id: 'returned', name: 'returned' },
-            { id: 'canceled', name: 'canceled' },
+            { id: 'borrowed', name: 'borrowed' },
+            { id: 'delayed', name: 'delayed' },
             { id: 'lost', name: 'lost' },
+            { id: 'returned', name: 'returned' },
           ]}
         />
 

src/components/RentalEdit.js

@@ -5,23 +5,31 @@ import {
   TextInput,
   DateTimeInput,
   SelectInput,
+  ReferenceInput,
 } from 'react-admin';
 
 const RentalEdit = (props) => (
   <Edit {...props} title='Edit of Rentals'>
     <SimpleForm>
       <TextInput disabled source='id' />
+      <ReferenceInput  source='film_id' reference='films'>
+        <SelectInput disabled optionText='title' />
+      </ReferenceInput>
+      <ReferenceInput
+        source='customer_id'
+        reference='customers'
+      >
+        <SelectInput disabled optionText='email' />
+      </ReferenceInput>
       <DateTimeInput disabled source='rental_date' />
 
       <SelectInput
         source='status'
         choices={[
-          { id: 'new', name: 'new' },
-          { id: 'paid', name: 'paid' },
-          { id: 'outbound', name: 'outbound' },
-          { id: 'returned', name: 'returned' },
-          { id: 'canceled', name: 'canceled' },
+          { id: 'borrowed', name: 'borrowed' },
+          { id: 'delayed', name: 'delayed' },
           { id: 'lost', name: 'lost' },
+          { id: 'returned', name: 'returned' },
         ]}
       />
       <DateTimeInput source='return_date' />

src/components/RentalList.js

@@ -4,23 +4,38 @@ import {
   Datagrid,
   TextField,
   DateField,
+  Filter,
+  SearchInput,
   ReferenceField,
 } from 'react-admin';
 
+const RentalFilter = (props) => (
+  <Filter {...props}>
+    <SearchInput placeholder='Rental ID' source='id' resettable alwaysOn />
+  </Filter>
+);
+
 const RentalList = (props) => (
-  <List {...props} title='List of Rentals'>
+  <List {...props} filters={<RentalFilter />} title='List of Rentals'>
     <Datagrid rowClick='edit'>
       <TextField source='id' />
-      <TextField source='status' />
-      <ReferenceField label='Movie Name' source='film_id' reference='films' link={false}>
+      <ReferenceField
+        source='film_id'
+        reference='films'
+        link={false}
+      >
         <TextField source='title' />
       </ReferenceField>
-      <TextField source='inventory_id' />
-      <TextField source='customer_id' />
-      <TextField source='staff_id' />
+      <TextField source='status' />
+      <ReferenceField
+        source='customer_id'
+        reference='customers'
+        link={false}
+      >
+        <TextField source='email' />
+      </ReferenceField>
       <DateField source='rental_date' />
       <DateField source='return_date' />
-      <DateField source='last_update' />
     </Datagrid>
   </List>
 );