upd: edit profile
Deskripsi: - ketinggalan No Issues' '
This commit is contained in:
amel
353
app/(application)/edit-profile.tsx
Normal file
353
app/(application)/edit-profile.tsx
Normal file
@@ -0,0 +1,353 @@
|
||||
import ButtonBackHeader from "@/components/buttonBackHeader";
|
||||
import ButtonSaveHeader from "@/components/buttonSaveHeader";
|
||||
import { InputForm } from "@/components/inputForm";
|
||||
import ModalSelect from "@/components/modalSelect";
|
||||
import SelectForm from "@/components/selectForm";
|
||||
import Styles from "@/constants/Styles";
|
||||
import { apiEditProfile, apiGetProfile } from "@/lib/api";
|
||||
import { setEntities } from "@/lib/entitiesSlice";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
import { router, Stack } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Image,
|
||||
Pressable,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
Text,
|
||||
ToastAndroid,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
type Props = {
|
||||
id: string;
|
||||
name: string;
|
||||
nik: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
gender: string;
|
||||
img: string;
|
||||
isActive: boolean;
|
||||
idGroup: string;
|
||||
idPosition: string;
|
||||
};
|
||||
|
||||
export default function EditProfile() {
|
||||
const dispatch = useDispatch()
|
||||
const entities = useSelector((state: any) => state.entities)
|
||||
const { token, decryptToken } = useAuthSession()
|
||||
const [errorImg, setErrorImg] = useState(false)
|
||||
const [selectedImage, setSelectedImage] = useState<string | undefined | { uri: string }>(undefined);
|
||||
const [choosePosition, setChoosePosition] = useState({ val: entities.idPosition, label: entities.position });
|
||||
const [chooseGender, setChooseGender] = useState({ val: entities.gender, label: entities.gender == "F" ? 'Perempuan' : 'Laki-laki' });
|
||||
const [valSelect, setValSelect] = useState<"position" | "gender">("position");
|
||||
const [isSelect, setSelect] = useState(false);
|
||||
const [disableBtn, setDisableBtn] = useState(false)
|
||||
const [valChoose, setValChoose] = useState("")
|
||||
const [imgForm, setImgForm] = useState<any>();
|
||||
const [data, setData] = useState<Props>({
|
||||
id: entities.id,
|
||||
name: entities.name,
|
||||
nik: entities.nik,
|
||||
email: entities.email,
|
||||
phone: entities.phone,
|
||||
gender: entities.gender,
|
||||
img: entities.img,
|
||||
isActive: entities.isActive,
|
||||
idGroup: entities.idGroup,
|
||||
idPosition: entities.idPosition
|
||||
});
|
||||
const [error, setError] = useState({
|
||||
position: false,
|
||||
nik: false,
|
||||
name: false,
|
||||
phone: false,
|
||||
email: false,
|
||||
gender: false,
|
||||
});
|
||||
|
||||
|
||||
async function handleLoad() {
|
||||
try {
|
||||
const response = await apiGetProfile({ id: entities.id });
|
||||
dispatch(setEntities(response.data))
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (entities.id == undefined) {
|
||||
handleLoad();
|
||||
}
|
||||
}, [entities]);
|
||||
|
||||
function validationForm(cat: string, val: any, label?: string) {
|
||||
if (cat == "position") {
|
||||
setChoosePosition({ val, label: String(label) });
|
||||
setData({ ...data, idPosition: val });
|
||||
if (val == "" || val == "null") {
|
||||
setError({ ...error, position: true });
|
||||
} else {
|
||||
setError({ ...error, position: false });
|
||||
}
|
||||
} else if (cat == "nik") {
|
||||
setData({ ...data, nik: val });
|
||||
if (val == "" || val.length !== 16) {
|
||||
setError({ ...error, nik: true });
|
||||
} else {
|
||||
setError({ ...error, nik: false });
|
||||
}
|
||||
} else if (cat == "name") {
|
||||
setData({ ...data, name: val });
|
||||
if (val == "") {
|
||||
setError({ ...error, name: true });
|
||||
} else {
|
||||
setError({ ...error, name: false });
|
||||
}
|
||||
} else if (cat == "email") {
|
||||
setData({ ...data, email: val });
|
||||
if (
|
||||
val == "" ||
|
||||
!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(val)
|
||||
) {
|
||||
setError({ ...error, email: true });
|
||||
} else {
|
||||
setError({ ...error, email: false });
|
||||
}
|
||||
} else if (cat == "phone") {
|
||||
setData({ ...data, phone: val });
|
||||
if (val == "" || !(val.length >= 10 && val.length <= 15)) {
|
||||
setError({ ...error, phone: true });
|
||||
} else {
|
||||
setError({ ...error, phone: false });
|
||||
}
|
||||
} else if (cat == "gender") {
|
||||
setChooseGender({ val, label: String(label) });
|
||||
setData({ ...data, gender: val });
|
||||
if (val == "" || val == "null") {
|
||||
setError({ ...error, gender: true });
|
||||
} else {
|
||||
setError({ ...error, gender: false });
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function checkForm() {
|
||||
if (Object.values(error).some((v) => v == true) || Object.values(data).some((v) => v == "")) {
|
||||
setDisableBtn(true)
|
||||
} else {
|
||||
setDisableBtn(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
checkForm()
|
||||
}, [error, data])
|
||||
|
||||
async function handleEdit() {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const fd = new FormData()
|
||||
|
||||
if (imgForm != undefined) {
|
||||
fd.append("file", {
|
||||
uri: imgForm.uri,
|
||||
type: imgForm.mimeType,
|
||||
name: imgForm.fileName,
|
||||
} as any);
|
||||
} else {
|
||||
fd.append("file", "undefined",);
|
||||
}
|
||||
|
||||
fd.append("data", JSON.stringify(
|
||||
{ user: hasil, ...data }
|
||||
))
|
||||
|
||||
const response = await apiEditProfile(fd)
|
||||
|
||||
if (response.success) {
|
||||
ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
|
||||
await handleLoad()
|
||||
router.back()
|
||||
} else {
|
||||
ToastAndroid.show(response.message, ToastAndroid.SHORT)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
ToastAndroid.show('Gagal mengupdate data', ToastAndroid.SHORT)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const pickImageAsync = async () => {
|
||||
let result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ["images"],
|
||||
allowsEditing: true,
|
||||
quality: 1,
|
||||
aspect: [1, 1],
|
||||
});
|
||||
|
||||
if (!result.canceled) {
|
||||
setErrorImg(false)
|
||||
setSelectedImage(result.assets[0].uri);
|
||||
setImgForm(result.assets[0]);
|
||||
} else {
|
||||
alert("Tidak ada gambar yang dipilih");
|
||||
setErrorImg(false)
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
headerLeft: () => (
|
||||
<ButtonBackHeader
|
||||
onPress={() => {
|
||||
router.back();
|
||||
}}
|
||||
/>
|
||||
),
|
||||
headerTitle: "Edit Profile",
|
||||
headerTitleAlign: "center",
|
||||
headerRight: () => (
|
||||
<ButtonSaveHeader
|
||||
disable={disableBtn}
|
||||
category="update"
|
||||
onPress={() => {
|
||||
handleEdit()
|
||||
}}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<ScrollView>
|
||||
<View style={[Styles.p15, Styles.mb100]}>
|
||||
<View style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
{
|
||||
selectedImage != undefined ? (
|
||||
<Pressable onPress={pickImageAsync}>
|
||||
<Image
|
||||
src={
|
||||
typeof selectedImage === "string"
|
||||
? selectedImage
|
||||
: selectedImage.uri
|
||||
}
|
||||
style={[Styles.userProfileBig]}
|
||||
onError={() => { setErrorImg(true) }}
|
||||
/>
|
||||
</Pressable>
|
||||
) : (
|
||||
<Pressable onPress={pickImageAsync}>
|
||||
{
|
||||
<Image
|
||||
source={errorImg ? require("../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
|
||||
style={[Styles.userProfileBig]}
|
||||
onError={() => { setErrorImg(true) }}
|
||||
/>
|
||||
}
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
</View>
|
||||
<SelectForm
|
||||
label="Jabatan"
|
||||
placeholder="Pilih Jabatan"
|
||||
value={choosePosition.label}
|
||||
required
|
||||
onPress={() => {
|
||||
setValChoose(choosePosition.val);
|
||||
setValSelect("position");
|
||||
setSelect(true);
|
||||
}}
|
||||
error={error.position}
|
||||
errorText="Jabatan tidak boleh kosong"
|
||||
/>
|
||||
<InputForm
|
||||
label="NIK"
|
||||
type="numeric"
|
||||
placeholder="NIK"
|
||||
required
|
||||
value={data?.nik}
|
||||
error={error.nik}
|
||||
errorText="NIK Harus 16 Karakter"
|
||||
onChange={val => {
|
||||
validationForm("nik", val)
|
||||
}}
|
||||
/>
|
||||
<InputForm
|
||||
label="Nama"
|
||||
type="default"
|
||||
placeholder="Nama"
|
||||
required
|
||||
value={data?.name}
|
||||
error={error.name}
|
||||
errorText="Nama tidak boleh kosong"
|
||||
onChange={val => {
|
||||
validationForm("name", val)
|
||||
}}
|
||||
/>
|
||||
<InputForm
|
||||
label="Email"
|
||||
type="default"
|
||||
placeholder="Email"
|
||||
required
|
||||
value={data?.email}
|
||||
error={error.email}
|
||||
errorText="Email tidak valid"
|
||||
onChange={val => {
|
||||
validationForm("email", val)
|
||||
}}
|
||||
/>
|
||||
<InputForm
|
||||
label="Nomor Telepon"
|
||||
type="numeric"
|
||||
placeholder="8XX-XXX-XXX"
|
||||
required
|
||||
itemLeft={<Text>+62</Text>}
|
||||
value={data?.phone}
|
||||
error={error.phone}
|
||||
errorText="Nomor Telepon tidak valid"
|
||||
onChange={val => {
|
||||
validationForm("phone", val)
|
||||
}}
|
||||
/>
|
||||
<SelectForm
|
||||
label="Jenis Kelamin"
|
||||
placeholder="Pilih Jenis Kelamin"
|
||||
value={chooseGender.label}
|
||||
required
|
||||
onPress={() => {
|
||||
setValChoose(chooseGender.val);
|
||||
setValSelect("gender");
|
||||
setSelect(true);
|
||||
}}
|
||||
error={error.gender}
|
||||
errorText="Jenis Kelamin tidak boleh kosong"
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<ModalSelect
|
||||
category={valSelect}
|
||||
close={setSelect}
|
||||
onSelect={(value) => {
|
||||
validationForm(valSelect, value.val, value.label);
|
||||
}}
|
||||
title={
|
||||
valSelect == "position"
|
||||
? "Jabatan"
|
||||
: "Jenis Kelamin"
|
||||
}
|
||||
open={isSelect}
|
||||
idParent={valSelect == "position" ? data?.idGroup : ""}
|
||||
valChoose={valChoose}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
@@ -6,7 +6,7 @@ import Styles from "@/constants/Styles";
|
||||
import { apiGetProfile } from "@/lib/api";
|
||||
import { setEntities } from "@/lib/entitiesSlice";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import { AntDesign, Octicons } from "@expo/vector-icons";
|
||||
import { AntDesign } from "@expo/vector-icons";
|
||||
import { router, Stack } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
|
||||
@@ -26,7 +26,6 @@ export default function Profile() {
|
||||
async function handleUserLogin() {
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
apiGetProfile({ id: hasil }).then((data) => dispatch(setEntities(data.data)));
|
||||
setRole(entities.idUserRole)
|
||||
}
|
||||
|
||||
|
||||
@@ -66,7 +65,7 @@ export default function Profile() {
|
||||
<View style={[Styles.rowSpaceBetween]}>
|
||||
<Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
|
||||
{
|
||||
role != "developer" && <Text style={[Styles.textLink]}>Edit</Text>
|
||||
entities.idUserRole != "developer" && <Text onPress={() => { router.push('/edit-profile') }} style={[Styles.textLink]}>Edit</Text>
|
||||
}
|
||||
</View>
|
||||
<ItemDetailMember category="nik" value={entities.nik} />
|
||||
|
||||
Reference in New Issue
Block a user