rest api service

package.json

@@ -43,6 +43,8 @@
         "@testing-library/react-hooks": "3.2.1"
     },
     "dependencies": {
-        "react-select": "^4.3.1"
+        "react": "^17.0.2",
+        "react-select": "^4.3.1",
+        "react-select-async-paginate": "^0.5.3"
     }
 }

src/components/CustomDropdown/index.tsx

@@ -7,6 +7,7 @@ import { OptionTypeBase } from "react-select/src/types";
 
 import { CustomDropdownContainerProps } from "../../../typings/CustomDropdownProps";
 import Label, { getStyles as getLabelStyles } from "./Label";
+import { AsyncPaginate } from "react-select-async-paginate";
 
 export interface Option {
     id: string;
@@ -30,9 +31,29 @@ interface LabelValues {
 }
 
 export default function CustomDropdown(props: CustomDropdownContainerProps): ReactElement {
+    props.options.setLimit(2);
+    const current = props.options.offset;
+    //const [options, setOptions] = useState<Option[]>([]);
     const [options, setOptions] = useState<Option[]>([]);
     const [value, setValue] = useState<Option>();
+    const loadOptions = async (searchQuery:any, loadedOptions:any, { page }:any) => {
 
+        // const response = await fetch(
+        //   `https://www.anapioficeandfire.com/api/houses?region=${regionName}&page=${page}&pageSize=5`
+        // );
+        // const responseJSON = await response.json();
+
+        props.options.setOffset(page*2);
+        console.log('Additional page ',page);
+        return {
+          options: options,
+          hasMore: props.options.hasMoreItems,
+          additional: {
+            page:  searchQuery ? 2 : page + 1,
+          },
+        };
+      };
+    console.log('banani ac2')
     const createOption = (label: string, secondLabel: string, id: string, imageUrl: string): Option => ({
         label: (
             <Label
@@ -149,6 +170,7 @@ export default function CustomDropdown(props: CustomDropdownContainerProps): Rea
             setOptions(options);
         }
     }, [props.options]);
+
 
     let styles: Styles<OptionTypeBase, true> = {};
     if (!props.useDefaultStyle) {
@@ -181,24 +203,28 @@ export default function CustomDropdown(props: CustomDropdownContainerProps): Rea
     const isLoading =
         props.options.status === ValueStatus.Loading ||
         (props.defaultValue && props.defaultValue.status === ValueStatus.Loading);
-
-    if (props.enableCreate) {
+        console.log('bananiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii');
+    if (props.enableCreate) {  
         return (
             <div>
                 <style type="text/css" scoped>
                     {getLabelStyles(props.classNamePrefix)}
                 </style>
-                <CreatableSelect
-                    options={options}
+                <AsyncPaginate
+                    loadOptions={loadOptions}
+                    //options={options}
                     value={value}
-                    onChange={handleChange}
+                    //onChange={handleChange}
                     isClearable={props.enableClear}
                     isSearchable={props.enableSearch}
                     isLoading={isLoading}
                     styles={styles}
                     placeholder={props.placeholder}
                     className={props.className!}
                     classNamePrefix={props.classNamePrefix}
+                    additional={{
+                        page: 1,
+                      }}
                     maxMenuHeight={props.menuHeight}
                     onFocus={handleFocus}
                 />
@@ -211,17 +237,21 @@ export default function CustomDropdown(props: CustomDropdownContainerProps): Rea
             <style type="text/css" scoped>
                 {getLabelStyles(props.classNamePrefix)}
             </style>
-            <Select
-                options={options}
+            <AsyncPaginate
+                loadOptions={loadOptions}
+                //options={options}
                 value={value}
-                onChange={handleChange}
+                //onChange={handleChange}
                 isClearable={props.enableClear}
                 isSearchable={props.enableSearch}
                 isLoading={isLoading}
                 styles={styles}
                 placeholder={props.placeholder}
                 className={props.className!}
                 classNamePrefix={props.classNamePrefix}
+                additional={{
+                    page: 1,
+                  }}
                 maxMenuHeight={props.menuHeight}
                 onFocus={handleFocus}
             />

tests/testProject/project-settings.user.json

@@ -5,14 +5,14 @@
       "suppressions": [],
       "suppressAppStoreWarnings": false,
       "showSuppressionInfo": true,
-      "type": "Mendix.Modeler.Suppressions.SuppressionRules, Mendix.Modeler.Core, Version=9.2.0.20531, Culture=neutral, PublicKeyToken=null"
+      "type": "Mendix.Modeler.Suppressions.SuppressionRules, Mendix.Modeler.Core, Version=9.5.0.25874, Culture=neutral, PublicKeyToken=null"
     },
     {
       "suppressions": [],
       "disabledBestPractices": [],
       "readRecommendations": [],
       "suppressedRecommendations": [],
-      "type": "Mendix.Modeler.MxAssist.PerformanceBot.Serialization.Configuration.PerformanceBotConfiguration, Mendix.Modeler.MxAssist.PerformanceBot.Serialization, Version=9.2.0.20531, Culture=neutral, PublicKeyToken=null"
+      "type": "Mendix.Modeler.MxAssist.PerformanceBot.Serialization.Configuration.PerformanceBotConfiguration, Mendix.Modeler.MxAssist.PerformanceBot.Serialization, Version=9.5.0.25874, Culture=neutral, PublicKeyToken=null"
     }
   ]
 }