Node data type

Author: peterszerzo

package.json

@@ -12,6 +12,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/uuid": "^8.0.0",
     "comlink": "^4.3.0",
     "express": "^4.17.1",
     "nanoid": "^3.1.10",
@@ -24,6 +25,7 @@
     "reconnecting-websocket": "^4.4.0",
     "sharedb": "^1.4.0",
     "typescript": "~3.7.2",
+    "uuid": "^8.2.0",
     "ws": "^7.3.1"
   },
   "scripts": {

src/App.tsx

@@ -1,4 +1,5 @@
 import randomWords from "random-words";
+import { v4 as uuid } from "uuid";
 import React, { useEffect, useMemo } from "react";
 import { connectToDB, getConnection } from "./sharedb";
 import {
@@ -8,8 +9,12 @@ import {
   useLocation,
 } from "react-router-dom";
 
+interface Node {
+  text: string;
+}
+
 type Flow = {
-  nodes: Record<string, {}>;
+  nodes: Record<string, Node>;
   edges: Array<[string | null, string]>;
 };
 
@@ -46,7 +51,7 @@ function useFlow(config: {
   // Methods
 
   const addNode = React.useCallback(() => {
-    doc.submitOp([{ p: ["nodes", randomWords()], oi: {} }]);
+    doc.submitOp([{ p: ["nodes", uuid()], oi: { text: randomWords() } }]);
   }, [doc]);
 
   const removeNode = React.useCallback(
@@ -81,16 +86,13 @@ const Flow: React.FC<{ id: string }> = ({ id }) => {
   }
 
   return (
-    <div>
-      {Object.keys(flow.state.nodes).map((k) => (
-        <Node key={k} onRemove={flow.removeNode} id={k} />
-      ))}
+    <main>
       <button
         onClick={() => {
           flow.addNode();
         }}
       >
-        ADD
+        Add
       </button>
       <button
         onClick={() => {
@@ -101,25 +103,67 @@ const Flow: React.FC<{ id: string }> = ({ id }) => {
             });
         }}
       >
-        RESET
+        Import flow
       </button>
-    </div>
+      <button
+        onClick={() => {
+          flow.reset({
+            nodes: {},
+            edges: [],
+          });
+        }}
+      >
+        Reset
+      </button>
+      {Object.keys(flow.state.nodes).map((k) => (
+        <NodeView
+          key={k}
+          onRemove={flow.removeNode}
+          id={k}
+          node={flow.state.nodes[k]}
+        />
+      ))}
+    </main>
   );
 };
 
-const Node = React.memo(
-  ({ id, onRemove }: { id: string; onRemove: (id: string) => void }) => (
-    <h1
-      onClick={() => {
-        // remove the node
-        onRemove(id);
-      }}
-    >
-      {id} {Math.round(Math.random() * 1000)}
-    </h1>
-  )
+const NodeView = React.memo(
+  ({
+    id,
+    node,
+    onRemove,
+  }: {
+    id: string;
+    node: Node;
+    onRemove: (id: string) => void;
+  }) => (
+    <div className="node">
+      <button
+        className="remove-button"
+        onClick={() => {
+          onRemove(id);
+        }}
+      >
+        ×
+      </button>
+      <p>
+        {node.text || "unset"} {Math.round(Math.random() * 1000)}
+      </p>
+    </div>
+  ),
+  (prevProps, nextProps) =>
+    prevProps.id === nextProps.id &&
+    prevProps.onRemove === nextProps.onRemove &&
+    JSON.stringify(prevProps.node) === JSON.stringify(nextProps.node)
 );
 
+const SimpleLink = ({ to }: { to: string }) => {
+  const location = useLocation();
+  return (
+    <Link to={to}>{location.hash === to ? <strong>{to}</strong> : to}</Link>
+  );
+};
+
 const App = () => {
   const history = useHistory();
   const location = useLocation();
@@ -145,7 +189,8 @@ const App = () => {
   return (
     <div>
       <nav>
-        <Link to="#direct">#direct</Link> <Link to="#captain">#captain</Link>{" "}
+        <SimpleLink to="#direct" />
+        <SimpleLink to="#captain" />
         <button
           onClick={() => {
             history.push(`#${randomWords()}`);

src/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
+import "./style.css";
 
 ReactDOM.render(
   <React.StrictMode>

src/style.css

@@ -0,0 +1,41 @@
+nav {
+  padding: 20px;
+  border-bottom: 1px solid #cecece;
+}
+
+main {
+  padding: 20px;
+}
+
+button,
+a {
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.node {
+  display: flex;
+  align-items: center;
+  max-width: 360px;
+  border-radius: 4px;
+  margin-top: 20px;
+  padding: 0 10px;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+}
+
+.remove-button {
+  border: 0;
+  background: none;
+  color: red;
+  width: 30px;
+  height: 30px;
+  font-size: 24px;
+  flex: 0 0 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.remove-button:hover {
+  background-color: #dedede;
+}

yarn.lock

@@ -1646,6 +1646,11 @@
     "@types/testing-library__dom" "*"
     pretty-format "^25.1.0"
 
+"@types/uuid@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.0.0.tgz#165aae4819ad2174a17476dbe66feebd549556c0"
+  integrity sha512-xSQfNcvOiE5f9dyd4Kzxbof1aTrLobL278pGLKOZI6esGfZ7ts9Ka16CzIN6Y8hFHE1C7jIBZokULhK1bOgjRw==
+
 "@types/yargs-parser@*":
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
@@ -10940,6 +10945,11 @@ uuid@^3.0.1, uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+uuid@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.2.0.tgz#cb10dd6b118e2dada7d0cd9730ba7417c93d920e"
+  integrity sha512-CYpGiFTUrmI6OBMkAdjSDM0k5h8SkkiTP4WAjQgDgNB1S3Ou9VBEvr6q0Kv2H1mMk7IWfxYGpMH5sd5AvcIV2Q==
+
 v8-compile-cache@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"