From 517f76ff358fec9a7d56065c2502f7b51f66bf4a Mon Sep 17 00:00:00 2001 From: Syahdan Date: Thu, 10 Jul 2025 11:56:44 +0700 Subject: [PATCH] screen gula done (might check with login) --- screens/ScreenGula.js | 411 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 400 insertions(+), 11 deletions(-) diff --git a/screens/ScreenGula.js b/screens/ScreenGula.js index 4db3fcb..1f22b92 100644 --- a/screens/ScreenGula.js +++ b/screens/ScreenGula.js @@ -1,21 +1,410 @@ -import { StatusBar } from 'expo-status-bar'; -import { StyleSheet, Text, View } from 'react-native'; +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 ScreenGula = ({ 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 [result, setResult] = useState(""); // Glucose level + const [unit, setUnit] = useState("mg/dL"); // Unit (mg/dL or mmol/L) + const [method, setMethod] = useState("CBG"); // Method (CBG, FBG, OGTT, etc.) + const [location, setLocation] = useState(""); // Test location + const [tool, setTool] = useState(""); // Device/tool used + + const [recordList, setRecordList] = useState([]); + + const getToken = async () => { + const savedToken = await AsyncStorage.getItem("auth_token"); + if (savedToken !== null) { + setToken(savedToken); + } else { + // navigation.navigate("Profile"); + } + }; + + 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 quickResult = (result, unit, method) => { + var title = "Cek Gula Darah"; + var message = "Masukkan hasil pemeriksaan gula darah"; + var image = require("../img/thermometer.png"); // You'll change this + var category = "unknown"; + + const glucoseValue = parseFloat(result) || 0; + + if (glucoseValue === 0) { + title = "Cek Gula Darah"; + message = "Masukkan hasil pemeriksaan gula darah"; + category = "input"; + } else { + // Convert mmol/L to mg/dL if needed for consistent comparison + let glucoseInMgDl = glucoseValue; + if (unit === "mmol/L") { + glucoseInMgDl = glucoseValue * 18; + } + + // Determine category based on method and glucose level + if (method === "FBG" || method === "Puasa") { + // Fasting Blood Glucose + if (glucoseInMgDl < 70) { + title = "Hipoglikemia"; + message = "Gula darah rendah - Segera konsumsi makanan manis"; + category = "low"; + } else if (glucoseInMgDl >= 70 && glucoseInMgDl <= 100) { + title = "Gula Darah Normal"; + message = "Gula darah puasa dalam batas normal"; + category = "normal"; + } else if (glucoseInMgDl >= 100 && glucoseInMgDl <= 125) { + title = "Prediabetes"; + message = "Gula darah puasa sedikit tinggi - Perhatikan pola makan"; + category = "prediabetes"; + } else if (glucoseInMgDl >= 126) { + title = "Diabetes"; + message = "Gula darah puasa tinggi - Konsultasi dengan dokter"; + category = "diabetes"; + } + } else { + // Random/Post-meal glucose + if (glucoseInMgDl < 70) { + title = "Hipoglikemia"; + message = "Gula darah rendah - Segera konsumsi makanan manis"; + category = "low"; + } else if (glucoseInMgDl < 140) { + title = "Gula Darah Normal"; + message = "Gula darah dalam batas normal"; + category = "normal"; + } else if (glucoseInMgDl >= 140 && glucoseInMgDl <= 199) { + title = "Prediabetes"; + message = "Gula darah sedikit tinggi - Perhatikan pola makan"; + category = "prediabetes"; + } else if (glucoseInMgDl >= 200) { + title = "Diabetes"; + message = "Gula darah tinggi - Konsultasi dengan dokter"; + category = "diabetes"; + } + } + } + + return { title, message, image, category }; + }; + + const reqRecordList = async () => { + try { + const url = "https://uas.ditaajipratama.net/api/checkcare/glucose/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/glucose/add"; + const body = { + result, + unit, + method, + location, + tool, + }; + const auth_token = await AsyncStorage.getItem("auth_token"); + const config = { + headers: { + Authorization: `Bearer ${auth_token}`, + }, + }; + const handle = (data) => { + reqRecordList(); + setResult(""); + setUnit("mg/dL"); + setMethod("CBG"); + setLocation(""); + setTool(""); + }; + if (auth_token !== null) { + HttpRequest(url, body, config, handle); + } + } catch (error) { + console.log(error.stack); + } + }; + + const ListItem = ({ item }) => { + const quickRes = quickResult(item.result, item.unit, item.method); + return ( + + {item.when} + + {item.result} {item.unit} ({item.method}) + + {quickRes.title} + + ); + }; + + useEffect(() => { + getToken(); + fetchProfileDetail(); + reqRecordList(); + }, []); + return ( - - Ini halaman Cek Gula Darah - - + + + + + + + + {quickResult(result, unit, method).title} + + + {`Gula: ${result || 0} ${unit} (${method})`} + + + {quickResult(result, unit, method).message} + + + + + + + setResult(text)} + value={result} + /> + setUnit(text)} + value={unit} + /> + + + + setMethod(text)} + value={method} + /> + setLocation(text)} + value={location} + /> + + + setTool(text)} + value={tool} + /> + + + Submit + + + + + } + keyExtractor={(item, index) => index.toString()} + /> + + ); -} +}; const styles = StyleSheet.create({ - container: { + headerRow: { + flexDirection: "row", + alignItems: "center", + }, + illustration: { + width: 100, + height: 100, + }, + illustrationContainer: { + marginRight: 16, + }, + textContainer: { flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center', + }, + title: { + fontSize: 28, + fontWeight: "bold", + color: "#111", + }, + datetime: { + fontSize: 12, + color: "#444", + marginVertical: 4, + }, + description: { + fontSize: 14, + color: "#333", + maxWidth: 320, + marginBottom: 16, + }, + inputColumn: { + width: "100%", + marginBottom: 10, + }, + 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", + }, + inputFormTool: { + borderWidth: 1, + borderColor: "#ccc", + borderRadius: 30, + paddingVertical: 10, + paddingHorizontal: 16, + marginVertical: 6, + backgroundColor: "#fff", + color: "#333", + }, + inputButtonSubmit: { + borderRadius: 30, + paddingVertical: 12, + marginVertical: 6, + backgroundColor: "#007bff", + }, + 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", }, });