Comments won't reload with new props? - reactjs

Question

I'm having some trouble with updating some props. My app has a feed screen (listView) of posts (listItems). I’m also using redux.
If I click on a post, it'll take me to the comments screen. As it does so, it passes through the props of the listItem and fully displays the post text, image, author etc.
When in the commentScreen, If I click on the content (image/text), it'll take me through to the editPost screen. As it does this, it takes the props (image/text/uid) and populates the textInput and image field so the user can edit it. When done, I can click the saveEdit button. This will take the text, image and uid and update the post within firebase via an action. It will also pop() the screen and take me back to the commentsScreen.
The problem is, the edited post can't be seen. The original text/image is still there. If I look in my Firebase console, I can see that the edit HAS been saved.
If I pop the commentsScreen and go back to the feed, it's up to date. I can see that the post has been successfully edited. If I then click on the post again, it'll take me back to the commentsScreen, showing the updated post.
I guess this is because the listView in the feed itself is watching the firebase reference for the posts? and as such the post in the commentScreen won't change until I revisit the feed so it can update?
How can I work around this? Do I need to be doing something with componentWillUpdate or componentWillReceiveProps or something?
I have tried firing different get requests to firebase at different points but I've had no success so far.
This is my Feed:
class FeedComponent extends Component {
componentWillMount() {
this.props.postsFetch();
this.createDataSource(this.props);
}
componentWillReceiveProps(nextProps) {
// nextProps are the next set of props that this component
// will be rendered with
// this.props is still the old set of props
this.createDataSource(nextProps);
}
createDataSource({ posts }) {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.dataSource = ds.cloneWithRows(posts);
}
renderRow(posts) {
return <PostListItem posts={posts} />;
}
render() {
return (
<ListView
{...this.props}
enableEmptySections
removeClippedSubviews={false}
dataSource={this.dataSource}
renderRow={this.renderRow}
style={{ backgroundColor: '#D8D8D8' }}
/>
);
}
}
const mapStateToProps = state => {
const posts = _.map(state.feed, (val, uid) => {
return { ...val, uid };
});
return { posts };
};
export default connect(mapStateToProps, { postsFetch })(FeedComponent);
This then performs this action:
export const postsFetch = () => {
return (dispatch) => {
firebase.database().ref('/social/posts')
.on('value', snapshot => {
dispatch({ type: POSTS_FETCH_SUCCESS, payload: snapshot.val() });
});
};
};
and dispatches it to the reducer.
Here is the listItem:
#withNavigation
class PostItem extends Component {
state = {
result: ''
};
goToComments() {
this.props.navigation
.getNavigator('root')
.push(Router.getRoute('comments', { posts: this.props.posts }));
}
render() {
const {
text,
author,
vote_count,
comment_count,
image,
created_at
} = this.props.posts;
const fromNow = moment(created_at).fromNow();
return (
<Card style={styles.cardStyle}>
<TouchableOpacity onPress={this.goToComments.bind(this)}>
//Text/Image component using props
</TouchableOpacity>
</Card>
);
}
}
There, you can see that there's an goToComments function, it passes the post props
This is the comment screen:
class Comments extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<PostSection
post={this.props.route.params.posts}
/>
</View>
);
}
}
This feeds the props into the postSection component which displays the post in the comments screen. It is this that doesn't update after I go to the edit screen, make the edit and come back:
#withNavigation
class PostSection extends Component {
editPost() {
this.props.startEdit(this.props.post);
this.props.navigation
.getNavigator('root')
.push(Router.getRoute('editPost'));
}
renderImage(image) {
if (image) {
return (
<View style={styles.imageContainer}>
<Image
style={styles.imageSize}
source={{ uri: image }}
/>
</View>
);
}
}
renderText(text) {
if (text) {
return <PostText text={text} />;
}
}
renderPost(text, image) {
// if (POST BELONGS TO CURRENT USER) {
return (
<TouchableOpacity onPress={this.editPost.bind(this)}>
{this.renderText(text)}
{this.renderImage(image)}
</TouchableOpacity>
);
}
render() {
const {
text,
author,
vote_count,
comment_count,
image,
created_at
} = this.props.post;
const fromNow = moment(created_at).fromNow();
return (
<View>
<TopBar
author={author}
fromNow={fromNow}
/>
{this.renderPost(text, image)}
<BottomBar
voteCount={vote_count}
commentCount={comment_count}
/>
</View>
);
}
}
export default connect(null, { startEdit })(PostSection);