Update fetching with API.

bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx

@@ -1,10 +1,13 @@
 import Checkbox from 'material-ui/Checkbox';
+import fetch from 'isomorphic-fetch';
 import FlatButton from 'material-ui/FlatButton';
 import moment from 'moment-timezone';
+import RaisedButton from 'material-ui/RaisedButton';
 import React from 'react';
 import TextField from 'material-ui/TextField';
 import Source from '../Source';
 import Size from '../Size';
+import Cookies from 'js-cookie';
 
 const styles = {
   block: {
@@ -28,6 +31,7 @@ class BikeForm extends React.Component {
     this.handleChange = this.handleChange.bind(this);
     this.handleSizeChange = this.handleSizeChange.bind(this);
     this.handleSourceChange = this.handleSourceChange.bind(this);
+    this.handleSave = this.handleSave.bind(this);
   }
 
   handleChange(event, value) {
@@ -42,20 +46,36 @@ class BikeForm extends React.Component {
     this.setState({ bike: { ...this.state.bike, source: value } });
   }
 
+  handleSave() {
+    const id = this.state.bike.id;
+    const data = JSON.stringify(this.state.bike);
+    const csrfToken = Cookies.get('csrftoken');
+    const sessionId = Cookies.get('sessionid');
+
+    fetch(`/api/v1/bikes/${id}/`, {
+      credentials: 'same-origin',
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRFToken': csrfToken,
+      },
+      body: data,
+    }).then((response) => {
+      if (response.status >= 400) {
+        throw new Error('Bad response from server');
+      }
+      console.log(response.json());
+    });
+  }
+
   render() {
     const timezone = moment.tz.guess();
     const {
-      price,
       claimed_at,
       claimed_by,
-      colour,
       cpic_searched_at,
       created_at,
-      size,
-      serial_number,
-      source,
       stolen,
-      stripped,
     } = this.state.bike;
     const createdAtFormatted = (moment(created_at).isValid()) ? moment(created_at).tz(timezone).fromNow() : '';
     const claimedAtFormatted = (moment(claimed_at).isValid()) ? moment(claimed_at).tz(timezone).fromNow() : '';
@@ -166,7 +186,7 @@ class BikeForm extends React.Component {
         <div className="mdl-grid" style={styles.bottom}>
           <div className="mdl-cell mdl-cell--8-col">
             <Source
-              source={source}
+              source={this.state.bike.source}
               onChange={this.handleSourceChange}
             />
           </div>
@@ -183,6 +203,10 @@ class BikeForm extends React.Component {
             </div>
           </div>
         </div>
+        <div className="mdl-grid">
+          <div className="mdl-cell right"></div>
+          <RaisedButton label="Save" onTouchTap={this.handleSave} />
+        </div>
       </div>
     );
   }

bikeshop_project/assets/js/bikes/components/BikeTable/index.jsx

@@ -1,7 +1,8 @@
-import React from 'react';
-import fetch from 'isomorphic-fetch';
 import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
+import Cookies from 'js-cookie';
+import fetch from 'isomorphic-fetch';
 import FlatButton from 'material-ui/FlatButton';
+import React from 'react';
 import { friendlySize } from '../Size';
 import BikeModal from '../BikeModal';
 
@@ -34,7 +35,10 @@ export default class BikeTable extends React.Component {
   }
 
   componentDidMount() {
-    fetch('/api/v1/bikes/')
+
+    fetch('/api/v1/bikes/', {
+      credentials: 'same-origin',
+    })
       .then(checkStatus)
       .then(parseJSON)
       .then((data) => {

bikeshop_project/bikeshop/settings/base.py

@@ -167,7 +167,7 @@ REST_FRAMEWORK = {
     # Use Django's standard `django.contrib.auth` permissions,
     # or allow read-only access for unauthenticated users.
     'DEFAULT_PERMISSION_CLASSES': [
-        'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
+        'rest_framework.permissions.IsAuthenticated'
     ],
     'DEFAULT_AUTHENTICATION_CLASSES': (
             'rest_framework.authentication.SessionAuthentication',

bikeshop_project/package.json

@@ -12,6 +12,7 @@
   "license": "ISC",
   "dependencies": {
     "isomorphic-fetch": "^2.2.1",
+    "js-cookie": "^2.1.3",
     "json-loader": "^0.5.4",
     "material-ui": "^0.18.1",
     "moment": "^2.13.0",
@@ -36,10 +37,6 @@
     "eslint-plugin-import": "^2.1.0",
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.6.0",
-    "eslint": "^3.9.1",
-    "eslint-plugin-import": "^2.1.0",
-    "eslint-plugin-jsx-a11y": "^2.2.3",
-    "eslint-plugin-react": "^6.6.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "i": "^0.3.5",
     "normalize.css": "^4.1.1",