@payloadcms/ui 3.0.0-beta.9 → 3.0.0-beta.90

package/dist/elements/WhereBuilder/Condition/Relationship/index.js

@@ -1,284 +1,302 @@
-/* eslint-disable @typescript-eslint/no-floating-promises */ import React, { useCallback, useEffect, useReducer, useState } from 'react';
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as qs from 'qs-esm';
+import React, { useCallback, useEffect, useReducer, useState } from 'react';
 import { useDebounce } from '../../../../hooks/useDebounce.js';
 import { useConfig } from '../../../../providers/Config/index.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import { ReactSelect } from '../../../ReactSelect/index.js';
+import './index.scss';
 import optionsReducer from './optionsReducer.js';
 const baseClass = 'condition-value-relationship';
 const maxResultsPerRequest = 10;
-export const RelationshipField = (props)=>{
-    const { admin: { isSortable } = {}, disabled, hasMany, onChange, relationTo, value } = props;
-    const { collections, routes: { api }, serverURL } = useConfig();
-    const hasMultipleRelations = Array.isArray(relationTo);
-    const [options, dispatchOptions] = useReducer(optionsReducer, []);
-    const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1);
-    const [lastLoadedPage, setLastLoadedPage] = useState(1);
-    const [search, setSearch] = useState('');
-    const [errorLoading, setErrorLoading] = useState('');
-    const [hasLoadedFirstOptions, setHasLoadedFirstOptions] = useState(false);
-    const debouncedSearch = useDebounce(search, 300);
-    const { i18n, t } = useTranslation();
-    const addOptions = useCallback((data, relation)=>{
-        const collection = collections.find((coll)=>coll.slug === relation);
-        dispatchOptions({
-            type: 'ADD',
-            collection,
-            data,
-            hasMultipleRelations,
-            i18n,
-            relation
-        });
-    }, [
-        collections,
-        hasMultipleRelations,
-        i18n
-    ]);
-    const getResults = useCallback(async ({ lastFullyLoadedRelation: lastFullyLoadedRelationArg, lastLoadedPage: lastLoadedPageArg, search: searchArg })=>{
-        let lastLoadedPageToUse = typeof lastLoadedPageArg !== 'undefined' ? lastLoadedPageArg : 1;
-        const lastFullyLoadedRelationToUse = typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1;
-        const relations = Array.isArray(relationTo) ? relationTo : [
-            relationTo
-        ];
-        const relationsToFetch = lastFullyLoadedRelationToUse === -1 ? relations : relations.slice(lastFullyLoadedRelationToUse + 1);
-        let resultsFetched = 0;
-        if (!errorLoading) {
-            relationsToFetch.reduce(async (priorRelation, relation)=>{
-                await priorRelation;
-                if (resultsFetched < 10) {
-                    const collection = collections.find((coll)=>coll.slug === relation);
-                    const fieldToSearch = collection?.admin?.useAsTitle || 'id';
-                    const searchParam = searchArg ? `&where[${fieldToSearch}][like]=${searchArg}` : '';
-                    const response = await fetch(`${serverURL}${api}/${relation}?limit=${maxResultsPerRequest}&page=${lastLoadedPageToUse}&depth=0${searchParam}`, {
-                        credentials: 'include',
-                        headers: {
-                            'Accept-Language': i18n.language
-                        }
-                    });
-                    if (response.ok) {
-                        const data = await response.json();
-                        if (data.docs.length > 0) {
-                            resultsFetched += data.docs.length;
-                            addOptions(data, relation);
-                            setLastLoadedPage(data.page);
-                            if (!data.nextPage) {
-                                setLastFullyLoadedRelation(relations.indexOf(relation));
-                                // If there are more relations to search, need to reset lastLoadedPage to 1
-                                // both locally within function and state
-                                if (relations.indexOf(relation) + 1 < relations.length) {
-                                    lastLoadedPageToUse = 1;
-                                }
-                            }
-                        }
-                    } else {
-                        setErrorLoading(t('error:unspecific'));
-                    }
-                }
-            }, Promise.resolve());
+export const RelationshipField = props => {
+  const {
+    admin: {
+      isSortable
+    } = {},
+    disabled,
+    hasMany,
+    onChange,
+    relationTo,
+    value
+  } = props;
+  const {
+    config: {
+      collections,
+      routes: {
+        api
+      },
+      serverURL
+    }
+  } = useConfig();
+  const hasMultipleRelations = Array.isArray(relationTo);
+  const [options, dispatchOptions] = useReducer(optionsReducer, []);
+  const [search, setSearch] = useState('');
+  const [errorLoading, setErrorLoading] = useState('');
+  const [hasLoadedFirstOptions, setHasLoadedFirstOptions] = useState(false);
+  const debouncedSearch = useDebounce(search, 300);
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const relationSlugs = hasMultipleRelations ? relationTo : [relationTo];
+  const initialRelationMap = () => {
+    const map = new Map();
+    relationSlugs.forEach(relation => {
+      map.set(relation, 1);
+    });
+    return map;
+  };
+  const nextPageByRelationshipRef = React.useRef(initialRelationMap());
+  const partiallyLoadedRelationshipSlugs = React.useRef(relationSlugs);
+  const addOptions = useCallback((data, relation_0) => {
+    const collection = collections.find(coll => coll.slug === relation_0);
+    dispatchOptions({
+      type: 'ADD',
+      collection,
+      data,
+      hasMultipleRelations,
+      i18n,
+      relation: relation_0
+    });
+  }, [collections, hasMultipleRelations, i18n]);
+  const loadRelationOptions = React.useCallback(async ({
+    abortController,
+    relationSlug
+  }) => {
+    if (relationSlug && partiallyLoadedRelationshipSlugs.current.includes(relationSlug)) {
+      const collection_0 = collections.find(coll_0 => coll_0.slug === relationSlug);
+      const fieldToSearch = collection_0?.admin?.useAsTitle || 'id';
+      const pageIndex = nextPageByRelationshipRef.current.get(relationSlug);
+      const query = {
+        depth: 0,
+        limit: maxResultsPerRequest,
+        page: pageIndex,
+        where: {
+          and: []
         }
-    }, [
-        i18n,
-        relationTo,
-        errorLoading,
-        collections,
-        serverURL,
-        api,
-        addOptions,
-        t
-    ]);
-    const findOptionsByValue = useCallback(()=>{
-        if (value) {
-            if (hasMany) {
-                if (Array.isArray(value)) {
-                    return value.map((val)=>{
-                        if (hasMultipleRelations) {
-                            let matchedOption;
-                            options.forEach((opt)=>{
-                                if (opt.options) {
-                                    opt.options.some((subOpt)=>{
-                                        if (subOpt?.value === val.value) {
-                                            matchedOption = subOpt;
-                                            return true;
-                                        }
-                                        return false;
-                                    });
-                                }
-                            });
-                            return matchedOption;
-                        }
-                        return options.find((opt)=>opt.value === val);
-                    });
-                }
-                return undefined;
+      };
+      if (debouncedSearch) {
+        query.where.and.push({
+          [fieldToSearch]: {
+            like: debouncedSearch
+          }
+        });
+      }
+      try {
+        const response = await fetch(`${serverURL}${api}/${relationSlug}${qs.stringify(query, {
+          addQueryPrefix: true
+        })}`, {
+          credentials: 'include',
+          headers: {
+            'Accept-Language': i18n.language
+          },
+          signal: abortController.signal
+        });
+        if (response.ok) {
+          const data_0 = await response.json();
+          if (data_0.docs.length > 0) {
+            addOptions(data_0, relationSlug);
+            if (!debouncedSearch) {
+              if (data_0.nextPage) {
+                nextPageByRelationshipRef.current.set(relationSlug, data_0.nextPage);
+              } else {
+                partiallyLoadedRelationshipSlugs.current = partiallyLoadedRelationshipSlugs.current.filter(partiallyLoadedRelation => partiallyLoadedRelation !== relationSlug);
+              }
             }
+          }
+        } else {
+          setErrorLoading(t('error:unspecific'));
+        }
+      } catch (e) {
+        if (!abortController.signal.aborted) {
+          console.error(e);
+        }
+      }
+    }
+    setHasLoadedFirstOptions(true);
+  }, [addOptions, api, collections, debouncedSearch, i18n.language, serverURL, t]);
+  const loadMoreOptions = React.useCallback(() => {
+    if (partiallyLoadedRelationshipSlugs.current.length > 0) {
+      const abortController_0 = new AbortController();
+      void loadRelationOptions({
+        abortController: abortController_0,
+        relationSlug: partiallyLoadedRelationshipSlugs.current[0]
+      });
+    }
+  }, [loadRelationOptions]);
+  const findOptionsByValue = useCallback(() => {
+    if (value) {
+      if (hasMany) {
+        if (Array.isArray(value)) {
+          return value.map(val => {
             if (hasMultipleRelations) {
-                let matchedOption;
-                const valueWithRelation = value;
-                options.forEach((opt)=>{
-                    if (opt?.options) {
-                        opt.options.some((subOpt)=>{
-                            if (subOpt?.value === valueWithRelation.value) {
-                                matchedOption = subOpt;
-                                return true;
-                            }
-                            return false;
-                        });
+              let matchedOption;
+              options.forEach(opt => {
+                if (opt.options) {
+                  opt.options.some(subOpt => {
+                    if (subOpt?.value == val.value) {
+                      matchedOption = subOpt;
+                      return true;
                     }
-                });
-                return matchedOption;
+                    return false;
+                  });
+                }
+              });
+              return matchedOption;
             }
-            return options.find((opt)=>opt.value === value);
+            return options.find(opt_0 => opt_0.value == val);
+          });
         }
         return undefined;
-    }, [
-        hasMany,
-        hasMultipleRelations,
-        value,
-        options
-    ]);
-    const handleInputChange = useCallback((newSearch)=>{
-        if (search !== newSearch) {
-            setSearch(newSearch);
-        }
-    }, [
-        search
-    ]);
-    const addOptionByID = useCallback(async (id, relation)=>{
-        if (!errorLoading && id !== 'null' && id && relation) {
-            const response = await fetch(`${serverURL}${api}/${relation}/${id}?depth=0`, {
-                credentials: 'include',
-                headers: {
-                    'Accept-Language': i18n.language
-                }
+      }
+      if (hasMultipleRelations) {
+        let matchedOption_0;
+        const valueWithRelation = value;
+        options.forEach(opt_1 => {
+          if (opt_1?.options) {
+            opt_1.options.some(subOpt_0 => {
+              if (subOpt_0?.value == valueWithRelation.value) {
+                matchedOption_0 = subOpt_0;
+                return true;
+              }
+              return false;
             });
-            if (response.ok) {
-                const data = await response.json();
-                addOptions({
-                    docs: [
-                        data
-                    ]
-                }, relation);
-            } else {
-                // eslint-disable-next-line no-console
-                console.error(t('error:loadingDocument', {
-                    id
-                }));
-            }
-        }
-    }, [
-        i18n,
-        addOptions,
-        api,
-        errorLoading,
-        serverURL,
-        t
-    ]);
-    // ///////////////////////////
-    // Get results when search input changes
-    // ///////////////////////////
-    useEffect(()=>{
-        dispatchOptions({
-            type: 'CLEAR',
-            i18n,
-            required: true
-        });
-        setHasLoadedFirstOptions(true);
-        setLastLoadedPage(1);
-        setLastFullyLoadedRelation(-1);
-        getResults({
-            search: debouncedSearch
+          }
         });
-    }, [
-        getResults,
-        debouncedSearch,
-        relationTo,
-        i18n
-    ]);
-    // ///////////////////////////
-    // Format options once first options have been retrieved
-    // ///////////////////////////
-    useEffect(()=>{
-        if (value && hasLoadedFirstOptions) {
-            if (hasMany) {
-                const matchedOptions = findOptionsByValue();
-                (matchedOptions || []).forEach((option, i)=>{
-                    if (!option) {
-                        if (hasMultipleRelations) {
-                            addOptionByID(value[i].value, value[i].relationTo);
-                        } else {
-                            addOptionByID(value[i], relationTo);
-                        }
-                    }
-                });
+        return matchedOption_0;
+      }
+      return options.find(opt_2 => opt_2.value == value);
+    }
+    return undefined;
+  }, [hasMany, hasMultipleRelations, value, options]);
+  const handleInputChange = useCallback(newSearch => {
+    if (search !== newSearch) {
+      setSearch(newSearch);
+    }
+  }, [search]);
+  const addOptionByID = useCallback(async (id, relation_1) => {
+    if (!errorLoading && id !== 'null' && id && relation_1) {
+      const response_0 = await fetch(`${serverURL}${api}/${relation_1}/${id}?depth=0`, {
+        credentials: 'include',
+        headers: {
+          'Accept-Language': i18n.language
+        }
+      });
+      if (response_0.ok) {
+        const data_1 = await response_0.json();
+        addOptions({
+          docs: [data_1]
+        }, relation_1);
+      } else {
+        // eslint-disable-next-line no-console
+        console.error(t('error:loadingDocument', {
+          id
+        }));
+      }
+    }
+  }, [i18n, addOptions, api, errorLoading, serverURL, t]);
+  /**
+  * 1. Trigger initial relationship options fetch
+  * 2. When search changes, loadRelationOptions will
+  *    fire off again
+  */
+  useEffect(() => {
+    const relations = Array.isArray(relationTo) ? relationTo : [relationTo];
+    const abortControllers = [];
+    relations.forEach(relation_2 => {
+      const abortController_1 = new AbortController();
+      void loadRelationOptions({
+        abortController: abortController_1,
+        relationSlug: relation_2
+      });
+      abortControllers.push(abortController_1);
+    });
+    return () => {
+      abortControllers.forEach(controller => {
+        if (controller.signal) {
+          try {
+            controller.abort();
+          } catch (error) {
+            // swallow error
+          }
+        }
+      });
+    };
+  }, [i18n, loadRelationOptions, relationTo]);
+  /**
+  * Load any options that were not returned
+  * in the first 10 of each relation fetch
+  */
+  useEffect(() => {
+    if (value && hasLoadedFirstOptions) {
+      if (hasMany) {
+        const matchedOptions = findOptionsByValue();
+        (matchedOptions || []).forEach((option, i) => {
+          if (!option) {
+            if (hasMultipleRelations) {
+              void addOptionByID(value[i].value, value[i].relationTo);
             } else {
-                const matchedOption = findOptionsByValue();
-                if (!matchedOption) {
-                    if (hasMultipleRelations) {
-                        const valueWithRelation = value;
-                        addOptionByID(valueWithRelation.value, valueWithRelation.relationTo);
-                    } else {
-                        addOptionByID(value, relationTo);
-                    }
-                }
+              void addOptionByID(value[i], relationTo);
             }
+          }
+        });
+      } else {
+        const matchedOption_1 = findOptionsByValue();
+        if (!matchedOption_1) {
+          if (hasMultipleRelations) {
+            const valueWithRelation_0 = value;
+            void addOptionByID(valueWithRelation_0.value, valueWithRelation_0.relationTo);
+          } else {
+            void addOptionByID(value, relationTo);
+          }
         }
-    }, [
-        addOptionByID,
-        findOptionsByValue,
-        hasMany,
-        hasMultipleRelations,
-        relationTo,
-        value,
-        hasLoadedFirstOptions
-    ]);
-    const classes = [
-        'field-type',
-        baseClass,
-        errorLoading && 'error-loading'
-    ].filter(Boolean).join(' ');
-    const valueToRender = findOptionsByValue() || value;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classes
-    }, !errorLoading && /*#__PURE__*/ React.createElement(ReactSelect, {
-        disabled: disabled,
-        isMulti: hasMany,
-        isSortable: isSortable,
-        onChange: (selected)=>{
-            if (!selected) {
-                onChange(null);
-                return;
-            }
-            if (hasMany) {
-                onChange(selected ? selected.map((option)=>{
-                    if (hasMultipleRelations) {
-                        return {
-                            relationTo: option?.relationTo,
-                            value: option?.value
-                        };
-                    }
-                    return option?.value;
-                }) : null);
-            } else if (hasMultipleRelations) {
-                onChange({
-                    relationTo: selected?.relationTo,
-                    value: selected?.value
-                });
-            } else {
-                onChange(selected?.value);
+      }
+    }
+  }, [addOptionByID, findOptionsByValue, hasMany, hasMultipleRelations, relationTo, value, hasLoadedFirstOptions]);
+  const classes = ['field-type', baseClass, errorLoading && 'error-loading'].filter(Boolean).join(' ');
+  const valueToRender = findOptionsByValue() || value;
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes,
+    children: [!errorLoading && /*#__PURE__*/_jsx(ReactSelect, {
+      disabled: disabled,
+      isMulti: hasMany,
+      isSortable: isSortable,
+      onChange: selected => {
+        if (!selected) {
+          onChange(null);
+          return;
+        }
+        if (hasMany && Array.isArray(selected)) {
+          onChange(selected ? selected.map(option_0 => {
+            if (hasMultipleRelations) {
+              return {
+                relationTo: option_0?.relationTo,
+                value: option_0?.value
+              };
             }
-        },
-        onInputChange: handleInputChange,
-        onMenuScrollToBottom: ()=>{
-            getResults({
-                lastFullyLoadedRelation,
-                lastLoadedPage: lastLoadedPage + 1
-            });
-        },
-        options: options,
-        placeholder: t('general:selectValue'),
-        value: valueToRender
-    }), errorLoading && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__error-loading`
-    }, errorLoading));
+            return option_0?.value;
+          }) : null);
+        } else if (hasMultipleRelations && !Array.isArray(selected)) {
+          onChange({
+            relationTo: selected?.relationTo,
+            value: selected?.value
+          });
+        } else if (!Array.isArray(selected)) {
+          onChange(selected?.value);
+        }
+      },
+      onInputChange: handleInputChange,
+      onMenuScrollToBottom: loadMoreOptions,
+      options: options,
+      placeholder: t('general:selectValue'),
+      value: valueToRender
+    }), errorLoading && /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__error-loading`,
+      children: errorLoading
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map