Merge pull request #48 from VirtusLab/fix/content-types-search-limit

fix: content types search limit
VirtusLab-Open-Source · Mar 15, 2021 · 2e1fca7 · 2e1fca7
2 parents c107977 + d716200
commit 2e1fca7
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -55,7 +55,7 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v3.5.2 (recently tested)
+- Strapi v3.5.3 (recently tested)
 - Strapi v3.x
 
 (This plugin may work with the older Strapi versions, but these are not tested nor officially supported at this time.)

diff --git a/admin/src/components/Select/index.js b/admin/src/components/Select/index.js
@@ -10,7 +10,7 @@ import IndicatorSeparator from './IndicatorSeparator';
 import MultiValueContainer from './MultiValueContainer';
 import { useIntl } from 'react-intl';
 
-const Select = ({ error, isDisabled, isMulti, isLoading, name, onChange, value, defaultValue, options }) => {
+const Select = ({ error, isDisabled, isMulti, isLoading, name, onChange, onInputChange, value, inputValue, defaultValue, options }) => {
   const { formatMessage } = useIntl();
   const translatedError = error && error.id ? formatMessage(error) : null;
 
@@ -29,13 +29,15 @@ const Select = ({ error, isDisabled, isMulti, isLoading, name, onChange, value,
         onChange={data => {
           onChange({ target: { name, value: data } });
         }}
+        onInputChange={onInputChange}
         isClearable
         isDisabled={isDisabled}
         isLoading={isLoading}
         isMulti={isMulti}
         options={isLoading ? [] : options}
         styles={styles}
         defaultValue={defaultValue}
+        inputValue={inputValue}
         value={isLoading ? undefined : value}
       />
       {error && value.length === 0 ? (

diff --git a/admin/src/containers/DataManagerProvider/index.js b/admin/src/containers/DataManagerProvider/index.js
@@ -161,12 +161,19 @@ const DataManagerProvider = ({ children }) => {
     }
   }, [autoReload, currentEnvironment]);
 
-  const getContentTypeItems = async (type, plugin = "") => {
+  const getContentTypeItems = async ({type, query}, plugin = "") => {
     dispatch({
       type: GET_CONTENT_TYPE_ITEMS,
     });
     const url = plugin ? `/${plugin}/${type}` : `/${type}`;
-    const contentTypeItems = await request(`${url}?_publicationState=preview`, {
+
+    const queryParams = new URLSearchParams();
+    queryParams.append('_publicationState', 'preview');
+    if (query) {
+      queryParams.append('_q', query);
+    }
+
+    const contentTypeItems = await request(`${url}?${queryParams.toString()}`, {
       method: "GET",
       signal,
     });

diff --git a/admin/src/containers/View/components/NavigationItemForm/index.js b/admin/src/containers/View/components/NavigationItemForm/index.js
@@ -1,7 +1,7 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import { Button, Enumeration, Flex, Label, Text, Toggle } from '@buffetjs/core';
 import { useIntl } from 'react-intl';
-import { find, get, isEmpty, isEqual, isNil, isString } from 'lodash';
+import { debounce, find, get, isEmpty, isEqual, isNil, isString } from 'lodash';
 import PropTypes from 'prop-types';
 import { ButtonModal, ModalBody, ModalForm } from 'strapi-helper-plugin';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -33,6 +33,8 @@ const NavigationItemForm = ({
 }) => {
   const [hasBeenInitialized, setInitializedState] = useState(false);
   const [hasChanged, setChangedState] = useState(false);
+  const [contentTypeSearchQuery, setContentTypeSearchQuery] = useState(undefined);
+  const [contentTypeSearchInputValue, setContentTypeSearchInputValue] = useState(undefined);
   const [form, setFormState] = useState({});
   const [formErrors, setFormErrorsState] = useState({});
   const { relatedType } = form;
@@ -98,6 +100,8 @@ const NavigationItemForm = ({
 
   const onChangeRelatedType = ({ target: { name, value } }) => {
     const relatedTypeBeingReverted = data.relatedType && (data.relatedType.value === get(value, 'value', value));
+    setContentTypeSearchQuery(undefined);
+    setContentTypeSearchInputValue(undefined);
     setFormState(prevState => ({
       ...prevState,
       updated: true,
@@ -186,6 +190,18 @@ const NavigationItemForm = ({
     return null;
   };
 
+  const debouncedSearch = useCallback(
+    debounce(nextValue => setContentTypeSearchQuery(nextValue), 500),
+		[],
+	);
+
+	const debounceContentTypeSearchQuery = value => {
+    setContentTypeSearchInputValue(value);
+		debouncedSearch(value);
+	};
+
+  const thereAreNoMoreContentTypes =  isEmpty(relatedSelectOptions) && !contentTypeSearchQuery;
+
   useEffect(
     () => {
       const value = get(relatedSelectOptions, '0');
@@ -205,12 +221,15 @@ const NavigationItemForm = ({
           (_) => _.uid === value,
         );
         if (item) {
-          await getContentTypeEntities(item.endpoint || item.collectionName, item.plugin);
+          await getContentTypeEntities({ 
+            type: item.endpoint || item.collectionName,
+            query: contentTypeSearchQuery,
+          }, item.plugin);
         }
       }
     };
     fetchContentTypeEntities();
-  }, [relatedType]);
+  }, [relatedType, contentTypeSearchQuery]);
 
   return (
     <form onSubmit={handleSubmit}>
@@ -323,12 +342,13 @@ const NavigationItemForm = ({
                         name={relatedFieldName}
                         error={get(formErrors, relatedFieldName)}
                         onChange={onChange}
+                        onInputChange={debounceContentTypeSearchQuery}
+                        inputValue={contentTypeSearchInputValue}
                         isLoading={isLoading}
-                        isDisabled={isEmpty(relatedSelectOptions)}
                         options={relatedSelectOptions}
                         value={relatedSelectValue}
                       />
-                      {!isLoading && isEmpty(relatedSelectOptions) && (
+                      {!isLoading && thereAreNoMoreContentTypes && (
                         <Text
                           color="orange"
                           fontSize="sm"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.18",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "Navigation",
@@ -27,8 +27,8 @@
     "reactstrap": "8.4.1",
     "redux-saga": "^0.16.0",
     "request": "^2.83.0",
-    "strapi-helper-plugin": "3.5.2",
-    "strapi-utils": "3.5.2",
+    "strapi-helper-plugin": "3.5.3",
+    "strapi-utils": "3.5.3",
     "uuidv4": "^6.2.6",
     "slugify": "^1.4.5",
     "pluralize": "^8.0.0"