Add file name adjustments (noneditable). Need to compose it

src/api.js

@@ -1,6 +1,5 @@
 const execS = require('child_process').exec
-
-const { replaceSpaceCharacters, concatFiles } = require('./helpers/util')
+const { replaceSpaceCharacters, createOutputFileName } = require('./helpers/util')
 
 const convert = ({ files, outputPath, outputType, name }) => {
   // eslint-disable-next-line dot-notation
@@ -10,7 +9,7 @@ const convert = ({ files, outputPath, outputType, name }) => {
     execS('which convert', (error) => {
       if (error) reject(error)
 
-      const outputName = name || `ALCHEMY-${concatFiles(files)}.${outputType || 'pdf'}`
+      const outputName = name || createOutputFileName({ files, outputType })
       const command = [
         'convert',
         ...files.map(replaceSpaceCharacters), // input files

src/components/Converter.jsx

@@ -12,7 +12,7 @@ import ArrowDown from './svg/ArrowDown'
 import Cancel from './svg/Cancel'
 
 import { convert } from '../api'
-import { removeByKey, uniqueFiles } from '../helpers/util'
+import { removeByKey, uniqueFiles, displayOutputFileName, filterImages } from '../helpers/util'
 import {
   fileTypes,
   MERGE,
@@ -123,7 +123,11 @@ class Sanitizer extends Component {
       case CONVERTING: return <Converting />
       case STAGING: return (
         <div className="staging">
-          <input type="text" value="Alchemy-1.txt" />
+          {/* TODO make this compose better */}
+          <input
+            type="text"
+            value={displayOutputFileName(this.state.files)(this.state.outputType)}
+          />
           <div className="row">
             <div className="switch">
               <button
@@ -179,9 +183,7 @@ class Sanitizer extends Component {
   }
 
   convert() {
-    const filtered = Object.keys(this.state.files)
-                           .map(key => this.state.files[key])
-                           .filter(file => file.type.includes('image'))
+    const filtered = filterImages(this.state.files)
 
     if (filtered.length) {
       this.setState({

src/helpers/util.js

@@ -9,6 +9,24 @@ const concatFiles = files =>
        .replace(/\s/g, '')
        .substr(0, 50)
 
+const filterImages = files => Object.keys(files)
+                                    .map(key => files[key])
+                                    .filter(file => file.type.includes('image'))
+
+const createOutputFileName = ({ files, outputType }) => `ALCHEMY-${concatFiles(files)}.${outputType || 'pdf'}`
+
+const centerEllipsis = str => (
+  (str.length > 15) ?
+    `${str.substr(0, 7)}...${str.substr(str.length - 7, str.length)}` :
+    str
+)
+
+const displayOutputFileName = files => outputType =>
+  centerEllipsis(createOutputFileName({
+    files: filterImages(files).map(f => f.path),
+    outputType
+  }))
+
 const uniqueFiles = (files, newArray) =>
   newArray.reduce((accum, next) => {
     if (accum[next.path]) return accum
@@ -24,6 +42,10 @@ const removeByKey = (myObj, deleteKey) => {
 }
 
 module.exports = {
+  displayOutputFileName,
+  centerEllipsis,
+  filterImages,
+  createOutputFileName,
   concatFiles,
   removeByKey,
   replaceSpaceCharacters,