1 files changed, 32 insertions, 14 deletions

diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index 9bd8f14..dc81c1a 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -1,10 +1,14 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
 import { Link } from 'react-router-dom'
 
 import { session } from '../../../session'
 
 import { TextInput, NumberInput, Select, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
 
+import * as tileActions from '../../tile/tile.actions'
+
 const SELECT_TYPES = [
   "image", "text"
 ].map(s => ({ name: s, label: s }))
@@ -28,20 +32,21 @@ const REQUIRED_KEYS = {
 // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
 
 const newImage = (data) => ({
+  id: 'new',
   settings: {
     ...newPosition(),
     tile: false,
-    url: "",
+    url: "https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg",
   },
   type: 'image',
   ...data,
 })
 
 const newText = (data) => ({
+  id: 'new',
   settings: {
     ...newPosition(),
-    tile: false,
-    url: "",
+    content: "",
     width: 200,
     height: 200,
   },
@@ -56,11 +61,11 @@ const newPosition = () => ({
   align: "center_center",
 })
 
-export default class TileForm extends Component {
+class TileForm extends Component {
   state = {
     title: "",
     submitTitle: "",
-    data: { ...newText() },
+    data: { ...newImage() },
     errorFields: new Set([]),
   }
 
@@ -77,7 +82,7 @@ export default class TileForm extends Component {
         graph_id: graph.id,
         page_id: page.id,
       },
-    })
+    }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
   }
 
   handleChange(e) {
@@ -100,7 +105,7 @@ export default class TileForm extends Component {
       this.setState({
         errorFields,
         data: newData,
-      })
+      }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
     }
     this.setState({
       errorFields,
@@ -108,7 +113,7 @@ export default class TileForm extends Component {
         ...this.state.data,
         [name]: value,
       }
-    })
+    }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
   }
 
   handleSettingsChange(e) {
@@ -122,11 +127,11 @@ export default class TileForm extends Component {
       data: {
         ...this.state.data,
         settings: {
-          ...this.state.settings,
+          ...this.state.data.settings,
           [name]: value,
         }
       }
-    })
+    }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
   }
 
   handleSelect(name, value) {
@@ -140,7 +145,7 @@ export default class TileForm extends Component {
         ...this.state.data,
         [name]: value,
       }
-    })
+    }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
   }
 
   handleSettingsSelect(name, value) {
@@ -157,7 +162,7 @@ export default class TileForm extends Component {
           [name]: value,
         }
       }
-    })
+    }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
   }
 
   handleSubmit(e) {
@@ -233,6 +238,7 @@ export default class TileForm extends Component {
 
   renderPositionInfo() {
     const { x, y, width, height, rotation, scale } = this.state.data.settings
+    // console.log(this.state.data.settings)
     return (
       <div className='position'>
         {''}{parseInt(x)}{', '}
@@ -246,7 +252,7 @@ export default class TileForm extends Component {
 
   renderImageForm() {
     // const { isNew } = this.props
-    const { data } = this.state
+    const { errorFields, data } = this.state
     return (
       <div>
         <TextInput
@@ -272,7 +278,7 @@ export default class TileForm extends Component {
   }
 
   renderTextForm() {
-    const { data } = this.state
+    const { errorFields, data } = this.state
     return (
       <div>
         <TextArea
@@ -310,3 +316,15 @@ export default class TileForm extends Component {
     )
   }
 }
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+  tile: state.tile,
+})
+
+const mapDispatchToProps = dispatch => ({
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileForm)