Apply improvements from PRs

BrunoQuaresma · BrunoQuaresma · commit 8c6e33419365 · 2024-01-12T12:36:33.000Z
diff --git a/site/src/pages/WorkspacePage/useResourcesNav.ts b/site/src/pages/WorkspacePage/useResourcesNav.ts
@@ -1,26 +1,37 @@
 import { WorkspaceResource } from "api/typesGenerated";
 import { useTab } from "hooks";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 
 export const resourceOptionId = (resource: WorkspaceResource) => {
   return `${resource.type}_${resource.name}`;
 };
 
 export const useResourcesNav = (resources: WorkspaceResource[]) => {
-  const resourcesNav = useTab("resources", "");
-  const selectedResource = resources.find(
-    (r) => resourceOptionId(r) === resourcesNav.value,
+  const firstResource = useMemo(
+    () => (resources.length > 0 ? resources[0] : undefined),
+    [resources],
+  );
+  const resourcesNav = useTab(
+    "resources",
+    firstResource ? resourceOptionId(firstResource) : "",
+  );
+
+  const isSelected = useCallback(
+    (resource: WorkspaceResource) => {
+      return resourceOptionId(resource) === resourcesNav.value;
+    },
+    [resourcesNav.value],
   );
 
+  const selectedResource = resources.find(isSelected);
+
   useEffect(() => {
     const hasResourcesWithAgents =
-      resources.length > 0 &&
-      resources[0].agents &&
-      resources[0].agents.length > 0;
+      firstResource && firstResource.agents && firstResource.agents.length > 0;
     if (!selectedResource && hasResourcesWithAgents) {
-      resourcesNav.set(resourceOptionId(resources[0]));
+      resourcesNav.set(resourceOptionId(firstResource));
     }
-  }, [resources, selectedResource, resourcesNav]);
+  }, [firstResource, resourcesNav, selectedResource]);
 
   const select = useCallback(
     (resource: WorkspaceResource) => {
@@ -29,13 +40,6 @@ export const useResourcesNav = (resources: WorkspaceResource[]) => {
     [resourcesNav],
   );
 
-  const isSelected = useCallback(
-    (resource: WorkspaceResource) => {
-      return resourceOptionId(resource) === resourcesNav.value;
-    },
-    [resourcesNav.value],
-  );
-
   return {
     isSelected,
     select,
