add screensuhu

package.json

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

screens/ScreenMassa.js

@@ -1,341 +1,397 @@
-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';
+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 [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 [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 [weight, setWeight] = useState(0); //kg
+  const [height, setHeight] = useState(0); //cm
 
-    const [recordList,	setRecordList	] = useState([]);
+  const [recordList, setRecordList] = useState([]);
 
-    const getToken = async () => {
-        const savedToken = await AsyncStorage.getItem('auth_token');
-        if (savedToken !== null) {
-            setToken(savedToken);
+  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;
         }
-        else {
-            navigation.navigate("Profil");
-        }
-    };
+        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 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 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) );
+  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;
-    }
-    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 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 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 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();
+  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);
+    }
+  };
 
-    return (
-        <Container>
+  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>
+  );
 
-            <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>
+  useEffect(() => {
+    getToken();
+    fetchProfileDetail();
+    reqRecordList();
+  }, []);
 
-            <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>
+  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={{flex:2}}>
-                <FlatList
-                    data={recordList.data}
-                    renderItem={({ item }) => <ListItem item={item} />}
-                    keyExtractor={(item, index) => index.toString()}
-                />
-            </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>
 
-        </Container>
-    ); // End return
+      <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',
-    },
+  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;

screens/ScreenSuhu.js

@@ -1,21 +1,341 @@
-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 ScreenSuhu = ({ navigation }) => {
-  return (
-    <View style={styles.container}>
-      <Text>Ini halaman Suhu</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 [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({
-  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,
+  },
+  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",
   },
 });