From 242e16e67aa3e7d487d50378322484132eb363b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aykut=20Sara=C3=A7?= <aykutsarac0@gmail.com>
Date: Sun, 20 Feb 2022 15:09:04 +0300
Subject: [PATCH] code cleanup

---
 src/containers/LiveEditor/CustomNode.tsx      | 124 ------------------
 .../LiveEditor/CustomNode/ArrayNode.tsx       |  17 +++
 .../LiveEditor/CustomNode/BondNode.tsx        |  17 +++
 .../LiveEditor/CustomNode/ObjectNode.tsx      |  29 ++++
 .../LiveEditor/CustomNode/index.tsx           |  49 +++++++
 .../LiveEditor/CustomNode/styles.tsx          |  49 +++++++
 6 files changed, 161 insertions(+), 124 deletions(-)
 delete mode 100644 src/containers/LiveEditor/CustomNode.tsx
 create mode 100644 src/containers/LiveEditor/CustomNode/ArrayNode.tsx
 create mode 100644 src/containers/LiveEditor/CustomNode/BondNode.tsx
 create mode 100644 src/containers/LiveEditor/CustomNode/ObjectNode.tsx
 create mode 100644 src/containers/LiveEditor/CustomNode/index.tsx
 create mode 100644 src/containers/LiveEditor/CustomNode/styles.tsx

diff --git a/src/containers/LiveEditor/CustomNode.tsx b/src/containers/LiveEditor/CustomNode.tsx
deleted file mode 100644
index 42b10ce..0000000
--- a/src/containers/LiveEditor/CustomNode.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from "react";
-import { Label, Node, Port, NodeProps } from "reaflow";
-import styled from "styled-components";
-
-const StyledTextWrapper = styled.div`
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 12px;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  cursor: pointer;
-`;
-
-const StyledText = styled.pre<{ width: number; height: number }>`
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  width: ${({ width }) => width};
-  height: ${({ height }) => height};
-  color: ${({ theme }) => theme.SILVER};
-`;
-
-const StyledForeignObject = styled.foreignObject<{
-  width: number;
-  height: number;
-}>`
-  position: "relative" !important;
-  pointer-events: "none" !important;
-  width: ${({ width }) => width + "px"};
-  height: ${({ height }) => height + "px"};
-`;
-
-const StyledKey = styled.span<{
-  bond?: boolean;
-  arrayValue?: boolean;
-}>`
-  color: ${({ theme, bond, arrayValue }) =>
-    bond ? theme.SEAGREEN : arrayValue ? theme.ORANGE : theme.BLURPLE};
-`;
-
-const baseLabelStyle = {
-  fill: "transparent",
-  stroke: "transparent",
-  strokeWidth: 0,
-};
-
-const basePortStyle = {
-  fill: "black",
-};
-
-export const CustomNode = (nodeProps: NodeProps) => {
-  const { properties: data } = nodeProps;
-
-  return (
-    <Node
-      {...nodeProps}
-      label={<Label style={baseLabelStyle} />}
-      port={<Port style={basePortStyle} rx={10} ry={10} />}
-    >
-      {(nodeProps: NodeProps) => {
-        const { width, height } = nodeProps;
-
-        if (data.text instanceof Object) {
-          const entries = Object.entries(data.text);
-
-          if (Object.keys(data.text).every((val) => !isNaN(+val))) {
-            const text = Object.values(data.text).join("");
-
-            return (
-              <StyledForeignObject width={width} height={height} x={0} y={0}>
-                <StyledTextWrapper>
-                  <StyledText width={width} height={height}>
-                    <StyledKey arrayValue>{text}</StyledKey>
-                  </StyledText>
-                </StyledTextWrapper>
-              </StyledForeignObject>
-            );
-          }
-
-          return (
-            <StyledForeignObject width={width} height={height} x={0} y={0}>
-              <StyledTextWrapper>
-                <StyledText width={width} height={height}>
-                  {entries.map(
-                    (val, idx) =>
-                      val[1] !== null && (
-                        <div
-                          key={idx}
-                          style={{
-                            height: "fit-content",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                            padding: "0 auto",
-                            width: width - 20,
-                          }}
-                        >
-                          <StyledKey>{val[0]}: </StyledKey>
-                          {val[1]}
-                        </div>
-                      )
-                  )}
-                </StyledText>
-              </StyledTextWrapper>
-            </StyledForeignObject>
-          );
-        }
-
-        return (
-          <StyledForeignObject width={width} height={height} x={0} y={0}>
-            <StyledTextWrapper>
-              <StyledText width={width} height={height}>
-                <StyledKey bond>{data.text}</StyledKey>
-              </StyledText>
-            </StyledTextWrapper>
-          </StyledForeignObject>
-        );
-      }}
-    </Node>
-  );
-};
diff --git a/src/containers/LiveEditor/CustomNode/ArrayNode.tsx b/src/containers/LiveEditor/CustomNode/ArrayNode.tsx
new file mode 100644
index 0000000..308cb1a
--- /dev/null
+++ b/src/containers/LiveEditor/CustomNode/ArrayNode.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { CustomNodeProps } from ".";
+import * as Styled from "./styles";
+
+const ArrayNode: React.FC<CustomNodeProps<string>> = ({ width, height, value }) => {
+  return (
+    <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
+      <Styled.StyledTextWrapper>
+        <Styled.StyledText width={width} height={height}>
+          <Styled.StyledKey arrayValue>{value}</Styled.StyledKey>
+        </Styled.StyledText>
+      </Styled.StyledTextWrapper>
+    </Styled.StyledForeignObject>
+  );
+};
+
+export default ArrayNode;
diff --git a/src/containers/LiveEditor/CustomNode/BondNode.tsx b/src/containers/LiveEditor/CustomNode/BondNode.tsx
new file mode 100644
index 0000000..c511113
--- /dev/null
+++ b/src/containers/LiveEditor/CustomNode/BondNode.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { CustomNodeProps } from ".";
+import * as Styled from "./styles";
+
+const BondNode: React.FC<CustomNodeProps<string>> = ({ width, height, value }) => {
+  return (
+    <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
+      <Styled.StyledTextWrapper>
+        <Styled.StyledText width={width} height={height}>
+          <Styled.StyledKey bond>{value}</Styled.StyledKey>
+        </Styled.StyledText>
+      </Styled.StyledTextWrapper>
+    </Styled.StyledForeignObject>
+  );
+};
+
+export default BondNode;
diff --git a/src/containers/LiveEditor/CustomNode/ObjectNode.tsx b/src/containers/LiveEditor/CustomNode/ObjectNode.tsx
new file mode 100644
index 0000000..2fc8702
--- /dev/null
+++ b/src/containers/LiveEditor/CustomNode/ObjectNode.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { CustomNodeProps } from ".";
+import * as Styled from "./styles";
+
+const ObjectNode: React.FC<CustomNodeProps<[string, unknown][]>> = ({
+  width,
+  height,
+  value,
+}) => {
+  return (
+    <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
+      <Styled.StyledTextWrapper>
+        <Styled.StyledText width={width} height={height}>
+          {value.map(
+            (val, idx) =>
+              val[1] && (
+                <Styled.StyledRow key={idx} width={width}>
+                  <Styled.StyledKey>{val[0]}: </Styled.StyledKey>
+                  {val[1]}
+                </Styled.StyledRow>
+              )
+          )}
+        </Styled.StyledText>
+      </Styled.StyledTextWrapper>
+    </Styled.StyledForeignObject>
+  );
+};
+
+export default ObjectNode;
diff --git a/src/containers/LiveEditor/CustomNode/index.tsx b/src/containers/LiveEditor/CustomNode/index.tsx
new file mode 100644
index 0000000..f31ce95
--- /dev/null
+++ b/src/containers/LiveEditor/CustomNode/index.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { Label, Node, Port, NodeProps } from "reaflow";
+import ArrayNode from "./ArrayNode";
+import BondNode from "./BondNode";
+import ObjectNode from "./ObjectNode";
+
+export interface CustomNodeProps<T> {
+  width: number;
+  height: number;
+  value: T;
+}
+
+const baseLabelStyle = {
+  fill: "transparent",
+  stroke: "transparent",
+  strokeWidth: 0,
+};
+
+const basePortStyle = {
+  fill: "black",
+};
+
+export const CustomNode = (nodeProps: NodeProps) => {
+  const { properties: data } = nodeProps;
+
+  return (
+    <Node
+      {...nodeProps}
+      label={<Label style={baseLabelStyle} />}
+      port={<Port style={basePortStyle} rx={10} ry={10} />}
+    >
+      {(nodeProps: NodeProps) => {
+        const { width, height } = nodeProps;
+
+        if (data.text instanceof Object) {
+          if (Object.keys(data.text).every((val) => !isNaN(+val))) {
+            const text = Object.values(data.text).join("");
+            return <ArrayNode width={width} height={height} value={text} />;
+          }
+
+          const entries = Object.entries(data.text);
+          return <ObjectNode width={width} height={height} value={entries} />;
+        }
+
+        return <BondNode width={width} height={height} value={data.text} />;
+      }}
+    </Node>
+  );
+};
diff --git a/src/containers/LiveEditor/CustomNode/styles.tsx b/src/containers/LiveEditor/CustomNode/styles.tsx
new file mode 100644
index 0000000..0dd1f60
--- /dev/null
+++ b/src/containers/LiveEditor/CustomNode/styles.tsx
@@ -0,0 +1,49 @@
+import styled from "styled-components";
+
+export const StyledTextWrapper = styled.div`
+position: absolute;
+display: flex;
+justify-content: center;
+align-items: center;
+font-size: 12px;
+width: 100%;
+height: 100%;
+overflow: hidden;
+cursor: pointer;
+`;
+
+export const StyledText = styled.pre<{ width: number; height: number }>`
+display: flex;
+justify-content: center;
+flex-direction: column;
+width: ${({ width }) => width};
+height: ${({ height }) => height};
+color: ${({ theme }) => theme.SILVER};
+`;
+
+export const StyledForeignObject = styled.foreignObject<{
+width: number;
+height: number;
+}>`
+position: "relative" !important;
+pointer-events: "none" !important;
+width: ${({ width }) => width + "px"};
+height: ${({ height }) => height + "px"};
+`;
+
+export const StyledKey = styled.span<{
+bond?: boolean;
+arrayValue?: boolean;
+}>`
+color: ${({ theme, bond, arrayValue }) =>
+  bond ? theme.SEAGREEN : arrayValue ? theme.ORANGE : theme.BLURPLE};
+`;
+
+export const StyledRow = styled.div<{ width: number }>`
+height: fit-content;
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+padding: 0 auto;
+width: ${({ width }) => `${width - 20}px`};
+`;
\ No newline at end of file