feat: Adds create inventory

Author: megaconfidence

src/App.js

@@ -5,6 +5,7 @@ import { authProvider, httpClient } from './Auth';
 import RentalList from './components/RentalList';
 import CustomerList from './components/CustomerList';
 import RentalEdit from './components/RentalEdit';
+import RentalCreate from './components/RentalCreate';
 
 function App() {
   return (
@@ -13,9 +14,8 @@ function App() {
       authProvider={authProvider}
     >
       <Resource name='films'/>
-
       <Resource name='customers' list={CustomerList}  />    
-      <Resource name='rentals' list={RentalList} edit={RentalEdit}/>
+      <Resource name='rentals' create={RentalCreate} list={RentalList} edit={RentalEdit}/>
 
     </Admin>
   );

src/components/RentalCreate.js

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Create,
+  SimpleForm,
+  DateTimeInput,
+  SelectInput,
+  useNotify,
+  useRefresh,
+  useRedirect,
+  useQuery,
+} from 'react-admin';
+
+const RentalCreate = (props) => {
+  const notify = useNotify();
+  const refresh = useRefresh();
+  const redirect = useRedirect();
+
+  const onSuccess = () => {
+    notify(`New Rental created `);
+    redirect('/rentals');
+    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} />
+        <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: 'lost', name: 'lost' },
+          ]}
+        />
+
+        <DateTimeInput source='rental_date' />
+
+        <DateTimeInput source='return_date' />
+      </SimpleForm>
+    </Create>
+  );
+};
+
+export default RentalCreate;

src/components/RentalEdit.js

@@ -3,15 +3,15 @@ import {
   Edit,
   SimpleForm,
   TextInput,
-  DateInput,
+  DateTimeInput,
   SelectInput,
 } from 'react-admin';
 
 const RentalEdit = (props) => (
   <Edit {...props} title='Edit of Rentals'>
-    <SimpleForm rowClick='edit'>
+    <SimpleForm>
       <TextInput disabled source='id' />
-      <DateInput disabled source='rental_date' />
+      <DateTimeInput disabled source='rental_date' />
 
       <SelectInput
         source='status'
@@ -24,7 +24,7 @@ const RentalEdit = (props) => (
           { id: 'lost', name: 'lost' },
         ]}
       />
-      <DateInput min source='return_date' />
+      <DateTimeInput source='return_date' />
     </SimpleForm>
   </Edit>
 );