refactor: refactor canary to reduce code improve

readability

src/api/query-hooks/health.tsx

@@ -25,6 +25,6 @@ export function useGetCheckDetails(checkId?: string) {
       const res = await getHealthCheckDetails(checkId!);
       return res;
     },
-    enabled: checkId !== undefined
+    enabled: !!checkId
   });
 }

src/components/Canary/minimal.tsx → src/components/Canary/ChecksListing.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback } from "react";
 import { useSearchParams } from "react-router-dom";
 import { useGetCheckDetails } from "../../api/query-hooks/health";
 import { EvidenceType } from "../../api/types/evidence";
@@ -14,59 +14,39 @@ import { HealthCheckEdit } from "./HealthCheckEdit";
 import { CanaryCards } from "./CanaryCards";
 import { CanaryTable } from "./table";
 
-type MinimalCanaryFCProps = {
+type ChecksListingProps = {
   checks?: HealthCheck[];
   labels?: any[];
   selectedTab?: string;
   tableHeadStyle?: any;
 };
 
-const MinimalCanaryFC = ({
+export function ChecksListing({
   checks,
   labels,
   selectedTab,
   tableHeadStyle = {}
-}: MinimalCanaryFCProps) => {
+}: ChecksListingProps) {
   const [searchParams, setSearchParams] = useSearchParams({
     layout: "table"
   });
 
-  const {
-    tabBy,
-    layout,
-    timeRange = timeRanges[1].value,
-    checkId
-  } = Object.fromEntries(searchParams.entries());
+  const tabBy = searchParams.get("tabBy");
+  const layout = searchParams.get("layout");
+  const timeRange = searchParams.get("timeRange") ?? timeRanges[1].value;
+  const checkId = searchParams.get("checkId") ?? undefined;
 
-  const [selectedCheck, setSelectedCheck] = useState<Partial<HealthCheck>>();
-  const [openChecksModal, setOpenChecksModal] = useState(false);
-
-  const { data: check } = useGetCheckDetails(selectedCheck?.id);
-
-  // Open check modal if checkId is present in url, but no check is selected
-  useEffect(() => {
-    if (checkId && !selectedCheck?.id) {
-      setSelectedCheck(checks?.find((c) => c.id === checkId));
-      setOpenChecksModal(true);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { data: check } = useGetCheckDetails(checkId as string);
 
   const handleCheckSelect = useCallback(
     (check: Pick<HealthCheck, "id">) => {
-      setSelectedCheck({
-        ...check,
-        checkStatuses: undefined
-      });
-      setOpenChecksModal(true);
       searchParams.set("checkId", check.id);
       setSearchParams(searchParams);
     },
     [searchParams, setSearchParams]
   );
 
   function clearCheck() {
-    setOpenChecksModal(false);
     searchParams.delete("checkId");
     searchParams.set("timeRange", "1h");
     setSearchParams(searchParams);
@@ -93,9 +73,9 @@ const MinimalCanaryFC = ({
         />
       )}
       <Modal
-        open={openChecksModal && !!check}
+        open={!!check}
         onClose={() => clearCheck()}
-        title={<CheckTitle check={check ?? selectedCheck} size="" />}
+        title={<CheckTitle check={check} size="" />}
         size="full"
         containerClassName="flex flex-col h-full overflow-y-auto"
         bodyClass="flex flex-col flex-1 overflow-y-auto"
@@ -107,22 +87,20 @@ const MinimalCanaryFC = ({
             className={`flex flex-col overflow-y-auto flex-1`}
           />
           <div className="rounded-t-none  flex gap-2 bg-gray-100 px-8 py-4 justify-end absolute w-full bottom-0 left-0">
-            {selectedCheck?.canary_id && (
-              <HealthCheckEdit check={selectedCheck as HealthCheck} />
-            )}
+            {check?.canary_id && <HealthCheckEdit check={check} />}
             {!isCanaryUI && (
               <>
                 <div className="flex flex-col items-center ">
                   <PlaybooksDropdownMenu
                     className="btn-primary"
-                    check_id={selectedCheck?.id}
+                    check_id={checkId as string}
                   />
                 </div>
                 <div className="flex flex-col items-center py-1">
                   <AttachAsEvidenceButton
-                    check_id={selectedCheck?.id}
+                    check_id={checkId as string}
                     evidence={{
-                      check_id: selectedCheck?.id,
+                      check_id: checkId as string,
                       includeMessages: true,
                       start: timeRange
                     }}
@@ -140,6 +118,4 @@ const MinimalCanaryFC = ({
       </Modal>
     </>
   );
-};
-
-export const MinimalCanary = React.memo(MinimalCanaryFC);
+}

src/components/CanaryInterface/minimal.tsx

@@ -1,16 +1,16 @@
-import React, { useEffect, useMemo, useState } from "react";
 import { orderBy } from "lodash";
+import React, { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { HealthCheck } from "../../api/types/health";
 import { CanaryTabs, filterChecksByTabSelection } from "../Canary/CanaryTabs";
-import { MinimalCanary } from "../Canary/minimal";
+import { ChecksListing } from "../Canary/ChecksListing";
+import { CanarySorter } from "../Canary/data";
 import { filterChecks, filterChecksByText } from "../Canary/filter";
 import {
   filterChecksByLabels,
   getLabelFilters,
   getLabels
 } from "../Canary/labels";
-import { CanarySorter } from "../Canary/data";
-import { useSearchParams } from "react-router-dom";
-import { HealthCheck } from "../../api/types/health";
 
 type Props = {
   checks?: HealthCheck[];
@@ -87,7 +87,7 @@ const CanaryInterfaceMinimalFC = ({
       tabBy={searchParams.get("tabBy")!}
       setTabSelection={setSelectedTab}
     >
-      <MinimalCanary
+      <ChecksListing
         // tableHeadStyle={tableHeadStyle}
         checks={filteredChecks}
         selectedTab={selectedTab}