From 1726a81b320e92ce412c0fa2b2b05f73798cc4ee Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 29 Jun 2017 03:09:00 +0200 Subject: folder browser --- client/client.js | 61 +- client/components/App.jsx | 19 +- client/components/Folder/Folder.jsx | 39 + client/components/Folders/FolderForm.jsx | 26 +- client/components/Folders/Folders.jsx | 21 +- index.js | 82 +- lib/db/index.js | 33 + migrations/20170628233335_createFolders.js | 2 +- package-lock.json | 556 +++++++++ package.json | 6 +- public/assets/css/css.css | 16 +- public/bundle.js | 1867 +++++++++++++++++----------- public/bundle.js.map | 2 +- 13 files changed, 1925 insertions(+), 805 deletions(-) create mode 100644 client/components/Folder/Folder.jsx diff --git a/client/client.js b/client/client.js index a48b53e..a769367 100644 --- a/client/client.js +++ b/client/client.js @@ -1,10 +1,10 @@ -function get() { +function _get(data) { return { method: 'GET', headers: { 'Accept': 'application/json', - 'Content-Type': 'application/json' }, + query: data, } } function post(data) { @@ -20,16 +20,26 @@ function post(data) { function postBody(data) { return { method: 'POST', + body: data, headers: { 'Accept': 'application/json', }, - body: data, } } function put(data) { return { method: 'PUT', - body: data, + body: JSON.stringify(data), + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + } +} +function destroy(data) { + return { + method: 'DELETE', + body: JSON.stringify(data), headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' @@ -39,44 +49,51 @@ function put(data) { function error(err) { console.warn(err) } - -export default { - folder: { - index: () => { - return fetch('/folders/') +function crud(type_s) { + const type = '/' + type_s + 's/' + return { + index: (data) => { + return fetch(type, _get(data)) .then(req => req.json()) .catch(error) }, show: (id) => { - return fetch('/folders/' + id) + return fetch(type + id) .then(req => req.json()) .catch(error) }, create: (data) => { - return fetch('/folders/new', post(data)) + return fetch(type, post(data)) .then(req => req.json()) .catch(error) }, update: (data) => { - return fetch('/folders/' + data.id, put(data)) + return fetch(type + data.id, put(data)) .then(req => req.json()) .catch(error) }, - }, - - file: { - upload: (folder_id, files) => { - var data = new FormData() - for (var i = 0; i < files.length; i++) { - data.append('file', files[i]) - } - return fetch('/folders/' + folder_id, postBody(files)) + + destroy: (data) => { + return fetch(type + data.id, destroy(data)) .then(req => req.json()) .catch(error) }, + } +} + +export default { + folder: crud('folder'), + file: crud('file'), + upload: (folder_id, files) => { + var data = new FormData() + for (var i = 0; i < files.length; i++) { + data.append('file', files[i]) + } + return fetch('/folders/' + folder_id, postBody(files)) + .then(req => req.json()) + .catch(error) }, - } \ No newline at end of file diff --git a/client/components/App.jsx b/client/components/App.jsx index bbb50d6..f7122b2 100644 --- a/client/components/App.jsx +++ b/client/components/App.jsx @@ -5,23 +5,38 @@ import { Link, withRouter } from 'react-router-dom' import Header from './Header.jsx' import Folders from './Folders/Folders.jsx' +import Folder from './Folder/Folder.jsx' + +import client from '../client' class App extends Component { constructor(props) { super() this.state = { folders: null, + 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]) }) } } render() { + const openFolders = this.state.openFolders.map((folder) => { + return ( + + ) + }) return (
- + this.openFolder(folder)} /> + {openFolders}
) } } export default withRouter(App) - diff --git a/client/components/Folder/Folder.jsx b/client/components/Folder/Folder.jsx new file mode 100644 index 0000000..891451c --- /dev/null +++ b/client/components/Folder/Folder.jsx @@ -0,0 +1,39 @@ +import { h, Component } from 'preact' +import { Link } from 'react-router-dom' + +import Modal from '../Modal.jsx' + +import client from '../../client.js' + +export default class Folder extends Component { + constructor(props) { + super() + this.state = { + adding: false, + } + } + toggle(folder) { + folder.open = ! folder.open + if (folder.open && ! folder.files) { + client.files.index({ 'folder_id': folder.id }).then( files => { + this.props.openFolder(folder) + }) + } + } + render() { + console.log(this.props) + const folders = (this.props.folders || []).map( (folder,i) => { + return ( +
this.toggle(folder)}> + {folder.name} +
+ ) + }) + return ( +
+ {this.props.folder.name} + {folders} +
+ ) + } +} diff --git a/client/components/Folders/FolderForm.jsx b/client/components/Folders/FolderForm.jsx index 3a3c54e..6068400 100644 --- a/client/components/Folders/FolderForm.jsx +++ b/client/components/Folders/FolderForm.jsx @@ -23,23 +23,25 @@ export default class FolderForm extends Component { } handleSubmit(event) { event.preventDefault() - client.folders.create( this.state ).then( (data) => { - + let rec = Object.assign({}, this.state) + delete rec.error + client.folder.create( rec ).then( (data) => { + console.log(data) }) } render() { return ( -
+
+

Create a new folder

-

Create a new folder

-
- - -
-
- - -
+ + + +