refactor code

src/components/CustomNode/ObjectNode.tsx

@@ -6,12 +6,13 @@ import * as Styled from "./styles";
 
 const inViewport = true;
 
-type ObjectNodeProps = CustomNodeProps<[string, string][]>;
-
-const ObjectNode: React.FC<ObjectNodeProps> = ({ width, height, value, x, y }) => {
+const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
+  const { text, width, height, data } = node;
   const ref = React.useRef(null);
-  // const { inViewport } = useInViewport(ref);
   const performanceMode = useConfig(state => state.performanceMode);
+  // const { inViewport } = useInViewport(ref);
+
+  if (data.isEmpty) return null;
 
   return (
     <Styled.StyledForeignObject
@@ -23,7 +24,7 @@ const ObjectNode: React.FC<ObjectNodeProps> = ({ width, height, value, x, y }) =
       isObject
     >
       {(!performanceMode || inViewport) &&
-        value.map((val, idx) => (
+        text.map((val, idx) => (
           <Styled.StyledRow
             data-key={JSON.stringify(val[1])}
             data-x={x}
@@ -40,8 +41,11 @@ const ObjectNode: React.FC<ObjectNodeProps> = ({ width, height, value, x, y }) =
   );
 };
 
-function propsAreEqual(prev: ObjectNodeProps, next: ObjectNodeProps) {
-  return String(prev.value) === String(next.value) && prev.width === next.width;
+function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
+  return (
+    String(prev.node.text) === String(next.node.text) &&
+    prev.node.width === next.node.width
+  );
 }
 
 export default React.memo(ObjectNode, propsAreEqual);

src/components/CustomNode/TextNode.tsx

@@ -35,35 +35,26 @@ const StyledTextNodeWrapper = styled.div<{ hasCollapse: boolean }>`
   width: 100%;
 `;
 
-type TextNodeProps = CustomNodeProps<string> & {
-  node: NodeData;
-  hasCollapse: boolean;
-};
-
-const TextNode: React.FC<TextNodeProps> = ({
+const TextNode: React.FC<CustomNodeProps> = ({
   node,
-  width,
-  height,
-  value,
-  isParent = false,
-  hasCollapse = false,
   x,
   y,
+  hasCollapse = false,
 }) => {
+  const { id, text, width, height, data } = node;
   const ref = React.useRef(null);
-  // const { inViewport } = useInViewport(ref);
-  const performanceMode = useConfig(state => state.performanceMode);
-
   const hideCollapse = useStored(state => state.hideCollapse);
   const expandNodes = useGraph(state => state.expandNodes);
   const collapseNodes = useGraph(state => state.collapseNodes);
-  const isExpanded = useGraph(state => state.collapsedParents.includes(node.id));
+  const isExpanded = useGraph(state => state.collapsedParents.includes(id));
+  const performanceMode = useConfig(state => state.performanceMode);
+  // const { inViewport } = useInViewport(ref);
 
   const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
 
-    if (!isExpanded) collapseNodes(node.id);
-    else expandNodes(node.id);
+    if (!isExpanded) collapseNodes(id);
+    else expandNodes(id);
   };
 
   return (
@@ -72,26 +63,25 @@ const TextNode: React.FC<TextNodeProps> = ({
       height={height}
       x={0}
       y={0}
-      data-nodeid={node.id}
-      ref={ref}
       hideCollapse={hideCollapse}
-      hasCollapse={isParent && hasCollapse}
+      hasCollapse={data.isParent && hasCollapse}
+      ref={ref}
     >
-      <StyledTextNodeWrapper hasCollapse={isParent && !hideCollapse}>
+      <StyledTextNodeWrapper hasCollapse={data.isParent && !hideCollapse}>
         {(!performanceMode || inViewport) && (
           <Styled.StyledKey
             data-x={x}
             data-y={y}
-            data-key={JSON.stringify(value)}
-            parent={isParent}
+            data-key={JSON.stringify(text)}
+            parent={data.isParent}
           >
             <Styled.StyledLinkItUrl>
-              {JSON.stringify(value).replaceAll('"', "")}
+              {JSON.stringify(text).replaceAll('"', "")}
             </Styled.StyledLinkItUrl>
           </Styled.StyledKey>
         )}
 
-        {inViewport && isParent && hasCollapse && !hideCollapse && (
+        {inViewport && data.isParent && hasCollapse && !hideCollapse && (
           <StyledExpand onClick={handleExpand}>
             {isExpanded ? <MdLinkOff size={18} /> : <MdLink size={18} />}
           </StyledExpand>
@@ -101,8 +91,8 @@ const TextNode: React.FC<TextNodeProps> = ({
   );
 };
 
-function propsAreEqual(prev: TextNodeProps, next: TextNodeProps) {
-  return prev.value === next.value && prev.width === next.width;
+function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
+  return prev.node.text === next.node.text && prev.node.width === next.node.width;
 }
 
 export default React.memo(TextNode, propsAreEqual);

src/components/CustomNode/index.tsx

@@ -3,41 +3,34 @@ import { Node, NodeProps } from "reaflow";
 import ObjectNode from "./ObjectNode";
 import TextNode from "./TextNode";
 
-export interface CustomNodeProps<T> {
-  width: number;
-  height: number;
-  value: T;
-  isParent?: boolean;
+export interface CustomNodeProps {
+  node: NodeData;
   x: number;
   y: number;
+  hasCollapse?: boolean;
 }
 
+const rootProps = {
+  width: 40,
+  height: 40,
+  rx: 50,
+  ry: 50,
+};
+
 export const CustomNode = (nodeProps: NodeProps) => {
-  const { properties } = nodeProps;
+  const { text, data } = nodeProps.properties;
 
   return (
-    <Node {...nodeProps} label={<React.Fragment />}>
-      {({ width, height, x, y, node }) => {
-        if (Array.isArray(properties.text)) {
-          return (
-            <ObjectNode
-              value={properties.text}
-              width={width}
-              height={height}
-              x={x}
-              y={y}
-            />
-          );
+    <Node {...nodeProps} {...(data.isEmpty && rootProps)} label={<React.Fragment />}>
+      {({ node, x, y }) => {
+        if (Array.isArray(text)) {
+          return <ObjectNode node={node as NodeData} x={x} y={y} />;
         }
 
         return (
           <TextNode
             node={node as NodeData}
-            isParent={properties.data.isParent}
-            value={properties.text}
-            width={width}
-            height={height}
-            hasCollapse={properties.data.hasChild}
+            hasCollapse={data.hasChild}
             x={x}
             y={y}
           />

src/components/CustomNode/styles.tsx

@@ -70,6 +70,7 @@ export const StyledKey = styled.span<{
   font-size: ${({ parent }) => parent && "14px"};
   overflow: hidden;
   text-overflow: ellipsis;
+  padding: ${({ objectKey }) => !objectKey && 10}px;
 `;
 
 export const StyledRow = styled.span.attrs<{

src/utils/jsonParser.ts

@@ -15,8 +15,9 @@ const calculateSize = (
   const longestLine = lineLengths.sort((a, b) => b - a)[0];
 
   const getWidth = () => {
+    if (Array.isArray(text) && !text.length) return 40;
     if (isExpanded) return 35 + longestLine * 8 + (isParent ? 60 : 0);
-    if (isParent) return 150;
+    if (isParent) return 170;
     return 200;
   };
 
@@ -101,6 +102,7 @@ const extract = (
       data: {
         isParent: false,
         hasChild: false,
+        isEmpty: !text.length,
       },
     };
   });