feat: Adds refund

Author: megaconfidence

src/App.js

@@ -1,22 +1,17 @@
 import React from 'react';
-import { Admin, Resource } from 'react-admin';
-import OrderList from './components/OrderList';
-import OrderListEdit from './components/OrderListEdit';
 import lb4Provider from 'react-admin-lb4';
-//import lb4Provider from 'ra-data-lb4';
-
-import ProductList from './components/ProductList';
-import ProductListEdit from './components/ProductListEdit';
+import { Admin, Resource } from 'react-admin';
 import { authProvider, httpClient } from './Auth';
+import OrderList from './components/OrderList';
+import OrderShow from './components/OrderShow';
 
 function App() {
   return (
     <Admin
       dataProvider={lb4Provider(process.env.REACT_APP_API_URL, httpClient)}
       authProvider={authProvider}
     >
-      <Resource name='orders' list={OrderList} edit={OrderListEdit} />
-      <Resource name='products' list={ProductList} edit={ProductListEdit} />
+      <Resource name='orders' list={OrderList} show={OrderShow} />
     </Admin>
   );
 }

src/components/OrderList.js

@@ -1,22 +1,18 @@
 import React from 'react';
-import {List, Datagrid, TextField, DateField, EditButton} from 'react-admin';
+import { List, Datagrid, TextField, DateField } from 'react-admin';
 
-const OrderList = (props) => {
-  return (
-    <List {...props}>
-      <Datagrid>
-        <TextField source='id' />
-        <TextField source='order_status' />
-        <DateField source='order_purchase_timestamp' />
-        <DateField source='order_approved_at' />
-        <DateField source='order_delivered_carrier_date'/>
-        <DateField source='order_delivered_customer_date' />
-        <DateField source='order_estimated_delivery_date' />
+const OrderList = (props) => (
+  <List {...props} title='List of Orders'>
+    <Datagrid rowClick='show'>
+      <TextField source='id' />
+      <TextField source='order_status' />
+      <DateField source='order_purchase_timestamp' />
+      <DateField source='order_approved_at' />
+      <DateField source='order_delivered_carrier_date' />
+      <DateField source='order_delivered_customer_date' />
+      <DateField source='order_estimated_delivery_date' />
+    </Datagrid>
+  </List>
+);
 
-        <EditButton basePath='/orders' />
-      </Datagrid>
-    </List>
-  );
-}
-
-export default OrderList;
+export default OrderList;

src/components/OrderListEdit.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Button from '@material-ui/core/Button';
+import ReplayIcon from '@material-ui/icons/Replay';
+import { Show, TextField, DateField, SimpleShowLayout, useUpdate, TopToolbar } from 'react-admin';
+
+const PostShowActions = ({ data }) => {
+  const [update] = useUpdate('orders', data?.id, {
+    order_status: 'refunded',
+  });
+  return (
+    <TopToolbar>
+      <div style={{ color: 'red' }}>
+        <Button
+          color='inherit'
+          onClick={update}
+          variant='outlined'
+          startIcon={<ReplayIcon />}
+        >
+          Refund
+        </Button>
+      </div>
+    </TopToolbar>
+  );
+};
+
+const OrderShow = (props) => {
+  return (
+    <Show actions={<PostShowActions />} {...props}>
+      <SimpleShowLayout>
+        <TextField disabled source='id' />
+        <TextField source='order_status' />
+        <DateField label='Approved' source='order_approved_at' />
+      </SimpleShowLayout>
+    </Show>
+  );
+};
+
+export default OrderShow