Fetch all authors from REST API and make dropdown scrollable

assets/src/edit-story/app/api/apiProvider.js

@@ -240,9 +240,46 @@ function APIProvider({ children }) {
     return apiFetch({ path });
   }, [statuses]);
 
-  const getAllUsers = useCallback(() => {
-    return apiFetch({ path: users });
-  }, [users]);
+  const getUsersByPage = useCallback(
+    (pagingNum = 1) => {
+      let apiPath = users;
+      const perPage = 100;
+      apiPath = addQueryArgs(apiPath, {
+        per_page: perPage,
+        page: pagingNum,
+      });
+      return apiFetch({ path: apiPath, parse: false }).then(
+        async (response) => {
+          const jsonArray = await response.json();
+
+          return { data: jsonArray, headers: response.headers };
+        }
+      );
+    },
+    [users]
+  );
+
+  const getAllUsers = useCallback(
+    (pagingNum = 1) => {
+      return getUsersByPage(pagingNum).then(({ data, headers }) => {
+        const totalPages = parseInt(headers.get('X-WP-TotalPages'));
+        if (totalPages <= 1) return data;
+        const promises = [];
+        for (let i = 2; i <= totalPages; i++) {
+          promises.push(getUsersByPage(i));
+        }
+        return Promise.all(promises).then((response) => {
+          return data.concat(
+            response.reduce(
+              (resultArray, result) => resultArray.concat(result.data),
+              []
+            )
+          );
+        });
+      });
+    },
+    [getUsersByPage]
+  );
 
   const state = {
     actions: {

assets/src/edit-story/components/form/dropDown/index.js

@@ -84,7 +84,7 @@ const DropDownTitle = styled.span`
 
 const DropDownListWrapper = styled.div``;
 
-const DropDownList = styled.ul.attrs({ role: 'listbox' })`
+const DropDownListContainer = styled.div`
   position: absolute;
   top: 100%;
   left: 0;
@@ -94,6 +94,11 @@ const DropDownList = styled.ul.attrs({ role: 'listbox' })`
   flex-wrap: wrap;
   float: left;
   min-width: 160px;
+  max-height: 500px;
+  overflow-y: auto;
+`;
+
+const DropDownList = styled.ul.attrs({ role: 'listbox' })`
   width: 100%;
   padding: 5px 0;
   margin: 2px 0 0;
@@ -340,26 +345,28 @@ function DropDown({
       </DropDownSelect>
       <DropDownListWrapper>
         {isOpen ? (
-          <DropDownList
-            aria-multiselectable={false}
-            aria-required={false}
-            aria-activedescendant={activeItem ? activeItem.value : ''}
-            aria-labelledby={ariaLabel}
-          >
-            {options.map(({ name, value: optValue }) => {
-              return (
-                <DropDownItem
-                  id={`dropDown-${optValue}`}
-                  aria-selected={activeItem && activeItem.value === optValue}
-                  key={optValue}
-                  onClick={() => handleItemClick(optValue)}
-                  ref={setOptionRef}
-                >
-                  {name}
-                </DropDownItem>
-              );
-            })}
-          </DropDownList>
+          <DropDownListContainer>
+            <DropDownList
+              aria-multiselectable={false}
+              aria-required={false}
+              aria-activedescendant={activeItem ? activeItem.value : ''}
+              aria-labelledby={ariaLabel}
+            >
+              {options.map(({ name, value: optValue }) => {
+                return (
+                  <DropDownItem
+                    id={`dropDown-${optValue}`}
+                    aria-selected={activeItem && activeItem.value === optValue}
+                    key={optValue}
+                    onClick={() => handleItemClick(optValue)}
+                    ref={setOptionRef}
+                  >
+                    {name}
+                  </DropDownItem>
+                );
+              })}
+            </DropDownList>
+          </DropDownListContainer>
         ) : (
           [clearOptionsRefs(), null]
         )}