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/App.jsx                   | 28 ++++-----
 client/components/Browser/Folder/Folder.jsx |  6 +-
 client/components/Tasks/TaskForm.jsx        | 50 ----------------
 client/components/Tasks/TaskFormView.jsx    | 89 +++++++++--------------------
 client/components/Tasks/Tasks.jsx           |  2 +-
 client/components/UI/Header.jsx             |  2 +-
 client/components/UI/Link.jsx               | 29 ++++++++++
 7 files changed, 73 insertions(+), 133 deletions(-)
 delete mode 100644 client/components/Tasks/TaskForm.jsx
 create mode 100644 client/components/UI/Link.jsx

(limited to 'client/components')

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 &gt;</span>
-            <span onClick={() => this.props.setStyle(file)}>style &gt;</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
-- 
cgit v1.2.3-70-g09d2