screen gula done (might check with login)
This commit is contained in:
parent
f696f9e065
commit
517f76ff35
@ -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 }) => {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>Ini halaman Cek Gula Darah</Text>
|
||||
<StatusBar style="auto" />
|
||||
</View>
|
||||
);
|
||||
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 (
|
||||
<CardRecord key="{item.id}">
|
||||
<Text style={styles.resultDate}>{item.when}</Text>
|
||||
<Text style={styles.resultValue}>
|
||||
{item.result} {item.unit} ({item.method})
|
||||
</Text>
|
||||
<Text style={[styles.resultStatus]}>{quickRes.title}</Text>
|
||||
</CardRecord>
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getToken();
|
||||
fetchProfileDetail();
|
||||
reqRecordList();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<View style={styles.headerRow}>
|
||||
<View style={styles.illustrationContainer}>
|
||||
<Image
|
||||
source={quickResult(result, unit, method).image}
|
||||
style={styles.illustration}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.textContainer}>
|
||||
<Text style={styles.title}>
|
||||
{quickResult(result, unit, method).title}
|
||||
</Text>
|
||||
<Text style={styles.datetime}>
|
||||
{`Gula: ${result || 0} ${unit} (${method})`}
|
||||
</Text>
|
||||
<Text style={styles.description}>
|
||||
{quickResult(result, unit, method).message}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputColumn}>
|
||||
<View style={styles.inputRow}>
|
||||
<TextInput
|
||||
style={styles.inputForm}
|
||||
placeholder="Hasil (angka)"
|
||||
placeholderTextColor="#888"
|
||||
keyboardType="numeric"
|
||||
onChangeText={(text) => setResult(text)}
|
||||
value={result}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.inputForm}
|
||||
placeholder="Unit"
|
||||
placeholderTextColor="#888"
|
||||
onChangeText={(text) => setUnit(text)}
|
||||
value={unit}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputRow}>
|
||||
<TextInput
|
||||
style={styles.inputForm}
|
||||
placeholder="Metode (CBG/FBG/OGTT)"
|
||||
placeholderTextColor="#888"
|
||||
onChangeText={(text) => setMethod(text)}
|
||||
value={method}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.inputForm}
|
||||
placeholder="Lokasi"
|
||||
placeholderTextColor="#888"
|
||||
onChangeText={(text) => setLocation(text)}
|
||||
value={location}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<TextInput
|
||||
style={styles.inputFormTool}
|
||||
placeholder="Alat yang digunakan"
|
||||
placeholderTextColor="#888"
|
||||
onChangeText={(text) => setTool(text)}
|
||||
value={tool}
|
||||
/>
|
||||
|
||||
<TouchableOpacity style={styles.inputButtonSubmit} onPress={reqAdd}>
|
||||
<Text style={styles.submitText}>Submit</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={{ flex: 2 }}>
|
||||
<FlatList
|
||||
data={recordList}
|
||||
renderItem={({ item }) => <ListItem item={item} />}
|
||||
keyExtractor={(item, index) => index.toString()}
|
||||
/>
|
||||
</View>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
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",
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user