Use different components for blocks and nodes

src/components/blocks/BlockPickerMenu.tsx

@@ -3,12 +3,18 @@ import React from 'react';
 import { useRecoilState } from 'recoil';
 import { blockPickerMenuState } from '../../states/blockPickerMenuState';
 import BlockPickerMenuState from '../../types/BlockPickerMenu';
+import InformationBlock from './InformationBlock';
+import QuestionBlock from './QuestionBlock';
 
 type Props = {};
 
 const BlockPickerMenu: React.FunctionComponent<Props> = (props) => {
   const [blockPickerMenu, setBlockPickerMenu] = useRecoilState<BlockPickerMenuState>(blockPickerMenuState);
-  const { onBlockClick, isDisplayed, target } = blockPickerMenu;
+  const {
+    onBlockClick,
+    isDisplayed,
+    target,
+  } = blockPickerMenu;
 
   if (!isDisplayed) {
     return null;
@@ -44,16 +50,14 @@ const BlockPickerMenu: React.FunctionComponent<Props> = (props) => {
       <div
         className={'blocks-picker'}
       >
-        <div
-          onClick={() => onBlockClick && onBlockClick('information')}
+        <InformationBlock
+          onClick={onBlockClick}
         >
           Information
-        </div>
-        <div
-          onClick={() => onBlockClick && onBlockClick('question')}
-        >
-          Question
-        </div>
+        </InformationBlock>
+        <QuestionBlock
+          onClick={onBlockClick}
+        />
       </div>
     </div>
 

src/components/blocks/InformationBlock.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import BaseBlockComponent from '../../types/BaseBlockComponent';
+import { OnBlockClick } from '../../types/BlockPickerMenu';
+
+type Props = {
+  onClick?: OnBlockClick;
+};
+
+const InformationBlock: BaseBlockComponent<Props> = (props) => {
+  const { onClick } = props;
+
+  return (
+    <div
+      onClick={() => onClick && onClick('information')}
+    >
+      Information
+    </div>
+  );
+};
+
+export default InformationBlock;

src/components/blocks/QuestionBlock.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import BaseBlockComponent from '../../types/BaseBlockComponent';
+import { OnBlockClick } from '../../types/BlockPickerMenu';
+
+type Props = {
+  onClick?: OnBlockClick;
+};
+
+const QuestionBlock: BaseBlockComponent<Props> = (props) => {
+  const { onClick } = props;
+
+  return (
+    <div
+      onClick={() => onClick && onClick('question')}
+    >
+      Question
+    </div>
+  );
+};
+
+export default QuestionBlock;

src/components/editor/PlaygroundContainer.tsx

@@ -1,7 +1,20 @@
 import { css } from '@emotion/react';
+import cloneDeep from 'lodash.clonedeep';
 import React, { MutableRefObject } from 'react';
-import { CanvasRef } from 'reaflow';
+import {
+  addNodeAndEdge,
+  CanvasRef,
+} from 'reaflow';
+import { useRecoilState } from 'recoil';
+import { blockPickerMenuState } from '../../states/blockPickerMenuState';
+import { edgesState } from '../../states/edgesState';
+import { nodesState } from '../../states/nodesState';
+import BaseNodeType from '../../types/BaseNodeType';
+import BlockPickerMenuState from '../../types/BlockPickerMenu';
+import { createNodeFromDefaultProps } from '../../utils/nodes';
 import BlockPickerMenu from '../blocks/BlockPickerMenu';
+import InformationNode from '../nodes/InformationNode';
+import QuestionNode from '../nodes/QuestionNode';
 import CanvasContainer from './CanvasContainer';
 
 type Props = {
@@ -15,6 +28,42 @@ const PlaygroundContainer: React.FunctionComponent<Props> = (props): JSX.Element
   const {
     canvasRef,
   } = props;
+  const [blockPickerMenu, setBlockPickerMenu] = useRecoilState<BlockPickerMenuState>(blockPickerMenuState);
+  const [nodes, setNodes] = useRecoilState(nodesState);
+  const [edges, setEdges] = useRecoilState(edgesState);
+
+  // Handle edge cases when there are 0 or 1 node (picker menu must always be displayed then)
+  if (!blockPickerMenu.isDisplayed) {
+    if (nodes.length === 1) {
+      setBlockPickerMenu({
+        isDisplayed: true,
+        onBlockClick: (nodeType: BaseNodeType) => {
+          console.log('onBlockClick (1 node)', nodeType);
+          const NodeComponent = nodeType === 'question' ? QuestionNode : InformationNode;
+          const newNode = createNodeFromDefaultProps(NodeComponent.getDefaultNodeProps());
+          const results = addNodeAndEdge(cloneDeep(nodes), cloneDeep(edges), newNode, nodes[0]);
+
+          setNodes(results.nodes);
+          setEdges(results.edges);
+        },
+      });
+    } else if (nodes.length === 0) {
+      setBlockPickerMenu({
+        isDisplayed: true,
+        onBlockClick: (nodeType: BaseNodeType) => {
+          console.log('onBlockClick (0 nodes)', nodeType);
+          const NodeComponent = nodeType === 'question' ? QuestionNode : InformationNode;
+          const newNode = createNodeFromDefaultProps(NodeComponent.getDefaultNodeProps());
+          const results = addNodeAndEdge(cloneDeep(nodes), cloneDeep(edges), newNode);
+
+          setNodes(results.nodes);
+          setEdges(results.edges);
+        },
+      });
+    }
+  }
+
+  console.log('Playground render', nodes, edges);
 
   return (
     <div