Updateable Macro & Calorie Goals

[wu-jeffrey]

Fixes #17

TASKS:

• [x] Create API endpoint
• [x] Create profile modal where you can edit the macros n calories
• [x] Create macro editor to go inside modal w/ interdependent slider UI with percentages + grams n shit
• [x] Hit the endpoint when the modal's save button is hit
• [x] Pass a "reload/refetch user" function from the Auth Consumer to the macro editor and call it when the save btn is hit

[wu-jeffrey]

The interdependent / linked sliders implementation with text box is pretty janky but I'm happy that it works.

Also, once the save btn is clicked, the user will be updated, we should cause the auth consumer to refetch the user, so

1. Here we should move the async API call into it's own function and expose it in the AuthContext, or a reloadUser() fcn that can be called from AuthContext.Consumers e.g. the macroeditor or modal

i.e. here:

  componentDidMount() {
    const token = localStorage.getItem('token');

    const settings = {
      method: 'GET',
      headers: {
        'x-auth-token': localStorage.getItem('token'),
      },
    };

    (async () => {
      const response = await fetch(encodeURI("/api/auth/user"), settings);
      const user = await response.json();

      if (response.status !== 200) {
        this.setState({
          loading: false,
          isAuth: false,
        })
      } else {
        this.setState({
          loading: false, 
          isAuth: true,
          token: token,
          user: user,
        })
      }
    })();
  }