Extract a selectContentTypesForm component from editProject

and also:
- move common into app dir
- dialog.appenChild

This form will be reused in the main project editing flow. so it was
time to componentize

Author: scriptype

src/cms/server/public/common.js src/cms/server/public/app/common.jssrc/cms/server/public/common.js renamed to src/cms/server/public/app/common.js

@@ -24,6 +24,11 @@ const dialog = {
     return this.$content.innerHTML
   },
 
+  appendChild(node) {
+    this.$content.appendChild(node)
+    return this
+  },
+
   show() {
     this.$el.showModal()
   },

src/cms/server/public/app/components/dialog.js

@@ -0,0 +1,43 @@
+import { createDOMNodeFromHTML } from '../common.js'
+
+const template = ({ defaultContentTypes }) => {
+  return (
+`<form>
+  <h1>content types</h1>
+${defaultContentTypes.map(contentType => `
+<label><input type="checkbox" name="${contentType.name}">${contentType.name}</label>
+`
+).join('')}
+
+  <button>Ok</button>
+</form>`
+  )
+}
+
+const selectContentTypesForm = ({ defaultContentTypes, onSubmit }) => {
+  const onFormSubmit = async (e) => {
+    e.preventDefault()
+    const formData = new FormData($el)
+    const keyValues = Array.from(formData.entries())
+    const selectedKeys = keyValues.filter(([key, value]) => value === 'on').map(([key]) => key)
+    const selectedContentTypes = defaultContentTypes.filter(ct => selectedKeys.includes(ct.name))
+    onSubmit(selectedContentTypes)
+  }
+
+  const addEventListeners = () => {
+    $el.addEventListener('submit', onFormSubmit)
+  }
+
+  const html = template({
+    defaultContentTypes
+  })
+  const $el = createDOMNodeFromHTML(html)
+
+  addEventListeners()
+
+  return {
+    $el
+  }
+}
+
+export default selectContentTypesForm

src/cms/server/public/app/components/selectContentTypesForm.js

@@ -1,6 +1,7 @@
 import api from '../api.js'
-import { setIframeSrc } from '../common.js'
+import { setIframeSrc } from './common.js'
 import dialog from './components/dialog.js'
+import selectContentTypesForm from './components/selectContentTypesForm.js'
 
 const defaultContentTypes = [{
   name: 'Homepage',
@@ -71,6 +72,7 @@ const defaultContentTypes = [{
   }
 }]
 
+
 const editProject = async ({ ssgOptions }) => {
   console.log('starting editor with ssgOptions', ssgOptions)
   await api.ssg.watch(ssgOptions)
@@ -81,34 +83,19 @@ const editProject = async ({ ssgOptions }) => {
     return console.log('contentTypes', contentTypes)
   }
   console.log('no contentTypes')
-
-  dialog.html(
-
-`<h1>content types</h1>
-
-<form>
-${defaultContentTypes.map(contentType => `
-<label><input type="checkbox" name="${contentType.name}">${contentType.name}</label>
-`
-).join('')}
-
-  <button>Ok</button>
-</form>`
-  ).show()
-
-  const form = dialog.find('form')
-  form.addEventListener('submit', e => {
-    const formData = new FormData(form)
-    const keyValues = Array.from(formData.entries())
-    const selectedKeys = keyValues.filter(([key, value]) => value === 'on').map(([key]) => key)
-    const selectedContentTypes = defaultContentTypes.filter(ct => selectedKeys.includes(ct.name))
-    console.log('selectedContentTypes', selectedContentTypes)
-    e.preventDefault()
-    selectedContentTypes.forEach(async contentType => {
-      await api.contentTypes.create(contentType)
-    })
-    dialog.hide()
+  const { $el: $contentTypeForm } = selectContentTypesForm({
+    defaultContentTypes,
+    onSubmit: (selectedContentTypes) => {
+      console.log('selectedContentTypes', selectedContentTypes)
+      selectedContentTypes.forEach(async contentType => {
+        await api.contentTypes.create(contentType)
+      })
+      dialog.hide()
+    }
   })
+  dialog
+    .appendChild($contentTypeForm)
+    .show()
 }
 
 export default editProject

src/cms/server/public/app/editProject.js

@@ -1,4 +1,4 @@
-import { query, createDOMNodeFromHTML, setIframeSrc } from '../common.js'
+import { query, createDOMNodeFromHTML, setIframeSrc } from './common.js'
 import ssgBuild from './explorePanel/ssgBuild.js'
 import ssgWatch from './explorePanel/ssgWatch.js'
 import ssgStopWatcher from './explorePanel/ssgStopWatcher.js'