search

SimCoderYoutube / InstagramClone

Instagram Clone React Native Tutorial 2021 👨‍💻 I'll show you how you can do this in the simplest way and terms possible. By the end of this series you'll have learned how the big companies do it and will be able to do the same, you not only will be able to do this app, but you'll be able to put what you learn into your very own projects! In this series, we use React Native with Expo to quickly deploy the project. We use firebase for all our microservice needs like the auth system, database, storage, amongst others. firebase, redux, react native, javascript, expo. In this series, we'll use all of them and you'll learn them by doing an iconic app. Welcome to this Simcoder project and make an Instagram Clone!
Apache License 2.0
745 stars 294 forks source link

Comments and Profile not reloading #24

Open Elie-Bsaibes opened 3 years ago

Elie-Bsaibes commented 3 years ago

Hello guys! I'm facing that when I submit a comment, it doesn't appear automatically with the previous ones, I should go back to feeds then to comments so it appears. My second issue is that when I upload a picture It doesn't appear automatically on the profile, I should refresh the app or log out and re-login to see it. Can anyone help me with these issues, please? Thanks in advance!

codetomatot commented 3 years ago

I think that's just how it is made. I have the same thing. I dont think there is a solution

SimCoderYoutube commented 3 years ago

Hi!

Right now the auto reload is not implemented in the project, however it is not hard to do. Just rerun the fetch function and it should update both for the comments and profile.

Elie-Bsaibes commented 3 years ago

Hi!

Right now the auto reload is not implemented in the project, however it is not hard to do. Just rerun the fetch function and it should update both for the comments and profile.

Thank you Simcoder for answering! But the fetch is happening in the useEffect(), isn't it supposed to re-fetch automatically when the component is updated?

EthanToews commented 2 years ago

My second issue is that when I upload a picture It doesn't appear automatically on the profile, I should refresh the app or log out and re-login to see it. Can anyone help me with these issues, please? Thanks in advance!

I managed to fix this by connecting redux in the save.js then binding the fetchUserPosts() to the mapDispatchProps and calling the fetchUserPosts() 

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchUserPosts } from '../../redux/actions';

function Save(props){
...
}

const mapDispatchProps = (dispatch) => bindActionCreators({ fetchUserPosts }, dispatch);
export default connect(null, mapDispatchProps)(Save);

Then before you props.navigation.popToTop() you add props.fetchUserPosts() to ensure the state is updated. After we post you must also add the props.posts to your useEffect in the profile page. to ensure it updates when the posts state changes

useEffect(() => { .... }, [props.posts] )

This fixed that issue for me, I hope it can help others when they are coming across this issue.