14 files changed, 214 insertions, 137 deletions

diff --git a/client/actions/index.js b/client/actions/index.js
new file mode 100644
index 0000000..ddbf9ee
--- /dev/null
+++ b/client/actions/index.js
@@ -0,0 +1,22 @@
+export const setContent = (content) => ({
+  type: 'SET_CONTENT',
+  file: content
+})
+
+export const setStyle = (style) => ({
+  type: 'SET_STYLE',
+  file: style
+})
+
+export const setAlpha = (alpha) => ({
+  type: 'SET_ALPHA',
+  alpha,
+})
+
+export const createTask = () => ({
+  type: 'CREATE_TASK',
+})
+
+export const addTask = () => ({
+  type: 'ADD_TASK',
+})
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
diff --git a/client/containers/taskContentLink.js b/client/containers/taskContentLink.js
new file mode 100644
index 0000000..bb8ae37
--- /dev/null
+++ b/client/containers/taskContentLink.js
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux'
+import { setContent } from '../actions'
+import Link from '../components/UI/Link.jsx'
+
+const mapStateToProps = (state, ownProps) => ({
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  onClick: () => {
+    dispatch(setContent(ownProps.file))
+  }
+})
+
+const TaskContentLink = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Link)
+
+export default TaskContentLink
diff --git a/client/containers/taskForm.js b/client/containers/taskForm.js
new file mode 100644
index 0000000..ac1a214
--- /dev/null
+++ b/client/containers/taskForm.js
@@ -0,0 +1,24 @@
+import { h, Component } from 'preact'
+import { Link } from 'react-router-dom'
+
+import client from '../client.js'
+
+import { connect } from 'react-redux'
+import { setContent, setStyle, setAlpha, createTask } from '../actions'
+import TaskFormView from '../components/Tasks/TaskFormView.jsx'
+
+const mapStateToProps = (state) => state.currentTask
+
+const mapDispatchToProps = {
+  clearContent: () => setContent(null),
+  clearStyle: () => setStyle(null),
+  setAlpha: (alpha) => setAlpha(alpha),
+  createTask: () => createTask(),
+}
+
+const TaskForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TaskFormView)
+
+export default TaskForm
diff --git a/client/containers/taskStyleLink.js b/client/containers/taskStyleLink.js
new file mode 100644
index 0000000..7ec5ce5
--- /dev/null
+++ b/client/containers/taskStyleLink.js
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux'
+import { setStyle } from '../actions'
+import Link from '../components/UI/Link.jsx'
+
+const mapStateToProps = (state, ownProps) => ({
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  onClick: () => {
+    dispatch(setStyle(ownProps.file))
+  }
+})
+
+const TaskStyleLink = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Link)
+
+export default TaskStyleLink
diff --git a/client/index.jsx b/client/index.jsx
index b78c5ea..639117d 100644
--- a/client/index.jsx
+++ b/client/index.jsx
@@ -1,12 +1,15 @@
 import { h, render } from 'preact'
+import { createStore } from 'redux'
+import { Provider } from 'react-redux'
 import App from './components/App.jsx'
-import { BrowserRouter } from 'react-router-dom'
+import reducer from './reducers/index.js'
+
+const store = createStore(reducer)
 
 const app = (
-  <BrowserRouter>
+  <Provider store={store}>
     <App />
-  </BrowserRouter>
+  </Provider>
 )
 
 render(app, document.getElementById('container'))
-
diff --git a/client/reducers/currentTask.js b/client/reducers/currentTask.js
new file mode 100644
index 0000000..3f9233e
--- /dev/null
+++ b/client/reducers/currentTask.js
@@ -0,0 +1,41 @@
+import { addTask } from '../actions'
+import client from '../client'
+
+const currentTask = (state = {}, action) => {
+  console.log(action.type)
+  switch (action.type) {
+    case 'SET_CONTENT':
+      return {
+        ...state,
+        content: action.file
+      }
+    case 'SET_STYLE':
+      return {
+        ...state,
+        style: action.file
+      }
+    case 'SET_ALPHA':
+      return {
+        ...state,
+        alpha: action.alpha
+      }
+    case 'CREATE_TASK':
+      client.task.create( state ).then( (data) => {
+        addTask( data )
+      })
+
+      return {
+        content: null,
+        style: null,
+        alpha: state.alpha,
+      }
+//     case 'ADD_TASK':
+//       return {
+//         ...state
+//       }
+    default:
+      return state
+  }
+}
+
+export default currentTask
\ No newline at end of file
diff --git a/client/reducers/index.js b/client/reducers/index.js
new file mode 100644
index 0000000..ed59b60
--- /dev/null
+++ b/client/reducers/index.js
@@ -0,0 +1,9 @@
+import { combineReducers } from 'redux'
+
+import currentTask from './currentTask'
+
+const cortexApp = combineReducers({
+  currentTask
+})
+
+export default cortexApp