update BMI

caclulate BMI từ height and weight step 3 ( Additional signup info)
n-festa · Oct 30, 2023 · a65391a · a65391a
1 parent 4efc136
commit a65391a
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 29 deletions.
diff --git a/components/BMI/index.tsx b/components/BMI/index.tsx
@@ -7,6 +7,31 @@ interface BMIType{
 
 const BMI = ({height, weight} : BMIType) => {
     const BMIindex = (weight/ (height * height) * 10000).toFixed(2);
+    const result_bmi ="";
+    if( BMIindex < 16){
+        result_bmi = "Gầy độ 3";
+    }else if( 16 < BMIindex && BMIindex <17){
+        result_bmi = "Gầy độ 2";
+    }else if( 17< BMIindex && BMIindex <18.5){
+        result_bmi = "Gầy độ 1";
+    }else if( 18.5 < BMIindex && BMIindex <25){
+        result_bmi = "Binh thuong";
+    }else if( 25 < BMIindex && BMIindex <30){
+        result_bmi = "Thừa cân";
+    }else if( 30 < BMIindex && BMIindex <35){
+        result_bmi = "Béo phì độ 1";
+    }else if( 35 < BMIindex && BMIindex <40){
+        result_bmi = "Béo phì độ 2";
+    }else if( 40 < BMIindex){
+        result_bmi = "Béo phì độ 3";
+    }
+
+
+
+
+
+    console.log(result_bmi);
+
     return (
         <div className="ch-s-bmi-parent">
             <div className="ch-s-bmi font-size24">Chỉ số BMI</div>
@@ -15,7 +40,7 @@ const BMI = ({height, weight} : BMIType) => {
                     <div className="data-child"></div>
                     <div className="div5">{BMIindex}</div>
                 </div>
-                <div className="cn-i">Cân đối</div>
+                <div className="cn-i">{result_bmi}</div>
             </div>
         </div>
     )

diff --git a/components/steps/Additional.tsx b/components/steps/Additional.tsx
@@ -2,13 +2,25 @@ import { useForm } from "react-hook-form";
 
 type StepType = {
     onChange : any,
+    setHeight: any,
+    setWeight: any,
 }
 
-const Additional = ({onChange}: StepType) => {
+interface LoginPhone {
+    name: string;
+    email: string;
+    height: number;
+    weight: number;
+}
+
+
+const Additional = ({onChange,setHeight,setWeight}: StepType) => {
     const { register,handleSubmit, errors } = useForm();
 
-    const onSubmit = async () => {
-        console.log("data :"  );
+    const onSubmit = async (data: LoginPhone) => {
+        console.log("data :"   );
+        setHeight(data.height);
+        setWeight(data.weight);
         onChange(4);
     };
 
@@ -75,17 +87,13 @@ const Additional = ({onChange}: StepType) => {
                                             <div className="text80 font-size16">
                                                 <input placeholder="Ví dụ: 27/07/1995" type="date"
                                                 className="text-input1 border-none no-outline no-padding w-100" name="birthdate"
-                                                ref={register( { 
-                                                    required: true ,
-                                                })}
+
                                             />
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                {errors.birthdate && errors.email.birthdate === 'required' && 
-                                    <p className="message message--error">This field is required</p>
-                                }
+
                             </div>
                             <div className="gioi-tinh">
                                 <div className="text73">Giới tính</div>
@@ -130,26 +138,25 @@ const Additional = ({onChange}: StepType) => {
                                     <div className="email1">
                                         <div className="input-with-label6">
                                             <div className="text73">Chiều cao ( cm )</div>
-                                            <div className="input7">
-                                                <div className="content28">
-                                                    <div className="text80">
-                                                        <span>Ví dụ: 163</span>
-                                                    </div>
-                                                </div>
-                                            </div>
+                                            <input placeholder="Ví dụ: 163" type="text"
+                                                className="text-input1 border-none no-outline no-padding w-100 input7" name="height"
+                                                ref={register( { 
+                                                    required: true ,
+                                                })}
+                                            />
+
                                         </div>
                                         <div className="hint-text6">Cm</div>
                                     </div>
                                     <div className="email1">
                                         <div className="input-with-label6">
                                             <div className="text73">Cân nặng ( kg )</div>
-                                            <div className="input7">
-                                                <div className="content28">
-                                                    <div className="text80">
-                                                    <span>Ví dụ: 58</span>
-                                                    </div>
-                                                </div>
-                                            </div>
+                                            <input placeholder="Ví dụ: 60" type="text"
+                                                className="text-input1 border-none no-outline no-padding w-100 input7" name="weight"
+                                                ref={register( { 
+                                                    required: true ,
+                                                })}
+                                            />
                                         </div>
                                         <div className="hint-text6">Kg</div>
                                     </div>

diff --git a/components/steps/RegistrationSuccess.tsx b/components/steps/RegistrationSuccess.tsx
@@ -1,8 +1,13 @@
 import Link from "next/link"
 import BMI from "../BMI"
 
+type StepType = {
+    height: any,
+    weight: any,
+}
 
-const RegistrationSuccess = () => {
+const RegistrationSuccess = ({height,weight}: StepType) => {
+    console.log(height);
     return (
         <div className="otp sign-up">
             <div className="content26">
@@ -15,7 +20,7 @@ const RegistrationSuccess = () => {
                     </div>
                 </div>
                 <div className="frame-parent14">
-                    <BMI height={163} weight={70} />
+                    <BMI height={height} weight={weight} />
                     <div className="ch-s-bmi-parent">
                         <div className="ch-s-bmi font-size24">Năng lượng</div>
                         <div className="data-parent">

diff --git a/pages/login/index.tsx b/pages/login/index.tsx
@@ -8,17 +8,19 @@ import { useState } from "react";
 
 
 function ActiveStepFormComponent() {
-    const [step,setStep] = useState<number>(4);
+    const [step,setStep] = useState<number>(1);
     const [phone,setPhone] = useState<string>("");
+    const [height,setHeight] = useState<number>(0);
+    const [weight,setWeight] = useState<number>(0);
     switch (step) {
         case 1:
             return <LoginComponent onChange={setStep} setPhone={setPhone}/>;
         case 2:
             return <PhoneVerificationComponent phone={phone} onChange={setStep}/>;
         case 3:
-            return <Additional onChange={setStep} />;;
+            return <Additional onChange={setStep} setHeight={setHeight} setWeight={setWeight} />;;
         case 4:
-            return <RegistrationSuccess />; 
+            return <RegistrationSuccess height={height} weight={weight}/>; 
 
 
         default: