diff --git a/apps/web/src/app/(home)/_components/CustomizableStack.tsx b/apps/web/src/app/(home)/_components/CustomizableStack.tsx index 6990485..fc1505b 100644 --- a/apps/web/src/app/(home)/_components/CustomizableStack.tsx +++ b/apps/web/src/app/(home)/_components/CustomizableStack.tsx @@ -2,8 +2,6 @@ import { Background, - type Connection, - type Edge, ReactFlow, useEdgesState, useNodesState, @@ -66,76 +64,73 @@ const CustomizableStack = () => { }, })), ); - - const sourceNodes = nodes.filter( - (n) => n.data.isActive && !n.data.isStatic, - ); - const targetNode = nodes.find((n) => n.id === techId); - - if (!targetNode) return; - setEdges((eds) => - eds.filter( - (edge) => - !nodes.some( - (n) => - n.data.category === category && - (edge.source === n.id || edge.target === n.id), - ), - ), + eds.filter((edge) => { + const targetNode = nodes.find((n) => n.id === edge.target); + const sourceNode = nodes.find((n) => n.id === edge.source); + return !( + targetNode?.data.category === category || + sourceNode?.data.category === category + ); + }), ); - setEdges((eds) => [ - ...eds, - ...sourceNodes.map((source) => ({ - id: `${source.id}-${techId}`, - source: source.id, - target: techId, - animated: true, - })), - ]); + if (category === "database") { + const honoNode = nodes.find((n) => n.id === "hono"); + const ormNode = nodes.find( + (n) => n.data.category === "orm" && n.data.isActive, + ); + + if (honoNode && ormNode) { + setEdges((eds) => [ + ...eds, + { + id: `hono-${techId}`, + source: "hono", + target: techId, + animated: true, + }, + { + id: `${techId}-${ormNode.id}`, + source: techId, + target: ormNode.id, + animated: true, + }, + ]); + } + } else if (category === "auth") { + setEdges((eds) => [ + ...eds, + { + id: `hono-${techId}`, + source: "hono", + target: techId, + animated: true, + }, + ]); + } else if (category === "orm") { + const dbNode = nodes.find( + (n) => n.data.category === "database" && n.data.isActive, + ); + if (dbNode) { + setEdges((eds) => [ + ...eds, + { + id: `${dbNode.id}-${techId}`, + source: dbNode.id, + target: techId, + animated: true, + }, + ]); + } + } }, [nodes, setNodes, setEdges], ); - const onConnect = useCallback( - (connection: Connection) => { - const sourceNode = nodes.find((n) => n.id === connection.source); - const targetNode = nodes.find((n) => n.id === connection.target); - - if (!sourceNode || !targetNode) return; - - if (sourceNode.data.group === targetNode.data.group) { - return; - } - - const edgesToRemove = edges.filter((edge) => { - const edgeTarget = nodes.find((n) => n.id === edge.target); - return edgeTarget?.data.group === targetNode.data.group; - }); - - setEdges((eds) => { - const newEdges = eds.filter((edge) => !edgesToRemove.includes(edge)); - return [...newEdges, { ...(connection as Edge), animated: true }]; - }); - - setNodes((nds) => - nds.map((node) => ({ - ...node, - data: { - ...node.data, - isActive: - node.id === connection.source || node.id === connection.target - ? true - : node.data.group !== targetNode.data.group - ? node.data.isActive - : false, - }, - })), - ); - }, - [nodes, edges, setEdges, setNodes], - ); + const onConnect = useCallback(() => { + return; + }, []); const generateCommand = useCallback(() => { const flags: string[] = ["-y"]; diff --git a/apps/web/src/lib/constant.ts b/apps/web/src/lib/constant.ts index ee714c6..8f2b14d 100644 --- a/apps/web/src/lib/constant.ts +++ b/apps/web/src/lib/constant.ts @@ -94,7 +94,7 @@ export const technologies = [ description: "TypeScript ORM", }, { - name: "libSQL", + name: "Sqlite", category: "backend", angle: -30, icon: Boxes, @@ -171,11 +171,11 @@ export const initialNodes: TechNode[] = [ }, }, { - id: "libsql", + id: "sqlite", type: "techNode", position: { x: 544, y: 532 }, data: { - label: "libSQL", + label: "Sqlite", category: "database", description: "SQLite-compatible database", isDefault: true,