Skip to content
Snippets Groups Projects
Commit a178d2ef authored by 문경호's avatar 문경호
Browse files

Fix: Fix BmrDisplay and Weight

parent 6c121303
No related branches found
No related tags found
No related merge requests found
import NutrientDisplay from './NutrientDisplay'; import NutrientDisplay from './NutrientDisplay';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { getUserData } from './api';
import './BmrDisplay.css'; import './BmrDisplay.css';
function BmrDisplay({ user, diet, activity }) { function BmrDisplay({ user, diet, activity }) {
const [bmr, setBmr] = useState(0); const [bmr, setBmr] = useState(0);
const [achievement, setAchievement] = useState([]); const [userInfo, setUserInfo] = useState([]);
const [constants] = useState([1.2, 1.375, 1.555, 1.725, 1.9]); const [constants] = useState([1.2, 1.375, 1.555, 1.725, 1.9]);
useEffect(() => { useEffect(() => {
for (let i = 0; i < diet.length; i++) { const fetchUserInfo = async () => {
if (diet[i]) { try{
setAchievement(diet[i].achievement); const data=await getUserData();
break; setUserInfo(data);
}catch(error){
console.error('Error fetching user info:', error);
} }
} };
},[diet]); fetchUserInfo();
}, []);
const calculateBmr = () => { const calculateBmr = () => {
if (user.user_gender === 1) { if (!userInfo.user_gender || !userInfo.user_weight ||
return 66.47 + (13.75 * achievement.weight) + (5 * achievement.height) - (6.76 * user.user_birth); !userInfo.user_height || !userInfo.user_birth) {
return 0;
}
const today = new Date();
const birthYear = new Date(userInfo.user_birth).getFullYear();
const age = today.getFullYear() - birthYear;
if (userInfo.user_gender === 1) {
return 66.47 + (13.75 * userInfo.user_weight) + (5 * userInfo.user_height) - (6.76 * age);
} else { } else {
return 655.1 + (9.56 * achievement.weight) + (1.85 * achievement.height) - (4.68 * user.user_birth); return 655.1 + (9.56 * userInfo.user_weight) + (1.85 * userInfo.user_height) - (4.68 * age);
} }
}; };
useEffect(() => { useEffect(() => {
const calculatedBmr = calculateBmr(); const calculatedBmr = calculateBmr();
if (!isNaN(calculatedBmr)) {
setBmr(Math.round(calculatedBmr)); setBmr(Math.round(calculatedBmr));
}); }
}, [userInfo]);
return ( return (
<React.Fragment> <React.Fragment>
......
...@@ -73,3 +73,14 @@ ...@@ -73,3 +73,14 @@
text-align: right; text-align: right;
color: #000000; color: #000000;
} }
.suchi input {
width: 50px;
text-align: right;
padding: 2px 5px;
margin-right: 5px;
}
.suchi span {
cursor: pointer;
}
\ No newline at end of file
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import './WeightBar.css' import './WeightBar.css'
import { getUserData, getWeightHistory } from './api';
function WeightBar({ diet }) { function WeightBar({ diet }) {
const [percentage, setPercentage] = useState(0); const [percentage, setPercentage] = useState(0);
const [goalweight, setGoalWeight] = useState(0); const [goalWeight, setGoalWeight] = useState('');
const [startweight, setStartWeight] = useState(0); const [userInfo, setUserInfo] = useState(null);
const [weightHistory, setWeightHistory] = useState([]);
const [isEditing, setIsEditing] = useState(false);
useEffect(() => { useEffect(() => {
let goal_weight = -1; const fetchData = async () => {
let current_weight = -1; try {
let start_weight; const userData = await getUserData();
if (diet&&diet.array) { const weightHistoryData = await getWeightHistory();
diet.array.forEach(element => {
if (element.achievement.weight) start_weight = element.achievement.weight; setUserInfo(userData);
if (goal_weight == -1 && element.achievement.goal_weight) goal_weight = element.achievement.goal_weight; setWeightHistory(weightHistoryData);
if (current_weight == -1 && element.achievement.weight) current_weight = element.achievement.weight
}); if (userData.user_weight && goalWeight) {
setPercentage(((start_weight - current_weight) / ((start_weight - goal_weight)+0.01) * 100)); const startWeight = weightHistory[0]?.weight || userData.user_weight;
setGoalWeight(goal_weight); const currentWeight = userData.user_weight;
setStartWeight(start_weight); const progress = ((startWeight - currentWeight) / (startWeight - goalWeight)) * 100;
setPercentage(Math.min(Math.max(progress, 0), 100));
}
} catch (error) {
console.error('데이터를 가져오는데 실패했습니다:', error);
} }
}, [diet]); };
fetchData();
}, [goalWeight]);
const handleGoalWeightSubmit = (e) => {
e.preventDefault();
setIsEditing(false);
};
return ( return (
<div className='WeightBar-container'> <div className='WeightBar-container'>
<h3>체중 목표</h3> <h3>체중 목표</h3>
<div className="weight-bar"> <div className="weight-bar">
<div className='per'>{percentage}%</div> <div className='per'>{percentage.toFixed(1)}%</div>
<div className="bar"> <div className="bar">
<div className="bar-progress" style={{ width: `${percentage}%` }}></div> <div className="bar-progress" style={{ width: `${percentage}%` }}></div>
</div> </div>
<div className='suchi'> <div className='suchi'>
<span>{startweight}kg</span> <span>{weightHistory[0]?.weight || userInfo?.user_weight}kg</span>
<span>{goalweight}kg</span> {isEditing ? (
<form onSubmit={handleGoalWeightSubmit}>
<input
type="number"
value={goalWeight}
onChange={(e) => setGoalWeight(e.target.value)}
onBlur={() => setIsEditing(false)}
autoFocus
/>
<span>kg</span>
</form>
) : (
<span onClick={() => setIsEditing(true)}>
{goalWeight ? `${goalWeight}kg` : '목표 체중 설정'}
</span>
)}
</div> </div>
</div> </div>
</div> </div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment