useApi hook implementation outside of conditional block

Signed-off-by: hram_wh <hakkam@Hakkams-MacBook-Pro.local>

packages/app/src/App.tsx

@@ -106,7 +106,6 @@ import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
 import { PlaylistIndexPage } from '@backstage/plugin-playlist';
 import { TwoColumnLayout } from './components/scaffolder/customScaffolderLayouts';
-import { exploreTools } from './exploreTools';
 
 const app = createApp({
   apis,
@@ -243,10 +242,7 @@ const routes = (
         <DelayingComponentFieldExtension />
       </ScaffolderFieldExtensions>
     </Route>
-    <Route
-      path="/explore"
-      element={<ExplorePage exploreTools={exploreTools} />}
-    />
+    <Route path="/explore" element={<ExplorePage />} />
     <Route
       path="/tech-radar"
       element={<TechRadarPage width={1500} height={800} />}

plugins/explore/src/components/ToolExplorerContent/ToolExplorerContent.tsx

@@ -33,51 +33,37 @@ import {
 import { useApi } from '@backstage/core-plugin-api';
 
 const Body = (props: { exploreTools?: Array<ExploreTool> }) => {
-  var exploreTools;
-  if (!props?.exploreTools) {
-    const exploreToolsConfigApi = useApi(exploreToolsConfigRef);
-    const {
-      value: tools,
-      loading,
-      error,
-    } = useAsync(async () => {
-      return await exploreToolsConfigApi.getTools();
-    }, [exploreToolsConfigApi]);
+  const exploreToolsConfigApi = useApi(exploreToolsConfigRef);
+  const {
+    value: tools,
+    loading,
+    error,
+  } = useAsync(async () => {
+    if (props?.exploreTools) return props?.exploreTools;
+    return await exploreToolsConfigApi.getTools();
+  }, [exploreToolsConfigApi]);
 
-    if (loading) {
-      return <Progress />;
-    }
+  if (loading) {
+    return <Progress />;
+  }
 
-    if (error) {
-      return <WarningPanel title="Failed to load tools" />;
-    }
+  if (error) {
+    return <WarningPanel title="Failed to load tools" />;
+  }
 
-    if (!tools?.length) {
-      return (
-        <EmptyState
-          missing="info"
-          title="No tools to display"
-          description="You haven't added any tools yet."
-        />
-      );
-    }
-    exploreTools = tools;
-  } else if (props?.exploreTools) {
-    exploreTools = props?.exploreTools;
-    if (!props?.exploreTools?.length) {
-      return (
-        <EmptyState
-          missing="info"
-          title="No tools to display"
-          description="You haven't added any tools yet."
-        />
-      );
-    }
+  if (!tools?.length) {
+    return (
+      <EmptyState
+        missing="info"
+        title="No tools to display"
+        description="You haven't added any tools yet."
+      />
+    );
   }
 
   return (
     <ItemCardGrid>
-      {exploreTools?.map((tool, index) => (
+      {tools?.map((tool, index) => (
         <ToolCard key={index} card={tool} />
       ))}
     </ItemCardGrid>