upload files and they show up, then process

6 files changed, 85 insertions, 23 deletions

diff --git a/client/actions/index.js b/client/actions/index.js
index fda5a4a..afcd10a 100644
--- a/client/actions/index.js
+++ b/client/actions/index.js
@@ -62,6 +62,14 @@ export const addFolder = (folder) => ({
   type: 'ADD_FOLDER',
   folder,
 })
+export const addFile = (file) => ({
+  type: 'ADD_FILE',
+  file,
+})
+export const addFiles = (files) => ({
+  type: 'ADD_FILES',
+  files,
+})
 export const updateFile = (file) => ({
   type: 'UPDATE_FILE',
   file,
diff --git a/client/components/Browser/BrowserView.jsx b/client/components/Browser/BrowserView.jsx
index 34261a2..604d952 100644
--- a/client/components/Browser/BrowserView.jsx
+++ b/client/components/Browser/BrowserView.jsx
@@ -11,6 +11,7 @@ export default function BrowserView (props) {
     return (
       <Files
         folder={folder}
+        addFiles={props.addFiles}
         onClose={() => props.closeFolder(folder)}
       />
     )
diff --git a/client/components/Browser/Files/FileUploadButton.jsx b/client/components/Browser/Files/FileUploadButton.jsx
index 136cd45..2d25d3e 100644
--- a/client/components/Browser/Files/FileUploadButton.jsx
+++ b/client/components/Browser/Files/FileUploadButton.jsx
@@ -2,11 +2,10 @@ import { h, Component } from 'preact'
 
 import client from '../../../client.js'
 
-export default class Folder extends Component {
+export default class FileUploadButton extends Component {
   constructor(props) {
     super()
-    this.state = {
-    }
+    this.state = {}
     this.updateFiles = this.updateFiles.bind(this)
   }
   updateFiles(event){
@@ -18,13 +17,6 @@ export default class Folder extends Component {
   }
 
   render() {
-    const files = (this.props.folder.files || []).map( (file, i) => {
-      return (
-        <div key={i}>
-          {file.name}
-        </div>
-      )
-    })
     return (
       <div class='fileUploadButton'>
         <input type='file' multiple name='files' onChange={this.updateFiles} />
diff --git a/client/components/Browser/Files/Files.jsx b/client/components/Browser/Files/Files.jsx
index 74c266f..c4df74d 100644
--- a/client/components/Browser/Files/Files.jsx
+++ b/client/components/Browser/Files/Files.jsx
@@ -19,8 +19,7 @@ export default class Files extends Component {
   }
   addFiles(newFiles) {
     if (! newFiles) return
-    const files = this.state.files.concat(newFiles).sort( (a,b) => { return b.id - a.id } )
-    this.setState({ files })
+    this.props.addFiles( newFiles )
   }
   handleClick(file) {
     this.setState({ selected: file })
diff --git a/client/containers/browser.js b/client/containers/browser.js
index 9f9b4c1..74c0e8d 100644
--- a/client/containers/browser.js
+++ b/client/containers/browser.js
@@ -1,23 +1,25 @@
 import { connect } from 'react-redux'
+import { addFile, addFiles, addFolder, openFolder, closeFolder } from '../actions'
 import BrowserView from '../components/Browser/BrowserView.jsx'
 
 const mapStateToProps = state => state.folders
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
+  addFile: (file) => {
+    dispatch(addFile(file))
+  },
+  addFiles: (files) => {
+    dispatch(addFiles(files))
+  },
   addFolder: (folder) => {
-    // this.setState({ folders: this.state.folders.concat([folder]) })
+    dispatch(addFolder(folder))
   },
   openFolder: (folder) => {
-//     if (this.state.openFolders.indexOf(folder.id) === -1) {
-//       const newOpenFolders = this.state.openFolders.concat(folder.id)
-//       localStorage['openFolders'] = JSON.stringify(newOpenFolders)
-//       this.setState({ openFolders: newOpenFolders })
-//     }
+    dispatch(openFolder(folder))
   },
   closeFolder: (folder) => {
-//     const openFolders = this.state.openFolders.filter( folder_id => folder_id !== folder.id )
-//     localStorage['openFolders'] = JSON.stringify(openFolders)
-//     this.setState({ openFolders })
+    console.log(folder)
+    dispatch(closeFolder(folder))
   }
 })
 
diff --git a/client/reducers/folders.js b/client/reducers/folders.js
index 594abf9..d6bdd46 100644
--- a/client/reducers/folders.js
+++ b/client/reducers/folders.js
@@ -2,14 +2,15 @@
 import client from '../client'
 
 const folders = (state = {}, action) => {
-  let file, folders, folder_id
-  
+  let file, files, folders, folder, openFolders, folder_id
+  console.log(action)
   switch (action.type) {
     case 'LOAD_FOLDERS':
       return {
         ...state,
         folders: action.folders,
       }
+    
     case 'LOAD_FILES':
       if (! action.files.length) {
         return state
@@ -25,11 +26,70 @@ const folders = (state = {}, action) => {
         ...state,
         folders: folders,
       }
+    
     case 'LOAD_OPEN_FOLDERS':
       return {
         ...state,
         openFolders: action.folders,
       }
+
+    case 'OPEN_FOLDER':
+      openFolders = state.openFolders
+      folder = action.folder
+      if (openFolders.indexOf(folder.id) === -1) {
+        openFolders = openFolders.concat(folder.id)
+        localStorage['openFolders'] = JSON.stringify(openFolders)
+      }
+      return {
+        ...state,
+        openFolders,
+      }
+    
+    case 'CLOSE_FOLDER':
+      folder = action.folder
+      openFolders = state.openFolders.filter( folder_id => folder_id !== folder.id )
+      localStorage['openFolders'] = JSON.stringify(openFolders)
+
+      return {
+        ...state,
+        openFolders,
+      }
+
+    case 'ADD_FILES':
+      files = action.files
+      folder_id = Number(files[0].folder_id)
+      folders = state.folders.map( (folder) => {
+        if (folder.id === folder_id) {
+          folder.files = ( folder.files || [] ).concat(files)
+          return Object.assign({}, folder)
+        }
+        else {
+          return folder
+        }
+      })
+
+      return {
+        ...state,
+        folders
+      }
+    
+    case 'ADD_FILE':
+      file = action.file
+      folders = state.folders.map( (folder) => {
+        if (folder.id === file.folder_id) {
+          folder.files = folder.files || []
+          folder.files.push(file)
+          return Object.assign({}, folder)
+        }
+        else {
+          return folder
+        }
+      })
+
+      return {
+        ...state,
+        folders
+      }
     case 'UPDATE_FILE':
       file = action.file
       folders = state.folders.map( (folder) => {