Help page and chores (#268)

* WIP * add client only * add offset * add typography * add help page
morewings · Oct 31, 2020 · 3d88e48 · 3d88e48 · vercel · Oct 31, 2020
1 parent 83689ee
commit 3d88e48
Show file tree

Hide file tree

Showing 37 changed files with 579 additions and 102 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -5,5 +5,5 @@ updates:
   schedule:
     interval: weekly
     time: "03:00"
-  open-pull-requests-limit: 10
+  open-pull-requests-limit: 18
   versioning-strategy: increase
diff --git a/data/structure.json b/data/structure.json
@@ -4,93 +4,201 @@
       "title": "Initial Node",
       "isDone": false,
       "children": [
-        "node_p9VIP8",
-        "node_9v6OiE"
+        "node_HRW4QF",
+        "node_XRrFuq",
+        "node_xNHlJd",
+        "node_4v9YcN",
+        "node_8XB7Kn",
+        "node_SuxQJf"
       ],
       "parentId": "node_initial",
-      "generation": 0
+      "generation": 0,
+      "color": "",
+      "id": "node_initial"
     },
-    "node_p9VIP8": {
-      "id": "node_p9VIP8",
+    "node_HRW4QF": {
+      "id": "node_HRW4QF",
       "parentId": "node_initial",
-      "isDone": false,
-      "description": "",
-      "title": "Test",
+      "isDone": true,
+      "description": "This is a an example of description",
+      "title": "Parent node",
       "generation": 1,
+      "color": "orange",
       "children": [
-        "node_OkLHUu",
-        "node_BzdW9i",
-        "node_QiKzf-"
+        "node_yfz-Kf",
+        "node_1dWAag",
+        "node_Mx2sVc",
+        "node_8Lj47y",
+        "node_rSL1te"
       ]
     },
-    "node_OkLHUu": {
-      "id": "node_OkLHUu",
-      "parentId": "node_p9VIP8",
+    "node_XRrFuq": {
+      "id": "node_XRrFuq",
+      "parentId": "node_initial",
       "isDone": false,
       "description": "",
-      "title": "Child 1",
-      "generation": 2,
-      "children": [
-        "node_WQJyQK",
-        "node_WhjVbn"
-      ]
+      "title": "Sibling node 1",
+      "generation": 1,
+      "color": "green",
+      "children": []
     },
-    "node_BzdW9i": {
-      "id": "node_BzdW9i",
-      "parentId": "node_p9VIP8",
+    "node_yfz-Kf": {
+      "id": "node_yfz-Kf",
+      "parentId": "node_HRW4QF",
       "isDone": false,
       "description": "",
-      "title": "Child 2",
+      "title": "Child node 1",
+      "generation": 2,
+      "color": "red",
+      "children": []
+    },
+    "node_1dWAag": {
+      "id": "node_1dWAag",
+      "parentId": "node_HRW4QF",
+      "isDone": true,
+      "description": "",
+      "title": "Child node 2",
       "generation": 2,
+      "color": "gray",
       "children": [
-        "node_4xzX-7"
+        "node_o5VUHK",
+        "node_F6HVoP",
+        "node_O3IyAz",
+        "node_f1hWb1",
+        "node_xCbstF",
+        "node_ctsY9R"
       ]
     },
-    "node_QiKzf-": {
-      "id": "node_QiKzf-",
-      "parentId": "node_p9VIP8",
+    "node_Mx2sVc": {
+      "id": "node_Mx2sVc",
+      "parentId": "node_HRW4QF",
+      "isDone": true,
+      "description": "",
+      "title": "Child node 3",
+      "generation": 2,
+      "color": "blue",
+      "children": []
+    },
+    "node_xNHlJd": {
+      "id": "node_xNHlJd",
+      "parentId": "node_initial",
       "isDone": false,
       "description": "",
-      "title": "Child 3",
+      "title": "Sibling node 2",
+      "generation": 1,
+      "color": "gray",
+      "children": []
+    },
+    "node_o5VUHK": {
+      "id": "node_o5VUHK",
+      "parentId": "node_1dWAag",
+      "isDone": false,
+      "description": "",
+      "title": "To Do item 1",
+      "generation": 3,
+      "color": "violet",
+      "children": []
+    },
+    "node_F6HVoP": {
+      "id": "node_F6HVoP",
+      "parentId": "node_1dWAag",
+      "isDone": false,
+      "description": "",
+      "title": "To Do item 2",
+      "generation": 3,
+      "color": "turquoise",
+      "children": []
+    },
+    "node_O3IyAz": {
+      "id": "node_O3IyAz",
+      "parentId": "node_1dWAag",
+      "isDone": true,
+      "description": "",
+      "title": "To Do item 3",
+      "generation": 3,
+      "color": "gray",
+      "children": []
+    },
+    "node_4v9YcN": {
+      "id": "node_4v9YcN",
+      "parentId": "node_initial",
+      "isDone": false,
+      "description": "",
+      "title": "Lorem ipsum title",
+      "generation": 1,
+      "color": "red",
+      "children": []
+    },
+    "node_8Lj47y": {
+      "id": "node_8Lj47y",
+      "parentId": "node_HRW4QF",
+      "isDone": false,
+      "description": "",
+      "title": "Additional info",
+      "generation": 2,
+      "color": "red",
+      "children": []
+    },
+    "node_rSL1te": {
+      "id": "node_rSL1te",
+      "parentId": "node_HRW4QF",
+      "isDone": false,
+      "description": "Description example",
+      "title": "One more task",
       "generation": 2,
+      "color": "gray",
       "children": []
     },
-    "node_WQJyQK": {
-      "id": "node_WQJyQK",
-      "parentId": "node_OkLHUu",
+    "node_f1hWb1": {
+      "id": "node_f1hWb1",
+      "parentId": "node_1dWAag",
       "isDone": false,
       "description": "",
-      "title": "Child 1-1",
+      "title": "To Do item 4",
       "generation": 3,
+      "color": "gray",
       "children": []
     },
-    "node_WhjVbn": {
-      "id": "node_WhjVbn",
-      "parentId": "node_OkLHUu",
+    "node_xCbstF": {
+      "id": "node_xCbstF",
+      "parentId": "node_1dWAag",
       "isDone": false,
       "description": "",
-      "title": "Child 1-2",
+      "title": "To Do item 5",
       "generation": 3,
+      "color": "orange",
       "children": []
     },
-    "node_4xzX-7": {
-      "id": "node_4xzX-7",
-      "parentId": "node_BzdW9i",
+    "node_ctsY9R": {
+      "id": "node_ctsY9R",
+      "parentId": "node_1dWAag",
       "isDone": false,
       "description": "",
-      "title": "Child 2-1",
+      "title": "To Do item 6",
       "generation": 3,
+      "color": "gray",
       "children": []
     },
-    "node_9v6OiE": {
-      "id": "node_9v6OiE",
+    "node_8XB7Kn": {
+      "id": "node_8XB7Kn",
       "parentId": "node_initial",
       "isDone": false,
       "description": "",
-      "title": "Sibling",
+      "title": "Hello world",
+      "generation": 1,
+      "color": "violet",
+      "children": []
+    },
+    "node_SuxQJf": {
+      "id": "node_SuxQJf",
+      "parentId": "node_initial",
+      "isDone": false,
+      "description": "Foo Bar",
+      "title": "Foo Bar",
       "generation": 1,
+      "color": "gray",
       "children": []
     }
   },
-  "focused": "node_BzdW9i"
+  "focused": "node_1dWAag"
 }
diff --git a/screenshots/addNodeButton.png b/screenshots/addNodeButton.png
diff --git a/screenshots/board.png b/screenshots/board.png
diff --git a/screenshots/columnTitle.png b/screenshots/columnTitle.png
diff --git a/screenshots/fab.png b/screenshots/fab.png
diff --git a/screenshots/node.png b/screenshots/node.png
diff --git a/screenshots/nodeFooter.png b/screenshots/nodeFooter.png
diff --git a/src/components/Board/Board.js b/src/components/Board/Board.js
@@ -1,27 +1,28 @@
 import React from 'react';
 import useBoardContent from 'src/features/structure/useBoardContent';
 import {Row, Col} from 'src/ui/Grid';
-import Column from '../Column/Column';
+import Column from 'src/components/Column';
 
 const Board = () => {
   const {childrenId, siblingsId, parentId} = useBoardContent();
   return (
     <div>
       <Row>
-        {siblingsId !== parentId && (
-          <Col width={4}>
+        <Col width={4}>
+          {siblingsId !== parentId && (
             <Column role="parent" nodeId={parentId} />
-          </Col>
-        )}
+          )}
+        </Col>
 
         <Col width={4}>
           <Column role="siblings" nodeId={siblingsId} />
         </Col>
-        {childrenId !== siblingsId && (
-          <Col width={4}>
+
+        <Col width={4}>
+          {childrenId !== siblingsId && (
             <Column role="children" nodeId={childrenId} />
-          </Col>
-        )}
+          )}
+        </Col>
       </Row>
     </div>
   );

diff --git a/src/components/Board/index.js b/src/components/Board/index.js
@@ -0,0 +1 @@
+export {default} from './Board';
diff --git a/src/components/ClientOnly/ClientOnly.js b/src/components/ClientOnly/ClientOnly.js
@@ -0,0 +1,22 @@
+import React, {useState, useEffect} from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Utility component to prevent children from Gatsby server-side prerender.
+ */
+const ClientOnly = ({children, ...restProps}) => {
+  const [hasMounted, setHasMounted] = useState(false);
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+  if (!hasMounted) {
+    return null;
+  }
+  return <div {...restProps}>{children}</div>;
+};
+
+ClientOnly.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default ClientOnly;
diff --git a/src/components/ClientOnly/index.js b/src/components/ClientOnly/index.js
@@ -0,0 +1 @@
+export {default} from './ClientOnly';
diff --git a/src/components/Column/Column.js b/src/components/Column/Column.js
@@ -17,6 +17,7 @@ const Column = ({nodeId, role}) => {
   const handleAdd = () => {
     addNode(nodeId);
   };
+  console.log('title', title);
   return (
     <Fragment>
       <div className={classes.column}>
@@ -32,7 +33,8 @@ const Column = ({nodeId, role}) => {
           ))}
         </Accordion>
         <FooterSeparator
-          leftButton={
+          /* TODO: enable in dev mode */
+          /* leftButton={
             role === 'siblings' ? (
               <Button
                 text="Focus active"
@@ -42,7 +44,7 @@ const Column = ({nodeId, role}) => {
                 }}
               />
             ) : undefined
-          }
+          } */
           rightButton={
             <Button text="Add node" icon="add-node" onClick={handleAdd} />
           }

diff --git a/src/components/Column/index.js b/src/components/Column/index.js
@@ -0,0 +1 @@
+export {default} from './Column';
diff --git a/src/components/ConfirmationDeleteStructure/ConfirmationDeleteStructure.js b/src/components/ConfirmationDeleteStructure/ConfirmationDeleteStructure.js
@@ -22,7 +22,7 @@ const ConfirmationDeleteStructure = ({onCloseModal}) => {
           <Icon name="help" className={classes.icon} />
         </div>
         <div className={classes.right}>
-          Do you want to the whole structure data? You will not be able to undo
+          Do you want to reset the structure data? You will not be able to undo
           this operation.
         </div>
       </main>

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -25,7 +25,7 @@ const Header = ({siteTitle}) => (
             className={classes.navItem}
             icon="help"
             title="Help"
-            to="/help"
+            to="/help/"
           />
           <a
             rel="noreferrer"