refactor: use useCallback for autocompletion updates in BitbucketRepoPicker

Signed-off-by: Benjamin Janssens <benji.janssens@gmail.com>

plugins/scaffolder/src/components/fields/RepoUrlPicker/BitbucketRepoPicker.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import { Select, SelectItem } from '@backstage/core-components';
@@ -68,93 +68,90 @@ export const BitbucketRepoPicker = (
   const [availableProjects, setAvailableProjects] = useState<string[]>([]);
 
   // Update available workspaces when client is available
-  useDebounce(
-    () => {
-      const updateAvailableWorkspaces = async () => {
-        if (
-          host === 'bitbucket.org' &&
-          accessToken &&
-          scaffolderApi.autocomplete
-        ) {
-          const { results } = await scaffolderApi.autocomplete({
-            token: accessToken,
-            resource: 'workspaces',
-            context: {},
-            provider: 'bitbucket-cloud',
-          });
+  const updateAvailableWorkspaces = useCallback(() => {
+    if (
+      !scaffolderApi.autocomplete ||
+      !accessToken ||
+      host !== 'bitbucket.org'
+    ) {
+      setAvailableWorkspaces([]);
+      return;
+    }
 
-          setAvailableWorkspaces(results.map(r => r.title));
-        } else {
-          setAvailableWorkspaces([]);
-        }
-      };
+    scaffolderApi
+      .autocomplete({
+        token: accessToken,
+        resource: 'workspaces',
+        provider: 'bitbucket-cloud',
+      })
+      .then(({ results }) => {
+        setAvailableWorkspaces(results.map(r => r.title));
+      })
+      .catch(() => {
+        setAvailableWorkspaces([]);
+      });
+  }, [scaffolderApi, accessToken, host]);
 
-      updateAvailableWorkspaces().catch(() => setAvailableWorkspaces([]));
-    },
-    500,
-    [host, accessToken],
-  );
+  useDebounce(updateAvailableWorkspaces, 500, [updateAvailableWorkspaces]);
 
   // Update available projects when client is available and workspace changes
-  useDebounce(
-    () => {
-      const updateAvailableProjects = async () => {
-        if (
-          host === 'bitbucket.org' &&
-          accessToken &&
-          workspace &&
-          scaffolderApi.autocomplete
-        ) {
-          const { results } = await scaffolderApi.autocomplete({
-            token: accessToken,
-            resource: 'projects',
-            context: { workspace },
-            provider: 'bitbucket-cloud',
-          });
+  const updateAvailableProjects = useCallback(() => {
+    if (
+      !scaffolderApi.autocomplete ||
+      !accessToken ||
+      host !== 'bitbucket.org' ||
+      !workspace
+    ) {
+      setAvailableProjects([]);
+      return;
+    }
 
-          setAvailableProjects(results.map(r => r.title));
-        } else {
-          setAvailableProjects([]);
-        }
-      };
+    scaffolderApi
+      .autocomplete({
+        token: accessToken,
+        resource: 'projects',
+        context: { workspace },
+        provider: 'bitbucket-cloud',
+      })
+      .then(({ results }) => {
+        setAvailableProjects(results.map(r => r.title));
+      })
+      .catch(() => {
+        setAvailableProjects([]);
+      });
+  }, [scaffolderApi, accessToken, host, workspace]);
 
-      updateAvailableProjects().catch(() => setAvailableProjects([]));
-    },
-    500,
-    [host, accessToken, workspace],
-  );
+  useDebounce(updateAvailableProjects, 500, [updateAvailableProjects]);
 
   // Update available repositories when client is available and workspace or project changes
-  useDebounce(
-    () => {
-      const updateAvailableRepositories = async () => {
-        if (
-          host === 'bitbucket.org' &&
-          accessToken &&
-          workspace &&
-          project &&
-          scaffolderApi.autocomplete
-        ) {
-          const { results } = await scaffolderApi.autocomplete({
-            token: accessToken,
-            resource: 'repositories',
-            context: { workspace, project },
-            provider: 'bitbucket-cloud',
-          });
+  const updateAvailableRepositories = useCallback(() => {
+    if (
+      !scaffolderApi.autocomplete ||
+      !accessToken ||
+      host !== 'bitbucket.org' ||
+      !workspace ||
+      !project
+    ) {
+      onChange({ availableRepos: [] });
+      return;
+    }
 
-          onChange({ availableRepos: results.map(r => r.title) });
-        } else {
-          onChange({ availableRepos: [] });
-        }
-      };
+    scaffolderApi
+      .autocomplete({
+        token: accessToken,
+        resource: 'repositories',
+        context: { workspace, project },
+        provider: 'bitbucket-cloud',
+      })
+      .then(({ results }) => {
+        onChange({ availableRepos: results.map(r => r.title) });
+      })
+      .catch(() => {
+        onChange({ availableRepos: [] });
+      });
+  }, [scaffolderApi, accessToken, host, workspace, project, onChange]);
 
-      updateAvailableRepositories().catch(() =>
-        onChange({ availableRepos: [] }),
-      );
-    },
-    500,
-    [host, accessToken, workspace, project],
-  );
+  useDebounce(updateAvailableRepositories, 500, [updateAvailableRepositories]);
 
   return (
     <>