From bf7ac6af587f68553b83a54fcb724dfc9d684644 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 20 Mar 2017 01:03:23 +0100
Subject: refactor frontend

---
 client/components/MealList.jsx | 242 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 242 insertions(+)
 create mode 100644 client/components/MealList.jsx

(limited to 'client/components/MealList.jsx')

diff --git a/client/components/MealList.jsx b/client/components/MealList.jsx
new file mode 100644
index 0000000..53c8289
--- /dev/null
+++ b/client/components/MealList.jsx
@@ -0,0 +1,242 @@
+import React from 'react'
+
+import client from '../client'
+
+import MealFilter from './MealFilter.jsx'
+
+export default class MealList extends React.Component {
+  constructor(props) {
+    super()
+
+    this.state = {
+      total: 0,
+      limit: 0,
+      skip: 0,
+      data: []
+    }
+
+    this.handleCreate = this.handleCreate.bind(this)
+    this.handleUpdate = this.handleUpdate.bind(this)
+    this.handleDelete = this.handleDelete.bind(this)
+    this.pickMeal = this.pickMeal.bind(this)
+
+    client.service('meals').find({
+      query: {
+        userid: props.user.id,
+        '$sort': { 'date': '-1' },
+        token: client.get('token'),
+      },
+    }).then((data) => {
+      this.setState(data)
+    }).catch((error) => {
+      console.error(error)
+    })
+  }
+  handleCreate(meal) {
+    const meals = this.state.data.slice()
+    meals.unshift( meal )
+    this.setState({
+      data: meals.sort(sortByDate)
+    })
+  }
+  handleUpdate(meal) {
+    const meals = this.state.data.map((data) => {
+      return (data.id === meal.id) ? meal : data
+    }).sort(sortByDate)
+    this.setState({
+      data: meals
+    })
+  }
+  handleDelete(mealid) {
+    const meals = this.state.data.filter((data) => {
+      return data.id !== mealid
+    }).sort(sortByDate)
+    this.setState({
+      data: meals
+    })
+  }
+  pickMeal(meal) {
+    this.mealForm.pick(meal)
+  }
+  render() {
+    const items = this.state.data.map((meal) => {
+      return (
+        <MealItem key={meal.id}
+          meal={meal}
+          onClick={this.pickMeal}
+          onDelete={this.handleDelete} />
+      )
+    })
+    if (! items.length) {
+      items.push(
+        <div className='quiet' key='nomeals'>No meals found</div>
+      )
+    }
+    return (
+      <div>
+        <MealForm user={this.props.user}
+          ref={(mealForm) => { this.mealForm = mealForm }}
+          onCreate={(meal) => { this.handleCreate(meal) }}
+          onUpdate={(meal) => { this.handleUpdate(meal) }}
+        />
+        <MealFilter />
+        <div>
+          {items}
+        </div>
+      </div>
+    )
+  }
+}
+
+class MealItem extends React.Component {
+  constructor() {
+    super()
+    this.remove = this.remove.bind(this)
+  }
+  remove(e) {
+    e.stopPropagation()
+    const mealid = this.props.meal.id
+    const mealsService = client.service('meals')
+    const params = { query: { token: client.get('token') } }
+    mealsService.remove(mealid, params).then(result => {
+      this.props.onDelete(mealid)
+    }).catch(error => {
+      console.error(error)
+    })
+  }
+  render() {
+    const meal = this.props.meal
+    // const canEdit = this.props.meal.userid === this.props.currentUser.id ? 'canEdit' : ''
+    const canEdit = 'canEdit'
+    const date = parseDate(meal.date)
+    const time = parseTime(meal.date)
+    return (
+      <div className={'meal row ' + canEdit} onClick={() => this.props.onClick(meal)}>
+        <div className='name'>{meal.name}</div>
+        <div className='calories'>{meal.calories} cal</div>
+        <div className='date'>{date}</div>
+        <div className='time'>{time}</div>
+        <div className='remove' onClick={this.remove}>x</div>
+      </div>
+    )
+  }
+}
+
+class MealForm extends React.Component {
+  constructor(props) {
+    super()
+    this.state = {
+      id: '',
+      userid: props.user.id,
+      name: '',
+      calories: '',
+      date: new Date (),
+    }
+    this.updateState = this.updateState.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+  reset() {
+    this.setState({
+      id: '',
+      name: '',
+      calories: '',
+      date: new Date (),
+    })
+  }
+  pick(meal){
+    this.setState(meal)
+  }
+  updateState(event){
+    const name = event.target.name
+    let value = event.target.value
+    if (name === 'date') {
+      value = new Date(value + 'T' + this.state.date.split("T")[1] ).toString()
+    } else if (name === 'time') {
+      value = new Date(this.state.date.split("T")[0] + value).toString()
+    } else if (name === 'calories') {
+      value = parseInt(value)
+    }
+    this.setState({
+      [name]: value,
+      error: null,
+    })
+  }
+  handleSubmit(event) {
+    event.preventDefault()
+
+    const id = this.state.id
+
+    if (! id) {
+      this.create()
+    }
+    else {
+      this.update()
+    }
+  }
+  create() {
+    const mealsService = client.service('meals')
+    const params = { query: { token: client.get('token') } }
+
+    mealsService.create(this.state, params).then(result => {
+      this.props.onCreate(result)
+      this.reset()
+    }).catch(error => {
+      console.error(error)
+      this.setState({
+        error: error.toString()
+      })
+    })
+  }
+  update() {
+    const mealsService = client.service('meals')
+    const params = { query: { token: client.get('token') } }
+
+    mealsService.update(this.state.id, this.state, params).then(result => {
+      this.props.onUpdate(result)
+      this.reset()
+    }).catch(error => {
+      console.error(error)
+      this.setState({
+        error: error.toString()
+      })
+    })
+  }
+  render() {
+    const id = this.state.id
+    const action = id ? 'update' : 'create'
+
+    const date = parseDate(this.state.date)
+    const time = parseTime(this.state.date)
+    return (
+      <form onSubmit={this.handleSubmit} className={action}>
+        <input type='hidden' name='id' value={this.state.id} readOnly />
+        <input type='hidden' name='userid' value={this.state.userid} readOnly />
+        <input type='text' name='name' placeholder='Name' value={this.state.name} required onChange={this.updateState} />
+        <input type='number' name='calories' placeholder='Calories' value={this.state.calories} required onChange={this.updateState} min='0' max='10000' />
+        <input type='date' name='date' placeholder='Date' value={date} required onChange={this.updateState} />
+        <input type='time' name='time' placeholder='Time' value={time} required onChange={this.updateState} step='60' />
+        <input type='submit' value={capitalize(action)} />
+        <span className='clear' onClick={() => this.reset()}>cancel</span>
+        <div className='error'>{this.state.error}</div>
+      </form>
+    )
+  }
+}
+
+function sortByDate(a,b){
+  return new Date(b.date) - new Date(a.date)
+}
+
+function parseDate(d){
+  return new Date(d).toISOString().substr(0, 10)
+}
+
+function parseTime(d){
+  return new Date(d).toISOString().substr(11, 5)
+}
+
+function capitalize(s){
+  s = s || '';
+  return (s[0] || '').toUpperCase() + s.substr(1)
+}
+
-- 
cgit v1.2.3-70-g09d2