handle changing type more robustly

1 files changed, 37 insertions, 21 deletions

diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index 045ef5c..def9062 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -26,7 +26,7 @@ const ALIGNMENTS = [
 
 const REQUIRED_KEYS = {
   image: ['url'],
-  text: ['content', 'width', 'height'],
+  text: ['content'],
 }
 
 // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
@@ -48,8 +48,8 @@ const newText = (data) => ({
     ...newPosition(),
     content: "What is up... I have no idea actually",
     color: 'rgb(255,255,255)',
-    width: 200,
-    height: 200,
+    width: 0,
+    height: 0,
   },
   type: 'text',
   ...data,
@@ -92,22 +92,6 @@ class TileForm extends Component {
     if (errorFields.has(name)) {
       errorFields.delete(name)
     }
-    if (name === 'type') {
-      const { graph, page } = this.props
-      let newData;
-      switch(type) {
-        case 'image':
-          newData = newImage({ graph_id: graph.id, page_id: page.id })
-          break
-        case 'text':
-          newData = newText({ graph_id: graph.id, page_id: page.id })
-          break
-      }
-      this.setState({
-        errorFields,
-        data: newData,
-      }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
-    }
     this.setState({
       errorFields,
       data: {
@@ -117,6 +101,35 @@ class TileForm extends Component {
     }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
   }
 
+  handleTypeChange(type) {
+    const { graph, page } = this.props
+    const { errorFields, data } = this.state
+    let newData;
+    switch(type) {
+      case 'image':
+        newData = newImage({
+          id: data.id,
+          graph_id: data.graph_id,
+          page_id: data.page_id,
+        })
+        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.settings.align = data.settings.align
+        break
+    }
+    console.log(">>>>>>", newData)
+    this.setState({
+      errorFields,
+      data: newData,
+    }, () => this.props.tileActions.updateTemporaryTile(newData))
+  }
+
   handleSettingsChange(e) {
     const { errorFields } = this.state
     const { name, value } = e.target
@@ -140,6 +153,9 @@ class TileForm extends Component {
     if (errorFields.has(name)) {
       errorFields.delete(name)
     }
+    if (name === 'type') {
+      return this.handleTypeChange(value)
+    }
     this.setState({
       errorFields,
       data: {
@@ -296,7 +312,7 @@ class TileForm extends Component {
             title="Width"
             name="width"
             data={data.settings}
-            min={10}
+            min={0}
             max={1200}
             error={errorFields.has('width')}
             onChange={this.handleSettingsChange.bind(this)}
@@ -306,7 +322,7 @@ class TileForm extends Component {
             title="Height"
             name="height"
             data={data.settings}
-            min={10}
+            min={0}
             max={1200}
             error={errorFields.has('height')}
             onChange={this.handleSettingsChange.bind(this)}