Meal Tracker Page (#643)

[ChaoticallyAlys]

Summary

Implemented the Meal Tracker page that allows users to edit and track their nutrition goals by adding editable meal cards to their account.

Changes

Samika's Changes:

• Added nutrition page
• Added nutrition breakdown cards
• Added nutrition goals editor

Yitong's Changes:

• Added tracked meal cards
• Added Uncounted Dishes and Counted Dishes subdivision on nutrition page
• Backend: Added a mutation to nutritionRouter to update servings

Issues (Direction Requested)

Missing Features:

• The Figma shows dishes can be set to 0, but peterplate DB doesn't allow <0.5 servings. So, there currently is checking for whether dishes are set to 0 (and if they are, they'll be automatically moved to the Uncounted Dishes section), but none can be set to 0.
• Tracking history of user’s planned meals from the previous dates (not sure where to store this information; can be done, just would like a bit of direction on where this information should be stored prior to implementation)
• The "Diet Plan" tag that can be toggled on for foods to be repeatedly eaten (automatically added to their total at the beginning of every day) functionality has been left unimplemented due to a lack of ability to track the user's history

Small Fixes

• Ability to edit nutrition goals (was working before, but currently broken)
• The macros text in nutrition goals is covered by the progress indicator

Closes #643

[LexTruong]

Great work so far guys! The UI is pretty darn close. There are a few bugs that need to be fixed though:

• The whole page is duplicated.
• The mobile view isn't quite right. For example, the padding is too large, and the progress bars for protein, carbs, and fat should be condensed.
• The edit goal input fields don't work quite right. Additionally, the popup should close if the user clicks outside of it.
• The History date picker doesn't work as intended. The meal tracker page should only ever show the current day's tracked meals. If the user clicks on a previous day in the date picker, a dialog/drawer should popup, as shown in the Figma. Sorry if this was just recently changed. And for days with no tracked meals, we can either disable those days on the date picker or show something like "Nothing tracked on this day" on the dialog/drawer.

[LexTruong]

Let's default to 100g of protein 💪

[samikabhatkar-web]

fixed

[LexTruong]

Good idea!

[LexTruong]

There was already an update meal procedure! Please use the previous one.

[samikabhatkar-web]

fixed

[LexTruong]

As for the issues from your PR description:

• Change the loggedMeals table in the DB to allow for 0 servings. And generate a migration file!
• I think the logged meal history can be implemented by using the eatenAt field.
• For the Diet Plan functionality, we could add a boolean field on the loggedMeals table. Then each available meal with that boolean flag can automatically be added to their tracker for the current day.

If you feel there's a better way to implement something, go for it!

[LexTruong]

Great work so far guys! The UI is pretty darn close. There are a few bugs that need to be fixed though:

• The whole page is duplicated.
• The mobile view isn't quite right. For example, the padding is too large, and the progress bars for protein, carbs, and fat should be condensed.
• The edit goal input fields don't work quite right. Additionally, the popup should close if the user clicks outside of it.
• The History date picker doesn't work as intended. The meal tracker page should only ever show the current day's tracked meals. If the user clicks on a previous day in the date picker, a dialog/drawer should popup, as shown in the Figma. Sorry if this was just recently changed. And for days with no tracked meals, we can either disable those days on the date picker or show something like "Nothing tracked on this day" on the dialog/drawer.

Apologies on my first point. Turns out the duplicate page is an error from a previous merge. Don't worry about it!

[samikabhatkar-web]

Addressed all these changes except for the diet plan functionality!
For now, I've removed any instances of the diet plan logic, but the general functionality of the page should work

[samikabhatkar-web]

Addressed all these changes except for the diet plan functionality! For now, I've removed any instances of the diet plan logic, but the general functionality of the page should work

One issue I had was with index.ts, even though there is a general import from the schema, the page won't function. If I add a manual export from the UserGoalsByDay, then it works, so that inconsistency would have to be fixed

[LexTruong]

Hi guys, great work so far! Sorry for taking so long to get to this review. I think leaving the diet plan functionality for after deployment is a good call. Just a few more things for this one:

1. Please disable dates in the history that we don't have any logged meal data for. This would just make it easier for users to look back on their progress.
2. When I try to edit the goal amounts and delete the whole value in the input box, I can't get rid of the "0".
3. For the suggested foods, let's display dishes that have been logged at least once instead of 5+ times in the past week. Can we sort these dishes in decreasing order by how many times they've been logged?
4. The following suggestions are for mobile:
   4a. Too much padding at the top of the page.
   4b. The goals section is formatted quite right. The progress circle isn't centered vertically. The edit goals button should be in the top right of the goals section, instead of the bottom left.
   4c. On the counted food cards, there is too much padding above the nutritional info.