Merge branch 'feature/sharing_post' into 'develop'

Feature/sharing post See merge request snsmobile/UserHybrid!25
HeligPfleigh · Apr 27, 2018 · ac90cdc · ac90cdc
2 parents 0a18da0 + deb5629
commit ac90cdc
Show file tree

Hide file tree

Showing 13 changed files with 341 additions and 167 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -82,7 +82,7 @@
     "redux-form": "7.3.0",
     "redux-thunk": "2.2.0",
     "rxjs": "^5.5.8",
-    "subscriptions-transport-ws": "^0.9.7",
+    "subscriptions-transport-ws": "^0.9.8",
     "validator": "9.4.1"
   }
 }
diff --git a/src/components/FeedCard/FeedCard.js b/src/components/FeedCard/FeedCard.js
@@ -9,6 +9,7 @@ import { colors } from "../../constants";
 import FeedCardHeader from "./FeedCardHeader";
 import FeedCardBottom from "./FeedCardBottom";
 import FeedCardPhotos from "../Photos/FeedCardPhotos";
+import SharedPost from "../Post/SharedPost";
 
 const styles = StyleSheet.create({
   container: {
@@ -36,6 +37,8 @@ const styles = StyleSheet.create({
   }
 });
 
+const emptyFn = () => {};
+
 @connect(
   ({ common, nav }) => ({
     nav: nav,
@@ -44,6 +47,10 @@ const styles = StyleSheet.create({
   dispatch => ({ dispatch })
 )
 class FeedCard extends Component {
+  static defaultProps = {
+    onToggleSharingModal: emptyFn,
+  }
+
   _handlePressContent = () => {
     const { _id, totalComments } = this.props;
     this.props.dispatch(
@@ -59,7 +66,8 @@ class FeedCard extends Component {
 
   render(){
     const { _id, messagePlainText, author, isLiked, totalComments,
-      totalLikes, createdAt, user, building, photos } = this.props;
+      totalLikes, createdAt, user, building,
+      photos, sharing, onToggleSharingModal } = this.props;
 
     const displayText = messagePlainText.length > 300 ? `${messagePlainText.substring(0, 300)}...` : messagePlainText;
     return (
@@ -74,10 +82,17 @@ class FeedCard extends Component {
         <CardItem cardBody style={styles.contentContainer}>
           <TouchableOpacity style={styles.touchableContent} onPress={this._handlePressContent}>
             <Text style={styles.textContent}>{displayText}</Text>
-            <FeedCardPhotos photos={photos}/>
+            <FeedCardPhotos photos={photos} height={300}/>
+            { sharing ? <SharedPost postID={sharing._id}/> : null }
           </TouchableOpacity>
         </CardItem>
-        <FeedCardBottom postID={_id} isLiked={isLiked} totalComments={totalComments} totalLikes={totalLikes} />
+        <FeedCardBottom
+          postID={_id}
+          isLiked={isLiked}
+          totalComments={totalComments}
+          totalLikes={totalLikes}
+          onToggleSharingModal={onToggleSharingModal}
+          handlePressComment={this._handlePressContent} />
       </Card>
     );
   }

diff --git a/src/components/FeedCard/FeedCardBottom.js b/src/components/FeedCard/FeedCardBottom.js
@@ -3,8 +3,6 @@ import { CardItem, Text } from "native-base";
 import { StyleSheet, TouchableOpacity } from "react-native";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 import { graphql, compose } from "react-apollo";
-import { NavigationActions } from "react-navigation";
-import { connect } from "react-redux";
 
 import { colors } from "../../constants";
 import LIKE_POST_MUTATION from "../../graphql/mutations/likePost";
@@ -31,14 +29,9 @@ const styles = StyleSheet.create({
 
 const ICON_SIZE = 20;
 
+const emptyFn = () => {};
+
 @compose(
-  connect(
-    ({ common, nav }) => ({
-      nav: nav,
-      orientation: common.orientation
-    }),
-    dispatch => ({ dispatch })
-  ),
   graphql(LIKE_POST_MUTATION, { name: "unlikePostMutation"}),
   graphql(UNLIKE_POST_MUTATION, { name: "likePostMutation" }),
 )
@@ -52,6 +45,11 @@ class FeedCardBottom extends Component{
     };
   }
 
+  static defaultProps = {
+    handlePressComment: emptyFn,
+    onToggleSharingModal: emptyFn,
+  }
+
   _handleLike = async () => {
     const { isLiked, totalLikes } = this.state;
     const { postID, likePostMutation, unlikePostMutation } = this.props;
@@ -82,19 +80,8 @@ class FeedCardBottom extends Component{
     }
   }
 
-  _handlePressComment = () => {
-    const { postID, totalComments } = this.props;
-    this.props.dispatch(NavigationActions.navigate({
-      routeName: "PostDetail",
-      params: {
-        postID: postID,
-        limit: totalComments,
-      }
-    }));
-  }
-
   render(){
-    const { totalComments } = this.props;
+    const { totalComments, handlePressComment, onToggleSharingModal, postID } = this.props;
     const { isLiked, totalLikes } = this.state;
     return (
       <CardItem style={styles.container}>
@@ -103,12 +90,12 @@ class FeedCardBottom extends Component{
           <Text style={styles.buttonText}> {totalLikes} </Text>
         </TouchableOpacity>
 
-        <TouchableOpacity style={styles.button} onPress={this._handlePressComment}>
+        <TouchableOpacity style={styles.button} onPress={() => handlePressComment()}>
           <MaterialCommunityIcons name="comment-processing-outline" size={ICON_SIZE} color={colors.LIGHT_GRAY}/>
           <Text style={styles.buttonText}> {totalComments} </Text>
         </TouchableOpacity>
 
-        <TouchableOpacity style={styles.button}>
+        <TouchableOpacity style={styles.button} onPress={() => onToggleSharingModal(true, postID)}>
           <MaterialCommunityIcons name="share" size={ICON_SIZE} color={colors.LIGHT_GRAY}/>
         </TouchableOpacity>
       </CardItem>

diff --git a/src/components/Photos/FeedCardPhotos.js b/src/components/Photos/FeedCardPhotos.js
@@ -1,34 +1,24 @@
 import React, { Component } from "react";
-import { View, Text, StyleSheet, Image } from "react-native";
+import { View, Text, Image } from "react-native";
 
 import { colors } from "../../constants";
 
-const styles = StyleSheet.create({
-  singleImageContainer: {
-    width: "100%",
-    height: 300,
-    margin: 2,
-  },
-  multiImagesContainer: {
-    height: 300,
-    width:"100%",
-  },
-});
-
 class FeedCardPhotos extends Component{
   render(){
-    const { photos } = this.props;
+    const { photos, height } = this.props;
 
     if (!photos || !photos.length) { return null; }
 
     if (photos.length === 1) {
-      return <Image source={{uri: JSON.parse(photos[0]).URL}} style={styles.singleImageContainer}/>;
+      return <Image source={{uri: JSON.parse(photos[0]).URL}} style={{height}}/>;
     }
 
     if (photos.length === 2) {
       return (
-        <View style={styles.multiImagesContainer}>
-          <Image source={{uri: JSON.parse(photos[0]).URL}} style={{width: "100%", height: "60%", margin: 2}}/>
+        <View style={{margin: 2, height}}>
+          <Image
+            source={{uri: JSON.parse(photos[0]).URL}}
+            style={{width: "100%", height: "60%", margin: 2}}/>
           <View style={{width: "100%", height: "40%", margin: 2, backgroundColor: colors.LIGHT_GRAY, justifyContent:"center", alignItems:"center"}}>
             <Text style={{color: colors.WHITE, fontSize: 20}}> +1 </Text>
           </View>
@@ -37,10 +27,14 @@ class FeedCardPhotos extends Component{
     }
 
     return (
-      <View style={styles.multiImagesContainer}>
-        <Image source={{uri: JSON.parse(photos[0]).URL}} style={{width: "100%", height: "60%", margin: 2}}/>
+      <View style={{margin: 2, height}}>
+        <Image
+          source={{uri: JSON.parse(photos[0]).URL}}
+          style={{width: "100%", height: "60%", margin: 2}}/>
         <View style={{width: "100%", height: "40%", margin: 2, flexDirection:"row"}}>
-          <Image source={{uri: JSON.parse(photos[1]).URL}} style={{width: "60%", height: "100%"}}/>
+          <Image
+            source={{uri: JSON.parse(photos[1]).URL}}
+            style={{width: "60%", height: "100%"}}/>
           <View style={{width: "40%", height: "100%", backgroundColor: colors.LIGHT_GRAY, justifyContent:"center", alignItems:"center"}}>
             <Text style={{color: colors.WHITE, fontSize: 20}}> +{photos.length - 2} </Text>
           </View>

diff --git a/src/components/Post/PostFeedBack.js b/src/components/Post/PostFeedBack.js