upd: member

Deskripsi;
- upload gambar pada tambah member
- upload gambar pada edit member

NO Issues

app/(application)/member/[id].tsx

@@ -28,7 +28,7 @@ export default function MemberDetail() {
    const [data, setData] = useState<Props>()
    const [error, setError] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
-   const [isEdit, setEdit] = useState(false)
+   const [isEdit, setEdit] = useState(true)
 
    async function handleLoad() {
       try {
@@ -40,6 +40,7 @@ export default function MemberDetail() {
       }
    }
 
+
    useEffect(() => {
       handleLoad()
    }, []);
@@ -51,7 +52,7 @@ export default function MemberDetail() {
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Anggota',
                headerTitleAlign: 'center',
-               headerRight: () => (entityUser.role != "user") && isEdit && <HeaderRightMemberDetail active={data?.isActive} id={id} />,
+               headerRight: () => (entityUser.role != "user") && isEdit ? <HeaderRightMemberDetail active={data?.isActive} id={id} /> : <></>,
                headerShadowVisible: false
             }}
          />

app/(application)/member/create.tsx

@@ -37,6 +37,7 @@ export default function CreateMember() {
    const [isSelect, setSelect] = useState(false);
    const [disableBtn, setDisableBtn] = useState(true)
    const [valChoose, setValChoose] = useState("")
+   const [imgForm, setImgForm] = useState<any>()
    const [error, setError] = useState({
       group: false,
       position: false,
@@ -144,9 +145,21 @@ export default function CreateMember() {
       try {
          const hasil = await decryptToken(String(token?.current))
          const fd = new FormData()
+
          fd.append("data", JSON.stringify(
             { user: hasil, ...dataForm }
          ))
+
+         if (imgForm != undefined) {
+            fd.append("file", {
+               uri: imgForm.uri,
+               type: imgForm.mimeType,
+               name: imgForm.fileName,
+            } as any)
+         } else {
+            fd.append("file", "undefined")
+         }
+
          const response = await apiCreateUser(fd)
          if (response.success) {
             ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
@@ -166,10 +179,13 @@ export default function CreateMember() {
          mediaTypes: ["images"],
          allowsEditing: true,
          quality: 1,
+         aspect: [1, 1],
       });
 
       if (!result.canceled) {
          setSelectedImage(result.assets[0].uri);
+         setImgForm(result.assets[0]);
+
       } else {
          alert("Tidak ada gambar yang dipilih");
       }

app/(application)/member/edit/[id].tsx

@@ -41,7 +41,7 @@ export default function EditMember() {
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>();
    const [errorImg, setErrorImg] = useState(false)
-   const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
+   const [selectedImage, setSelectedImage] = useState<string | undefined | { uri: string }>(undefined);
    const [choosePosition, setChoosePosition] = useState({ val: "", label: "" });
    const [chooseRole, setChooseRole] = useState({ val: "", label: "" });
    const [chooseGender, setChooseGender] = useState({ val: "", label: "" });
@@ -49,6 +49,7 @@ export default function EditMember() {
    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: "",
       name: "",
@@ -76,6 +77,7 @@ export default function EditMember() {
       try {
          const response = await apiGetProfile({ id: id });
          setData(response.data);
+         setSelectedImage({ uri: `https://wibu-storage.wibudev.com/api/files/${response.data.img}`, });
          setChoosePosition({
             val: response.data.idPosition,
             label: response.data.position,
@@ -173,19 +175,33 @@ export default function EditMember() {
       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 apiEditUser(fd, id)
+
          if (response.success) {
             ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
             dispatch(setUpdateMember(!update))
-            router.replace(`/member/${id}`);
+            router.back()
          } else {
             ToastAndroid.show(response.message, ToastAndroid.SHORT)
          }
       } catch (error) {
          console.error(error)
+         ToastAndroid.show('Gagal mengupdate data', ToastAndroid.SHORT)
       }
    }
 
@@ -196,12 +212,16 @@ export default function EditMember() {
          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)
       }
    };
 
@@ -232,26 +252,37 @@ export default function EditMember() {
          <ScrollView>
             <View style={[Styles.p15, Styles.mb100]}>
                <View style={{ justifyContent: "center", alignItems: "center" }}>
-                  <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>
-                  {/* {
-                     selectedImage != undefined ? (
+                  {
+                     errorImg ?
                         <Pressable onPress={pickImageAsync}>
-                           <Image src={selectedImage} style={[Styles.userProfileBig]} />
+                           {
+                              <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>
-                     ) : (
-                        <Pressable onPress={pickImageAsync} style={[Styles.iconContent, ColorsStatus.gray]}>
-                           <MaterialCommunityIcons name="account-tie" size={100} color={'gray'} />
-                        </Pressable>
-                     )
-                  } */}
+                        :
+                        selectedImage != undefined ? (
+                           <Pressable onPress={pickImageAsync}>
+                              <Image
+                                 src={
+                                    typeof selectedImage === "string"
+                                       ? selectedImage
+                                       : selectedImage.uri
+                                 }
+                                 style={[Styles.userProfileBig]}
+                                 onError={() => { setErrorImg(true) }}
+                              />
+                           </Pressable>
+                        ) : (
+                           <Image
+                              source={require("../../../../assets/images/user.jpg")}
+                              style={[Styles.userProfileBig]}
+                           />
+                        )
+                  }
                </View>
                <SelectForm
                   label="Jabatan"

components/inputForm.tsx

@@ -34,7 +34,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
                   </Text>
                )
             }
-            <View style={[Styles.inputRoundForm, itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }, Styles.pv10]}>
+            <View style={[Styles.inputRoundForm, itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }, Styles.pv10, error && { borderColor: "red" }]}>
                {itemRight != undefined ? itemRight : itemLeft}
                <TextInput
                   editable={!disable}