22412001/uas-mobile-22412001
1
0
Fork 0
Code Pull Requests Activity

add screensuhu

Browse Source
This commit is contained in:
Syahdan Hafiz Ashari 2025-07-10 11:44:09 +07:00
parent aa8736b83b
commit 5d6e53670b
4 changed files with 6657 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -26,5 +26,6 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.20.0" "@babel/core": "^7.20.0"
}, },
"private": true "private": true,
"packageManager": "pnpm@10.6.1+sha512.40ee09af407fa9fbb5fbfb8e1cb40fbb74c0af0c3e10e9224d7b53c7658528615b2c92450e74cfad91e3a2dcafe3ce4050d80bda71d757756d2ce2b66213e9a3"
} }

5945
pnpm-lock.yaml Normal file
View File

File diff suppressed because it is too large Load Diff

700
screens/ScreenMassa.js
View File

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

344
screens/ScreenSuhu.js
View File

@ -1,21 +1,341 @@
import { StatusBar } from 'expo-status-bar'; import React, { useState, useRef, useEffect } from "react";
import { StyleSheet, Text, View } from 'react-native'; 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 ScreenSuhu = ({ navigation }) => { const ScreenSuhu = ({ navigation }) => {
return ( const [token, setToken] = useState(null);
<View style={styles.container}>
<Text>Ini halaman Suhu</Text> const [profileId, setProfileId] = useState(null);
<StatusBar style="auto" /> const [profileName, setProfileName] = useState(null);
</View> const [profileSex, setProfileSex] = useState(null);
const [profileDob, setProfileDob] = useState(null);
const [profileAge, setProfileAge] = useState(null);
const [temp, setTemp] = useState(0); //kg
const [unit, setUnit] = useState("C"); // Celsius / Fahrenheit
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 = (unit, temp) => {
var title = "Cek Suhu";
var message = "Masukkan suhu tubuh Anda";
var image = require("../img/thermometer.png");
if (unit === "C") {
if (temp < 35) {
title = "Hypothermia";
message = "Suhu tubuh Anda terlalu rendah";
} else if (temp >= 35 && temp <= 37.2) {
title = "Normal temperature";
message = "Suhu tubuh Anda normal";
} else if (temp > 37.2) {
title = "Fever";
message = "Suhu tubuh Anda tinggi";
}
} else if (unit === "F") {
if (temp < 95) {
title = "Hypothermia";
message = "Suhu tubuh Anda terlalu rendah";
} else if (temp >= 95 && temp <= 99) {
title = "Normal temperature";
message = "Suhu tubuh Anda normal";
} else if (temp > 99) {
title = "Fever";
message = "Suhu tubuh Anda tinggi";
}
} else {
title = "Cek Suhu";
message = "Invalid unit. Use 'celsius' or 'fahrenheit'";
image = require("../img/thermometer.png");
}
return { title, message, image };
};
const reqRecordList = async () => {
try {
const url = "https://uas.ditaajipratama.net/api/checkcare/temp/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/temp/add";
const body = {
temperature: temp,
unit,
};
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}>
Temp: {item.temperature} °{item.unit}
</Text>
<Text style={[styles.resultStatus]}>
{quickResult(item.unit, item.temperature).title}
</Text>
</CardRecord>
); );
}
useEffect(() => {
getToken();
fetchProfileDetail();
reqRecordList();
}, []);
return (
<Container>
<View style={styles.headerRow}>
<View style={styles.illustrationContainer}>
<Image
source={quickResult(unit, temp).image}
style={styles.illustration}
resizeMode="contain"
/>
</View>
<View style={styles.textContainer}>
<Text style={styles.title}>{quickResult(unit, temp).title}</Text>
<Text style={styles.datetime}>{`Suhu: ${temp}° ${unit}`}</Text>
<Text style={styles.description}>
{quickResult(unit, temp).message}
</Text>
</View>
</View>
<View style={styles.inputRow}>
<TextInput
style={styles.inputForm}
placeholder={`Temp (°${unit})`}
placeholderTextColor="#888"
keyboardType="numeric"
onChangeText={(text) => setTemp(text)}
value={temp}
/>
<TextInput
style={styles.inputForm}
placeholder="Unit (C/F)"
placeholderTextColor="#888"
keyboardType="string"
onChangeText={(text) => setUnit(text)}
value={unit}
/>
<TouchableOpacity style={styles.inputButtonSubmit} onPress={reqAdd}>
<Text style={styles.submitText}>Submit</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 2 }}>
<FlatList
data={[{ temperature: temp, unit: unit }]}
renderItem={({ item }) => <ListItem item={item} />}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</Container>
);
};
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { headerRow: {
flexDirection: "row",
alignItems: "center",
},
illustration: {
width: 100,
height: 100,
},
illustrationContainer: {
marginRight: 16,
},
textContainer: {
flex: 1, flex: 1,
backgroundColor: '#fff', },
alignItems: 'center', title: {
justifyContent: 'center', 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",
}, },
}); });