From 8090f2a5b6a92e91f1ac32fb31a3e19e52324131 Mon Sep 17 00:00:00 2001
From: zyhou <richard.maxime9@gmail.com>
Date: Fri, 12 Jul 2019 17:28:54 +0200
Subject: [PATCH] use hook instead of crud*

---
 examples/demo/src/orders/Basket.js            | 46 ++++++++++-------
 examples/demo/src/reviews/BulkAcceptButton.js | 50 ++++++++++++-------
 2 files changed, 59 insertions(+), 37 deletions(-)

diff --git a/examples/demo/src/orders/Basket.js b/examples/demo/src/orders/Basket.js
index 56b0ade3fa3..ef64448bbcb 100644
--- a/examples/demo/src/orders/Basket.js
+++ b/examples/demo/src/orders/Basket.js
@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React from 'react';
 import classnames from 'classnames';
 
 import Table from '@material-ui/core/Table';
@@ -8,7 +7,7 @@ import TableCell from '@material-ui/core/TableCell';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
-import { Link, useTranslate, crudGetMany } from 'react-admin';
+import { Link, useTranslate, useQueryWithStore, GET_MANY } from 'react-admin';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
@@ -20,26 +19,35 @@ const useStyles = makeStyles({
 const Basket = ({ record }) => {
     const classes = useStyles();
     const translate = useTranslate();
-    const dispatch = useDispatch();
-    const admin = useSelector(state => state.admin);
 
-    useEffect(() => {
-        const { basket } = record;
-        dispatch(crudGetMany('products', basket.map(item => item.product_id)));
-    }, [dispatch, record]);
+    const { basket } = record;
 
-    if (!record) return null;
+    const { loaded, data: products } = useQueryWithStore(
+        {
+            type: GET_MANY,
+            resource: 'products',
+            payload: {
+                ids: basket.map(item => item.product_id),
+            },
+        },
+        {},
+        state => {
+            const productIds = basket.map(item => item.product_id);
+            return productIds
+                .map(
+                    productId => state.admin.resources.products.data[productId]
+                )
+                .filter(r => typeof r !== 'undefined')
+                .reduce((prev, next) => {
+                    prev[next.id] = next;
+                    return prev;
+                }, {});
+        }
+    );
 
-    const { basket } = record;
+    console.log({ products });
 
-    const productIds = basket.map(item => item.product_id);
-    const products = productIds
-        .map(productId => admin.resources.products.data[productId])
-        .filter(r => typeof r !== 'undefined')
-        .reduce((prev, next) => {
-            prev[next.id] = next;
-            return prev;
-        }, {});
+    if (!loaded) return null;
 
     return (
         <Paper className={classes.container} elevation={2}>
diff --git a/examples/demo/src/reviews/BulkAcceptButton.js b/examples/demo/src/reviews/BulkAcceptButton.js
index eb5e85b14af..b38d4ada9e8 100644
--- a/examples/demo/src/reviews/BulkAcceptButton.js
+++ b/examples/demo/src/reviews/BulkAcceptButton.js
@@ -1,27 +1,41 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch } from 'react-redux';
 import ThumbUp from '@material-ui/icons/ThumbUp';
-import { Button, startUndoable, crudUpdateMany } from 'react-admin';
+import { Button, useMutation, UPDATE_MANY } from 'react-admin';
 
-const BulkAcceptButton = ({ basePath, resource, selectedIds }) => {
-    const dispatch = useDispatch();
+const options = {
+    undoable: true,
+    onSuccess: {
+        notification: {
+            body: 'resources.reviews.notification.approved_success',
+            level: 'info',
+        },
+        redirectTo: '/reviews',
+    },
+    onFailure: {
+        notification: {
+            body: 'resources.reviews.notification.approved_error',
+            level: 'warning',
+        },
+    },
+};
 
-    const handleClick = useCallback(() => {
-        dispatch(
-            startUndoable(
-                crudUpdateMany(
-                    resource,
-                    selectedIds,
-                    { status: 'accepted' },
-                    basePath
-                )
-            )
-        );
-    }, [basePath, dispatch, resource, selectedIds]);
+const BulkAcceptButton = ({ resource, selectedIds }) => {
+    const [approve, { loading }] = useMutation(
+        {
+            type: UPDATE_MANY,
+            resource: resource,
+            payload: { selectedIds, data: { status: 'accepted' } },
+        },
+        options
+    );
 
     return (
-        <Button label="resources.reviews.action.accept" onClick={handleClick}>
+        <Button
+            label="resources.reviews.action.accept"
+            onClick={approve}
+            disabled={loading}
+        >
             <ThumbUp />
         </Button>
     );