|
<ScrollView contentContainerStyle={styles.container}> |
|
<View style={{flex: 1, alignItems: 'center'}}> |
|
{ |
|
this.state.posts.map((post, index) => ( |
|
<Card key={index} style={styles.cardStyle}> |
|
{/* Post body */} |
|
<Text style={styles.postBody}> |
|
{post.postContent} |
|
</Text> |
|
<Text style={styles.postUsername}> |
|
{post.postOwnerUsername} |
|
</Text> |
|
{/* Like button functionality */} |
|
<View style={styles.cardFooterStyle}> |
|
{/* Logged in user liked this post */} |
|
{ |
|
post.likes.items.length !== 0 && |
|
post.likes.items.filter( |
|
obj => obj.likeOwnerId === loggedInUser |
|
).length === 1 && |
|
<View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}> |
|
<TouchableOpacity |
|
onPress={() => this.toggleLikePost(post)}> |
|
<Icon |
|
name='md-heart' |
|
style={{ fontSize: 55, color: '#fb7777' }} |
|
/> |
|
</TouchableOpacity> |
|
</View> |
|
} |
|
{/* Logged in user did not like this post */} |
|
{ |
|
post.likes.items.length !== 0 && |
|
post.likes.items.filter( |
|
obj => obj.likeOwnerId === loggedInUser |
|
).length === 0 && |
|
<View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}> |
|
<TouchableOpacity |
|
onPress={() => this.toggleLikePost(post)}> |
|
<Icon |
|
name='md-heart' |
|
style={{ fontSize: 55, color: '#69ff' }} |
|
/> |
|
</TouchableOpacity> |
|
</View> |
|
} |
|
{/* Post has no likes yet */} |
|
{ |
|
post.likes.items.length === 0 && |
|
<View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}> |
|
<TouchableOpacity |
|
onPress={() => this.toggleLikePost(post)}> |
|
<Icon |
|
name='md-heart' |
|
style={{ fontSize: 55, color: '#69ff' }} |
|
/> |
|
</TouchableOpacity> |
|
</View> |
|
} |
|
{/* Show delete Icon if logged in user is the post owner */} |
|
{ post.postOwnerId === loggedInUser && |
|
<Icon |
|
name='ios-trash' |
|
onPress={() => this.deletePostAlert(post)} |
|
/> |
|
} |
|
</View> |
|
</Card> |
|
)) |
|
} |
|
</View> |
|
</ScrollView> |
