create new posts from the app

bleonard · bleonard · commit 6a92aa8aced0 · 2015-09-16T22:59:07.000-07:00
diff --git a/App/Actions/PostActions.js b/App/Actions/PostActions.js
@@ -15,6 +15,19 @@ var PostActions = {
         });
       }
     });
+  },
+
+  createPost: function(content, callback) {
+    PostService.createPost(content, function(error, postProps) {
+      if(callback) callback(error);
+
+      if (!error) {
+        Dispatcher.dispatch({
+          actionType: AppConstants.POST_ADDED,
+          postProps: postProps
+        });
+      }
+    });
   }
 };
 
diff --git a/App/Api/PostService.js b/App/Api/PostService.js
@@ -1,10 +1,13 @@
 var client = require('../Api/HTTPClient')
 
 var PostService = {
-  parsePost: function(data) {
+  parsePost: function(response) {
+    if (!response) return null;
+
     return {
-      id: data.id,
-      content: data.content
+      id: response.id,
+      content: response.content,
+      username: response.username
     };
   },
 
@@ -24,7 +27,14 @@ var PostService = {
       var listProps = PostService.parsePosts(response);
       callback(error, listProps);
     });
-  }
+  },
+
+  createPost: function(content, callback) {
+    client.post("api/posts", {content: content}, function(error, response) {
+      var postProps = PostService.parsePost(response);
+      callback(error, postProps);
+    });
+  },
 };
 
 module.exports = PostService;
diff --git a/App/Components/TextInput.js b/App/Components/TextInput.js
@@ -0,0 +1,38 @@
+var React = require('react-native')
+
+var {
+  PixelRatio
+} = React;
+
+var cssVar = require('../Lib/cssVar');
+
+var TextInput = React.createClass({
+  propTypes: React.TextInput.propTypes,
+
+  setNativeProps() {
+    var input = this.refs.input;
+    input.setNativeProps.apply(input, arguments);
+  },
+  render() {
+    return (
+      <React.TextInput
+        {...this.props}
+        ref="input"
+        style={[styles.input, this.props.style || {}]}
+      />
+    );
+  }
+})
+
+var styles = React.StyleSheet.create({
+  input: {
+    borderWidth: 1 / PixelRatio.get(),
+    borderColor: cssVar('gray50'),
+    padding: 10,
+    fontFamily: cssVar('fontRegular'),
+    color: cssVar('gray90'),
+    fontSize: 8                           // make it small to know it's not set
+  }
+});
+
+module.exports = TextInput;
diff --git a/App/Constants/AppConstants.js b/App/Constants/AppConstants.js
@@ -9,5 +9,6 @@ module.exports = keyMirror({
   LAUNCH_ROUTE_PATH: null,
   NETWORK_ACTIVITY: null,
   NAVBAR_UPDATE: null,
-  POST_LIST_UPDATED: null
+  POST_LIST_UPDATED: null,
+  POST_ADDED: null
 });
diff --git a/App/Lib/CSSVarConfig.js b/App/Lib/CSSVarConfig.js
@@ -7,6 +7,7 @@ var {
 
 module.exports = {
   gray90: '#323A3B',
+  gray50: '#828A8B',
   gray30: '#B4B9B9',
   gray20: '#CFD2D3',
   gray10: '#EBECEC',
diff --git a/App/Mixins/AuthHelper.js b/App/Mixins/AuthHelper.js
@@ -2,7 +2,6 @@ var React = require('react-native');
 var {
   View,
   StyleSheet,
-  TextInput,
   PixelRatio,
   TouchableWithoutFeedback
 } = React;
@@ -12,6 +11,7 @@ var cssVar = require('../Lib/cssVar');
 var AppActions = require('../Actions/AppActions');
 var Text       = require('../Components/Text');
 var Button     = require('../Components/Button');
+var TextInput  = require('../Components/TextInput');
 
 var AuthHelper = {
 
diff --git a/App/Mixins/KeyboardListener.js b/App/Mixins/KeyboardListener.js
@@ -0,0 +1,39 @@
+var React = require('react-native');
+var KeyboardEvents = require('react-native-keyboardevents');
+var KeyboardEventEmitter = KeyboardEvents.Emitter;
+
+var KeyboardListener = {
+  getInitialState: function() {
+    return {
+      keyboardSpace: 0
+    };
+  },
+
+  isKeyboardVisible: function() {
+    return this.state.keyboardSpace > 0;
+  },
+
+  updateKeyboardSpace: function(frames) {
+    if (this.isMounted() && frames && frames.end) {
+      this.setState({keyboardSpace: frames.end.height});
+    }
+  },
+
+  resetKeyboardSpace: function() {
+    if (this.isMounted()) {
+      this.setState({keyboardSpace: 0});
+    }
+  },
+
+  componentDidMount: function() {
+    KeyboardEventEmitter.on(KeyboardEvents.KeyboardDidShowEvent, this.updateKeyboardSpace);
+    KeyboardEventEmitter.on(KeyboardEvents.KeyboardWillHideEvent, this.resetKeyboardSpace);
+  },
+
+  componentWillUnmount: function() {
+    KeyboardEventEmitter.off(KeyboardEvents.KeyboardDidShowEvent, this.updateKeyboardSpace);
+    KeyboardEventEmitter.off(KeyboardEvents.KeyboardWillHideEvent, this.resetKeyboardSpace);
+  },
+};
+
+module.exports = KeyboardListener;
diff --git a/App/Navigation/Router.js b/App/Navigation/Router.js
@@ -43,6 +43,8 @@ var LoggedIn = {
           switch(path) {
             case 'settings':
               return Routes.Settings();
+            case 'post':
+              return Routes.CreatePost();
             default:
               return null;
           };
diff --git a/App/Navigation/Routes.js b/App/Navigation/Routes.js
@@ -18,9 +18,13 @@ var Routes = {
     return {
       component: require('../Screens/Dashboard/Dashboard'),
       title: 'Dashboard',
-      navRight: {
+      navLeft: {
         subPath: 'settings',
         label: 'Me' // TODO: icon font
+      },
+      navRight: {
+        subPath: 'post',
+        label: '+' // TODO: icon font
       }
     };
   },
@@ -31,6 +35,16 @@ var Routes = {
       title: 'Settings'
     };
   },
+
+  CreatePost: function() {
+    return {
+      component: require('../Screens/CreatePost'),
+      title: 'New Post',
+      navBack: {
+        label: 'Cancel'
+      }
+    };
+  },
 };
 
 module.exports = Routes;
diff --git a/App/Screens/CreatePost.js b/App/Screens/CreatePost.js
@@ -0,0 +1,79 @@
+var React = require('react-native');
+var {
+  View,
+  StyleSheet
+} = React;
+
+var TextInput   = require('../Components/TextInput');
+var Button      = require('../Components/Button');
+var PostActions = require('../Actions/PostActions');
+var AppActions  = require('../Actions/AppActions');
+
+var KeyboardListener = require('../Mixins/KeyboardListener');
+
+var CreatePost = React.createClass({
+  mixins: [KeyboardListener],
+
+  getInitialState: function() {
+    return {
+      content: ''
+    };
+  },
+
+  onSubmitButton: function() {
+    PostActions.createPost(this.state.content, function(error) {
+      if (error) {
+        // TODO: better error handling
+        alert(error.message);
+      }
+      else {
+        AppActions.goBack(this.props.navigator);
+      }
+    }.bind(this));
+  },
+
+  render: function() {
+    return (
+      <View style={styles.flex}>
+        <TextInput ref="content"
+          placeholder={"What do you have to say for yourself?"}
+          keyboardType="default"
+          multiline={true}
+          autoFocus={true}
+          style={styles.input}
+          enablesReturnKeyAutomatically={true}
+          returnKeyType='done'
+          onChange={(event) => this.state.content = event.nativeEvent.text }
+        />
+        <View style={styles.footer}>
+          <View style={styles.flex} />
+          <Button type='blue' style={styles.button} onPress={this.onSubmitButton}>
+            Submit
+          </Button>
+        </View>
+        <View style={{height: this.state.keyboardSpace}}></View>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    backgroundColor: 'white',
+    padding: 20
+  },
+  button: {
+    // width: 150
+  },
+  footer: {
+    padding: 10,
+    flexDirection: 'row'
+  }
+});
+
+module.exports = CreatePost;
diff --git a/App/Stores/PostListStore.js b/App/Stores/PostListStore.js
@@ -10,6 +10,12 @@ var CHANGE_EVENT = 'change';
 // TODO: Immutable?
 var _hash = {};
 
+function addModel(key, props) {
+  if(!_hash[key]) _hash[key] = [];
+  var model = new Post(props);
+  _hash[key].unshift(model);
+}
+
 function setList(key, list) {
   var models = [];
   for(var i in list) {
@@ -44,6 +50,10 @@ Dispatcher.register(function(action) {
       setList(action.listProps.username, action.listProps.posts);
       ModelStore.emitChange(action.listProps.username);
       break;
+    case AppConstants.POST_ADDED:
+      addModel(action.postProps.username, action.postProps);
+      ModelStore.emitChange(action.postProps.username);
+      break;
     // TODO: save
     default:
       // no op
diff --git a/ios/Sample.xcodeproj/project.pbxproj b/ios/Sample.xcodeproj/project.pbxproj
@@ -24,6 +24,7 @@
 		146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
 		684860A3F12E466838065EED /* libPods.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A565388F7CDBDB0548B5DC8D /* libPods.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
+		D339AEF21BAA809100CFA651 /* libRNKeyboardEvents.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D339AEF01BAA808800CFA651 /* libRNKeyboardEvents.a */; };
 		D374ADC51BA929C500453203 /* libRNKeychain.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D374ADC41BA929BA00453203 /* libRNKeychain.a */; };
 		D374ADD31BA9336E00453203 /* EnvironmentManager.m in Sources */ = {isa = PBXBuildFile; fileRef = D374ADD21BA9336E00453203 /* EnvironmentManager.m */; };
 /* End PBXBuildFile section */
@@ -106,6 +107,13 @@
 			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
 			remoteInfo = RCTText;
 		};
+		D339AEEF1BAA808800CFA651 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = D339AEE11BAA808800CFA651 /* RNKeyboardEvents.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = F12AFB9B1ADAF8F800E0535D;
+			remoteInfo = RNKeyboardEvents;
+		};
 		D374ADC31BA929BA00453203 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = D374ADB51BA929B900453203 /* RNKeychain.xcodeproj */;
@@ -139,6 +147,7 @@
 		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
 		A565388F7CDBDB0548B5DC8D /* libPods.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libPods.a; sourceTree = BUILT_PRODUCTS_DIR; };
+		D339AEE11BAA808800CFA651 /* RNKeyboardEvents.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNKeyboardEvents.xcodeproj; path = "../node_modules/react-native-keyboardevents/RNKeyboardEvents.xcodeproj"; sourceTree = "<group>"; };
 		D374ADB51BA929B900453203 /* RNKeychain.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNKeychain.xcodeproj; path = "../node_modules/react-native-keychain/RNKeychain.xcodeproj"; sourceTree = "<group>"; };
 		D374ADD21BA9336E00453203 /* EnvironmentManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = EnvironmentManager.m; path = Sample/EnvironmentManager.m; sourceTree = "<group>"; };
 		F8DE0F0169FA03E7C6B1C51E /* Pods.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = Pods.debug.xcconfig; path = "Pods/Target Support Files/Pods/Pods.debug.xcconfig"; sourceTree = "<group>"; };
@@ -156,6 +165,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				D339AEF21BAA809100CFA651 /* libRNKeyboardEvents.a in Frameworks */,
 				D374ADC51BA929C500453203 /* libRNKeychain.a in Frameworks */,
 				146834051AC3E58100842450 /* libReact.a in Frameworks */,
 				00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
@@ -298,6 +308,7 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
+				D339AEE11BAA808800CFA651 /* RNKeyboardEvents.xcodeproj */,
 				D374ADB51BA929B900453203 /* RNKeychain.xcodeproj */,
 				146833FF1AC3E56700842450 /* React.xcodeproj */,
 				00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */,
@@ -344,6 +355,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		D339AEE21BAA808800CFA651 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				D339AEF01BAA808800CFA651 /* libRNKeyboardEvents.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		D374ADB61BA929B900453203 /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -459,6 +478,10 @@
 					ProductGroup = 146834001AC3E56700842450 /* Products */;
 					ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;
 				},
+				{
+					ProductGroup = D339AEE21BAA808800CFA651 /* Products */;
+					ProjectRef = D339AEE11BAA808800CFA651 /* RNKeyboardEvents.xcodeproj */;
+				},
 				{
 					ProductGroup = D374ADB61BA929B900453203 /* Products */;
 					ProjectRef = D374ADB51BA929B900453203 /* RNKeychain.xcodeproj */;
@@ -543,6 +566,13 @@
 			remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		D339AEF01BAA808800CFA651 /* libRNKeyboardEvents.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRNKeyboardEvents.a;
+			remoteRef = D339AEEF1BAA808800CFA651 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		D374ADC41BA929BA00453203 /* libRNKeychain.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
diff --git a/package.json b/package.json
