diff options
Diffstat (limited to 'client')
20 files changed, 293 insertions, 125 deletions
diff --git a/client/actions/index.js b/client/actions/index.js index 0a163ae..fda5a4a 100644 --- a/client/actions/index.js +++ b/client/actions/index.js @@ -1,31 +1,68 @@ +/* AudioPlayer */ + export const audioPlayFile = (file) => ({ type: 'AUDIO_PLAY_FILE', file: file }) - export const audioPause = () => ({ type: 'AUDIO_PAUSE', }) +/* currentTask */ + export const setContent = (content) => ({ type: 'SET_CONTENT', file: content }) - export const setStyle = (style) => ({ type: 'SET_STYLE', file: style }) - export const setAlpha = (alpha) => ({ type: 'SET_ALPHA', alpha, }) - export const createTask = () => ({ type: 'CREATE_TASK', }) - export const addTask = () => ({ type: 'ADD_TASK', }) + +/* tasks */ + +export const loadTasks = (tasks) => ({ + type: 'LOAD_TASKS', + tasks, +}) + +/* folders */ + +export const loadFolders = (folders) => ({ + type: 'LOAD_FOLDERS', + folders, +}) +export const loadFiles = (files) => ({ + type: 'LOAD_FILES', + files, +}) +export const loadOpenFolders = (folders) => ({ + type: 'LOAD_OPEN_FOLDERS', + folders, +}) +export const openFolder = (folder) => ({ + type: 'OPEN_FOLDER', + folder, +}) +export const closeFolder = (folder) => ({ + type: 'CLOSE_FOLDER', + folder, +}) +export const addFolder = (folder) => ({ + type: 'ADD_FOLDER', + folder, +}) +export const updateFile = (file) => ({ + type: 'UPDATE_FILE', + file, +}) diff --git a/client/components/App.jsx b/client/components/App.jsx index b3da081..d8050c8 100644 --- a/client/components/App.jsx +++ b/client/components/App.jsx @@ -3,23 +3,11 @@ import { isMobile } from '../vendor/util' // import db from '../db' import Header from './UI/Header.jsx' -import Browser from './Browser/Browser.jsx' +import Browser from '../containers/browser.js' import Tasks from './Tasks/Tasks.jsx' import client from '../client' -var socket = io(window.location.origin) - -socket.on('connect', (data) => { - console.log('connected') -}) -socket.on('worker', (data) => { - console.log('worker connected', data) -}) -socket.on('processed', (data) => { - console.log('processed', data) -}) - const App = () => { return ( <div> diff --git a/client/components/Browser/Browser.jsx b/client/components/Browser/Browser.jsx deleted file mode 100644 index a7731f1..0000000 --- a/client/components/Browser/Browser.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import { h, Component } from 'preact' - -import Folders from './Folders/Folders.jsx' -import Files from './Folder/Files.jsx' - -import client from '../../client' - -class Browser extends Component { - constructor(props) { - super() - let openFolders = JSON.parse( localStorage['openFolders'] || 'null' ) - this.state = { - folders: [], - openFolders: openFolders || [], - } - client.folder.index().then( folders => this.setState({ folders }) ) - } - 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 }) - } - } - 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_id) => { - const folder_list = this.state.folders.filter(folder => folder.id === folder_id) - if (! folder_list.length) return - const folder = folder_list[0] - return ( - <Files - folder={folder} - onClose={() => this.closeFolder(folder)} - /> - ) - }) - return ( - <div class='column'> - <Folders folders={this.state.folders} - openFolder={(folder) => this.openFolder(folder)} - addFolder={(folder) => this.addFolder(folder)} - /> - {openFolders} - </div> - ) - } -} - -export default Browser diff --git a/client/components/Browser/BrowserView.jsx b/client/components/Browser/BrowserView.jsx new file mode 100644 index 0000000..ed4f2cb --- /dev/null +++ b/client/components/Browser/BrowserView.jsx @@ -0,0 +1,29 @@ +import { h, Component } from 'preact' + +import Folders from './Folders/Folders.jsx' +import Files from './Files/Files.jsx' + +export default function BrowserView (props) { + console.log('browser view', props) + const openFolders = (props.openFolders || []).map((folder_id) => { + const folder_list = props.folders.filter(folder => folder.id === folder_id) + if (! folder_list.length) return + const folder = folder_list[0] + return ( + <Files + folder={folder} + onClose={() => props.closeFolder(folder)} + /> + ) + }) + + return ( + <div class='column'> + <Folders folders={props.folders} + openFolder={(folder) => props.openFolder(folder)} + addFolder={(folder) => props.addFolder(folder)} + /> + {openFolders} + </div> + ) +} diff --git a/client/components/Browser/Folder/FileUploadButton.jsx b/client/components/Browser/Files/FileUploadButton.jsx index 136cd45..136cd45 100644 --- a/client/components/Browser/Folder/FileUploadButton.jsx +++ b/client/components/Browser/Files/FileUploadButton.jsx diff --git a/client/components/Browser/Folder/Files.jsx b/client/components/Browser/Files/Files.jsx index f0ad95e..74c266f 100644 --- a/client/components/Browser/Folder/Files.jsx +++ b/client/components/Browser/Files/Files.jsx @@ -13,13 +13,9 @@ export default class Files extends Component { constructor(props) { super() this.state = { - files: props.folder.files || [], selected: null, } 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) { if (! newFiles) return @@ -30,7 +26,14 @@ export default class Files extends Component { this.setState({ selected: file }) } render() { - const files = (this.state.files).map(toFilenamePair).sort(sortByFilename).map(fromPair).map( (file, i) => { + 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 ( <div key={i} class={this.state.selected === file ? 'selected' : ''}> diff --git a/client/components/Tasks/TaskListView.jsx b/client/components/Tasks/TaskListView.jsx new file mode 100644 index 0000000..dc1d9b4 --- /dev/null +++ b/client/components/Tasks/TaskListView.jsx @@ -0,0 +1,23 @@ +import { h, Component } from 'preact' + +import FileLink from '../../containers/fileLink.js' + +export default function TaskListView (props) { + const tasks = (props.tasks || []).map( (task, i) => { + return ( + <div key={i}> + <span>{task.id}</span> + <span>{task.created_at}</span> + <span class='name'><FileLink file={task.content_file}>{task.content_file.name}</FileLink></span> + <span class='name'><FileLink file={task.style_file}>{task.style_file.name}</FileLink></span> + <span>{task.alpha}</span> + </div> + ) + // <span class='name'>{task.result_file.name}</span> + }) + return ( + <div class='list'> + {tasks} + </div> + ) +} diff --git a/client/components/Tasks/Tasks.jsx b/client/components/Tasks/Tasks.jsx index 263e669..79ee0a1 100644 --- a/client/components/Tasks/Tasks.jsx +++ b/client/components/Tasks/Tasks.jsx @@ -2,31 +2,10 @@ import { h, Component } from 'preact' import { Link } from 'react-router-dom' import TaskForm from '../../containers/taskForm.js' - -import client from '../../client.js' +import TaskList from '../../containers/taskList.js' export default class Tasks extends Component { - constructor(props) { - super() - this.state = { - adding: false, - tasks: [], - } - client.task.index().then( tasks => this.setState({ tasks }) ) - } render() { -// <span class='name'>{task.result_file.name}</span> - const tasks = (this.state.tasks || []).map( (task, i) => { - return ( - <div key={i} onClick={() => this.toggle(task)}> - <span>{task.id}</span> - <span>{task.created_at}</span> - <span class='name'>{task.content_file.name}</span> - <span class='name'>{task.style_file.name}</span> - <span>{task.alpha}</span> - </div> - ) - }) return ( <div class='column'> <div class='window'> @@ -39,9 +18,7 @@ export default class Tasks extends Component { <div class='heading'> <b>recent tasks</b> </div> - <div class='list'> - {tasks} - </div> + <TaskList /> </div> </div> ) diff --git a/client/components/UI/AudioPlayer.jsx b/client/components/UI/AudioPlayerView.jsx index 1a68518..62745ed 100644 --- a/client/components/UI/AudioPlayer.jsx +++ b/client/components/UI/AudioPlayerView.jsx @@ -2,9 +2,9 @@ import { h, Component } from 'preact' const audio = document.createElement('audio') -export default function AudioPlayer (props) { +export default function AudioPlayerView (props) { if (props.file) { - document.body.style.backgroundImage = 'url(' + pngpath(file) + ')' + document.body.style.backgroundImage = 'url(' + pngpath(props.file) + ')' audio.src = mp3path(props.file) audio.play() return ( diff --git a/client/components/UI/Header.jsx b/client/components/UI/Header.jsx index 55dd25f..3f643ba 100644 --- a/client/components/UI/Header.jsx +++ b/client/components/UI/Header.jsx @@ -1,6 +1,5 @@ import { h, Component } from 'preact' -// import { Link } from 'react-router-dom' -import AudioPlayerContainer from '../../containers/audioPlayerContainer.js' +import AudioPlayer from '../../containers/audioPlayer.js' export default class Header extends Component { constructor(props) { @@ -12,7 +11,7 @@ export default class Header extends Component { return ( <div class='header'> <b>spawn cortex</b> - <AudioPlayerContainer /> + <AudioPlayer /> </div> ) } diff --git a/client/containers/audioPlayerContainer.js b/client/containers/audioPlayer.js index 69516cc..92da673 100644 --- a/client/containers/audioPlayerContainer.js +++ b/client/containers/audioPlayer.js @@ -1,14 +1,14 @@ import { connect } from 'react-redux' -import AudioPlayer from '../components/UI/AudioPlayer.jsx' +import AudioPlayerView from '../components/UI/AudioPlayerView.jsx' const mapStateToProps = state => state.audioPlayer const mapDispatchToProps = (dispatch, ownProps) => ({ }) -const AudioPlayerContainer = connect( +const AudioPlayer = connect( mapStateToProps, mapDispatchToProps -)( AudioPlayer ) +)( AudioPlayerView ) -export default AudioPlayerContainer +export default AudioPlayer diff --git a/client/containers/browser.js b/client/containers/browser.js new file mode 100644 index 0000000..9f9b4c1 --- /dev/null +++ b/client/containers/browser.js @@ -0,0 +1,29 @@ +import { connect } from 'react-redux' +import BrowserView from '../components/Browser/BrowserView.jsx' + +const mapStateToProps = state => state.folders + +const mapDispatchToProps = (dispatch, ownProps) => ({ + addFolder: (folder) => { + // this.setState({ folders: this.state.folders.concat([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 }) +// } + }, + closeFolder: (folder) => { +// const openFolders = this.state.openFolders.filter( folder_id => folder_id !== folder.id ) +// localStorage['openFolders'] = JSON.stringify(openFolders) +// this.setState({ openFolders }) + } +}) + +const Browser = connect( + mapStateToProps, + mapDispatchToProps +)( BrowserView ) + +export default Browser diff --git a/client/containers/taskForm.js b/client/containers/taskForm.js index ac1a214..0e8aeac 100644 --- a/client/containers/taskForm.js +++ b/client/containers/taskForm.js @@ -1,8 +1,3 @@ -import { h, Component } from 'preact' -import { Link } from 'react-router-dom' - -import client from '../client.js' - import { connect } from 'react-redux' import { setContent, setStyle, setAlpha, createTask } from '../actions' import TaskFormView from '../components/Tasks/TaskFormView.jsx' diff --git a/client/containers/taskList.js b/client/containers/taskList.js new file mode 100644 index 0000000..f4a5a1d --- /dev/null +++ b/client/containers/taskList.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux' +// import {} from '../actions' +import TaskListView from '../components/Tasks/TaskListView.jsx' + +const mapStateToProps = (state) => ({ tasks: state.tasks }) + +const mapDispatchToProps = { +} + +const TaskList = connect( + mapStateToProps, + mapDispatchToProps +)(TaskListView) + +export default TaskList diff --git a/client/index.jsx b/client/index.jsx index 639117d..b0815f4 100644 --- a/client/index.jsx +++ b/client/index.jsx @@ -1,10 +1,8 @@ import { h, render } from 'preact' -import { createStore } from 'redux' import { Provider } from 'react-redux' import App from './components/App.jsx' -import reducer from './reducers/index.js' - -const store = createStore(reducer) +import store from './store' +import socket from './socket' const app = ( <Provider store={store}> diff --git a/client/reducers/folders.js b/client/reducers/folders.js new file mode 100644 index 0000000..cbb5f5a --- /dev/null +++ b/client/reducers/folders.js @@ -0,0 +1,55 @@ +// import { addTask } from '../actions' +import client from '../client' + +const folders = (state = {}, action) => { + let file, folders, folder_id + + switch (action.type) { + case 'LOAD_FOLDERS': + return { + ...state, + folders: action.folders, + } + case 'LOAD_FILES': + if (! action.files.length) { + return state + } + folder_id = action.files[0].folder_id + console.log(state.folders) + folders = state.folders.map( (folder) => { + if (folder.id === folder_id) { + folder.files = action.files + } + return folder + }) + return { + ...state, + folders: folders, + } + case 'LOAD_OPEN_FOLDERS': + return { + ...state, + openFolders: action.folders, + } + case 'UPDATE_FILE': + file = action.file + folders = state.folders.map( (folder) => { + if (folder.id === file.folder_id && folder.files) { + folder.files = folder.files.map( f => f.id == file.id ? file : f ) + return Object.assign({}, folder) + } + else { + return folder + } + }) + + return { + ...state, + folders: folders + } + default: + return state + } +} + +export default folders diff --git a/client/reducers/index.js b/client/reducers/index.js index 0dee19c..8fa287b 100644 --- a/client/reducers/index.js +++ b/client/reducers/index.js @@ -1,11 +1,15 @@ import { combineReducers } from 'redux' -import currentTask from './currentTask' import audioPlayer from './audioPlayer' +import currentTask from './currentTask' +import tasks from './tasks' +import folders from './folders' const cortexApp = combineReducers({ - currentTask, audioPlayer, + currentTask, + tasks, + folders, }) export default cortexApp diff --git a/client/reducers/tasks.js b/client/reducers/tasks.js new file mode 100644 index 0000000..d6ef8e1 --- /dev/null +++ b/client/reducers/tasks.js @@ -0,0 +1,13 @@ +// import { addTask } from '../actions' +import client from '../client' + +const tasks = (state = {}, action) => { + switch (action.type) { + case 'LOAD_TASKS': + return action.tasks + default: + return state + } +} + +export default tasks
\ No newline at end of file diff --git a/client/socket.js b/client/socket.js new file mode 100644 index 0000000..635bf62 --- /dev/null +++ b/client/socket.js @@ -0,0 +1,17 @@ +import { updateFile } from './actions' +import store from './store' + +const socket = io(window.location.origin) + +socket.on('connect', (data) => { + console.log('connected') +}) +socket.on('worker', (data) => { + console.log('worker connected', data) +}) +socket.on('processed', (data) => { + console.log('processed', data) + store.dispatch(updateFile(data.file)) +}) + +export default socket diff --git a/client/store.js b/client/store.js new file mode 100644 index 0000000..5b38d45 --- /dev/null +++ b/client/store.js @@ -0,0 +1,43 @@ +import { createStore } from 'redux' +import reducer from './reducers/index.js' +import { loadFolders, loadOpenFolders, loadFiles, loadTasks } from './actions/index.js' + +import client from './client.js' + +const store = createStore(reducer, { + currentTask: { + content: null, + style: null, + alpha: 0.001, + }, + tasks: [], + folders: { + openFolders: [], + folders: [], + }, + audioPlayer: { + file: null, + }, +}) + +client.folder.index().then( folders => { + store.dispatch(loadFolders(folders)) + try { + const openFolders = JSON.parse(localStorage['openFolders']) + store.dispatch( loadOpenFolders(openFolders) ) + openFolders.forEach( folder_id => { + client.file.index({ folder_id }).then( files => { + store.dispatch(loadFiles(files)) + }) + }) + } + catch (e) { + console.log('error opening folders') + } +}) +client.task.index().then( tasks => { + store.dispatch(loadTasks(tasks)) +}) + + +export default store |