refactor: make the code more readable

Author: mainawycliffe

src/api/query-hooks/useTopologyPageQuery.tsx

@@ -0,0 +1,66 @@
+import { useQuery } from "@tanstack/react-query";
+import { useRef } from "react";
+import { useParams, useSearchParams } from "react-router-dom";
+import { LoadingBarRef } from "react-top-loading-bar";
+import { getTopology } from "../services/topology";
+
+export default function useTopologyPageQuery() {
+  const { id } = useParams();
+
+  const [searchParams] = useSearchParams({
+    sortBy: "status",
+    sortOrder: "desc"
+  });
+
+  const selectedLabel = searchParams.get("labels") ?? "All";
+  const team = searchParams.get("team") ?? "All";
+  const topologyType = searchParams.get("type") ?? "All";
+  const healthStatus = searchParams.get("status") ?? "All";
+  const sortBy = searchParams.get("sortBy") ?? "status";
+  const sortOrder = searchParams.get("sortOrder") ?? "desc";
+  const agentId = searchParams.get("agent_id") ?? undefined;
+  const showHiddenComponents =
+    searchParams.get("showHiddenComponents") ?? undefined;
+
+  const loadingBarRef = useRef<LoadingBarRef>(null);
+
+  return useQuery(
+    [
+      "topologies",
+      id,
+      healthStatus,
+      team,
+      selectedLabel,
+      topologyType,
+      showHiddenComponents,
+      sortBy,
+      sortOrder,
+      agentId
+    ],
+    () => {
+      loadingBarRef.current?.continuousStart();
+      const apiParams = {
+        id,
+        status: healthStatus,
+        type: topologyType,
+        team: team,
+        labels: selectedLabel,
+        sortBy,
+        sortOrder,
+        // only flatten, if topology type is set
+        ...(topologyType &&
+          topologyType.toString().toLowerCase() !== "all" && {
+            flatten: true
+          }),
+        hidden: showHiddenComponents === "no" ? false : undefined,
+        agent_id: agentId
+      };
+      return getTopology(apiParams);
+    },
+    {
+      onSettled: () => {
+        loadingBarRef.current?.complete();
+      }
+    }
+  );
+}

src/components/Topology/TopologyPopover/topologyPreference.tsx

@@ -1,28 +1,39 @@
 import clsx from "clsx";
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { LegacyRef, useMemo } from "react";
 import { FaCog } from "react-icons/fa";
-
-import { CardWidth } from "../TopologyCard";
-
-import { LegacyRef } from "react";
 import { useSearchParams } from "react-router-dom";
 import { useOnMouseActivity } from "../../../hooks/useMouseActivity";
 import { Size } from "../../../types";
 import { ClickableSvg } from "../../../ui/ClickableSvg/ClickableSvg";
 import { Toggle } from "../../../ui/FormControls/Toggle";
+import { CardWidth } from "../TopologyCard";
 
-export function getCardWidth() {
-  let value: any = localStorage.getItem("topology_card_width");
-
-  if (!value?.trim()) {
-    return CardWidth[Size.extra_large];
+const topologyCardWidthAtom = atomWithStorage(
+  "topology_card_width",
+  CardWidth[Size.extra_large],
+  undefined,
+  {
+    getOnInit: true
   }
+);
 
-  value = parseInt(value, 10);
-  if (isNaN(value)) {
-    return CardWidth[Size.extra_large];
-  } else {
-    return `${value}px`;
-  }
+export function useTopologyCardWidth(): [string, (width: string) => void] {
+  const [topologyCardSize, setTopologyCardSize] = useAtom(
+    topologyCardWidthAtom
+  );
+
+  const value = useMemo(() => {
+    const v = parseInt(topologyCardSize, 10);
+    if (isNaN(v)) {
+      return CardWidth[Size.extra_large];
+    } else {
+      return `${v}px`;
+    }
+  }, [topologyCardSize]);
+
+  return [value, setTopologyCardSize];
 }
 
 export const TopologyPreference = ({

src/pages/TopologyPage.tsx

@@ -1,19 +1,18 @@
-import { getTopology } from "@flanksource-ui/api/services/topology";
+import useTopologyPageQuery from "@flanksource-ui/api/query-hooks/useTopologyPageQuery";
 import { Topology } from "@flanksource-ui/api/types/topology";
 import { InfoMessage } from "@flanksource-ui/components/InfoMessage";
 import { toastError } from "@flanksource-ui/components/Toast/toast";
 import TopologySidebar from "@flanksource-ui/components/Topology/Sidebar/TopologySidebar";
 import { TopologyBreadcrumbs } from "@flanksource-ui/components/Topology/TopologyBreadcrumbs";
 import { TopologyCard } from "@flanksource-ui/components/Topology/TopologyCard";
 import TopologyFilterBar from "@flanksource-ui/components/Topology/TopologyPage/TopologyFilterBar";
-import { getCardWidth } from "@flanksource-ui/components/Topology/TopologyPopover/topologyPreference";
+import { useTopologyCardWidth } from "@flanksource-ui/components/Topology/TopologyPopover/topologyPreference";
 import { Head } from "@flanksource-ui/ui/Head";
 import { SearchLayout } from "@flanksource-ui/ui/Layout/SearchLayout";
 import CardsSkeletonLoader from "@flanksource-ui/ui/SkeletonLoader/CardsSkeletonLoader";
 import { refreshButtonClickedTrigger } from "@flanksource-ui/ui/SlidingSideBar/SlidingSideBar";
-import { useQuery } from "@tanstack/react-query";
 import { useAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
 import LoadingBar, { LoadingBarRef } from "react-top-loading-bar";
 import {
@@ -72,62 +71,13 @@ export function TopologyPage() {
     sortOrder: "desc"
   });
 
-  const [topologyCardSize, setTopologyCardSize] = useState(() =>
-    getCardWidth()
-  );
+  const [topologyCardSize, setTopologyCardSize] = useTopologyCardWidth();
 
-  const selectedLabel = searchParams.get("labels") ?? "All";
-  const team = searchParams.get("team") ?? "All";
-  const topologyType = searchParams.get("type") ?? "All";
-  const healthStatus = searchParams.get("status") ?? "All";
   const refererId = searchParams.get("refererId") ?? undefined;
-  const sortBy = searchParams.get("sortBy") ?? "status";
-  const sortOrder = searchParams.get("sortOrder") ?? "desc";
-  const agentId = searchParams.get("agent_id") ?? undefined;
-  const showHiddenComponents =
-    searchParams.get("showHiddenComponents") ?? undefined;
 
   const loadingBarRef = useRef<LoadingBarRef>(null);
 
-  const { data, isLoading, refetch } = useQuery(
-    [
-      "topologies",
-      id,
-      healthStatus,
-      team,
-      selectedLabel,
-      topologyType,
-      showHiddenComponents,
-      sortBy,
-      sortOrder,
-      agentId
-    ],
-    () => {
-      loadingBarRef.current?.continuousStart();
-      const apiParams = {
-        id,
-        status: healthStatus,
-        type: topologyType,
-        team: team,
-        labels: selectedLabel,
-        sortBy,
-        sortOrder,
-        // only flatten, if topology type is set
-        ...(topologyType &&
-          topologyType.toString().toLowerCase() !== "all" && {
-            flatten: true
-          }),
-        hidden: showHiddenComponents === "no" ? false : undefined,
-        agent_id: agentId
-      };
-      return getTopology(apiParams);
-    },
-    {
-      onSettled: () => {
-        loadingBarRef.current?.complete();
-      }
-    }
-  );
+  const { data, isLoading, refetch } = useTopologyPageQuery();
 
   const currentTopology = useMemo(() => data?.components?.[0], [data]);