Initial values loaded.

bikeshop_project/assets/js/bikes/actions.js

@@ -5,3 +5,6 @@ export const setBikes = createAction('set bikes');
 export const setBikesIsFetching = createAction('set bikes.isFetching');
 export const setBikesFetched = createAction('set bikes.fetched');
 export const setBikesFetchFailed = createAction('set bikes.fetchFailed');
+export const setBikeSaved = createAction('set bike.saved');
+export const setBikeIsSaving = createAction('set bike.isSaving');
+export const setBikeSaveFailed = createAction('set bike.isSaving');

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

@@ -326,7 +326,7 @@ BikeForm = reduxForm({
 
 BikeForm = connect(
   state => ({
-    initialValues: state.bike,  // pull initial values from account reducer
+    initialValues: state.bikes.entities['1'],  // pull initial values from account reducer
   }),
 )(BikeForm);
 
@@ -335,5 +335,7 @@ BikeForm.propTypes = {
   handleClose: PropTypes.func,
 }
 
+
+
 export default BikeForm;
 

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

@@ -9,59 +9,41 @@ import BikeForm from '../BikeForm';
 class BikeModal extends React.Component {
   constructor(props) {
     super(props);
-
-    this.state = {
-      open: props.open,
-      bike: undefined,
-      editing: props.editing,
-    };
   }
 
-  componentWillReceiveProps(newProps) {
-    this.setState({
-      ...this.state,
-      open: newProps.open || false,
-      bike: newProps.bike || undefined,
-      editing: newProps.editing || false,
-    });
-  }
-
-  handleClose() {
-    this.setState({ open: false });
-  };
-
   render() {
-    const title = this.state.bike && this.state.bike.stolen ?
-      (<div>
-        <h3>{this.props.editing ? 'Edit Bike' : 'Add Bike'}</h3>
-        <h4>STOLEN</h4>
-      </div>) :
-      <h3>Edit Bike</h3>;
+    if (this.props.bike) {
+      const title = (
+        <div>
+          <h3>{this.props.bike ? 'Edit Bike' : 'Add Bike'}</h3>
+        </div>
+    );
 
-    return (<div>
-      <Dialog
-        title={title}
-        open={this.state.open}
-        autoScrollBodyContent
-      >
-        { this.state.bike ?
-          <BikeForm
-            bike={this.state.bike}
-            editing={this.state.editing}
-            getBikes={this.props.getBikes}
-            handleClose={this.handleClose}
-          /> :
-          <div>Unable to edit bike.</div>
+      return (<div>
+        <Dialog
+          title={title}
+          open={this.props.open}
+          autoScrollBodyContent
+        >
+          { this.props.bike ?
+            <BikeForm
+              enableReinitialize
+              bike={this.props.bike}
+              bikes={this.props.bikes}
+            /> :
+            <div>Unable to edit bike.</div>
         }
-      </Dialog>
-    </div>);
+        </Dialog>
+      </div>);
+    }
+
+    return null;
   }
 }
 
 BikeModal.propTypes = {
   open: PropTypes.bool,
   bike: PropTypes.object,
-  editing: PropTypes.bool,
 };
 
 export default BikeModal;

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

@@ -8,8 +8,37 @@ import { friendlySize } from '../Size';
 import BikeModal from '../BikeModal';
 import { fetchBikes, setBike } from '../../actions';
 
-const renderBikes = (bikes) => {
-  console.log(bikes);
+class BikeTableComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      bikeModal: {
+        open: false,
+        bike: undefined,
+      },
+    };
+
+    this.handleOpen = this.handleOpen.bind(this);
+    this.renderBikes = this.renderBikes.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.fetchBikes();
+  }
+
+  handleOpen(id) {
+    this.setState({
+      ...this.state,
+      bikeModal: {
+        ...this.state.bikeModal,
+        open: true,
+        bike: id,
+      },
+    });
+  }
+
+  renderBikes(bikes) {
   const bikeRows = bikes.map(bike => (
     <TableRow selectable={false} key={bike.id}>
       <TableRowColumn>{friendlySize(bike.size)}</TableRowColumn>
@@ -18,57 +47,16 @@ const renderBikes = (bikes) => {
       <TableRowColumn>{bike.serial_number}</TableRowColumn>
       <TableRowColumn>{bike.state}</TableRowColumn>
       <TableRowColumn>{bike.claimed_by}</TableRowColumn>
-      <TableRowColumn><FlatButton label="Edit" primary  /></TableRowColumn>
+      <TableRowColumn><FlatButton label="Edit" primary onTouchTap={(e) => this.handleOpen(bike.id)} /></TableRowColumn>
     </TableRow>
     ));
+
   return bikeRows;
 }
 
-class BikeTableComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      bikes: [],
-      bikeModal: {
-        open: false,
-        bike: undefined,
-        editing: false,
-      },
-    };
-
-    this.handleEditBike = this.handleEditBike.bind(this);
-  }
-
-  componentDidMount() {
-    this.props.fetchBikes();
-  }
-
-  handleEditBike(bike) {
-    this.setState({
-      ...this.state,
-      bikeModal: {
-        open: true,
-        bike,
-        editing: true,
-      },
-    });
-  }
-
-  handleAddBike() {
-    this.setState({
-      ...this.state,
-      bikeModal: {
-        open: true,
-        bike: {},
-        editing: false,
-      },
-    });
-  }
-
   render() {
     if (this.props.bikes.fetched) {
-      const bikeRows = renderBikes(Object.values(this.props.bikes.entities));
+      const bikeRows = this.renderBikes(Object.values(this.props.bikes.entities));
       return (
         <div className="mdl-grid">
           <div className="mdl-cell mdl-cell--12-col">
@@ -98,6 +86,11 @@ class BikeTableComponent extends React.Component {
               </TableBody>
             </Table>
           </div>
+          <BikeModal
+            open={this.state.bikeModal.open}
+            bike={this.state.bikeModal.bike}
+            bikes={this.props.bikes.entities}
+          />
         </div>
       );
     }
@@ -114,9 +107,6 @@ const mapDispatchToProps = dispatch => ({
   fetchBikes: () => {
     dispatch(fetchBikes());
   },
-  setBike: (id) => {
-    dispatch(setBike(id));
-  },
 });
 
 const BikeTable = connect(mapStateToProps, mapDispatchToProps)(BikeTableComponent);

bikeshop_project/assets/js/bikes/reducers.js

@@ -17,7 +17,7 @@ export default handleActions({
   [setBikesFetchFailed]: (state, action) => ({
     ...state,
     fetchFailed: {
-      message: action.payload
-    }
+      message: action.payload,
+    },
   }),
 }, { entities: {}, isFetching: false, fetched: false, fetchFailed: undefined });

bikeshop_project/assets/js/bikes/sagas.js

@@ -1,5 +1,6 @@
 import { call, put, takeEvery, takeLatest } from 'redux-saga/effects';
-import { fetchBikes as fetchBikesAction, setBikes, setBikesIsFetching, setBikesFetched, setBikesFetchFailed } from './actions';
+import { fetchBikes as fetchBikesAction, setBikes, setBikesIsFetching, setBikesFetched,
+         setBikesFetchFailed, setBikeSaved, setBikeSaveFailed, setBikeIsSaving } from './actions';
 import { normalize } from 'normalizr';
 import * as schema from './schema';
 import Api from './services';
@@ -24,4 +25,13 @@ function* watchFetchBikes() {
   yield takeEvery(fetchBikesAction.toString(), fetchBikes);
 }
 
+// function *saveBike(action) {
+//   try {
+//     yield put({ type: setBikeIsSaving.toString(), payload: true });
+//     const bike = yield call(Api.saveBike(action.payload));
+//     yield put({ type: setBikes.toString(), payload: normalize([state])})
+//     yield put({ type: setBikeSaved, payload: true})
+//   }
+// }
+
 export default watchFetchBikes;

bikeshop_project/assets/js/bikes/services/index.js

@@ -21,6 +21,20 @@ const Api = {
       .then(data => data)
       .catch((error) => {
         console.log('request failed', error);
+        throw error;
+      });
+  },
+  saveBike(id) {
+    return fetch(`/api/v1/bike/${id}`, {
+      credentials: 'same-origin',
+      method: 'PUT',
+    })
+      .then(checkStatus)
+      .then(parseJson)
+      .then(data => data)
+      .catch((error) => {
+        console.log('request failed', error);
+        throw error;
       });
   },
 };