uas-mobile-22412001/screens/ScreenMassa.js

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;