optimize structure for divider-example

Author: freedomlang

examples/divider-example/src/InsertDivider.js

@@ -1,30 +1,49 @@
 // @flow
 
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
+import { Plugin } from '@djsp/core'
+import AtomicBlock from '@djsp/atomic-block'
 import { insertEntityBlock } from '@djsp/utils'
 
 type Props = {
   editorState: EditorState,
   setEditorState: EditorState => void,
 }
 
-class InsertDivider extends Component<Props> {
+class DividerButton extends Component<Props> {
   onClick = event => {
     event.stopPropagation()
 
-    const { setEditorState, editorState } = this.props;
+    const { setEditorState, editorState } = this.props
     setEditorState(insertEntityBlock(editorState, 'divider'))
   }
 
   render() {
     return (
-      <button
-        type="button"
-        onClick={this.onClick}>
+      <button type="button" onClick={this.onClick}>
         Insert divider
       </button>
     )
   }
 }
 
+const InsertDivider = () => (
+  <Fragment>
+    <AtomicBlock type="divider">
+      {({ isFocused }) => (
+        <hr className={isFocused ? 'divider focused' : 'divider'} />
+      )}
+    </AtomicBlock>
+
+    <Plugin>
+      {({ editorState, setEditorState }) => (
+        <DividerButton
+          editorState={editorState}
+          setEditorState={setEditorState}
+        />
+      )}
+    </Plugin>
+  </Fragment>
+)
+
 export default InsertDivider

examples/divider-example/src/index.js

@@ -2,8 +2,7 @@ import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 
 import { EditorState, convertFromRaw } from 'draft-js'
-import { EditorContainer, Editor, Plugin } from '@djsp/core'
-import AtomicBlock from '@djsp/atomic-block'
+import { EditorContainer, Editor } from '@djsp/core'
 import InsertDivider from './InsertDivider'
 import './styles.css'
 
@@ -49,14 +48,7 @@ class App extends Component {
           editorState={this.state.editorState}
           onChange={this.onChange}>
           <Editor />
-
-          <AtomicBlock type="divider">
-            {({ isFocused }) => <hr className={isFocused ? 'divider focused' : 'divider'} />}
-          </AtomicBlock>
-
-          <Plugin>{
-            ({ editorState, setEditorState }) => <InsertDivider editorState={editorState} setEditorState={setEditorState} />
-          }</Plugin>
+          <InsertDivider />
         </EditorContainer>
       </div>
     )