api posting

Author: alexeuler

Diff for: mobile/ReactNativeTutorial/app/api/index.js

@@ -7,12 +7,15 @@ const API_URL = __DEV__ ? 'http://localhost:3000/' : 'http://www.reactrails.com/
 function* apiRequest(url, method, payload) {
   let options = {
     method,
-    headers: { 'Accept': 'application/json', 'Content-Type': 'application/json'}
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      'X-Auth': 'tutorial_secret',
+    }
   };
   if (payload) options = {...options, body: JSON.stringify(payload)};
   const response = yield call(fetch, `${API_URL}${url}`, options);
-  const json = yield call(response.json.bind(response));
-  return json;
+  return yield call(response.json.bind(response));
 }
 
 function* getRequest(url) {
@@ -29,3 +32,10 @@ export function* fetchComments() {
   const commentSchema = new Schema('comments');
   return normalize(camelizedResponse, { comments: arrayOf(commentSchema) });
 }
+
+export function* postComment(payload) {
+  const response = yield* postRequest('comments.json', { comment: payload });
+  const camelizedResponse = _.mapKeys(_.camelCase, response);
+  const commentSchema = new Schema('comments');
+  return normalize(camelizedResponse, commentSchema);
+}

Diff for: mobile/ReactNativeTutorial/app/bundles/comments/components/Add/Add.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { View, Text } from 'react-native';
-import { FormLabel, FormInput } from 'react-native-elements'
+import { FormLabel, FormInput, Button } from 'react-native-elements'
 
 import withAddProps from '../../hocs/withAddProps'
 
@@ -14,9 +14,16 @@ type PropsType = {
 const Add = (props: PropsType) => (
   <View style={styles.container}>
     <FormLabel>Author name</FormLabel>
-    <FormInput onChangeText={(text) => {props.actions.updateForm({name: text})}}/>
+    <FormInput onChangeText={(text) => {props.actions.updateForm({author: text})}}/>
     <FormLabel>Comment</FormLabel>
-    <FormInput onChangeText={(text) => {props.actions.updateForm({comment: text})}}/>
+    <FormInput onChangeText={(text) => {props.actions.updateForm({ text })}}/>
+    <Button
+      raised
+      buttonStyle={styles.button}
+      icon={{name: 'send'}}
+      title='Send'
+      onPress={props.actions.createComment}
+    />
   </View>
 );
 

Diff for: mobile/ReactNativeTutorial/app/bundles/comments/components/Add/AddStyle.js

@@ -3,6 +3,11 @@ import { StyleSheet } from 'react-native';
 const styles = StyleSheet.create({
   container: {
   },
+
+  button: {
+    backgroundColor: "#4641B5",
+    marginTop: 20,
+  }
 });
 
 export default styles;

Diff for: mobile/ReactNativeTutorial/app/bundles/comments/sagas/index.js

@@ -1,17 +1,23 @@
 import { Alert } from 'react-native';
 import { takeLatest } from 'redux-saga';
-import { call, put } from 'redux-saga/effects';
+import { call, put, select } from 'redux-saga/effects';
+import { Actions as navigationActions } from 'react-native-router-flux';
+import { reduxUtils } from '../../../utils';
+import commentsStoreSelector from '../../../selectors/commentsStoreSelector';
+import commentFormSelector from '../../../selectors/commentFormSelector';
 
 import { actions as reduxActions } from '../../../reducers'
 import * as api from '../../../api';
 
 const FETCH = 'SAGA:COMMENTS:FETCH';
+const CREATE_COMMENT = 'SAGA:COMMENTS:CREATE';
 const UPDATE_FORM = 'SAGA:COMMENTS:UPDATE_FORM';
 
+
 function* fetchHandler() {
   try {
     const response = yield call(api.fetchComments);
-    yield put(reduxActions.createComments(response.entities))
+    yield put(reduxActions.createComments(response.entities.comments))
   } catch (e) {
     console.log(e);
     yield call(Alert.alert, 'Error', 'Could not connect to server', [{text: 'OK'}]);
@@ -22,6 +28,7 @@ function* fetchSaga () {
   yield* takeLatest(FETCH, fetchHandler);
 }
 
+
 function* updateFormHandler(action) {
   yield put(reduxActions.updateCommentForm(action.payload));
 }
@@ -30,15 +37,44 @@ function* updateFormSaga () {
   yield* takeLatest(UPDATE_FORM, updateFormHandler);
 }
 
+
+function* createCommentHandler() {
+  const state = yield select();
+  const commentsStore = commentsStoreSelector(state);
+  const tempId = reduxUtils.getNewId(commentsStore);
+
+  const comment = commentFormSelector(state).merge({ id: tempId }).delete('meta');
+  const reduxComment = {[tempId]: comment.toJS()};
+  yield put(reduxActions.createComments(reduxComment));
+  yield call(navigationActions.pop);
+  try {
+    const response = yield call(api.postComment, comment);
+    yield put(reduxActions.createComments(response.entities.comments));
+    yield put(reduxActions.resetCommentForm());
+  } catch (e) {
+    console.log(e);
+    yield call(Alert.alert, 'Error', 'Could not post your comment', [{text: 'OK'}]);
+  } finally {
+    yield put(reduxActions.removeComment(tempId));
+  }
+}
+
+function* createCommentSaga () {
+  yield* takeLatest(CREATE_COMMENT, createCommentHandler);
+}
+
 export default [
   fetchSaga,
   updateFormSaga,
+  createCommentSaga
 ];
 
 const fetch = () => ({ type: FETCH });
 const updateForm = (payload) => ({ type: UPDATE_FORM, payload });
+const createComment = (payload) => ({ type: CREATE_COMMENT, payload });
 
 export const actions = {
   fetch,
   updateForm,
+  createComment
 };

Diff for: mobile/ReactNativeTutorial/app/reducers/commentsStoreReducer.js

@@ -1,6 +1,7 @@
 import { fromJS } from 'immutable';
 
 const CREATE = 'COMMENTS_STORE:CREATE';
+const REMOVE = 'COMMENTS_STORE:REMOVE';
 
 export const initialState = fromJS({
   meta: {}
@@ -10,6 +11,11 @@ const create = (state, action) => {
   return state.merge(action.entities);
 };
 
+const remove = (state, action) => {
+  return state.delete(action.id);
+};
+
+
 export default (state, action) => {
   if (!state) {
     return initialState;
@@ -18,6 +24,8 @@ export default (state, action) => {
   switch (action.type) {
     case CREATE:
       return create(state, action);
+    case REMOVE:
+      return remove(state, action);
     default:
       return state;
   }
@@ -27,6 +35,11 @@ const createComments = (entities) => {
   return {type: CREATE, entities};
 };
 
+const removeComment = (id) => {
+  return {type: REMOVE, id };
+};
+
 export const actions = {
   createComments,
+  removeComment,
 };

Diff for: mobile/ReactNativeTutorial/app/utils/index.js

@@ -0,0 +1,3 @@
+import * as redux from './redux';
+
+export const reduxUtils = redux;

Diff for: mobile/ReactNativeTutorial/app/utils/redux.js

@@ -0,0 +1,13 @@
+import _ from 'lodash/fp';
+
+export const getNewId = (store) => {
+  const tempPrefix = 'temp:';
+  const tempRegex = new RegExp(`^${tempPrefix}`);
+  const maxId = store
+    .keySeq()
+    .filter(key => tempRegex.test(key))
+    .map(key => parseInt(key.substring(tempPrefix.length), 10))
+    .max();
+  const newId = _.isNil(maxId) ? 0 : maxId + 1;
+  return `temp${newId}`;
+};