refactor: Updates to new rental structure

Author: megaconfidence

src/components/RentalCreate.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Create,
   SimpleForm,
@@ -7,7 +7,8 @@ import {
   useNotify,
   useRefresh,
   useRedirect,
-  ReferenceInput,
+  useQuery,
+  TextInput,
 } from 'react-admin';
 
 const RentalCreate = (props) => {
@@ -21,27 +22,41 @@ const RentalCreate = (props) => {
     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: {},
+    },
+  });
+
+  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.title, name: d.title })));
+    if (customer)
+      setCustomers(customer.map((d) => ({ id: d.email, name: d.email })));
+  }, [film, customer]);
+
   return (
     <Create {...props} title='Create new Rental' onSuccess={onSuccess}>
       <SimpleForm>
-        <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>
+        <TextInput disabled source='staff_id' defaultValue='1' />
+        <SelectInput source='customer_email' choices={customers} />
+        <SelectInput source='film_title' choices={films} />
         <SelectInput
           source='status'
           defaultValue='borrowed'

src/components/RentalEdit.js

@@ -5,22 +5,14 @@ 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>
+      <TextInput disabled source='film_title' />
+      <TextInput disabled source='customer_email' />
       <DateTimeInput disabled source='rental_date' />
 
       <SelectInput

src/components/RentalList.js

@@ -6,7 +6,6 @@ import {
   DateField,
   Filter,
   SearchInput,
-  ReferenceField,
 } from 'react-admin';
 
 const RentalFilter = (props) => (
@@ -19,21 +18,9 @@ const RentalList = (props) => (
   <List {...props} filters={<RentalFilter />} title='List of Rentals'>
     <Datagrid rowClick='edit'>
       <TextField source='id' />
-      <ReferenceField
-        source='film_id'
-        reference='films'
-        link={false}
-      >
-        <TextField source='title' />
-      </ReferenceField>
+      <TextField source='film_title' />
       <TextField source='status' />
-      <ReferenceField
-        source='customer_id'
-        reference='customers'
-        link={false}
-      >
-        <TextField source='email' />
-      </ReferenceField>
+      <TextField source='customer_email' />
       <DateField source='rental_date' />
       <DateField source='return_date' />
     </Datagrid>

src/index.js

@@ -4,11 +4,16 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+// ReactDOM.render(
+//   <React.StrictMode>
+//     <App />
+//   </React.StrictMode>,
+//   document.getElementById('root')
+// );
+
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  <App />,
+document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function