Fix ReferenceArrayInput does not work in Filters

closes #3883
marmelab · Oct 29, 2019 · bbf8b82 · bbf8b82
1 parent 859be39
commit bbf8b82
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 138 deletions.
diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -1,7 +1,7 @@
 import { useMemo, useState, useEffect, useRef } from 'react';
 import isEqual from 'lodash/isEqual';
 import difference from 'lodash/difference';
-import { Record, Pagination, Sort } from '../../types';
+import { Pagination, Record, Sort } from '../../types';
 import { useGetMany } from '../../dataProvider';
 import { FieldInputProps } from 'react-final-form';
 import useGetMatching from '../../dataProvider/useGetMatching';
@@ -13,7 +13,7 @@ import { getStatusForArrayInput as getDataStatus } from './referenceDataStatus';
  *
  * @example
  *
- * const { choices, error, loaded, loading, referenceBasePath } = useReferenceArrayInputController({
+ * const { choices, error, loaded, loading } = useReferenceArrayInputController({
  *      basePath: 'resource';
  *      record: { referenceIds: ['id1', 'id2']};
  *      reference: 'reference';
@@ -33,7 +33,6 @@ import { getStatusForArrayInput as getDataStatus } from './referenceDataStatus';
  * @return {Object} controllerProps Fetched data and callbacks for the ReferenceArrayInput components
  */
 const useReferenceArrayInputController = ({
-    basePath,
     filter: defaultFilter,
     filterToQuery = defaultFilterToQuery,
     input,
@@ -115,7 +114,7 @@ const useReferenceArrayInputController = ({
     // the component displaying the currently selected records may fail
     const finalMatchingReferences =
         matchingReferences && matchingReferences.length > 0
-            ? matchingReferences.concat(finalReferenceRecords)
+            ? mergeReferences(matchingReferences, finalReferenceRecords)
             : finalReferenceRecords.length > 0
             ? finalReferenceRecords
             : matchingReferences;
@@ -127,20 +126,31 @@ const useReferenceArrayInputController = ({
         translate,
     });
 
-    const referenceBasePath = basePath.replace(resource, reference); // FIXME obviously very weak
     return {
         choices: dataStatus.choices,
         error: dataStatus.error,
         loaded,
         loading: dataStatus.waiting,
-        referenceBasePath,
         setFilter,
         setPagination,
         setSort,
         warning: dataStatus.warning,
     };
 };
 
+// concatenate and deduplicate two lists of records
+const mergeReferences = (ref1: Record[], ref2: Record[]): Record[] => {
+    const res = [...ref1];
+    const ids = ref1.map(ref => ref.id);
+    ref2.forEach(ref => {
+        if (!ids.includes(ref.id)) {
+            ids.push(ref.id);
+            res.push(ref);
+        }
+    });
+    return res;
+};
+
 export default useReferenceArrayInputController;
 
 /**
@@ -151,15 +161,13 @@ export default useReferenceArrayInputController;
  * @property {Object} error the error returned by the dataProvider
  * @property {boolean} loading is the reference currently loading
  * @property {boolean} loaded has the reference already been loaded
- * @property {string} referenceBasePath basePath of the reference
  */
 interface ReferenceArrayInputProps {
     choices: Record[];
     error?: any;
     warning?: any;
     loading: boolean;
     loaded: boolean;
-    referenceBasePath: string;
     setFilter: (filter: any) => void;
     setPagination: (pagination: Pagination) => void;
     setSort: (sort: Sort) => void;

diff --git a/packages/ra-core/src/dataProvider/useGetMany.ts b/packages/ra-core/src/dataProvider/useGetMany.ts
@@ -7,7 +7,7 @@ import union from 'lodash/union';
 import isEqual from 'lodash/isEqual';
 
 import { CRUD_GET_MANY } from '../actions/dataActions/crudGetMany';
-import { Identifier, ReduxState, DataProviderProxy } from '../types';
+import { Identifier, Record, ReduxState, DataProviderProxy } from '../types';
 import { useSafeSetState } from '../util/hooks';
 import useDataProvider from './useDataProvider';
 import { useEffect } from 'react';
@@ -23,7 +23,12 @@ interface Query {
 interface QueriesToCall {
     [resource: string]: Query[];
 }
-
+interface UseGetManyResult {
+    data: Record[];
+    error?: any;
+    loading: boolean;
+    loaded: boolean;
+}
 let queriesToCall: QueriesToCall = {};
 let dataProvider: DataProviderProxy;
 
@@ -74,7 +79,11 @@ const DataProviderOptions = { action: CRUD_GET_MANY };
  *      );
  * };
  */
-const useGetMany = (resource: string, ids: Identifier[], options: any = {}) => {
+const useGetMany = (
+    resource: string,
+    ids: Identifier[],
+    options: any = {}
+): UseGetManyResult => {
     // we can't use useQueryWithStore here because we're aggregating queries first
     // therefore part of the useQueryWithStore logic will have to be repeated below
     const selectMany = useMemo(makeGetManySelector, []);

diff --git a/packages/ra-core/src/dataProvider/useGetMatching.ts b/packages/ra-core/src/dataProvider/useGetMatching.ts
@@ -1,6 +1,6 @@
 import { useSelector } from 'react-redux';
 import { CRUD_GET_MATCHING } from '../actions/dataActions/crudGetMatching';
-import { Pagination, Sort, ReduxState } from '../types';
+import { Identifier, Pagination, Sort, Record, ReduxState } from '../types';
 import useQueryWithStore from './useQueryWithStore';
 import {
     getReferenceResource,
@@ -66,7 +66,7 @@ const useGetMatching = (
     source: string,
     referencingResource: string,
     options?: any
-) => {
+): UseGetMatchingResult => {
     const relatedTo = referenceSource(referencingResource, source);
     const {
         data: possibleValues,
@@ -119,4 +119,13 @@ const useGetMatching = (
     };
 };
 
+interface UseGetMatchingResult {
+    data: Record[];
+    ids: Identifier[];
+    total: number;
+    error?: any;
+    loading: boolean;
+    loaded: boolean;
+}
+
 export default useGetMatching;