From d520c67839724e80d8b68b8fe933f1e7755a8f42 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 4 Jul 2017 04:14:03 +0200 Subject: writing task form in a reduxy way --- client/actions/index.js | 22 +++++++ client/components/App.jsx | 28 ++++----- client/components/Browser/Folder/Folder.jsx | 6 +- client/components/Tasks/TaskForm.jsx | 50 ---------------- client/components/Tasks/TaskFormView.jsx | 89 +++++++++-------------------- client/components/Tasks/Tasks.jsx | 2 +- client/components/UI/Header.jsx | 2 +- client/components/UI/Link.jsx | 29 ++++++++++ client/containers/taskContentLink.js | 19 ++++++ client/containers/taskForm.js | 24 ++++++++ client/containers/taskStyleLink.js | 19 ++++++ client/index.jsx | 11 ++-- client/reducers/currentTask.js | 41 +++++++++++++ client/reducers/index.js | 9 +++ 14 files changed, 214 insertions(+), 137 deletions(-) create mode 100644 client/actions/index.js delete mode 100644 client/components/Tasks/TaskForm.jsx create mode 100644 client/components/UI/Link.jsx create mode 100644 client/containers/taskContentLink.js create mode 100644 client/containers/taskForm.js create mode 100644 client/containers/taskStyleLink.js create mode 100644 client/reducers/currentTask.js create mode 100644 client/reducers/index.js (limited to 'client') diff --git a/client/actions/index.js b/client/actions/index.js new file mode 100644 index 0000000..ddbf9ee --- /dev/null +++ b/client/actions/index.js @@ -0,0 +1,22 @@ +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', +}) diff --git a/client/components/App.jsx b/client/components/App.jsx index 5340ba1..0af326f 100644 --- a/client/components/App.jsx +++ b/client/components/App.jsx @@ -1,7 +1,6 @@ import { h, Component } from 'preact' import { isMobile } from '../vendor/util' // import db from '../db' -import { Link, withRouter } from 'react-router-dom' import Header from './UI/Header.jsx' import Browser from './Browser/Browser.jsx' @@ -9,23 +8,16 @@ import Tasks from './Tasks/Tasks.jsx' import client from '../client' -class App extends Component { - constructor(props) { - super() - this.state = { - } - } - render() { - return ( -
-
-
- - -
+const App = () => { + return ( +
+
+
+ +
- ) - } +
+ ) } -export default withRouter(App) +export default App diff --git a/client/components/Browser/Folder/Folder.jsx b/client/components/Browser/Folder/Folder.jsx index 3ed3ddb..a3588f1 100644 --- a/client/components/Browser/Folder/Folder.jsx +++ b/client/components/Browser/Folder/Folder.jsx @@ -3,6 +3,8 @@ import { h, Component } from 'preact' import client from '../../../client.js' import FileUploadButton from './FileUploadButton.jsx' +import TaskContentLink from '../../../containers/taskContentLink.js' +import TaskStyleLink from '../../../containers/taskStyleLink.js' export default class Folder extends Component { constructor(props) { @@ -36,8 +38,8 @@ export default class Folder extends Component { this.handleClick(file)}>{file.name} {file.mime} - this.props.setContent(file)}>content > - this.props.setStyle(file)}>style > + content + style
) diff --git a/client/components/Tasks/TaskForm.jsx b/client/components/Tasks/TaskForm.jsx deleted file mode 100644 index 89771ad..0000000 --- a/client/components/Tasks/TaskForm.jsx +++ /dev/null @@ -1,50 +0,0 @@ -import { h, Component } from 'preact' -import { Link } from 'react-router-dom' - -import client from '../../client.js' - -export default class TaskForm 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, - }) - } - - updateAlpha(event){ - const name = event.target.name - let value = event.target.value - console.log(name, value) - this.setState({ - alphaValue: value, - alpha: '1e' + 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 ( ) - } -} diff --git a/client/components/Tasks/TaskFormView.jsx b/client/components/Tasks/TaskFormView.jsx index 078f7c7..36660de 100644 --- a/client/components/Tasks/TaskFormView.jsx +++ b/client/components/Tasks/TaskFormView.jsx @@ -3,70 +3,37 @@ import { Link } from 'react-router-dom' import client from '../../client.js' -export default class TaskForm 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, - }) - } - updateAlpha(event){ - const name = event.target.name - let value = event.target.value - console.log(name, value) - this.setState({ - alphaValue: value, - alpha: '1e' + 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 ( -
-
+export default function TaskFormView (props) { + console.log(props) + return ( +
+
+ {props.content && (
- - {this.state.content} + {props.content.name}
- - -
-
+ )} + + +
+
+ {props.style && (
- {this.state.style} + {props.style.name}
- - -
-
- this.updateAlpha(e)} - /> - {this.state.alphaString} - - -
+ )} + + +
+
+ props.setAlpha(e.target.value)} + /> + alpha: {props.alpha} +
+
+
- ) - } +
+ ) } diff --git a/client/components/Tasks/Tasks.jsx b/client/components/Tasks/Tasks.jsx index b72cd79..a107acf 100644 --- a/client/components/Tasks/Tasks.jsx +++ b/client/components/Tasks/Tasks.jsx @@ -1,7 +1,7 @@ import { h, Component } from 'preact' import { Link } from 'react-router-dom' -import TaskForm from './TaskForm.jsx' +import TaskForm from '../../containers/taskForm.js' import client from '../../client.js' diff --git a/client/components/UI/Header.jsx b/client/components/UI/Header.jsx index 31439db..1727f7a 100644 --- a/client/components/UI/Header.jsx +++ b/client/components/UI/Header.jsx @@ -1,5 +1,5 @@ import { h, Component } from 'preact' -import { Link } from 'react-router-dom' +// import { Link } from 'react-router-dom' export default class Header extends Component { constructor(props) { diff --git a/client/components/UI/Link.jsx b/client/components/UI/Link.jsx new file mode 100644 index 0000000..f801979 --- /dev/null +++ b/client/components/UI/Link.jsx @@ -0,0 +1,29 @@ +import { h, Component } from 'preact' +import React from 'react' +// import PropTypes from 'prop-types' + +const Link = ({ active, children, onClick }) => { + if (active) { + return {children} + } + + return ( + // eslint-disable-next-line + { + e.preventDefault() + onClick() + }} + > + {children} + + ) +} + +// Link.propTypes = { +// active: PropTypes.bool.isRequired, +// children: PropTypes.node.isRequired, +// onClick: PropTypes.func.isRequired +// } + +export default Link diff --git a/client/containers/taskContentLink.js b/client/containers/taskContentLink.js new file mode 100644 index 0000000..bb8ae37 --- /dev/null +++ b/client/containers/taskContentLink.js @@ -0,0 +1,19 @@ +import { connect } from 'react-redux' +import { setContent } from '../actions' +import Link from '../components/UI/Link.jsx' + +const mapStateToProps = (state, ownProps) => ({ +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + onClick: () => { + dispatch(setContent(ownProps.file)) + } +}) + +const TaskContentLink = connect( + mapStateToProps, + mapDispatchToProps +)(Link) + +export default TaskContentLink diff --git a/client/containers/taskForm.js b/client/containers/taskForm.js new file mode 100644 index 0000000..ac1a214 --- /dev/null +++ b/client/containers/taskForm.js @@ -0,0 +1,24 @@ +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' + +const mapStateToProps = (state) => state.currentTask + +const mapDispatchToProps = { + clearContent: () => setContent(null), + clearStyle: () => setStyle(null), + setAlpha: (alpha) => setAlpha(alpha), + createTask: () => createTask(), +} + +const TaskForm = connect( + mapStateToProps, + mapDispatchToProps +)(TaskFormView) + +export default TaskForm diff --git a/client/containers/taskStyleLink.js b/client/containers/taskStyleLink.js new file mode 100644 index 0000000..7ec5ce5 --- /dev/null +++ b/client/containers/taskStyleLink.js @@ -0,0 +1,19 @@ +import { connect } from 'react-redux' +import { setStyle } from '../actions' +import Link from '../components/UI/Link.jsx' + +const mapStateToProps = (state, ownProps) => ({ +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + onClick: () => { + dispatch(setStyle(ownProps.file)) + } +}) + +const TaskStyleLink = connect( + mapStateToProps, + mapDispatchToProps +)(Link) + +export default TaskStyleLink diff --git a/client/index.jsx b/client/index.jsx index b78c5ea..639117d 100644 --- a/client/index.jsx +++ b/client/index.jsx @@ -1,12 +1,15 @@ import { h, render } from 'preact' +import { createStore } from 'redux' +import { Provider } from 'react-redux' import App from './components/App.jsx' -import { BrowserRouter } from 'react-router-dom' +import reducer from './reducers/index.js' + +const store = createStore(reducer) const app = ( - + - + ) render(app, document.getElementById('container')) - diff --git a/client/reducers/currentTask.js b/client/reducers/currentTask.js new file mode 100644 index 0000000..3f9233e --- /dev/null +++ b/client/reducers/currentTask.js @@ -0,0 +1,41 @@ +import { addTask } from '../actions' +import client from '../client' + +const currentTask = (state = {}, action) => { + console.log(action.type) + switch (action.type) { + case 'SET_CONTENT': + return { + ...state, + content: action.file + } + case 'SET_STYLE': + return { + ...state, + style: action.file + } + case 'SET_ALPHA': + return { + ...state, + alpha: action.alpha + } + case 'CREATE_TASK': + client.task.create( state ).then( (data) => { + addTask( data ) + }) + + return { + content: null, + style: null, + alpha: state.alpha, + } +// case 'ADD_TASK': +// return { +// ...state +// } + default: + return state + } +} + +export default currentTask \ No newline at end of file diff --git a/client/reducers/index.js b/client/reducers/index.js new file mode 100644 index 0000000..ed59b60 --- /dev/null +++ b/client/reducers/index.js @@ -0,0 +1,9 @@ +import { combineReducers } from 'redux' + +import currentTask from './currentTask' + +const cortexApp = combineReducers({ + currentTask +}) + +export default cortexApp -- cgit v1.2.3-70-g09d2