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

refactor: The behavior of TableNode when clicked is unified to be handled by ERDContent

frontend/.changeset/pink-otters-happen.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+refactor: The behavior of TableNode when clicked is unified to be handled by ERDContent

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx

@@ -1,4 +1,4 @@
-import { useDBStructureStore } from '@/stores'
+import { updateActiveTableName, useDBStructureStore } from '@/stores'
 import type { Relationships } from '@liam-hq/db-structure'
 import {
   Background,
@@ -89,6 +89,7 @@ export const ERDContentInner: FC<Props> = ({
   const handleNodeClick = useCallback(
     (nodeId: string) => {
       setActiveNodeId(nodeId)
+      updateActiveTableName(nodeId)
 
       const relatedEdges = edges.filter(
         (e) => e.source === nodeId || e.target === nodeId,

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx

@@ -1,11 +1,7 @@
-import {
-  updateActiveTableName,
-  useDBStructureStore,
-  useUserEditingStore,
-} from '@/stores'
+import { useDBStructureStore, useUserEditingStore } from '@/stores'
 import type { Node, NodeProps } from '@xyflow/react'
 import clsx from 'clsx'
-import { type FC, useCallback } from 'react'
+import type { FC } from 'react'
 import { isRelatedToTable } from '../ERDContent'
 import { TableColumnList } from './TableColumnList'
 import { TableHeader } from './TableHeader'
@@ -30,23 +26,17 @@ export const TableNode: FC<Props> = ({ data }) => {
     data.isRelated ||
     isRelatedToTable(relationships, data.table.name, tableName)
 
-  const handleClick = useCallback(() => {
-    updateActiveTableName(data.table.name)
-  }, [data])
-
   return (
-    <button
-      type="button"
+    <div
       className={clsx(
         styles.wrapper,
         isTableRelated && styles.wrapperHover,
         isActive && styles.wrapperActive,
       )}
-      onClick={handleClick}
       data-erd="table-node"
     >
       <TableHeader data={data} />
       {showMode === 'ALL_FIELDS' && <TableColumnList data={data} />}
-    </button>
+    </div>
   )
 }