From d520c67839724e80d8b68b8fe933f1e7755a8f42 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 4 Jul 2017 04:14:03 +0200
Subject: writing task form in a reduxy way

---
 client/components/Tasks/TaskForm.jsx     | 50 ------------------
 client/components/Tasks/TaskFormView.jsx | 89 ++++++++++----------------------
 client/components/Tasks/Tasks.jsx        |  2 +-
 3 files changed, 29 insertions(+), 112 deletions(-)
 delete mode 100644 client/components/Tasks/TaskForm.jsx

(limited to 'client/components/Tasks')

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'
 
-- 
cgit v1.2.3-70-g09d2