javascriptreactjsfirebasereactfire

Save edited data to firebase using reactjs


I am creating an app where the user data are registered using reactjs in frontend and firebase as a backend. I could save data to firebase. I could edit and delete the data but could not saved edited data to firebase. What should I do to edit data? I used child_changed but still did not work.

export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
        userInfo:userInfo
      }
    this.userRef = new Firebase('https://***.firebaseio.com/users/');
    this.createUser = this.createUser.bind(this);
    this.saveUser = this.saveUser.bind(this);
    this.deleteUser = this.deleteUser.bind(this);

  }

  loadData(){
    this.userRef.on('value', snap => {
      let userInfo = [];
      snap.forEach( data => {
        let userData = data.val();
        userData.id = data.name();
        userInfo.push(userData);
      });
      this.setState({ userInfo });
    });

    this.userRef.on('child_removed', (dataSnapshot) =>{
        delete this.state.userInfo[dataSnapshot.key()];
        this.setState({ userInfo: this.state.userInfo });
    });

  }

  componentDidMount(){
    this.loadData();
  }

  createUser(user){
    this.userRef.push(user);
  }

  saveUser(oldUser, newUser){
    console.log('olduser',oldUser);
    console.log('newuser', newUser);
    // TODO - optimize this code
    const foundUser = _.find( this.state.userInfo, user =>
        user.name === oldUser.name
    );
    const foundContact = _.find( this.state.userInfo, user =>
        user.contact === oldUser.contact
    );
    const foundAddress = _.find( this.state.userInfo, user =>
        user.address === oldUser.address
    );
    const foundEmail = _.find( this.state.userInfo, user =>
        user.email === oldUser.email
    );
    const foundUsername = _.find( this.state.userInfo, user =>
        user.username === oldUser.username
    );
    const foundPassword = _.find( this.state.userInfo, user =>
        user.password === oldUser.password
    );
    console.log('foundUser', foundUser);
    console.log('foundUser.name',foundUser.name);
    foundUser.name = newUser.name;
    foundContact.contact = newUser.contact;
    foundAddress.address = newUser.address;
    foundEmail.email = newUser.email;
    foundUsername.username = newUser.username;
    foundPassword.password = newUser.password;
  }

Solution

  • You can fetch id as you have saved it in loadData function. So you can do this

    saveUser(oldUser, newUser){
        console.log('olduser',oldUser);
        console.log('newuser', newUser);
        // TODO - optimize this code
        const foundUser = _.find( this.state.userInfo, user =>
            user.name === oldUser.name
        );
        const foundContact = _.find( this.state.userInfo, user =>
            user.contact === oldUser.contact
        );
        const foundAddress = _.find( this.state.userInfo, user =>
            user.address === oldUser.address
        );
        const foundEmail = _.find( this.state.userInfo, user =>
            user.email === oldUser.email
        );
        const foundUsername = _.find( this.state.userInfo, user =>
            user.username === oldUser.username
        );
        const foundPassword = _.find( this.state.userInfo, user =>
            user.password === oldUser.password
        );
        console.log('foundUser', foundUser);
        console.log('foundUser.name',foundUser.name);
        foundUser.name = newUser.name;
        foundContact.contact = newUser.contact;
        foundAddress.address = newUser.address;
        foundEmail.email = newUser.email;
        foundUsername.username = newUser.username;
        foundPassword.password = newUser.password;
      }
    const editUserRef = new Firebase('https://***.firebaseio.com/users').child(oldUser.id);
    console.log('edit',editUserRef);
    editUserRef.update(foundUser);