uas-mobile-22412001/screens/ScreenProfile.js

import React, { useState, useRef, useEffect } from 'react';
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { StyleSheet, Text, View, Image, TouchableOpacity, Animated, BackHandler, FlatList, Button, TextInput } from 'react-native';
import Container from '../components/Container';

const ScreenProfile = ({ navigation }) => {
    const [username, setUsername] = useState(null);
    const [password, setPassword] = useState(null);

    const [token, setToken] = useState(null); // Sebagai kunci profile

    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 storeToken = async (auth_token) => {
        await AsyncStorage.setItem('auth_token', auth_token);
    };
    const getToken = async () => {
        const savedToken = await AsyncStorage.getItem('auth_token');
        if (savedToken !== null) {
            setToken(savedToken);
        }
    };
    const removeToken = async () => {
        await AsyncStorage.removeItem('auth_token');
        setToken(null);
    };

    const HttpRequest = (url,body,conf,handler) => {
        axios.post(url,body,conf).then(response => {
            handler(response.data);
        }).catch(error => {
            console.error('Terjadi kesalahan:', error.stack);
        });
    };

    const handleLogin = (data) => {
        if (data.status === 'success') {
            storeToken(data.data.jwt);
            getToken();
            navigation.goBack();
        }
    };
    const handleLogout = (data) => {
        if (data.status === 'success') {
            removeToken();
            navigation.goBack();
        }
    };

    const submitLogin = () => {
        const url = 'https://uas.ditaajipratama.net/api/auth/login';
        const body = {
            username:username,
            password:password
        };
        const config = {};
        HttpRequest(url, body, config, handleLogin);
    };
    const submitLogout = () => {
        const url = 'https://uas.ditaajipratama.net/api/auth/logout';
        const body = {};
        const config = {
            headers: {
                Authorization: `Bearer ${token}`
            }
        };
        HttpRequest(url, body, config, handleLogout);
    };

    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 reqProfileDetail = 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}`
                }
            };
            if (auth_token !== null) { HttpRequest(url, body, config, handleProfileDetail); }
        }catch(error){
            console.log(error.stack);
        }        
    };

    const handleProfileEdit = (data) => {
        reqProfileDetail();
    };
    const reqProfileEdit = async () => {
        try {
            const url = 'https://uas.ditaajipratama.net/api/checkcare/profile/edit';
            const body = {
                id:profileId,
                name:profileName,
                dob:profileDob,
                sex:profileSex
            };
            const auth_token = await AsyncStorage.getItem('auth_token');
            const config = {
                headers: {
                    Authorization: `Bearer ${auth_token}`
                }
            };
            if (auth_token !== null) { HttpRequest(url, body, config, handleProfileEdit); }
        }catch(error){
            console.log(error.stack);
        }
    };

    useEffect(() => {
        getToken();
        reqProfileDetail();
    }, []);
    
    return (
        <Container>
            {token ? (
                <View style={styles.profil}>
                    <Text style={{fontWeight:"bold", marginTop:10,}}>ID: {profileId}</Text>
                    <View style={styles.colnama}>
                        <TextInput
                            style={[styles.input, styles.nama,]}
                            placeholder="Nama Lengkap"
                            onChangeText={(text) => setProfileName(text)}
                            value={profileName}
                        />
                        {profileSex == "Male" ? (
                            <Image style={{width:'40', height:'40',resizeMode: 'cover',}} source={require('../img/man.png')} />
                        ) : (
                            <Image style={{width:'40', height:'40',resizeMode: 'cover',}} source={require('../img/woman.png')} />
                        ) }
                        
                    </View>
                    <View style={styles.columur}>
                        <Text style={{fontSize:24, marginRight:10,}}>{profileAge} tahun</Text>
                        <TextInput
                            style={styles.input}
                            placeholder="Tanggal Lahir"
                            onChangeText={(text) => setProfileDob(text)}
                            value={profileDob}
                        />
                    </View>
                    <View style={styles.button}>
                        <Button title="Simpan Perubahan" onPress={reqProfileEdit} />
                    </View>
                    <View style={styles.button}>
                        <Button title="Logout" onPress={submitLogout} />
                    </View>
                </View>
            ) : (
                <View style={styles.login}>
                    <Text style={styles.title}>Login</Text>
                    <TextInput
                        style={[styles.input, {marginTop:10,}]}
                        placeholder="Username"
                        placeholderTextColor="#999999"
                        onChangeText={(text) => setUsername(text)}
                        value={username}
                    />
                    <TextInput
                        style={[styles.input, {marginVertical:10,}]}
                        placeholder="Password"
                        placeholderTextColor="#999999"
                        secureTextEntry
                        onChangeText={(text) => setPassword(text)}
                        value={password}
                    />
                    <Button style={styles.button} title="Login" onPress={submitLogin} />
                </View>
            )}
        </Container>
    ); // End return
}

const styles = StyleSheet.create({
    title: {
        fontSize: 24,
        fontWeight: 'bold',
    },
    input: {
        borderColor: '#cccccc',
        borderWidth: 1,
        color:'#000000',
        paddingHorizontal: 10,
    },
    button: {
        marginBottom: 10,
    },
    nama: {
        marginRight:10,
        paddingHorizontal:0,
        fontSize: 24,
        width:'75%',
    },
    colnama: {
        flexDirection:'row',
        alignItems: 'center',
        marginBottom:10,
    },
    columur: {
        flexDirection:'row',
        alignItems: 'center',
        marginBottom:10,
    },
});

export default ScreenProfile;