5 files changed, 45 insertions, 13 deletions
diff --git a/client/components/App.jsx b/client/components/App.jsx
index 0ed9288..85766e5 100644
--- a/client/components/App.jsx
+++ b/client/components/App.jsx
@@ -14,23 +14,36 @@ class App extends Component {
     super()
     let openFolders = JSON.parse( localStorage['openFolders'] || 'null' )
     this.state = {
-      folders: null,
+      folders: [],
       openFolders: openFolders || [],
     }
     client.folder.index().then( folders => this.setState({ folders }) )
   }
   openFolder(folder) {
-    if (this.state.openFolders.indexOf(folder) === -1) {
-      this.setState({ openFolders: this.state.openFolders.concat([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 })
     }
   }
+  closeFolder(folder) {
+    const openFolders = this.state.openFolders.filter( folder_id => folder_id !== folder.id )
+    localStorage['openFolders'] = JSON.stringify(openFolders)
+    this.setState({ openFolders })
+  }
   addFolder(folder) {
     this.setState({ folders: this.state.folders.concat([folder]) })
   }
   render() {
-    const openFolders = this.state.openFolders.map((folder) => {
+    const openFolders = this.state.openFolders.map((folder_id) => {
+      const folder_list = this.state.folders.filter(folder => folder.id === folder_id)
+      if (! folder_list.length) return
+      const folder = folder_list[0]
       return (
-        <Folder folder={folder} />
+        <Folder
+          folder={folder}
+          onClose={() => this.closeFolder(folder)}
+        />
       )
     })
     return (
diff --git a/client/components/Folder/Folder.jsx b/client/components/Folder/Folder.jsx
index e39b40d..20d3014 100644
--- a/client/components/Folder/Folder.jsx
+++ b/client/components/Folder/Folder.jsx
@@ -14,6 +14,9 @@ export default class Folder extends Component {
       files: props.folder.files || [],
     }
     this.addFiles = this.addFiles.bind(this)
+    if (! props.folder.files) {
+      client.file.index({ folder_id: props.folder.id }).then( files => this.setState({ files }) )
+    }
   }
   addFiles(newFiles) {
     console.log(newFiles)
@@ -27,14 +30,22 @@ export default class Folder extends Component {
       if (! file) return
       return (
         <div key={i}>
-          {file.name}
+          <span class='name'>{file.name}</span>
         </div>
       )
     })
     return (
       <div class='folders'>
-        <b>{this.props.folder.name}</b> <FileUploadButton folder={this.props.folder} addFiles={this.addFiles} />
-        {files}
+        <div class='heading'>
+          <b>{this.props.folder.name}</b>
+          <div class='buttons'>
+            <FileUploadButton folder={this.props.folder} addFiles={this.addFiles} />
+            <button onClick={this.props.onClose}>x</button>
+          </div>
+        </div>
+        <div class='list'>
+          {files}
+        </div>
       </div>
     )
   }
diff --git a/client/components/Folders/FolderForm.jsx b/client/components/Folders/FolderForm.jsx
index b89e2a0..1ed263e 100644
--- a/client/components/Folders/FolderForm.jsx
+++ b/client/components/Folders/FolderForm.jsx
@@ -25,6 +25,7 @@ export default class FolderForm extends Component {
     event.preventDefault()
     let rec = Object.assign({}, this.state)
     delete rec.error
+    this.props.onClose()
     client.folder.create( rec ).then( (data) => {
       this.props.addFolder( data )
     })
diff --git a/client/components/Folders/Folders.jsx b/client/components/Folders/Folders.jsx
index 0d34f58..f63dae2 100644
--- a/client/components/Folders/Folders.jsx
+++ b/client/components/Folders/Folders.jsx
@@ -34,16 +34,23 @@ export default class Folders extends Component {
     const folders = (this.props.folders || []).map( (folder,i) => {
       return (
         <div key={i} onClick={() => this.toggle(folder)}>
-          {folder.name}
+          <span class='name'>{folder.name}</span>
         </div>
       )
     })
     return (
       <div class='folders'>
-        <b>folders</b> <button onClick={() => this.openModal()}>+ folder</button>
-        {folders}
+        <div class='heading'>
+          <b>folders</b>
+          <div class='buttons'>
+            <button onClick={() => this.openModal()}>+ folder</button>
+          </div>
+        </div>
+        <div class='list'>
+          {folders}
+        </div>
         <Modal visible={this.state.adding} onClose={() => this.closeModal()}>
-          <FolderForm addFolder={this.props.addFolder} />
+          <FolderForm addFolder={this.props.addFolder} onClose={() => this.closeModal()} />
         </Modal>
       </div>
     )
diff --git a/client/components/Header.jsx b/client/components/Header.jsx
index b8c5fd4..31439db 100644
--- a/client/components/Header.jsx
+++ b/client/components/Header.jsx
@@ -10,7 +10,7 @@ export default class Header extends Component {
   render() {
     return (
       <div class='header'>
-        ding dong
+        <b>spawn cortex</b>
       </div>
     )
   }