userActivities Page - UPDATE

[emilykdewitt]

User Story

As a user, I would like to be able to update activities I previously saved to my My Activities page with a corrected date or notes.

Development

• Create an EditUserActivity component
• Create a defaultUserActivity that has the uid, name, points value, date, and notes set to empty strings
• Inside the EditUserActivity component, set the state of newUserActivity equal to defaultUserActivity

  state = {
    newUserActivity: defaultUserActivity,
  }

• Inside the componentDidMount function, insert function below

    const activityId = this.props.match.params.id;
    userActivitiesData.getSingleActivity(activityId)
      .then(activityPromise => this.setState({ newUserActivity: activityPromise.data }))
      .catch(err => console.error('could not find single activity', err));

• Create a formFieldStringState function that takes in a name and event:

  formFieldStringState = (name, e) => {
    const tempUserActivity = { ...this.state.newUserActivity };
    tempUserActivity[name] = e.target.value;
    this.setState({ newUserActivity: tempUserActivity });
  }

• Create two change functions that look like this for date and notes:

sampleDateChange = e => this.formFieldStringState('sampleDate', e);

• Create a formSubmit function:

  formSubmit = (e) => {
    e.preventDefault();
    const saveMe = { ...this.state.newUseActivity };
    const activityId = this.props.match.params.id;
    userActivitiesData.putUserActivity(saveMe, activityId)
      .then(() => this.props.history.push('/home'))
      .catch(err => console.error('unable to save', err));
  }

• Create a form that makes the activity name and points value appear (not editable) and two input fields that are pre-populated with the current user's values for the date and notes

• The save button will save the user's changes and return them to the My Activities page, the cancel button will revert the value's to the original state and return the user to the My Activities page