Separating the Modal component

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "cycle-scripts": "1.1.0"
   },
   "dependencies": {
@@ -19,6 +20,9 @@
   "babel": {
     "presets": [
       "es2015"
+    ],
+    "plugins": [
+      "transform-object-rest-spread"
     ]
   }
 }

src/app.js

@@ -2,11 +2,8 @@ import { div, button, span, p } from '@cycle/dom'
 import xs from 'xstream'
 import debounce from 'xstream/extra/debounce'
 
-export function App(sources) {
-  const openModal$ = sources.DOM
-    .select('#myBtn')
-    .events('click')
-    .mapTo(true) // Open modal
+function Modal(sources) {
+  // Intent: Here we handle modal actions like Close, OK, Yes/No
   const closeModal$ = xs
     .merge(
       // Click outside modal
@@ -16,19 +13,51 @@ export function App(sources) {
     )
     .mapTo(false) // Close modal
     .compose(debounce(1)) // Avoid duplicates
-  const modalState$ = xs.merge(openModal$, closeModal$).startWith(false) // Start closed
-
-  const modalVtree$ = modalState$.map(visible =>
-    div('#myModal.modal', { style: { display: visible ? 'block' : 'none' } }, [
-      span('.close', 'X'),
-      p('Some text in the Modal...')
-    ])
-  )
+
+  // Model: The current state (open/closed, position, etc.)
+  const modalState$ = xs.merge(sources.OpenModal, closeModal$).startWith(false) // Start closed
+
+  // View: :)
+  const modalVtree$ = xs
+    .combine(sources.Content, modalState$)
+    .map(([content, visible]) =>
+      div(
+        '#myModal.modal',
+        { style: { display: visible ? 'block' : 'none' } },
+        [span('.close', 'X'), content]
+      )
+    )
+
+  // Modal component exports the current state and the
+  // DOM structure (title, buttons, etc.)
+  const sinks = {
+    State: modalState$,
+    DOM: modalVtree$
+  }
+  return sinks
+}
+
+export function App(sources) {
+  // Intent: Here the "App" handles when to open the Modal
+  const openModal$ = sources.DOM
+    .select('#myBtn')
+    .events('click')
+    .mapTo(true) // Open modal
+
+  // The modal receives the Content and the "Open" event
+  const modal = Modal({
+    ...sources,
+    OpenModal: openModal$,
+    Content: xs.of(p('Some text in the Modal...'))
+  })
+
+  // View
   const appVtree$ = xs.of(button('#myBtn', 'Open Modal'))
-
+
+  // Here the app decides where the Modal will be rendered, our "Portal"
   const sinks = {
     DOM: appVtree$,
-    Modal: modalVtree$
+    Modal: modal.DOM
   }
   return sinks
 }