0
\$\begingroup\$

So i want to be able to make the following method inside of componentWillMount more robust, and essentially put this method inside an actions function.

Post.js

class Post extends Component {

    constructor(props){
        super(props);

        this.state = {
            description: '',
            username: '',
        }

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    // I want to use the method in this component inside of my actions file in redux, now sure how to do this though. 
    componentWillMount(){
        // gets the current userId. 
        const currentUserId = this.props.userId
       // gets the users
        const collection = fire.collection('users');
        collection.get().then(snapshot => {     
            snapshot.forEach(doc => { 
                // if user id matches the logged in user id select the data
                if(doc.data().uid === currentUserId){
                    this.setState({
                        username: doc.data().username,
                    })    

                }       
            });

        });



    }
    handleSubmit = (e) => {
       e.preventDefault();
       let description = this.state.description
       let username = this.state.username
       const post = {
          description,
          username
       }

      this.props.createPost(post)
      this.props.history.push('/dashboard')

    }

Actions.js

// the username and the data is being passed in this function
export const createPost = (post) => {
    return (dispatch, getState) => {
        // async call to the database
        fire.collection('posts').add({
            description: post.description,
            username: post.username,
            createdAt: new Date()
        }).then(() => {
            dispatch({type: 'CREATE_POST', post})
        }).catch((err) => {
            dispatch({type: 'CREATE_POST_ ERROR', err})
        })
    }
}

export const CurrentUser = () => dispatch => {

    // this is ignoring the username set in firestore
    // firebaseAuth = firebase.auth() so it doesn't reference the 
    //firestore users



    firebaseAuth.onAuthStateChanged((user) => {
        if (user) {
            dispatch({
                type: SET_USER, 
                payload: user
            })
            // console.log(user)
        }
      });

}

// Need a way to get the currentUser without having to loop through the 
// users and matching it with the currentUser uid.

CurrentUser is being called here, i do

App.js

class App extends Component {

    constructor(props){
        super(props)
        this.state = {
            loading:true
        }
    }
    componentWillMount() {
        this.props.CurrentUser();


        this.setState({
            loading:false
        })
    }
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.