diff options
Diffstat (limited to 'frontend/views/page/components/tile.form.js')
| -rw-r--r-- | frontend/views/page/components/tile.form.js | 133 |
1 files changed, 59 insertions, 74 deletions
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js index def9062..e5eb14d 100644 --- a/frontend/views/page/components/tile.form.js +++ b/frontend/views/page/components/tile.form.js @@ -66,7 +66,6 @@ class TileForm extends Component { state = { title: "", submitTitle: "", - data: { ...newText() }, errorFields: new Set([]), } @@ -78,108 +77,90 @@ class TileForm extends Component { title, submitTitle, errorFields: new Set([]), - data: { - ...(this.props.data || this.state.data), - graph_id: graph.id, - page_id: page.id, - }, - }, () => this.props.tileActions.updateTemporaryTile(this.state.data)) + }) + this.props.tileActions.updateTemporaryTile({ + ...this.props.data, + graph_id: graph.id, + page_id: page.id, + }) } handleChange(e) { - const { errorFields } = this.state const { name, value } = e.target - if (errorFields.has(name)) { - errorFields.delete(name) - } - this.setState({ - errorFields, - data: { - ...this.state.data, - [name]: value, - } - }, () => this.props.tileActions.updateTemporaryTile(this.state.data)) + this.clearErrorField(name) + this.props.tileActions.updateTemporaryTile({ + ...this.props.data, + [name]: value, + }) } handleTypeChange(type) { const { graph, page } = this.props - const { errorFields, data } = this.state - let newData; + const { data } = this.state + let tileReferences = { + id: data.id, + graph_id: data.graph_id, + page_id: data.page_id, + } switch(type) { case 'image': - newData = newImage({ - id: data.id, - graph_id: data.graph_id, - page_id: data.page_id, - }) + newData = newImage(tileReferences) newData.settings.align = data.settings.align break case 'text': - newData = newText({ - id: data.id, - graph_id: data.graph_id, - page_id: data.page_id, - }) + newData = newText(tileReferences) newData.settings.align = data.settings.align break } - console.log(">>>>>>", newData) - this.setState({ - errorFields, - data: newData, - }, () => this.props.tileActions.updateTemporaryTile(newData)) + this.setState({ errorFields: new Set([]) }) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + [name]: value, + }) } handleSettingsChange(e) { - const { errorFields } = this.state const { name, value } = e.target - if (errorFields.has(name)) { - errorFields.delete(name) - } - this.setState({ - errorFields, - data: { - ...this.state.data, - settings: { - ...this.state.data.settings, - [name]: value, - } + this.clearErrorField(name) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + settings: { + ...this.props.temporaryTile.settings, + [name]: value, } - }, () => this.props.tileActions.updateTemporaryTile(this.state.data)) + }) } handleSelect(name, value) { - const { errorFields } = this.state - if (errorFields.has(name)) { - errorFields.delete(name) - } + this.clearErrorField(name) if (name === 'type') { return this.handleTypeChange(value) } - this.setState({ - errorFields, - data: { - ...this.state.data, + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + [name]: value, + }) + } + + handleSettingsSelect(name, value) { + this.clearErrorField(name) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + settings: { + ...this.props.temporaryTile.settings, [name]: value, } - }, () => this.props.tileActions.updateTemporaryTile(this.state.data)) + }) } - handleSettingsSelect(name, value) { + clearErrorField(name) { const { errorFields } = this.state if (errorFields.has(name)) { errorFields.delete(name) + this.setState({ + errorFields, + }) } - this.setState({ - errorFields, - data: { - ...this.state.data, - settings: { - ...this.state.data.settings, - [name]: value, - } - } - }, () => this.props.tileActions.updateTemporaryTile(this.state.data)) } handleSubmit(e) { @@ -206,8 +187,8 @@ class TileForm extends Component { } render() { - const { isNew } = this.props - const { title, submitTitle, errorFields, data } = this.state + const { temporaryTile: data, isNew } = this.props + const { title, submitTitle, errorFields } = this.state if (!data) return return ( <div className='box'> @@ -245,7 +226,7 @@ class TileForm extends Component { {!!errorFields.size && <label> <span></span> - <span>Please complete the required fields =)</span> + <span>Please add the required fields =)</span> </label> } </form> @@ -254,7 +235,8 @@ class TileForm extends Component { } renderPositionInfo() { - const { x, y, width, height, rotation, scale } = this.state.data.settings + const { temporaryTile: data } = this.props + const { x, y, width, height, rotation, scale } = data.settings // console.log(this.state.data.settings) return ( <div className='position'> @@ -269,7 +251,8 @@ class TileForm extends Component { renderImageForm() { // const { isNew } = this.props - const { errorFields, data } = this.state + const { temporaryTile: data } = this.props + const { errorFields } = this.state return ( <div> <TextInput @@ -295,7 +278,8 @@ class TileForm extends Component { } renderTextForm() { - const { errorFields, data } = this.state + const { temporaryTile: data } = this.props + const { errorFields } = this.state return ( <div> <TextArea @@ -338,6 +322,7 @@ const mapStateToProps = state => ({ graph: state.graph, page: state.page, tile: state.tile, + temporaryTile: state.tile.temporaryTile, }) const mapDispatchToProps = dispatch => ({ |