diff options
Diffstat (limited to 'client/components')
| -rw-r--r-- | client/components/App.jsx | 28 | ||||
| -rw-r--r-- | client/components/Browser/Folder/Folder.jsx | 6 | ||||
| -rw-r--r-- | client/components/Tasks/TaskForm.jsx | 50 | ||||
| -rw-r--r-- | client/components/Tasks/TaskFormView.jsx | 89 | ||||
| -rw-r--r-- | client/components/Tasks/Tasks.jsx | 2 | ||||
| -rw-r--r-- | client/components/UI/Header.jsx | 2 | ||||
| -rw-r--r-- | client/components/UI/Link.jsx | 29 |
7 files changed, 73 insertions, 133 deletions
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 ( - <div> - <Header /> - <div class='columns'> - <Browser /> - <Tasks /> - </div> +const App = () => { + return ( + <div> + <Header /> + <div class='columns'> + <Browser /> + <Tasks /> </div> - ) - } + </div> + ) } -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 { <span class='name' onClick={() => this.handleClick(file)}>{file.name}</span> <span class='mime'>{file.mime}</span> <span class='actions'> - <span onClick={() => this.props.setContent(file)}>content ></span> - <span onClick={() => this.props.setStyle(file)}>style ></span> + <TaskContentLink file={file}> content </TaskContentLink> + <TaskStyleLink file={file}> style </TaskStyleLink> </span> </div> ) 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 ( <TaskFormView currentTask={this.state} /> ) - } -} 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 ( - <div class='form'> - <div> +export default function TaskFormView (props) { + console.log(props) + return ( + <div class='form'> + <div> + {props.content && ( <div> - <img /> - {this.state.content} + {props.content.name} </div> - <label>content</label> - <button onclick={() => this.setState({ content: null })}>x</button> - </div> - <div> + )} + <label>content</label> + <button onClick={props.clearContent}>x</button> + </div> + <div> + {props.style && ( <div> - {this.state.style} + {props.style.name} </div> - <label>style</label> - <button onclick={() => this.setState({ style: null })}>x</button> - </div> - <div> - <input type='range' min='0' max='100' value={this.state.alphaValue} - onChange={(e) => this.updateAlpha(e)} - /> - {this.state.alphaString} - <label>alpha</label> - <button onClick={this.handleSubmit}>Create</button> - </div> + )} + <label>style</label> + <button onClick={props.clearStyle}>x</button> + </div> + <div> + <input type='range' step='0.01' min='0.001' max='1' value={props.alpha} + onInput={(e) => props.setAlpha(e.target.value)} + /> + alpha: {props.alpha} + </div> + <div> + <button onClick={props.createTask}>Create</button> </div> - ) - } + </div> + ) } 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 <span>{children}</span> + } + + return ( + // eslint-disable-next-line + <a href="#" + onClick={e => { + e.preventDefault() + onClick() + }} + > + {children} + </a> + ) +} + +// Link.propTypes = { +// active: PropTypes.bool.isRequired, +// children: PropTypes.node.isRequired, +// onClick: PropTypes.func.isRequired +// } + +export default Link |