Merge pull request #287 from liam-hq/refactor-table-node

refactor: Minor refactoring of ERDContent
liam-hq · Dec 17, 2024 · 710b457 · 710b457
2 parents c2780c0 + b4b76d6
commit 710b457
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 35 deletions.
diff --git a/frontend/.changeset/unlucky-cycles-reflect.md b/frontend/.changeset/unlucky-cycles-reflect.md
@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+Minor refactoring of ERDContent
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx
@@ -36,6 +36,18 @@ type Props = {
     | undefined
 }
 
+const highlightEdge = (edge: Edge): Edge => ({
+  ...edge,
+  animated: true,
+  data: { ...edge.data, isHighlighted: true },
+})
+
+const unhighlightEdge = (edge: Edge): Edge => ({
+  ...edge,
+  animated: false,
+  data: { ...edge.data, isHighlighted: false },
+})
+
 export const isRelatedToTable = (
   relationships: Relationships,
   tableName: string,
@@ -80,13 +92,7 @@ export const ERDContentInner: FC<Props> = ({
       )
 
       const updatedEdges = edges.map((e) =>
-        relatedEdges.includes(e)
-          ? { ...e, animated: true, data: { ...e.data, isHighlighted: true } }
-          : {
-              ...e,
-              animated: false,
-              data: { ...e.data, isHighlighted: false },
-            },
+        relatedEdges.includes(e) ? highlightEdge(e) : unhighlightEdge(e),
       )
 
       const updatedNodes = nodes.map((node) => {
@@ -136,11 +142,7 @@ export const ERDContentInner: FC<Props> = ({
   const handlePaneClick = useCallback(() => {
     setActiveNodeId(null)
 
-    const updatedEdges = edges.map((e) => ({
-      ...e,
-      animated: false,
-      data: { ...e.data, isHighlighted: false },
-    }))
+    const updatedEdges = edges.map(unhighlightEdge)
 
     const updatedNodes = nodes.map((node) => ({
       ...node,
@@ -163,9 +165,7 @@ export const ERDContentInner: FC<Props> = ({
       )
 
       const updatedEdges = edges.map((e) =>
-        relatedEdges.includes(e)
-          ? { ...e, animated: true, data: { ...e.data, isHighlighted: true } }
-          : e,
+        relatedEdges.includes(e) ? highlightEdge(e) : e,
       )
 
       const updatedNodes = nodes.map((node) => {
@@ -212,17 +212,7 @@ export const ERDContentInner: FC<Props> = ({
           (e) => e.source === activeNodeId || e.target === activeNodeId,
         )
         const updatedEdges = edges.map((e) =>
-          relatedEdges.includes(e)
-            ? {
-                ...e,
-                animated: true,
-                data: { ...e.data, isHighlighted: true },
-              }
-            : {
-                ...e,
-                animated: false,
-                data: { ...e.data, isHighlighted: false },
-              },
+          relatedEdges.includes(e) ? highlightEdge(e) : unhighlightEdge(e),
         )
         setEdges(updatedEdges)
 
@@ -277,13 +267,7 @@ export const ERDContentInner: FC<Props> = ({
         setNodes(updatedNodes)
       } else {
         const updatedEdges = edges.map((e) =>
-          e.source === id || e.target === id
-            ? {
-                ...e,
-                animated: false,
-                data: { ...e.data, isHighlighted: false },
-              }
-            : e,
+          e.source === id || e.target === id ? unhighlightEdge(e) : e,
         )
         setEdges(updatedEdges)
 

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx
@@ -21,6 +21,7 @@ export const TableNode: FC<Props> = ({ data }) => {
   const { relationships } = useDBStructureStore()
   const {
     active: { tableName },
+    showMode,
   } = useUserEditingStore()
 
   const isActive = tableName === data.table.name
@@ -29,8 +30,6 @@ export const TableNode: FC<Props> = ({ data }) => {
     data.isRelated ||
     isRelatedToTable(relationships, data.table.name, tableName)
 
-  const { showMode } = useUserEditingStore()
-
   const handleClick = useCallback(() => {
     updateActiveTableName(data.table.name)
   }, [data])