Description
As members chat and log, they create records such as meals. These components list, edit and summarize them, and show progress against the member's daily goals.
MealList
Description
An interactive list of meals.
Basic usage
{{code.b0}}Props
| Prop | Type | Description |
|---|---|---|
meals (required) | Meal[] | The meals to show. |
isLoading | boolean | If true, shows the loading state. Defaults to false. |
allowDelete | boolean | If true, the user can swipe a meal to delete it. Defaults to false. |
onMealPress | (meal: Meal) => void | Called when the user taps a meal. |
onDeleteMeal | (mealId: string) => void | Called when the user deletes a meal. |
showTrackingItems | boolean | If true, shows each meal's tracking item bubbles. |
TrackingItemsSummary and StreakTracking
Description
TrackingItemsSummary shows the member's progress on their daily tracking items (for example protein or water) for the selected day. StreakTracking shows their streak cards. Both take data from getTrackingItemsProgress.
Basic usage
{{code.b1}}TrackingItemsSummary props
| Prop | Type | Description |
|---|---|---|
trackingItemsProgress (required) | TrackingGroup[] | trackingItemsProgress from getTrackingItemsProgress. |
selectedDate | Date | The day to show. |
isLoading | boolean | If true, shows the loading state. |
hideTarget | boolean | If true, hides each item's target. |
StreakTracking props
| Prop | Type | Description |
|---|---|---|
streaks (required) | Streak[] | streakCards from getTrackingItemsProgress. |
onReviewProgress | (streakType: string) => void | Called when the user taps "Review your progress", which medication streaks show. |
MealDetail
Description
Shows one meal's details and lets the user edit its ingredients and portions, save it or delete it.
Basic usage
{{code.b2}}Props
| Prop | Type | Description |
|---|---|---|
mealId | string | The meal to load. Not needed when you pass initialMeal. |
initialMeal | Meal | A meal you already have; it is shown without fetching. |
onDonePress (required) | () => void | Called when the user is done with the meal. |
onSave | (meal: Meal) => void | Called with the saved meal after the user saves an edit. |
onDelete | (mealId: string) => void | Called when the user deletes the meal. |
onNavigateToChat | (params: ChatSearchParams) => void | Called when an edited meal should be re-analyzed in the meal-logging chat. Render Chat with these params (see Chat & coach UI). |
isReadOnly | boolean | If true, the user cannot edit or delete the meal. Defaults to false. |
chatSessionId | string | The chat session the meal belongs to. |
defaultExpanded | boolean | If true, the meal details start expanded. Defaults to false. |
allowBarcodeScanning | boolean | Lets the user scan a barcode when adding or editing an ingredient. Defaults to true. |
hideEditMenu | boolean | Hides the edit menu (the three dots), e.g. for an unsaved draft. |
LogPicker
Description
A button that opens a sheet where the user chooses what to log: a meal, or weight and body metrics.
Basic usage
{{code.b3}}Props
| Prop | Type | Description |
|---|---|---|
weightProgress (required) | { weightGoal: PlanArtifactWeight | null; weightTracking: WeightTracking | null } | The result of getWeightProgress. |
bodyComposition | BodyComposition | null | The result of getBodyComposition. |
onUpdateTracking | () => Promise<void> | Called after the user saves a weight or body metrics entry, so you can refresh your data. |
onUpdateWeightGoal | () => void | Called when the user taps the weight goal to edit it. |
onLogMeal | (meal: Meal) => void | Called when a meal is logged. |
onMealDeleted | (mealId: string) => void | Called after the user deletes a logged meal from the sheet. |
onPhotoCapture | (images: CameraImage[]) => void | Called when the user takes photos with the Photo option. |
onChatTap | () => void | Called when the user picks the Chat option. |
FIOPicker
Description
A button that opens a sheet of "Figure it out" chats, such as restaurants, recipes and cravings.
Basic usage
{{code.b4}}Props
| Prop | Type | Description |
|---|---|---|
onNavigateToChat (required) | (params: ChatSearchParams) => void | Called with the chosen module's chat params. |