[GREEN] EditProfileForm scene

src/scenes/EditProfileForm/index.tsx

-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;