chore: spilt code to hooks

alonkeyval · Oct 15, 2024 · eb3ad4a · eb3ad4a
1 parent 45ed9f2
commit eb3ad4a
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 65 deletions.
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -1,11 +1,16 @@
 'use client';
+import React, { useMemo } from 'react';
 import dynamic from 'next/dynamic';
 import styled from 'styled-components';
-import { useDrawerStore } from '@/store';
-import React, { useMemo, useRef, useEffect, useState } from 'react';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
 import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
-import { useActualDestination, useActualSources, useGetActions } from '@/hooks';
+import {
+  useGetActions,
+  useActualSources,
+  useContainerWidth,
+  useActualDestination,
+  useNodeDataFlowHandlers,
+} from '@/hooks';
 
 const OverviewDrawer = dynamic(() => import('../overview-drawer'), {
   ssr: false,
@@ -17,38 +22,12 @@ export const OverviewDataFlowWrapper = styled.div`
   position: relative;
 `;
 
-const TYPE_SOURCE = 'source';
-const TYPE_DESTINATION = 'destination';
-
 export function OverviewDataFlowContainer() {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [containerWidth, setContainerWidth] = useState<number>(0);
-
   const { actions } = useGetActions();
   const { sources } = useActualSources();
   const { destinations } = useActualDestination();
-  const setSelectedItem = useDrawerStore(
-    ({ setSelectedItem }) => setSelectedItem
-  );
-  // Get the width of the container dynamically
-  useEffect(() => {
-    if (containerRef.current) {
-      setContainerWidth(
-        containerRef.current.getBoundingClientRect().width - 64
-      );
-    }
-
-    const handleResize = () => {
-      if (containerRef.current) {
-        setContainerWidth(
-          containerRef.current.getBoundingClientRect().width - 64
-        );
-      }
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
+  const { containerRef, containerWidth } = useContainerWidth();
+  const { handleNodeClick } = useNodeDataFlowHandlers(sources, destinations);
 
   const columnWidth = 296;
 
@@ -63,44 +42,15 @@ export function OverviewDataFlowContainer() {
     });
   }, [sources, actions, destinations, columnWidth, containerWidth]);
 
-  function onNodeClick(_, object: any) {
-    if (object.data.type === TYPE_SOURCE) {
-      const { id } = object.data;
-      const selectedDrawerItem = sources.find(
-        ({ kind, name, namespace }) =>
-          kind === id.kind && name === id.name && namespace === id.namespace
-      );
-      if (!selectedDrawerItem) return;
-
-      const { kind, name, namespace } = selectedDrawerItem;
-
-      setSelectedItem({
-        id: { kind, name, namespace },
-        item: selectedDrawerItem,
-        type: TYPE_SOURCE,
-      });
-    }
-
-    if (object.data.type === TYPE_DESTINATION) {
-      const { id } = object.data;
-
-      const selectedDrawerItem = destinations.find(
-        (destination) => destination.id === id
-      );
-
-      setSelectedItem({
-        id,
-        item: selectedDrawerItem,
-        type: TYPE_DESTINATION,
-      });
-    }
-  }
-
   return (
     <OverviewDataFlowWrapper ref={containerRef}>
       <OverviewDrawer />
       <OverviewActionMenuContainer />
-      <NodeBaseDataFlow nodes={nodes} edges={edges} onNodeClick={onNodeClick} />
+      <NodeBaseDataFlow
+        nodes={nodes}
+        edges={edges}
+        onNodeClick={handleNodeClick}
+      />
     </OverviewDataFlowWrapper>
   );
 }
diff --git a/frontend/webapp/hooks/common/index.ts b/frontend/webapp/hooks/common/index.ts
@@ -0,0 +1 @@
+export * from './useContainerWidth';
diff --git a/frontend/webapp/hooks/common/useContainerWidth.ts b/frontend/webapp/hooks/common/useContainerWidth.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState, useRef } from 'react';
+
+export function useContainerWidth() {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+
+  useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current) {
+        setContainerWidth(
+          containerRef.current.getBoundingClientRect().width - 64
+        );
+      }
+    };
+
+    updateWidth();
+
+    window.addEventListener('resize', updateWidth);
+    return () => window.removeEventListener('resize', updateWidth);
+  }, []);
+
+  return { containerRef, containerWidth };
+}
diff --git a/frontend/webapp/hooks/index.tsx b/frontend/webapp/hooks/index.tsx
@@ -10,3 +10,5 @@ export * from './useSSE';
 export * from './new-config';
 export * from './compute-platform';
 export * from './useOverviewMetrics';
+export * from './overview';
+export * from './common';
diff --git a/frontend/webapp/hooks/overview/index.tsx b/frontend/webapp/hooks/overview/index.tsx
@@ -0,0 +1 @@
+export * from './useNodeDataFlowHandlers';
diff --git a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
@@ -0,0 +1,55 @@
+// src/hooks/useNodeDataFlowHandlers.ts
+import { useCallback } from 'react';
+import { useDrawerStore } from '@/store';
+import { K8sActualSource, ActualDestination } from '@/types';
+
+const TYPE_SOURCE = 'source';
+const TYPE_DESTINATION = 'destination';
+
+export function useNodeDataFlowHandlers(
+  sources: K8sActualSource[],
+  destinations: ActualDestination[]
+) {
+  const setSelectedItem = useDrawerStore(
+    ({ setSelectedItem }) => setSelectedItem
+  );
+
+  const handleNodeClick = useCallback(
+    (_, object: any) => {
+      if (object.data.type === TYPE_SOURCE) {
+        const { id } = object.data;
+        const selectedDrawerItem = sources.find(
+          ({ kind, name, namespace }) =>
+            kind === id.kind && name === id.name && namespace === id.namespace
+        );
+        if (!selectedDrawerItem) return;
+
+        const { kind, name, namespace } = selectedDrawerItem;
+
+        setSelectedItem({
+          id: { kind, name, namespace },
+          item: selectedDrawerItem,
+          type: TYPE_SOURCE,
+        });
+      }
+
+      if (object.data.type === TYPE_DESTINATION) {
+        const { id } = object.data;
+        const selectedDrawerItem = destinations.find(
+          (destination) => destination.id === id
+        );
+
+        setSelectedItem({
+          id,
+          item: selectedDrawerItem,
+          type: TYPE_DESTINATION,
+        });
+      }
+    },
+    [sources, destinations, setSelectedItem]
+  );
+
+  return {
+    handleNodeClick,
+  };
+}