refactor(health): remove basalEnergyBurned from global state and move to local component
Remove basalEnergyBurned from global health data structure and refactor BasalMetabolismCard to fetch its own data locally. This decouples the component from global state and improves data locality. - Remove basalEnergyBurned from HealthData interface and health utilities - Update BasalMetabolismCard to use selectedDate prop and fetch data locally - Simplify statistics screen by removing unused basalMetabolism variable - Update nutrition radar card to use activeCalories only for burned calories calculation
This commit is contained in:
@@ -1,27 +1,48 @@
|
||||
import { AnimatedNumber } from '@/components/AnimatedNumber';
|
||||
import { fetchHealthDataForDate } from '@/utils/health';
|
||||
import { Image } from 'expo-image';
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
interface BasalMetabolismCardProps {
|
||||
value: number | null;
|
||||
resetToken?: number;
|
||||
selectedDate?: Date;
|
||||
style?: any;
|
||||
}
|
||||
|
||||
export function BasalMetabolismCard({ value, resetToken, style }: BasalMetabolismCardProps) {
|
||||
export function BasalMetabolismCard({ selectedDate, style }: BasalMetabolismCardProps) {
|
||||
const [basalMetabolism, setBasalMetabolism] = useState<number | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 获取基础代谢数据
|
||||
useEffect(() => {
|
||||
const loadBasalMetabolismData = async () => {
|
||||
if (!selectedDate) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await fetchHealthDataForDate(selectedDate);
|
||||
setBasalMetabolism(data?.basalEnergyBurned || null);
|
||||
} catch (error) {
|
||||
console.error('BasalMetabolismCard: 获取基础代谢数据失败:', error);
|
||||
setBasalMetabolism(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadBasalMetabolismData();
|
||||
}, [selectedDate]);
|
||||
// 获取基础代谢状态描述
|
||||
const getMetabolismStatus = () => {
|
||||
if (value === null || value === 0) {
|
||||
if (basalMetabolism === null || basalMetabolism === 0) {
|
||||
return { text: '未知', color: '#9AA3AE' };
|
||||
}
|
||||
|
||||
// 基于常见的基础代谢范围来判断状态
|
||||
if (value >= 1800) {
|
||||
if (basalMetabolism >= 1800) {
|
||||
return { text: '高代谢', color: '#10B981' };
|
||||
} else if (value >= 1400) {
|
||||
} else if (basalMetabolism >= 1400) {
|
||||
return { text: '正常', color: '#3B82F6' };
|
||||
} else if (value >= 1000) {
|
||||
} else if (basalMetabolism >= 1000) {
|
||||
return { text: '偏低', color: '#F59E0B' };
|
||||
} else {
|
||||
return { text: '较低', color: '#EF4444' };
|
||||
@@ -49,16 +70,9 @@ export function BasalMetabolismCard({ value, resetToken, style }: BasalMetabolis
|
||||
|
||||
{/* 数值显示区域 */}
|
||||
<View style={styles.valueSection}>
|
||||
{value != null && value > 0 ? (
|
||||
<AnimatedNumber
|
||||
value={value}
|
||||
resetToken={resetToken}
|
||||
style={styles.value}
|
||||
format={(v) => Math.round(v).toString()}
|
||||
/>
|
||||
) : (
|
||||
<Text style={styles.value}>--</Text>
|
||||
)}
|
||||
<Text style={styles.value}>
|
||||
{loading ? '加载中...' : (basalMetabolism != null && basalMetabolism > 0 ? Math.round(basalMetabolism).toString() : '--')}
|
||||
</Text>
|
||||
<Text style={styles.unit}>千卡/日</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user