React-bootstrap usage

css/style.css

@@ -3,14 +3,6 @@ main {
   margin: auto;
 }
 
-div.item {
-  background-color: aliceblue;
-  border-radius: 0 10px 10px 0;
-  border-left: 10px solid blue;
-  padding: 10px;
-  margin-bottom: 10px;
-}
-
 form textarea {
   width: 100%;
   height: 100px;

deploy.sh

@@ -0,0 +1 @@
+sftp pi@tankernn.eu:/var/www/todo <<< $'put bundle.js\nput php/api.php php/api.php\nput index.html\nput css/style.css css/style.css'

js/index.js

@@ -3,9 +3,16 @@ var ReactDOM = require('react-dom');
 var Remarkable = require('remarkable');
 var Button = require('react-bootstrap').Button;
 var FormControl = require('react-bootstrap').FormControl;
+var FormGroup = require('react-bootstrap').FormGroup;
+var Panel = require('react-bootstrap').Panel;
 var DatePicker = require('react-bootstrap-date-picker');
 var $ = require('jquery');
 
+const LOGIN_URL = "https://tankernn.eu/login/check_login.php";
+const API_URL = "https://todo.tankernn.eu/php/api.php";
+
+const priorityNames = {1: "danger", 2: "warning", 3: "primary", 4: "success"};
+
 var TodoForm = React.createClass({
   getInitialState: function() {
     return {title: '', text: '', deadline: new Date().toISOString(), priority: '1'};
@@ -83,13 +90,7 @@ var LoginForm = React.createClass({
     if (!user || !pass) {
       return;
     }
-    $.post(
-      "https://tankernn.eu/login/check_login.php",
-      {user: user, pass: pass},
-      function(result) {
-        console.log(result);
-      }
-    );
+    this.props.onLoginSubmit({user: user, pass: pass});
     this.setState(this.getInitialState());
   },
   render: function() {
@@ -109,13 +110,15 @@ var Item = React.createClass({
     var rawMarkup = md.render(this.props.children.toString());
     return { __html: rawMarkup };
   },
+  handleEditClick: function() {
+    console.log("I wanna edit.");
+  },
   render: function() {
     var md = new Remarkable();
     return (
-      <div className="item">
-        <h2>{this.props.title}</h2>
+      <Panel header={this.props.title} footer={<FormGroup><Button bsStyle="primary" onClick={this.handleEditClick}>Edit</Button><Button bsStyle="danger">Delete</Button></FormGroup>} bsStyle={priorityNames[this.props.priority]}>
         <span dangerouslySetInnerHTML={this.rawMarkup()} />
-      </div>
+      </Panel>
     );
   }
 });
@@ -125,7 +128,7 @@ var TodoList = React.createClass({
     console.log(this.props.list);
     var itemList = this.props.list.map(function(item) {
       return (
-        <Item priority={item.priority} title={item.title} key={item.id}>
+        <Item priority={item.priority} title={item.title} key={item.id} deadline={item.deadline}>
           {item.description}
         </Item>
       );
@@ -140,21 +143,24 @@ var TodoList = React.createClass({
 
 var App = React.createClass({
   getInitialState: function() {
-    return {list: []};
+    return {list: [], result: 0};
   },
-  componentDidMount: function() {
+  updateList: function() {
     $.ajax({
       url: this.props.url,
       dataType: 'json',
       type: 'GET',
       success: function(data) {
-        this.setState({list: data.list});
+        this.setState({list: data.list, result: data.result});
       }.bind(this),
       error: function(xhr, status, err) {
         console.error(this.props.url, status, err.toString());
       }.bind(this)
     });
   },
+  componentDidMount: function() {
+    this.updateList();
+  },
   handleCommentSubmit: function(comment) {
     $.ajax({
       url: this.props.url,
@@ -174,8 +180,21 @@ var App = React.createClass({
       }.bind(this)
     });
   },
+  handleLoginSubmit: function(data) {
+    $.ajax({
+      url: LOGIN_URL,
+      cache: false,
+      type: 'POST',
+      data: data,
+      success: function(result) {
+        console.log(result);
+        this.forceUpdate();
+      }.bind(this)
+    });
+  },
   render: function() {
-    if (this.state.result == 0)
+    console.log(this.state);
+    if (this.state.result != 1)
       return (
         <main>
           <h1>Tankernn TODO list</h1>
@@ -187,10 +206,10 @@ var App = React.createClass({
       return (
         <main>
           <h1>Tankernn TODO list</h1>
-          <LoginForm />
+          <LoginForm onLoginSubmit={this.handleLoginSubmit} />
         </main>
       );
   }
 });
 
-ReactDOM.render(<App url="https://todo.tankernn.eu/php/api.php" />, document.getElementById('content'));
+ReactDOM.render(<App url={API_URL} />, document.getElementById('content'));

package.json

@@ -22,14 +22,15 @@
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "css-loader": "^0.25.0",
-    "webpack": "^1.13.2"
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.2"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "package": "webpack --config webpack.config.production.js --progress --colors",
-    "deploy": "",
+    "deploy": "npm run-script package && bash ./deploy.sh",
     "start": "webpack-dev-server --progress --colors"
   },
   "author": "Tankernn",
-  "license": "ISC"
+  "license": "MIT"
 }

php/api.php

@@ -1,4 +1,6 @@
 <?php
+  header("Access-Control-Allow-Origin: *");
+
   session_name('default');
   session_set_cookie_params(0, '/', '.tankernn.eu');
   session_start();
@@ -34,7 +36,7 @@
           break;
       }
     }
-    $sql = "SELECT * FROM Todo WHERE userid=$userid";
+    $sql = "SELECT * FROM Todo WHERE userid=$userid ORDER BY deadline ASC, priority ASC";
     $query = $conn->query($sql);
     $data->list = array();
     while ($row = $query->fetch_array()) {

webpack.config.production.js

@@ -1,11 +1,9 @@
 var path = require('path');
 var webpack = require('webpack');
 
-var BUILD_DIR = path.resolve(__dirname, 'build');
-
 module.exports = {
   entry: './js/index.js',
-  output: { path: BUILD_DIR, filename: 'bundle.js' },
+  output: { path: __dirname, filename: 'bundle.js' },
   module: {
     loaders: [
       {