Display Micro Progress
Display Micro nutrients progress using nutrients from PassioFoodItem and PassioRecipe.
Last updated
Display Micro nutrients progress using nutrients from PassioFoodItem and PassioRecipe.
Last updated
Obtain the utility function for fetching nutrition from the provided page.
import React from 'react';
import { View } from 'react-native';
import { FlatList } from 'react-native';
import { unitForNutrient } from '../../../models';
import { microItemStyle } from './microView.styles';
import { useMicroNutrients, type MicroNutrition } from './useMicroNutrients';
import { Text } from 'react-native';
const MicrosView = () => {
// Fetch micro-nutrition data using the custom hook
const { microNutrition } = useMicroNutrients();
// Render function for each micro-nutrient item
const renderMicroItem = (micro: MicroNutrition) => {
const { title, recommended, achieved } = micro;
const unit = unitForNutrient(micro.id);
// Set userAchieved to 0 if achieved is null or undefined
const userAchieved =
achieved !== null && achieved !== undefined ? achieved : 0;
// Calculate remaining micro-nutrient value
const remain = Math.max(0, recommended - userAchieved);
return (
<View>
<View style={microItemStyle.infoContainer}>
<Text style={microItemStyle.title}>
{`${title} `}
<Text
style={microItemStyle.achieved}
>{`${userAchieved.toFixed(2)} ${unit}`}</Text>
</Text>
<View style={microItemStyle.recommendedContainer}>
<Text style={microItemStyle.recommendedValue}>
{`${Math.round(remain).toFixed(2)} ${unit}`}
</Text>
<Text style={microItemStyle.remainingText}>{'Remaining'}</Text>
</View>
</View>
<View style={microItemStyle.progressContainer}>
<View
style={[
{ flex: Math.round(userAchieved) },
microItemStyle.progress,
]}
/>
<View style={{ flex: Math.round(remain) }} />
</View>
</View>
);
};
return (
<FlatList
data={microNutrition}
contentContainerStyle={microItemStyle.list}
renderItem={({ item }: { item: MicroNutrition }) => renderMicroItem(item)}
keyExtractor={(__: MicroNutrition, index: number) => index.toString()}
extraData={microNutrition}
/>
);
};
// Wrap the MicrosView component with the withLoading higher-order component
export default MicrosView;
export const microItemStyle = StyleSheet.create({
infoContainer: {
flexDirection: 'row',
paddingVertical: 8,
alignItems: 'center',
},
title: {
color: COLORS.grey7,
paddingStart: 16,
fontSize: 15,
flex: 1,
fontWeight: '600',
alignItems: 'center',
},
achieved: {
color: "gray",
paddingHorizontal: 8,
fontSize: 15,
fontWeight: '400',
alignItems: 'center',
},
remainingText: {
color: "gray",
fontWeight: '400',
paddingHorizontal: 8,
alignItems: 'center',
},
recommendedContainer: {
flexDirection: 'row',
alignItems: 'center',
},
recommendedValue: {
minWidth: 70,
color: "gray",
alignSelf: 'center',
alignItems: 'center',
textAlign: 'center',
fontWeight: '600',
borderRadius: 28,
padding: 4,
},
progressContainer: {
flex: 1,
backgroundColor: "gray",
height: 10,
flexDirection: 'row',
marginHorizontal: 16,
borderRadius: 16,
},
progress: {
backgroundColor: "blue",
borderRadius: 16,
},
list: {
paddingBottom: 50,
},
});
import { useEffect, useState } from 'react';
import {
getNutrientsFromAttribute,
mergeNutrients,
micros,
type Nutrients,
type NutrientsTypes,
} from '../../../utils/PassioNutrient';
import { mockFood } from '../macro/mockFood';
import { PassioSDK } from '@passiolife/nutritionai-react-native-sdk-v2';
export interface MicroNutrition {
recommended: number;
title: string;
id: NutrientsTypes;
achieved?: number;
}
export const useMicroNutrients = () => {
// State to store micro-nutrition data
const [microNutrition, setMicroNutrition] = useState<MicroNutrition[]>([]);
// Food logs from mock data
const foodLogs = mockFood;
useEffect(() => {
// Function to initialize and fetch micro-nutrition data
async function init() {
// Array to store micro-nutrient data
let data: Nutrients[] = [];
// Iterate through food logs to fetch attributes and extract micro-nutrients
await Promise.all(
foodLogs.map(async (item) => {
const attribute = await PassioSDK.getAttributesForPassioID(
item.passioID
);
// If attributes are available, extract micro-nutrients
if (attribute) {
const nutrients = getNutrientsFromAttribute(attribute, micros);
data.push(...nutrients);
}
})
);
// Merge the micro-nutrient data
data = mergeNutrients(data);
// Define default micro-nutrients with recommended values
const defaultMicroNutrients: MicroNutrition[] = [
{
title: 'dietaryFiber',
id: 'fiber' as const,
recommended: 28,
},
{
title: 'sugar',
id: 'sugar' as const,
recommended: 50,
},
{
id: 'saturatedFat' as const,
title: 'SaturatedFat',
recommended: 20,
},
{
id: 'transFat' as const,
title: 'transFat',
recommended: 0,
},
{
id: 'polyunsaturatedFat' as const,
title: 'polyunsaturatedFat',
recommended: 22,
},
{
id: 'monounsaturatedFat' as const,
title: 'monounsaturatedFat',
recommended: 44,
},
{
id: 'cholesterol' as const,
title: 'cholesterol',
recommended: 300,
},
{
title: 'sodium',
id: 'sodium' as const,
recommended: 2300,
},
{
id: 'potassium' as const,
title: 'potassium',
recommended: 4700,
},
{
id: 'iron' as const,
title: 'iron',
recommended: 18,
},
{
id: 'magnesium' as const,
title: 'magnesium',
recommended: 420,
},
{
id: 'iodine' as const,
title: 'iodine',
recommended: 150,
},
{
id: 'vitaminA' as const,
title: 'vitaminA',
recommended: 900,
},
{
id: 'vitaminB6' as const,
title: 'vitaminB6',
recommended: 1.7,
},
{
id: 'vitaminB12' as const,
title: 'vitaminB12',
recommended: 2.4,
},
{
id: 'vitaminC' as const,
title: 'vitaminC',
recommended: 90,
},
{
id: 'vitaminD' as const,
title: 'vitaminD',
recommended: 20,
},
{
id: 'vitaminE' as const,
title: 'vitaminE',
recommended: 15,
},
].map((item) => ({
...item,
// Calculate achieved value by filtering the micro-nutrient data
achieved: data.find(
(allNutrimentItem) => allNutrimentItem.name === item.id
)?.unitMass?.value,
}));
// Update the state with the processed micro-nutrient data
setMicroNutrition(defaultMicroNutrients);
}
// Call the init function
init();
}, [foodLogs]); // Re-run the effect when foodLogs change
// Return the micro-nutrition data
return {
microNutrition,
};
};