ref #332 allow to export all files in a project to html

src/actions/projects.js

@@ -6,6 +6,7 @@ import { replace } from 'react-router-redux'
 import { kebabCase, find, endsWith } from 'lodash'
 
 import { takeScreenshot } from 'helpers/takeScreenshot'
+import mjml2html from 'helpers/mjml'
 
 import { addAlert } from 'reducers/alerts'
 import { openExternalFileOverlay, closeExternalFileOverlay } from 'reducers/externalFileOverlay'
@@ -26,12 +27,11 @@ import {
   fsAccess,
   fsRename,
   fsWriteFile,
+  fsMkdir,
   fileExists,
   isValidDir,
 } from 'helpers/fs'
 
-import mjml2html from 'helpers/mjml'
-
 const HOME_DIR = os.homedir()
 
 export function addProject(p) {
@@ -172,10 +172,11 @@ export function dropFile(filePath) {
   }
 }
 
-async function massExport(state, asyncJob) {
+async function massExport(state, asyncJob, allFiles = false) {
   const projectsToExport = state.projects
     .filter(p => state.selectedProjects.find(path => path === p.get('path')))
     .filter(p => p.get('html'))
+
   if (projectsToExport.size === 0) {
     return
   }
@@ -188,10 +189,37 @@ async function massExport(state, asyncJob) {
   }
   for (let i = 0; i < projectsToExport.size; i++) {
     const p = projectsToExport.get(i)
-    const projBaseName = path.basename(p.get('path'))
-    const projSafeName = `${kebabCase(projBaseName)}.html`
-    const filePath = path.join(targetPath, projSafeName)
-    await asyncJob(filePath, p, targetPath)
+    const projPath = p.get('path')
+    const projBaseName = path.basename(projPath)
+
+    if (allFiles) {
+      // eventually get the custom mjml path set in settings
+      const { settings } = state
+      const projectsPaths = settings.get('projects')
+      const mjmlManual = settings.getIn(['mjml', 'engine']) === 'manual'
+      const mjmlPath = mjmlManual ? settings.getIn(['mjml', 'path']) : undefined
+
+      const files = await fsReadDir(projPath)
+      const mjmlFiles = files.filter(name => name.includes('.mjml'))
+      if (!mjmlFiles.length) return
+
+      const targetDir = path.join(targetPath, kebabCase(projBaseName))
+      if (!fs.existsSync(targetDir)) await fsMkdir(targetDir)
+
+      for (const file of mjmlFiles) {
+        const mjml = await fsReadFile(path.join(projPath, file), 'utf8')
+        const result = await mjml2html(mjml, projPath, mjmlPath)
+
+        const targetName = file.replace('.mjml', '.html')
+        const targetPath = path.join(targetDir, targetName)
+
+        await asyncJob(targetPath, result.html)
+      }
+    } else {
+      const projSafeName = `${kebabCase(projBaseName)}.html`
+      const filePath = path.join(targetPath, projSafeName)
+      await asyncJob(filePath, p, targetPath)
+    }
   }
   return targetPath
 }
@@ -207,6 +235,18 @@ export function exportSelectedProjectsToHTML() {
   }
 }
 
+export function exportSelectedProjectsAllFilesToHTML() {
+  return async (dispatch, getState) => {
+    const targetPath = await massExport(getState(), (filePath, html) =>
+      fsWriteFile(filePath, html, { flag: 'w' }),
+      true
+    )
+    if (targetPath) {
+      dispatch(saveLastExportedFolder(targetPath))
+    }
+  }
+}
+
 export function exportSelectedProjectsToImages(done) {
   return async (dispatch, getState) => {
     const state = getState()

src/components/MassActions/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import Collapse from 'react-collapse'
 import { connect } from 'react-redux'
 
-import { exportSelectedProjectsToHTML, exportSelectedProjectsToImages } from 'actions/projects'
+import { exportSelectedProjectsToHTML, exportSelectedProjectsAllFilesToHTML, exportSelectedProjectsToImages } from 'actions/projects'
 import { selectAllProjects, unselectAllProjects } from 'reducers/selectedProjects'
 
 import Button from 'components/Button'
@@ -18,6 +18,7 @@ export default connect(
     selectAllProjects,
     unselectAllProjects,
     exportSelectedProjectsToHTML,
+    exportSelectedProjectsAllFilesToHTML,
     exportSelectedProjectsToImages,
   },
 )(
@@ -31,6 +32,11 @@ export default connect(
       this.props.unselectAllProjects()
     }
 
+    handleExportAllToHTML = () => {
+      this.props.exportSelectedProjectsAllFilesToHTML()
+      this.props.unselectAllProjects()
+    }
+
     handleExportToImages = () => {
       this.setState({ isLoading: true })
       this.props.exportSelectedProjectsToImages(() => {
@@ -58,7 +64,10 @@ export default connect(
               {'Unselect all'}
             </span>
             <Button className="ml-10" primary onClick={this.handleExportToHTML}>
-              {`Export to HTML (${selectedProjects.length})`}
+              {`Export project index to HTML (${selectedProjects.length})`}
+            </Button>
+            <Button className="ml-10" primary onClick={this.handleExportAllToHTML}>
+              {`Export all files of project to HTML (${selectedProjects.length})`}
             </Button>
             <Button
               disabled={isLoading}