342 lines
12 KiB
JavaScript
342 lines
12 KiB
JavaScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { View, Text, Image, StyleSheet, TouchableOpacity, Animated, BackHandler, FlatList, ScrollView, TextInput } from 'react-native';
|
|
import axios from 'axios';
|
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import Container from '../components/Container';
|
|
import CardRecord from '../components/CardRecord';
|
|
|
|
const ScreenMassa = ({ navigation }) => {
|
|
const [token, setToken ] = useState(null);
|
|
|
|
const [profileId, setProfileId ] = useState(null);
|
|
const [profileName, setProfileName ] = useState(null);
|
|
const [profileSex, setProfileSex ] = useState(null);
|
|
const [profileDob, setProfileDob ] = useState(null);
|
|
const [profileAge, setProfileAge ] = useState(null);
|
|
|
|
const [weight, setWeight ] = useState(0); //kg
|
|
const [height, setHeight ] = useState(0); //cm
|
|
|
|
const [recordList, setRecordList ] = useState([]);
|
|
|
|
const getToken = async () => {
|
|
const savedToken = await AsyncStorage.getItem('auth_token');
|
|
if (savedToken !== null) {
|
|
setToken(savedToken);
|
|
}
|
|
else {
|
|
navigation.navigate("Profil");
|
|
}
|
|
};
|
|
|
|
const HttpRequest = (url,body,conf, handle) => { // string, object, object
|
|
axios.post(url, body, conf).then(response => {
|
|
handle(response.data);
|
|
}).catch(error => {
|
|
console.error('Terjadi kesalahan:', error.stack);
|
|
});
|
|
};
|
|
|
|
const handleProfileDetail = (data) => {
|
|
if (data.status === 'success') {
|
|
setProfileId(data.data.id);
|
|
setProfileName(data.data.name);
|
|
setProfileSex(data.data.sex);
|
|
setProfileDob(data.data.dob);
|
|
if (data.data.dob !== null) {
|
|
const tanggalLahir = new Date(data.data.dob);
|
|
const today = new Date();
|
|
const umur = today.getFullYear() - tanggalLahir.getFullYear();
|
|
const bulanSekarang = today.getMonth() - tanggalLahir.getMonth();
|
|
let umurTerupdate;
|
|
if (bulanSekarang < 0 || (bulanSekarang === 0 && today.getDate() < tanggalLahir.getDate())) { umurTerupdate = umur - 1; }
|
|
else { umurTerupdate = umur; }
|
|
setProfileAge(umurTerupdate);
|
|
}
|
|
}
|
|
};
|
|
|
|
const fetchProfileDetail = async () => {
|
|
try {
|
|
const url = 'https://uas.ditaajipratama.net/api/checkcare/profile/detail';
|
|
const body = {};
|
|
const auth_token = await AsyncStorage.getItem('auth_token');
|
|
const config = {
|
|
headers: {
|
|
Authorization: `Bearer ${auth_token}`
|
|
}
|
|
};
|
|
console.log(`Bearer ${auth_token}`);
|
|
console.log(token);
|
|
if (auth_token !== null) { HttpRequest(url, body, config, handleProfileDetail); }
|
|
}catch(error){
|
|
console.log(error.stack);
|
|
}
|
|
};
|
|
|
|
const bmiFormula = (w, h) => {
|
|
if (w > 0 && h > 0) return parseFloat( ( w/((h/100)*(h/100)) ).toFixed(2) );
|
|
else return null;
|
|
}
|
|
const bmiDiagnose = (num, sex) => {
|
|
if (num > 0) {
|
|
if (sex == "Male") {
|
|
if (num >= 27) return "Obese";
|
|
else if (num >= 23) return "Over";
|
|
else if (num >= 17) return "Normal";
|
|
else if (num < 17) return "Under";
|
|
else return null;
|
|
}
|
|
else if (sex == "Female") {
|
|
if (num >= 27) return "Obese";
|
|
else if (num >= 25) return "Over";
|
|
else if (num >= 18) return "Normal";
|
|
else if (num < 18) return "Under";
|
|
else return null;
|
|
}
|
|
else return null;
|
|
}
|
|
else return null;
|
|
}
|
|
const bmiTextColor = (stat) => {
|
|
if (stat == "Normal") return "green";
|
|
else return "red";
|
|
}
|
|
|
|
const quickResult = () => {
|
|
const diagnose = bmiDiagnose(bmiFormula(weight,height),profileSex)
|
|
const title = `${diagnose}-Weight`;
|
|
if (diagnose == "Obese" ) {
|
|
const message = "Obesitas berbahaya bagi kesehatan. Penting untuk kamu mengurus berat badan tersebut dengan cara yang sehat dan cermatilah asupan makanan serta latihannya.";
|
|
if (profileSex == "Male") {const image = require("../img/bmi/man/fat.png");return {title,message,image};}
|
|
else {const image = require("../img/bmi/woman/fat.png");return {title,message,image};}
|
|
}
|
|
else if (diagnose == "Over" ) {
|
|
const message = "Kamu kelebihan berat badan, tetapi jangan khawatir! Kemungkinan besar kamu masih dapat mengontrol berat badan melalui pola makan dan latihan fisik yang sehat.";
|
|
if (profileSex == "Male") {const image = require("../img/bmi/man/fat.png");return {title,message,image};}
|
|
else {const image = require("../img/bmi/woman/fat.png");return {title,message,image};}
|
|
}
|
|
else if (diagnose == "Normal" ) {
|
|
const message = "Selamat! Kamu termasuk dalam kategori berat badan normal, tetapi jaga asupan makanan dan latihan fisik agar tetap sehat serta stabil ya!";
|
|
if (profileSex == "Male") {const image = require("../img/bmi/man/fit.png");return {title,message,image};}
|
|
else {const image = require("../img/bmi/woman/fit.png");return {title,message,image};}
|
|
}
|
|
else if (diagnose == "Under" ) {
|
|
const message = "Kamu termasuk kategori kelembongan, perlu diperhatikan untuk meningkatkan berat badannya dengan cara yang sesuai dan sehat agar tetap aktif serta stabil.";
|
|
if (profileSex == "Male") {const image = require("../img/bmi/man/fit.png");return {title,message,image};}
|
|
else {const image = require("../img/bmi/woman/fit.png");return {title,message,image};}
|
|
}
|
|
else {
|
|
const title = "Cek BMI";
|
|
const message = "Cek berat badan ideal mu dengan memasukkan Berat dan Tinggi kamu";
|
|
const image = require("../img/bmi/weighing-scale.png");
|
|
return {title,message,image};
|
|
}
|
|
}
|
|
|
|
const reqRecordList = async () => {
|
|
try {
|
|
const url = 'https://uas.ditaajipratama.net/api/checkcare/bmi/list';
|
|
const body = {};
|
|
const auth_token = await AsyncStorage.getItem('auth_token');
|
|
const config = {
|
|
headers: {
|
|
Authorization: `Bearer ${auth_token}`
|
|
}
|
|
};
|
|
const handle = (data) => {
|
|
setRecordList(data);
|
|
};
|
|
if (auth_token !== null) { HttpRequest(url, body, config, handle); }
|
|
}catch(error){
|
|
console.log(error.stack);
|
|
}
|
|
};
|
|
|
|
const reqAdd = async () => {
|
|
try {
|
|
const url = 'https://uas.ditaajipratama.net/api/checkcare/bmi/add';
|
|
const body = {
|
|
weight:weight,
|
|
height:height
|
|
};
|
|
const auth_token = await AsyncStorage.getItem('auth_token');
|
|
const config = {
|
|
headers: {
|
|
Authorization: `Bearer ${auth_token}`
|
|
}
|
|
};
|
|
const handle = (data) => {
|
|
reqRecordList();
|
|
setWeight(0);
|
|
setHeight(0);
|
|
};
|
|
if (auth_token !== null) { HttpRequest(url, body, config, handle); }
|
|
} catch(error){
|
|
console.log(error.stack);
|
|
}
|
|
}
|
|
|
|
const ListItem = ({item}) => (
|
|
<CardRecord key="{item.id}">
|
|
<Text style={styles.resultDate}>{item.when}</Text>
|
|
<Text style={styles.resultValue}>
|
|
W:{item.weight} H:{item.height} BMI:{bmiFormula(item.weight, item.height)}
|
|
</Text>
|
|
<Text style={[styles.resultStatus,{color: bmiTextColor(bmiDiagnose(bmiFormula(item.weight,item.height),profileSex)),}]}>
|
|
{bmiDiagnose(bmiFormula(item.weight,item.height),profileSex)}
|
|
</Text>
|
|
</CardRecord>
|
|
);
|
|
|
|
useEffect(() => {
|
|
getToken();
|
|
fetchProfileDetail();
|
|
reqRecordList();
|
|
}, []);
|
|
|
|
return (
|
|
<Container>
|
|
|
|
<View style={styles.headerRow}>
|
|
<View style={styles.illustrationContainer}>
|
|
<Image
|
|
source={quickResult().image}
|
|
style={styles.illustration}
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
<View style={styles.textContainer}>
|
|
<Text style={styles.title}>{quickResult().title}</Text>
|
|
<Text style={styles.datetime}>{`BMI:${bmiFormula(weight, height)}`}</Text>
|
|
<Text style={styles.description}>{quickResult().message}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.inputRow}>
|
|
<TextInput
|
|
style={styles.inputForm}
|
|
placeholder="W (kg)"
|
|
placeholderTextColor="#888"
|
|
keyboardType="numeric"
|
|
onChangeText={(text) => setWeight(text)}
|
|
value={weight}
|
|
/>
|
|
<TextInput
|
|
style={styles.inputForm}
|
|
placeholder="H (cm)"
|
|
placeholderTextColor="#888"
|
|
keyboardType="numeric"
|
|
onChangeText={(text) => setHeight(text)}
|
|
value={height}
|
|
/>
|
|
<TouchableOpacity style={styles.inputButtonSubmit} onPress={reqAdd}>
|
|
<Text style={styles.submitText}>Submit</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={{flex:2}}>
|
|
<FlatList
|
|
data={recordList.data}
|
|
renderItem={({ item }) => <ListItem item={item} />}
|
|
keyExtractor={(item, index) => index.toString()}
|
|
/>
|
|
</View>
|
|
|
|
</Container>
|
|
); // End return
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
headerRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
illustration: {
|
|
width: 100,
|
|
height: 100,
|
|
},
|
|
illustrationContainer: {
|
|
marginRight: 16,
|
|
},
|
|
textContainer: {
|
|
flex: 1,
|
|
},
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: 'bold',
|
|
color: '#111',
|
|
},
|
|
datetime: {
|
|
fontSize: 12,
|
|
color: '#444',
|
|
marginVertical: 4,
|
|
},
|
|
description: {
|
|
fontSize: 14,
|
|
color: '#333',
|
|
maxWidth: 320,
|
|
marginBottom: 16,
|
|
},
|
|
inputRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
width: '100%',
|
|
marginBottom:10,
|
|
},
|
|
inputForm: {
|
|
flex: 1,
|
|
borderWidth: 1,
|
|
borderColor: '#ccc',
|
|
borderRadius: 30,
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 16,
|
|
marginHorizontal: 6,
|
|
backgroundColor: '#fff',
|
|
color: '#333',
|
|
},
|
|
inputButton: {
|
|
flex: 1,
|
|
borderWidth: 1,
|
|
borderColor: '#ccc',
|
|
borderRadius: 30,
|
|
paddingVertical: 12,
|
|
marginHorizontal: 6,
|
|
backgroundColor: '#f9f9f9',
|
|
},
|
|
inputButtonSubmit: {
|
|
flex: 1,
|
|
borderRadius: 30,
|
|
paddingVertical: 12,
|
|
marginHorizontal: 6,
|
|
backgroundColor: '#007bff',
|
|
},
|
|
inputText: {
|
|
textAlign: 'center',
|
|
color: '#333',
|
|
fontWeight: '500',
|
|
},
|
|
submitText: {
|
|
textAlign: 'center',
|
|
color: '#fff',
|
|
fontWeight: '600',
|
|
},
|
|
resultDate: {
|
|
flex: 1,
|
|
color: '#333',
|
|
},
|
|
resultValue: {
|
|
flex: 1,
|
|
textAlign: 'center',
|
|
color: '#111',
|
|
fontWeight: '500',
|
|
},
|
|
resultStatus: {
|
|
flex: 1,
|
|
textAlign: 'right',
|
|
fontWeight: 'bold',
|
|
},
|
|
});
|
|
|
|
export default ScreenMassa;
|