From 2f2c1ef4029dee17be0d16acdd60b7d1718d519f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 19 Jul 2017 02:06:56 +0200 Subject: refactor file browser stuff --- client/actions/index.js | 17 ++++- client/components/Browser/BrowserView.jsx | 17 ++--- client/components/Browser/Files/FileListView.jsx | 68 ++++++++++++++++++ .../components/Browser/Files/FileUploadButton.jsx | 1 - client/components/Browser/Files/Files.jsx | 81 ---------------------- client/components/Browser/Folders/FolderForm.jsx | 47 ------------- .../components/Browser/Folders/FolderListView.jsx | 24 +++++++ client/components/Browser/Folders/Folders.jsx | 56 --------------- .../components/Browser/Folders/NewFolderView.jsx | 24 +++++++ client/components/Tasks/Tasks.jsx | 30 ++++---- client/containers/browser.js | 12 +--- client/containers/fileList.js | 21 ++++++ client/containers/folderList.js | 23 ++++++ client/containers/newFolder.js | 29 ++++++++ client/reducers/folders.js | 25 ++++++- client/reducers/index.js | 2 + client/reducers/newFolder.js | 32 +++++++++ client/store.js | 3 +- 18 files changed, 284 insertions(+), 228 deletions(-) create mode 100644 client/components/Browser/Files/FileListView.jsx delete mode 100644 client/components/Browser/Files/Files.jsx delete mode 100644 client/components/Browser/Folders/FolderForm.jsx create mode 100644 client/components/Browser/Folders/FolderListView.jsx delete mode 100644 client/components/Browser/Folders/Folders.jsx create mode 100644 client/components/Browser/Folders/NewFolderView.jsx create mode 100644 client/containers/fileList.js create mode 100644 client/containers/folderList.js create mode 100644 client/containers/newFolder.js create mode 100644 client/reducers/newFolder.js (limited to 'client') diff --git a/client/actions/index.js b/client/actions/index.js index 5b180ea..94d64c8 100644 --- a/client/actions/index.js +++ b/client/actions/index.js @@ -55,14 +55,29 @@ export const loadOpenFolders = (folders) => ({ type: 'LOAD_OPEN_FOLDERS', folders, }) -export const openFolder = (folder) => ({ + +export const initNewFolder = () => ({ + type: 'INIT_NEW_FOLDER' +}) +export const cancelNewFolder = () => ({ + type: 'CANCEL_NEW_FOLDER' +}) +export const createNewFolder = (name, cb) => ({ + type: 'CREATE_NEW_FOLDER', + name, + cb +}) + +export const openFolder = (folder, cb) => ({ type: 'OPEN_FOLDER', folder, + cb }) export const closeFolder = (folder) => ({ type: 'CLOSE_FOLDER', folder, }) + export const addFolder = (folder) => ({ type: 'ADD_FOLDER', folder, diff --git a/client/components/Browser/BrowserView.jsx b/client/components/Browser/BrowserView.jsx index 604d952..e510fc7 100644 --- a/client/components/Browser/BrowserView.jsx +++ b/client/components/Browser/BrowserView.jsx @@ -1,7 +1,8 @@ import { h, Component } from 'preact' -import Folders from './Folders/Folders.jsx' -import Files from './Files/Files.jsx' +import NewFolder from '../../containers/newFolder.js' +import FolderList from '../../containers/folderList.js' +import FileList from '../../containers/fileList.js' export default function BrowserView (props) { const openFolders = (props.openFolders || []).map((folder_id) => { @@ -9,20 +10,14 @@ export default function BrowserView (props) { if (! folder_list.length) return const folder = folder_list[0] return ( - props.closeFolder(folder)} - /> + ) }) return (
- props.openFolder(folder)} - addFolder={(folder) => props.addFolder(folder)} - /> + + {openFolders}
) diff --git a/client/components/Browser/Files/FileListView.jsx b/client/components/Browser/Files/FileListView.jsx new file mode 100644 index 0000000..1c5f952 --- /dev/null +++ b/client/components/Browser/Files/FileListView.jsx @@ -0,0 +1,68 @@ +import { h, Component } from 'preact' + +import FileUploadButton from './FileUploadButton.jsx' +import FileLink from '../../../containers/fileLink.js' +import TaskContentLink from '../../../containers/taskContentLink.js' +import TaskStyleLink from '../../../containers/taskStyleLink.js' + +export default function FileListView (props) { + console.log(props) + + let file_list; + if (props.folder && props.folder.files) { + file_list = props.folder.files + } + else { + file_list = [] + } + const files = file_list.map(toFilenamePair) + .sort(sortByFilename) + .map(fromPair) + .map( (file, i) => { + if (! file) return + return ( +
+ {file.name} + {file.processed ? file.mime : 'working...'} + {file.duration ? (file.duration.toFixed(1) + 's') : ''} + + content + style + +
+ ) + }) + return ( +
+
+ {props.folder.name} +
+ + +
+
+
+ {files} +
+
+ ) + +} + + +function toFilenamePair (file) { return [file.name.toLowerCase(), file] } +function sortByFilename (a,b) { return a[0] < b[0] ? -1 : a[0] == b[0] ? 0 : 1 } +function fromPair (pair) { return pair[1] } + +function filepath (file) { + return '/data/' + file.folder_id + '/' + encodeURIComponent(file.name) +} +function mp3path (file) { + if (file.mime !== 'audio/mp3') { + return filepath(file) + '.mp3' + } + return filepath(file) +} +function pngpath (file) { + return filepath(file) + '.png' +} \ No newline at end of file diff --git a/client/components/Browser/Files/FileUploadButton.jsx b/client/components/Browser/Files/FileUploadButton.jsx index 2d25d3e..8a1bdda 100644 --- a/client/components/Browser/Files/FileUploadButton.jsx +++ b/client/components/Browser/Files/FileUploadButton.jsx @@ -15,7 +15,6 @@ export default class FileUploadButton extends Component { this.props.addFiles(got_files) }) } - render() { return (
diff --git a/client/components/Browser/Files/Files.jsx b/client/components/Browser/Files/Files.jsx deleted file mode 100644 index c4df74d..0000000 --- a/client/components/Browser/Files/Files.jsx +++ /dev/null @@ -1,81 +0,0 @@ -import { h, Component } from 'preact' - -import { audioPlayFile } from '../../../actions' - -import client from '../../../client.js' - -import FileUploadButton from './FileUploadButton.jsx' -import FileLink from '../../../containers/fileLink.js' -import TaskContentLink from '../../../containers/taskContentLink.js' -import TaskStyleLink from '../../../containers/taskStyleLink.js' - -export default class Files extends Component { - constructor(props) { - super() - this.state = { - selected: null, - } - this.addFiles = this.addFiles.bind(this) - } - addFiles(newFiles) { - if (! newFiles) return - this.props.addFiles( newFiles ) - } - handleClick(file) { - this.setState({ selected: file }) - } - render() { - let file_list; - if (this.props.folder && this.props.folder.files) { - file_list = this.props.folder.files - } - else { - file_list = [] - } - const files = file_list.map(toFilenamePair).sort(sortByFilename).map(fromPair).map( (file, i) => { - if (! file) return - return ( -
- {file.name} - {file.processed ? file.mime : 'working...'} - {file.duration ? (file.duration.toFixed(1) + 's') : ''} - - content - style - -
- ) - }) - return ( -
-
- {this.props.folder.name} -
- - -
-
-
- {files} -
-
- ) - } -} - -function toFilenamePair (file) { return [file.name.toLowerCase(), file] } -function sortByFilename (a,b) { return a[0] < b[0] ? -1 : a[0] == b[0] ? 0 : 1 } -function fromPair (pair) { return pair[1] } - -function filepath (file) { - return '/data/' + file.folder_id + '/' + encodeURIComponent(file.name) -} -function mp3path (file) { - if (file.mime !== 'audio/mp3') { - return filepath(file) + '.mp3' - } - return filepath(file) -} -function pngpath (file) { - return filepath(file) + '.png' -} \ No newline at end of file diff --git a/client/components/Browser/Folders/FolderForm.jsx b/client/components/Browser/Folders/FolderForm.jsx deleted file mode 100644 index ad3e321..0000000 --- a/client/components/Browser/Folders/FolderForm.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import { h, Component } from 'preact' - -import client from '../../../client.js' - -export default class FolderForm extends Component { - constructor(props) { - super() - this.state = { - name: '', - } - this.updateState = this.updateState.bind(this) - this.handleSubmit = this.handleSubmit.bind(this) - } - updateState(event){ - const name = event.target.name - let value = event.target.value - console.log(name, value) - this.setState({ - [name]: value, - error: null, - }) - } - handleSubmit(event) { - event.preventDefault() - let rec = Object.assign({}, this.state) - delete rec.error - this.props.onClose() - client.folder.create( rec ).then( (data) => { - this.props.addFolder( data ) - }) - } - render() { - return ( -
-

new folder

-
- - -
-
- - -
-
- ) - } -} diff --git a/client/components/Browser/Folders/FolderListView.jsx b/client/components/Browser/Folders/FolderListView.jsx new file mode 100644 index 0000000..1ee76d8 --- /dev/null +++ b/client/components/Browser/Folders/FolderListView.jsx @@ -0,0 +1,24 @@ +import { h, Component } from 'preact' + +export default function FolderListView (props) { + console.log(props) + const folders = props.folders.map( (folder, i) => ( +
props.openFolder(folder)}> + {folder.name} +
+ )) + + return ( +
+
+ browser +
+ +
+
+
+ {folders} +
+
+ ) +} diff --git a/client/components/Browser/Folders/Folders.jsx b/client/components/Browser/Folders/Folders.jsx deleted file mode 100644 index 2c85e80..0000000 --- a/client/components/Browser/Folders/Folders.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import { h, Component } from 'preact' - -import Modal from '../../UI/Modal.jsx' -import FolderForm from './FolderForm.jsx' - -import client from '../../../client.js' - -export default class Folders extends Component { - constructor(props) { - super() - this.state = { - adding: false, - } - } - openModal() { - this.setState({ adding: true }) - } - closeModal() { - this.setState({ adding: false }) - } - toggle(folder) { - folder.open = ! folder.open - if (folder.open && ! folder.files) { - client.file.index({ 'folder_id': folder.id }).then( files => { - console.log(files) - folder.files = files - this.props.openFolder(folder) - }) - } - } - render() { - const folders = (this.props.folders || []).map( (folder,i) => { - return ( -
this.toggle(folder)}> - {folder.name} -
- ) - }) - return ( -
-
- browser -
- -
-
-
- {folders} -
- this.closeModal()}> - this.closeModal()} /> - -
- ) - } -} diff --git a/client/components/Browser/Folders/NewFolderView.jsx b/client/components/Browser/Folders/NewFolderView.jsx new file mode 100644 index 0000000..7573450 --- /dev/null +++ b/client/components/Browser/Folders/NewFolderView.jsx @@ -0,0 +1,24 @@ +import { h, Component } from 'preact' + +export default function NewFolderView (props) { + console.log(props) + if (! props.visible) { + return null + } + return ( +
+
+ new folder +
+ +
+
+ +
+ ) +} diff --git a/client/components/Tasks/Tasks.jsx b/client/components/Tasks/Tasks.jsx index 79ee0a1..c76e61d 100644 --- a/client/components/Tasks/Tasks.jsx +++ b/client/components/Tasks/Tasks.jsx @@ -4,23 +4,21 @@ import { Link } from 'react-router-dom' import TaskForm from '../../containers/taskForm.js' import TaskList from '../../containers/taskList.js' -export default class Tasks extends Component { - render() { - return ( -
-
-
- create task -
- +export default function Tasks (props) { + return ( +
+
+
+ create task
-
-
- recent tasks -
- + +
+
+
+ recent tasks
+
- ) - } +
+ ) } diff --git a/client/containers/browser.js b/client/containers/browser.js index 74c0e8d..e92dbbe 100644 --- a/client/containers/browser.js +++ b/client/containers/browser.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux' -import { addFile, addFiles, addFolder, openFolder, closeFolder } from '../actions' +import { addFile, addFiles } from '../actions' import BrowserView from '../components/Browser/BrowserView.jsx' const mapStateToProps = state => state.folders @@ -11,16 +11,6 @@ const mapDispatchToProps = (dispatch, ownProps) => ({ addFiles: (files) => { dispatch(addFiles(files)) }, - addFolder: (folder) => { - dispatch(addFolder(folder)) - }, - openFolder: (folder) => { - dispatch(openFolder(folder)) - }, - closeFolder: (folder) => { - console.log(folder) - dispatch(closeFolder(folder)) - } }) const Browser = connect( diff --git a/client/containers/fileList.js b/client/containers/fileList.js new file mode 100644 index 0000000..3e6554d --- /dev/null +++ b/client/containers/fileList.js @@ -0,0 +1,21 @@ +import { connect } from 'react-redux' +import { addFiles, closeFolder } from '../actions' +import FolderListView from '../components/Browser/Files/FileListView.jsx' + +const mapStateToProps = (state) => (state.folders) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + addFiles: (files) => { + dispatch(addFiles(files)) + }, + onClose: () => { + dispatch(closeFolder(ownProps.folder)) + }, +}) + +const FolderList = connect( + mapStateToProps, + mapDispatchToProps +)(FolderListView) + +export default FolderList diff --git a/client/containers/folderList.js b/client/containers/folderList.js new file mode 100644 index 0000000..6c58ee5 --- /dev/null +++ b/client/containers/folderList.js @@ -0,0 +1,23 @@ +import { connect } from 'react-redux' +import { initNewFolder, openFolder, addFiles } from '../actions' +import FolderListView from '../components/Browser/Folders/FolderListView.jsx' + +const mapStateToProps = (state) => (state.folders) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + initNewFolder: () => { + dispatch(initNewFolder()) + }, + openFolder: (folder) => { + dispatch(openFolder(folder, (files) => { + dispatch(addFiles(files)) + })) + }, +}) + +const FolderList = connect( + mapStateToProps, + mapDispatchToProps +)(FolderListView) + +export default FolderList diff --git a/client/containers/newFolder.js b/client/containers/newFolder.js new file mode 100644 index 0000000..047edde --- /dev/null +++ b/client/containers/newFolder.js @@ -0,0 +1,29 @@ +import { connect } from 'react-redux' +import { + cancelNewFolder, + createNewFolder, + addFolder, +} from '../actions' +import NewFolderView from '../components/Browser/Folders/NewFolderView.jsx' + +const mapStateToProps = (state) => (state.newFolder) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + onClose: () => { + dispatch(cancelNewFolder()) + }, + onChange: (e) => { + const name = e.currentTarget.value + if (! name) return + dispatch(createNewFolder(name, (folder) => { + dispatch(addFolder(folder)) + })) + } +}) + +const NewFolder = connect( + mapStateToProps, + mapDispatchToProps +)(NewFolderView) + +export default NewFolder diff --git a/client/reducers/folders.js b/client/reducers/folders.js index a69df74..bec4ad3 100644 --- a/client/reducers/folders.js +++ b/client/reducers/folders.js @@ -2,7 +2,7 @@ import client from '../client' const folders = (state = {}, action) => { - let file, files, folders, folder, openFolders, folder_id + let file, files, folders, folder, openFolders, folder_id, filesAreLoaded console.log(action) switch (action.type) { case 'LOAD_FOLDERS': @@ -24,7 +24,14 @@ const folders = (state = {}, action) => { }) return { ...state, - folders: folders, + folders + } + + case 'ADD_FOLDER': + folders = [ action.folder ].concat(state.folders) + return { + ...state, + folders } case 'LOAD_OPEN_FOLDERS': @@ -36,10 +43,22 @@ const folders = (state = {}, action) => { case 'OPEN_FOLDER': openFolders = state.openFolders folder = action.folder + folder_id = folder.id if (openFolders.indexOf(folder.id) === -1) { openFolders = openFolders.concat(folder.id) localStorage['openFolders'] = JSON.stringify(openFolders) } + filesAreLoaded = state.folders.some( (folder) => { + if (folder.id === folder_id && folder.files) { + return true + } + return false + }) + if (! filesAreLoaded) { + client.file.index({ folder_id }).then( (files) => { + action.cb && action.cb(files) + }) + } return { ...state, openFolders, @@ -57,7 +76,7 @@ const folders = (state = {}, action) => { case 'ADD_FILES': files = action.files - folder_id = Number(files[0].folder_id) + folder_id = Number(files[0] && files[0].folder_id) folders = state.folders.map( (folder) => { if (folder.id === folder_id) { folder.files = ( folder.files || [] ).concat(files) diff --git a/client/reducers/index.js b/client/reducers/index.js index 8fa287b..8a6ea2f 100644 --- a/client/reducers/index.js +++ b/client/reducers/index.js @@ -4,12 +4,14 @@ import audioPlayer from './audioPlayer' import currentTask from './currentTask' import tasks from './tasks' import folders from './folders' +import newFolder from './newFolder' const cortexApp = combineReducers({ audioPlayer, currentTask, tasks, folders, + newFolder, }) export default cortexApp diff --git a/client/reducers/newFolder.js b/client/reducers/newFolder.js new file mode 100644 index 0000000..5c0f40d --- /dev/null +++ b/client/reducers/newFolder.js @@ -0,0 +1,32 @@ +import client from '../client' + +const newFolder = (state = {}, action) => { + switch (action.type) { + case 'INIT_NEW_FOLDER': + return { + name: '', + visible: true, + } + + case 'CANCEL_NEW_FOLDER': + return { + name: '', + visible: false, + } + + case 'CREATE_NEW_FOLDER': + if (action.name) { + client.folder.create({ name: action.name }) + .then(action.cb) + } + return { + name: '', + visible: false, + } + + default: + return state + } +} + +export default newFolder diff --git a/client/store.js b/client/store.js index 1ac7be1..4e0b368 100644 --- a/client/store.js +++ b/client/store.js @@ -9,8 +9,9 @@ const store = createStore(reducer, { }, tasks: [], folders: { - openFolders: [], + newFolder: {}, folders: [], + openFolders: [], }, audioPlayer: { file: null, -- cgit v1.2.3-70-g09d2