During the course of the chat modules, the user will generate artifacts, such as Meals and Activities (coming soon). These components are used to list, edit and summarize these different artifact types.
| - Meals
| - Activities [coming soon]
| - Sleep [coming soon]
| - Mood [coming soon]
Display an interactive list of meals.
import { useState, useEffect, useCallback } from "react";
import { MealsList, useMiriApp, Meal } from "@miri-ai/miri-react-native";
function MyComponent() {
const { getMeals, selectedDate } = useMiriApp();
const [meals, setMeals] = useState<Meal[]>([]);
const [isLoading, setIsLoading] = useState(true);
const fetchMeals = useCallback(async () => {
const fetchedMeals = await getMeals(selectedDate);
setMeals(fetchedMeals);
setIsLoading(false);
}, [getMeals, selectedDate]);
useEffect(() => {
fetchMeals();
}, [selectedDate]);
return (
<MealList meals={meals} isLoading={isLoading} />
);
}
| Prop | Type | Description || :------------------- | :------------------------- | :------------------------------------------------------------------ || meals (required) | Meal[] | List of meals to render || isLoading | boolean | If true, the loading state is shown || allowDelete | boolean | If true, we allow the user to swipe and delete any item in the list || onMealPress | (meal: Meal) => void | The handler to call when the user taps on a meal || onDeleteMeal | (mealId: string) => void | The handler to call when the user deletes a meal || showTrackingItems | boolean | If true, shows the tracking item bubbles for each meal |
Display a summary widget for the selected day. The summary widget contains progress info on multiple tracking items related to the meal.
import { useState, useEffect, useCallback } from "react";
import { MealsList, useMiriApp, Meal } from "@miri-ai/miri-react-native";
function MyComponent() {
const { getTrackingItemsProgress, selectedDate } = useMiriApp();
const [progress, setProgress] = useState<Awaited<ReturnType<typeof getTrackingItemsProgress>({
trackingItemsProgress: [],
streakCards: []
});
const [isLoading, setIsLoading] = useState(true);
const fetchProgress = useCallback(async () => {
const progress = await getTrackingItemsProgress();
setMeals(fetchedMeals);
setIsLoading(false);
}, [getTrackingItemsProgress]);
useEffect(() => {
fetchProgress();
}, []);
return (
<TrackingItemsSummary
trackingItemsProgress={progress.trackingItemProgress}
isLoading={isLoading}
selectedDate={selectedDate}
/>
);
}
| Prop | Type | Description || :----------------------------------- | :---------------- | :---------------------------------------------------- || trackingItemsProgress (required) | TrackingGroup[] | The progress returned from getTrackingItemsProgress || selectedDate | Date | The date of the progress data to display || isLoading | boolean | If true, show the loading state of the component |
Display a summary widget for the selected day. The summary widget contains progress info on multiple tracking items related to the meal.
import { useState, useEffect, useCallback } from "react";
import { MealsList, useMiriApp, Meal } from "@miri-ai/miri-react-native";
function MyComponent() {
const { getTrackingItemsProgress } = useMiriApp();
const [progress, setProgress] = useState<Awaited<ReturnType<typeof getTrackingItemsProgress>({
trackingItemsProgress: [],
streakCards: []
});
const [isLoading, setIsLoading] = useState(true);
const fetchProgress = useCallback(async () => {
const progress = await getTrackingItemsProgress();
setMeals(fetchedMeals);
setIsLoading(false);
}, [getTrackingItemsProgress]);
useEffect(() => {
fetchProgress();
}, []);
return (
<>
{progress.streakCards.map(streak => (
<StreakTracking streak={streak} key={streak.label} />
))}
</>
);
}
| Prop | Type | Description || :-------------------- | :------- | :-------------------------------------------------- || streak (required) | Streak | The streak returned from getTrackingItemsProgress |
Display the details of a given meal.
<MealDetail id={id} onDonePress={() => console.log("Done!")} />
| Prop | Type | Description || :------------------------- | :----------------------------------- | :---------------------------------------------------------------------------------------------------------- || id (required) | string | Unique Identifier for the meal || onDonePress (required) | () => void | The handler to call when the user taps "Done" on an unedited meal || onDelete | (mealId: string) => void | The handler to call when the user deletes an editable meal || onSave | (meal: Meal) => void | The handler to call when the user saves an edited meal || onNavigateToChat | (params: ChatSearchParams) => void | The handler to call after the meal has been saved. This is necessary for tracking items to be recalculated. || isReadOnly | boolean | If true, prevents the user from editing or deleting the meal |
A button to show a bottom sheet with the choice to log a meal or weight/body metrics
import { useMiriApp, LogPicker } from "@miri-ai/miri-react-native";
function MyComponent() {
const { getWeightProgress, getBodyComposition } = useMiriApp();
const [weightProgress, setWeightProgress] =
useState<Awaited<ReturnType<typeof getWeightProgress>>>();
const [bodyComposition, setBodyComposition] =
useState<BodyComposition | null>(null);
const fetchWeightProgress = useCallback(async () => {
const fetchedWeightProgress = await getWeightProgress();
setWeightProgress(fetchedWeightProgress);
}, [getWeightProgress]);
const fetchBodyComposition = useCallback(async () => {
const fetchedBodyComposition = await getBodyComposition();
setBodyComposition(fetchedBodyComposition);
}, [getBodyComposition]);
useEffect(() => {
fetchWeightProgress();
fetchBodyComposition();
}, [fetchWeightProgress, fetchBodyComposition]);
return (
<LogPicker
weightProgress={weightProgress}
bodyComposition={bodyComposition}
onNavigateToChat={handleNavigateToChat}
onUpdateTracking={fetchWeightProgress}
/>
);
}
| Prop | Type | Description || :---------------------------- | :-------------------------------------------------------------------------------- | :---------------------------------------------------------------- || weightProgress (required) | {weightGoal: PlanArtifactWeight \| null; weightTracking: WeightTracking\| null} | The weight progress data returned from getWeightProgress || onNavigateToChat | (params: ChatSearchParams) => void | The handler to call when navigating to chat from the log picker || onUpdateTracking | () => void | The handler to call after logging to refresh tracking data || bodyComposition | BodyComposition \| null | Optional body composition data returned from getBodyComposition |
A button to show a bottom sheet with the "Figure it Out" module options for quick access to various chat modules like restaurants, recipes, and cravings.
import { FIOPicker, ChatSearchParams } from "@miri-ai/miri-react-native";
function MyComponent() {
const handleNavigateToChat = (params: ChatSearchParams) => {
// Navigate to chat with the selected module
console.log("Navigate to chat with params:", params);
};
return <FIOPicker onNavigateToChat={handleNavigateToChat} />;
}
| Prop | Type | Description || :----------------- | :----------------------------------- | :--------------------------------------------------- || onNavigateToChat | (params: ChatSearchParams) => void | The handler to call when navigating to a chat module |