upd: banner

Deskripsi:
- tambah banner
- hapus banner
- edit one banner

- hapus coding contoh tombol upload pada login page

No Issues

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

@@ -1,27 +1,110 @@
-import ButtonBackHeader from "@/components/buttonBackHeader"
-import ButtonSaveHeader from "@/components/buttonSaveHeader"
-import { InputForm } from "@/components/inputForm"
-import Styles from "@/constants/Styles"
-import { Entypo } from "@expo/vector-icons"
-import * as ImagePicker from 'expo-image-picker'
-import { router, Stack } from "expo-router"
-import { useState } from "react"
-import { Image, Pressable, SafeAreaView, ScrollView, Text, View } from "react-native"
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { apiEditBanner, apiGetBanner, apiGetBannerOne } from "@/lib/api";
+import { setEntities } from "@/lib/bannerSlice";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Entypo } from "@expo/vector-icons";
+import * as ImagePicker from "expo-image-picker";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import {
+   Image,
+   Pressable,
+   SafeAreaView,
+   ScrollView,
+   Text,
+   ToastAndroid,
+   View,
+} from "react-native";
+import { useDispatch } from "react-redux";
 
 export default function EditBanner() {
-   const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined)
+   const dispatch = useDispatch();
+   const { decryptToken, token } = useAuthSession();
+   const { id } = useLocalSearchParams<{ id: string }>();
+   const [selectedImage, setSelectedImage] = useState<
+      string | undefined | { uri: string }
+   >(undefined);
+   const [title, setTitle] = useState("");
+   const [error, setError] = useState(false);
+   const [imgForm, setImgForm] = useState<any>();
 
    const pickImageAsync = async () => {
       let result = await ImagePicker.launchImageLibraryAsync({
-         mediaTypes: ['images'],
-         allowsEditing: false,
+         mediaTypes: ["images"],
+         allowsEditing: true,
          quality: 1,
+         aspect: [1535, 450],
       });
 
       if (!result.canceled) {
          setSelectedImage(result.assets[0].uri);
+         setImgForm(result.assets[0]);
       } else {
-         alert('Tidak ada gambar yang dipilih');
+         alert("Tidak ada gambar yang dipilih");
+      }
+   };
+
+   const handleLoadData = async () => {
+      const hasil = await decryptToken(String(token?.current));
+      const data = await apiGetBannerOne({ user: hasil, id });
+      setSelectedImage({
+         uri: `https://wibu-storage.wibudev.com/api/files/${data.data.image}`,
+      });
+      setTitle(data.data.title);
+   };
+
+   useEffect(() => {
+      handleLoadData();
+   }, []);
+
+   function onValidate(val: string) {
+      setTitle(val);
+      if (val == "") {
+         setError(true);
+      } else {
+         setError(false);
+      }
+   }
+
+   const handleUpdateEntity = async () => {
+      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({
+               title,
+               user: hasil,
+            })
+         );
+
+         const updatedEntity = await apiEditBanner(fd, id)
+         if (updatedEntity.success) {
+            ToastAndroid.show("Berhasil mengupdate data", ToastAndroid.SHORT);
+            apiGetBanner({ user: hasil }).then((data) =>
+               dispatch(setEntities(data.data))
+            );
+            router.back();
+         } else {
+            ToastAndroid.show('Gagal mengupdate data', ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show('Gagal mengupdate data', ToastAndroid.SHORT);
       }
    };
 
@@ -29,45 +112,65 @@ export default function EditBanner() {
       <SafeAreaView>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Edit Banner',
-               headerTitleAlign: 'center',
-               headerRight: () => <ButtonSaveHeader category="update" />
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Edit Banner",
+               headerTitleAlign: "center",
+               headerRight: () => <ButtonSaveHeader
+                  disable={title == "" || error ? true : false}
+                  onPress={() => { handleUpdateEntity() }}
+                  category="update" />,
             }}
          />
          <ScrollView>
             <View style={[Styles.p15, Styles.mb100]}>
                <View style={[Styles.mb15]}>
-                  {
-                     selectedImage != undefined ? (
-                        <Pressable onPress={pickImageAsync}>
-                           <Image src={selectedImage} style={{ resizeMode: 'contain', width: '100%', height: 100 }} />
-                        </Pressable>
-                     ) : (
-                        <Pressable onPress={pickImageAsync} style={[Styles.wrapPaper, Styles.contentItemCenter]}>
-                           <View style={{ justifyContent: 'center', alignItems: 'center' }}>
-                              <Entypo name="image" size={50} color={'#aeaeae'} />
-                              <Text style={[Styles.textInformation, Styles.mt05]}>Mohon unggah gambar dalam resolusi 1535 x 450 piksel untuk memastikan</Text>
-                           </View>
-                        </Pressable>
-                     )
-                  }
+                  {selectedImage != undefined ? (
+                     <Pressable onPress={pickImageAsync}>
+                        <Image
+                           src={
+                              typeof selectedImage === "string"
+                                 ? selectedImage
+                                 : selectedImage.uri
+                           }
+                           style={{ resizeMode: "contain", width: "100%", height: 100 }}
+                        />
+                     </Pressable>
+                  ) : (
+                     <Pressable
+                        onPress={pickImageAsync}
+                        style={[Styles.wrapPaper, Styles.contentItemCenter]}
+                     >
+                        <View
+                           style={{ justifyContent: "center", alignItems: "center" }}
+                        >
+                           <Entypo name="image" size={50} color={"#aeaeae"} />
+                           <Text style={[Styles.textInformation, Styles.mt05]}>
+                              Mohon unggah gambar dalam resolusi 1535 x 450 piksel untuk
+                              memastikan
+                           </Text>
+                        </View>
+                     </Pressable>
+                  )}
                </View>
-               <InputForm label="Judul" type="numeric" placeholder="Judul" required bg="white" />
-               {/* <ButtonForm
-                  text="SIMPAN"
-                  onPress={() => {
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin mengubah data?',
-                        onPress: () => {
-                           ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
-                           router.push('/banner')
-                        }
-                     })
-                  }} /> */}
+               <InputForm
+                  label="Judul"
+                  type="default"
+                  placeholder="Judul"
+                  required
+                  bg="white"
+                  value={title}
+                  error={error}
+                  onChange={onValidate}
+                  errorText="Judul tidak boleh kosong"
+               />
             </View>
          </ScrollView>
       </SafeAreaView>
-   )
-}
+   );
+}