Fakultas Ilmu Komputer UI

Commit 2513131e authored by jahnsmichael's avatar jahnsmichael
Browse files

[GREEN] EditProfileForm scene

parent 61b6b753
import { Box, Text } from "components";
import React from "react";
import React, { useState, useContext, useEffect } from 'react';
import styled from 'styled-components/native';
import { ActivityIndicator, ScrollView, View, Modal, Image } from 'react-native';
import { Header, Field, Button, Text } from '../../components';
import error_img from '../OfficerSignupForm/img/folder.png';
import { useFormState } from 'helpers';
import { KECAMATAN_VALUES, KELURAHAN_VALUES } from '../OfficerSignupForm/constants';
import { useNavigation } from '@react-navigation/native';
import { AppContext } from 'contexts';
import translateError from '../OfficerSignupForm/utilities'
const EditProfileForm = () => {
const navigation = useNavigation();
const global = useContext(AppContext);
const headingSize = 0.028 * global.vh;
const imageSize = 0.15 * global.vh;
const [form, setField] = useFormState({
new_name: { type: 'text' },
new_username: { type: 'any' },
new_password: { type: 'password' },
confirm_new_password: { type: 'password' },
new_email: { type: 'email' },
new_phone_number: { type: 'phone' },
new_district: { type: 'any' },
new_sub_district: { type: 'any' },
});
const [serverHasError, setServerHasError] = useState(false);
const [messageErrors, setMessageErrors] = useState({
new_name: '',
new_username: '',
new_password: '',
confirm_new_password: '',
new_email: '',
new_phone_number: '',
new_district: '',
new_sub_district: '',
})
const [modalVisible, setModalVisible] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const initFieldValue = () => {
setField('new_name', global.user.name);
setField('new_username', global.user.username);
setField('new_email', global.user.email);
setField('new_phone_number', global.user.phone_number);
setField('new_district', global.user.district);
setField('new_sub_district', global.user.sub_district);
}
useEffect(initFieldValue, []);
return (
<Box>
<Text>EditProfilePage</Text>
</Box>
)
}
<View>
<ScrollView>
<Header headerText="Edit Profile" />
<ContainerContent>
<Modal animationType="fade" transparent={true} visible={isLoading}>
<ModalContainer>
<ActivityIndicator
animating={isLoading}
size="large"
color="#fff"
/>
</ModalContainer>
</Modal>
<Modal
id="errorModal"
animationType="fade"
transparent={true}
visible={modalVisible}
onDismiss={() => setServerHasError(false)}>
<ModalContainer>
<ModalInner>
<Image
style={{ width: imageSize, height: imageSize }}
source={error_img}
/>
<HeadingField>
{serverHasError ? (
<>
<Text isBold={true} fontSize={headingSize}>
Unknown Server Error
</Text>
</>
) : (
<>
<Text isBold={true} fontSize={headingSize}>
Terjadi kesalahan, periksa kembali data anda.
</Text>
</>
)}
</HeadingField>
<Button id="modalBack" type={2} onPress={() => setModalVisible(false)}>
Kembali
</Button>
</ModalInner>
</ModalContainer>
</Modal>
<InputField>
<Field
id="new_name"
name="Nama"
placeholder="Nama Lengkap Anda"
isRequired={true}
information={messageErrors.new_name}
value={form.fields.new_name.value}
updateValue={val => setField('new_name', val)}
/>
</InputField>
<InputField>
<Field
id="new_username"
name="Username"
placeholder="Username Anda"
isRequired={true}
information={messageErrors.new_username}
value={form.fields.new_username.value}
updateValue={val => setField('new_username', val)}
/>
</InputField>
<InputField>
<Field
id="new_password"
name="Password"
placeholder="Password Anda"
isRequired={true}
shouldSecure={true}
information={messageErrors.new_password}
value={form.fields.new_password.value}
updateValue={val => setField('new_password', val)}
/>
</InputField>
<InputField>
<Field
id="confirm_new_password"
name="Konfirmasi Password"
placeholder="Konfirmasi Password Anda"
isRequired={true}
shouldSecure={true}
information={messageErrors.confirm_new_password}
value={form.fields.confirm_new_password.value}
updateValue={val => setField('confirm_new_password', val)}
/>
</InputField>
<InputField>
<Field
id="new_email"
name="Email"
placeholder="Email Anda"
isRequired={true}
information={messageErrors.new_email}
value={form.fields.new_email.value}
updateValue={val => setField('new_email', val)}
/>
</InputField>
<InputField>
<Field
id="new_phone_number"
name="Nomor Handphone"
placeholder="No HP Anda"
isRequired={true}
information={messageErrors.new_phone_number}
value={form.fields.new_phone_number.value}
updateValue={val => setField('new_phone_number', val)}
/>
</InputField>
<InputField>
<Field
id="new_district"
type={3}
name="Kecamatan"
placeholder="Pilih Kecamatan"
isRequired={true}
information={messageErrors.new_district}
value={form.fields.new_district.value || KECAMATAN_VALUES[0].value}
updateValue={val => setField('new_district', val)}
values={KECAMATAN_VALUES}
/>
</InputField>
<InputField>
<Field
id="new_sub_district"
type={3}
name="Kelurahan"
placeholder="Pilih Kelurahan"
isRequired={true}
information={messageErrors.new_sub_district}
value={form.fields.new_sub_district.value || KELURAHAN_VALUES[KECAMATAN_VALUES[0].value][0].value}
updateValue={val => setField('new_sub_district', val)}
values={(form.fields.new_district.value) ? KELURAHAN_VALUES[form.fields.new_district.value] : KELURAHAN_VALUES[KECAMATAN_VALUES[0].value]}
/>
</InputField>
<Button
id="submit"
type={1}
onPress={async () => {
setIsLoading(true)
const response = await global.services.main.editProfile({
new_name: form.fields.new_name.value,
new_username: form.fields.new_username.value.replace(/\s+$/, ''),
new_password: form.fields.new_password.value,
confirm_new_password: form.fields.confirm_new_password.value,
new_email: form.fields.new_email.value,
new_phone_number: form.fields.new_phone_number.value,
new_district: form.fields.new_district.value,
new_sub_district: form.fields.new_sub_district.value
})
if (response.status === 200) {
setIsLoading(false);
const meRes = await global.services.main.me()
if (meRes.status === 200) {
global.setUser(meRes.data)
} else {
global.setToken('')
}
navigation.reset({
index: 0,
routes: [{ name: "profile" }],
});
} else if (response.status === 400) {
const errors = {
new_name: response.data.new_name || [],
new_username: response.data.new_username || [],
new_password: response.data.new_password || [],
confirm_new_password: response.data.confirm_new_password || [],
new_email: response.data.new_email || [],
new_phone_number: response.data.new_phone_number || [],
new_district: response.data.new_district || [],
new_sub_district: response.data.new_sub_district || [],
}
if (response.data.non_field_errors) {
switch (response.data.non_field_errors[0]) {
case "Inconsistent password and confirmation":
errors.confirm_new_password = [
...errors.confirm_new_password,
"Password dan konfirmasinya tidak konsisten"
]
break;
case "Inconsistent district and sub district value":
errors.new_district = [
...errors.new_district,
"Kecamatan dan kelurahan tidak konsisten"
]
break;
default:
break;
}
}
setMessageErrors({
new_name: translateError(errors.new_name[0] || ""),
new_username: translateError(errors.new_username[0] || "") + " Username hanya boleh terdiri dari karakter alfanumerik atau salah satu dari {@, +, ., _, -}",
new_password: translateError(errors.new_password[0] || ""),
confirm_new_password: translateError(errors.confirm_new_password[0] || ""),
new_email: translateError(errors.new_email[0] || ""),
new_phone_number: translateError(errors.new_phone_number[0] || ""),
new_district: translateError(errors.new_district[0] || ""),
new_sub_district: translateError(errors.new_sub_district[0] || ""),
})
} else if (response.status === 500) {
if (response.data.includes("IntegrityError")) {
setServerHasError(false);
} else {
setServerHasError(true);
}
setModalVisible(true);
}
setIsLoading(false);
}}>
Edit Profile
</Button>
</ContainerContent>
</ScrollView>
</View>
);
};
const ContainerContent = styled.View`
padding: 5%;
background-color: white;
`;
const InputField = styled.View`
margin-bottom: 5%;
`;
const ModalContainer = styled.View`
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #00000080;
`;
const HeadingField = styled.View`
margin: 10% 0;
align-items: center;
`;
const ModalInner = styled.View`
align-items: center;
background-color: #fff;
padding: 15%;
height: ${props => props.theme.vh * 0.55};
`;
export default EditProfileForm;
\ No newline at end of file
export default EditProfileForm;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment