Pertemuan ke-11: Membuat halaman profile (Username: tester, Password: tester)

screens/ScreenProfile.js

@@ -71,11 +71,113 @@ const ScreenProfile = ({ navigation }) => {
         };
         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://asrul.costafuture.com/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://asrul.costafuture.com/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 (
-        <View style={styles.container}>
-            <Text>Ini halaman Profile</Text>
-        </View>
+        <Container>
+            {token ? (
+                <View style={styles.profil}>
+                    <Text>ID: {profileId}</Text>
+                    <View style={styles.colnama}>
+                        <TextInput
+                            style={[styles.input, styles.nama,]}
+                            placeholder="Nama Lengkap"
+                            onChangeText={(text) => setProfileName(text)}
+                            value={profileName}
+                        />
+                        <Text>{profileSex}</Text>
+                    </View>
+                    <Text>{profileAge} Tahun</Text>
+                    <Text>{profileDob}</Text>
+                    <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>
     );
 }