API

Add:
- service/api-client/api-file.ts: upload & delete

Portofolio
Fix:
- user)/portofolio/[id]/create.tsx: Loading submit
- (user)/portofolio/[id]/index.tsx: Delete button recode

Profile
Fix:
- (user)/profile/[id]/update-photo && upload-backgroud: delete image yang kama

### No Issue

app/(application)/(user)/home.tsx

@@ -22,7 +22,9 @@ export default function Application() {
 
   async function onLoadData() {
     const response = await apiUser(user?.id as string);
-    console.log("User >>", JSON.stringify(response.data, null, 2));
+    console.log("User >>", JSON.stringify(response.data.username, null, 2));
+    console.log("Profile Check >>", JSON.stringify(response.data.Profile.id, null, 2));
+
     setData(response.data);
   }
 

app/(application)/(user)/portofolio/[id]/create.tsx

@@ -39,7 +39,6 @@ export default function PortofolioCreate() {
   const [data, setData] = useState({
     namaBisnis: "",
     masterBidangBisnisId: "",
-    // sub_bidang_usaha: "",
     alamatKantor: "",
     tlpn: "",
     deskripsi: "",
@@ -67,6 +66,8 @@ export default function PortofolioCreate() {
     tiktok: "",
   });
 
+  const [isLoadingCreate, setIsLoadingCreate] = useState(false);
+
   function handleInputValue(phoneNumber: string) {
     setInputValue(phoneNumber);
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
@@ -111,6 +112,8 @@ export default function PortofolioCreate() {
           dataMedsos={dataMedsos}
           imageUri={imageUri}
           subBidangSelected={listSubBidangSelected}
+          isLoadingCreate={isLoadingCreate}
+          setIsLoadingCreate={setIsLoadingCreate}
         />
       }
     >
@@ -220,7 +223,7 @@ export default function PortofolioCreate() {
           maxRows={5}
           required
           showCount
-          maxLength={100}
+          maxLength={1000}
         />
         <Spacing />
 

app/(application)/(user)/portofolio/[id]/index.tsx

@@ -1,4 +1,4 @@
-import { AlertCustom, DrawerCustom, Spacing, StackCustom } from "@/components";
+import { DrawerCustom, Spacing, StackCustom } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
@@ -12,12 +12,7 @@ import Portofolio_SocialMediaSection from "@/screens/Portofolio/SocialMediaSecti
 import { apiGetOnePortofolio } from "@/service/api-client/api-portofolio";
 import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
-import {
-  router,
-  Stack,
-  useFocusEffect,
-  useLocalSearchParams,
-} from "expo-router";
+import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
 import { TouchableOpacity } from "react-native";
 
@@ -25,7 +20,7 @@ export default function Portofolio() {
   const { id } = useLocalSearchParams();
   const { user } = useAuth();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [isLoadingDelete, setIsLoadingDelete] = useState(false);
   const [data, setData] = useState<any>();
 
   const openDrawer = () => {
@@ -43,6 +38,10 @@ export default function Portofolio() {
 
   async function onLoadData(id: string) {
     const response = await apiGetOnePortofolio({ id: id });
+    console.log(
+      "Response portofolio >>",
+      JSON.stringify(response.data.namaBisnis, null, 2)
+    );
 
     setData(response.data);
   }
@@ -79,7 +78,11 @@ export default function Portofolio() {
           <Portofolio_Data data={data} />
           <Portofolio_BusinessLocation />
           <Portofolio_SocialMediaSection data={data?.Portofolio_MediaSosial} />
-          <Portofolio_ButtonDelete setShowDeleteAlert={setDeleteAlert} />
+          <Portofolio_ButtonDelete
+            id={id as string}
+            isLoadingDelete={isLoadingDelete}
+            setIsLoadingDelete={setIsLoadingDelete}
+          />
           <Spacing />
         </StackCustom>
       </ViewWrapper>
@@ -95,22 +98,6 @@ export default function Portofolio() {
           setIsDrawerOpen={setIsDrawerOpen}
         />
       </DrawerCustom>
-
-      {/* Alert Delete */}
-      <AlertCustom
-        isVisible={deleteAlert}
-        onLeftPress={() => setDeleteAlert(false)}
-        onRightPress={() => {
-          setDeleteAlert(false);
-          console.log("Hapus portofolio");
-          router.back();
-        }}
-        title="Hapus Portofolio"
-        message="Apakah Anda yakin ingin menghapus portofolio ini?"
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

app/(application)/(user)/profile/[id]/update-background.tsx

@@ -8,6 +8,8 @@ import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { useAuth } from "@/hooks/use-auth";
+import { apiFileDelete } from "@/service/api-client/api-file";
 import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
 import { uploadImageService } from "@/service/upload-service";
 import { IProfile } from "@/types/Type-Profile";
@@ -22,6 +24,7 @@ export default function UpdateBackgroundProfile() {
   const [data, setData] = useState<IProfile>();
   const [imageUri, setImageUri] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const { token } = useAuth();
 
   useFocusEffect(
     useCallback(() => {
@@ -32,10 +35,6 @@ export default function UpdateBackgroundProfile() {
   async function onLoadData(id: string) {
     try {
       const response = await apiProfile({ id });
-      console.log(
-        "response image id >>",
-        JSON.stringify(response.data.backgroundId, null, 2)
-      );
       setData(response.data);
     } catch (error) {
       console.log("error get profile >>", error);
@@ -68,12 +67,23 @@ export default function UpdateBackgroundProfile() {
           return;
         }
 
+        if (data?.imageBackgroundId) {
+          const deletePrevFile = await apiFileDelete({
+            token: token as string,
+            id: data?.imageBackgroundId as string,
+          });
+
+          if (!deletePrevFile.success) {
+            console.log("error delete prev file >>", deletePrevFile.message);
+          }
+        }
+
         Toast.show({
           type: "success",
           text1: "Sukses",
           text2: "Background berhasil diupdate",
         });
-        
+
         router.back();
       }
     } catch (error) {

app/(application)/(user)/profile/[id]/update-photo.tsx

@@ -16,12 +16,15 @@ import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
 import { Image } from "react-native";
 import Toast from "react-native-toast-message";
+import { useAuth } from "@/hooks/use-auth";
+import { apiFileDelete } from "@/service/api-client/api-file";
 
 export default function UpdatePhotoProfile() {
   const { id } = useLocalSearchParams();
   const [data, setData] = useState<IProfile>();
   const [imageUri, setImageUri] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const { token } = useAuth();
 
   useFocusEffect(
     useCallback(() => {
@@ -32,6 +35,7 @@ export default function UpdatePhotoProfile() {
   async function onLoadData(id: string) {
     try {
       const response = await apiProfile({ id });
+
       setData(response.data);
     } catch (error) {
       console.log("error get profile >>", error);
@@ -47,8 +51,6 @@ export default function UpdatePhotoProfile() {
         dirId: DIRECTORY_ID.profile_foto,
       });
 
-      console.log("response upload photo>>", JSON.stringify(response, null, 2));
-
       if (response.success) {
         const fileId = response.data.id;
         const responseUpdate = await apiUpdateProfile({
@@ -66,12 +68,23 @@ export default function UpdatePhotoProfile() {
           return;
         }
 
+        if (data?.imageId) {
+          const deletePrevFile = await apiFileDelete({
+            token: token as string,
+            id: data?.imageId as string,
+          });
+
+          if (!deletePrevFile.success) {
+            console.log("error delete prev file >>", deletePrevFile.message);
+          }
+        }
+
         Toast.show({
           type: "success",
           text1: "Sukses",
           text2: "Photo berhasil diupdate",
         });
-        
+
         router.back();
       }
     } catch (error) {

app/(application)/coba/upload-service.ts

@@ -2,7 +2,7 @@
 import { apiConfig } from "@/service/api-config";
 import Toast from "react-native-toast-message";
 
-export async function tryUploadService({
+export default async function tryUploadService({
   dirId,
   imageUri,
 }: {

components/Button/ButtonCustom.tsx

@@ -61,7 +61,7 @@ const ButtonCustom: React.FC<ButtonProps> = ({
       activeOpacity={0.8}
     >
       {/* Render icon jika tersedia */}
-      {iconLeft && iconLeft}
+      {isLoading ? "" : iconLeft && iconLeft}
       {isLoading ? (
         <ActivityIndicator size={18} color={MainColor.darkblue} />
       ) : (

screens/Portofolio/ButtonCreatePortofolio.tsx

@@ -11,6 +11,8 @@ interface Props {
   dataMedsos: any;
   imageUri: string | null;
   subBidangSelected: any[];
+  isLoadingCreate: boolean;
+  setIsLoadingCreate: (value: boolean) => void;
 }
 
 interface ICreatePortofolio {
@@ -34,9 +36,34 @@ export default function Portofolio_ButtonCreate({
   dataMedsos,
   imageUri,
   subBidangSelected,
+  isLoadingCreate,
+  setIsLoadingCreate,
 }: Props) {
+  const validaasiData = () => {
+    if (
+      !data.namaBisnis ||
+      !data.masterBidangBisnisId ||
+      !data.alamatKantor ||
+      !data.tlpn ||
+      !data.deskripsi
+    ) {
+      return false;
+    }
+    return true;
+  };
+
   const handleCreatePortofolio = async () => {
+    if (!validaasiData()) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Harap lengkapi data",
+      });
+      return;
+    }
+
     try {
+      setIsLoadingCreate(true);
       let fileId = "";
       if (imageUri) {
         const response = await uploadImageService({
@@ -81,41 +108,19 @@ export default function Portofolio_ButtonCreate({
         text1: "Error",
         text2: error as string,
       });
+    } finally {
+      setIsLoadingCreate(false);
     }
   };
 
-  // const onCreatePortofolio = async ({ fileId }: { fileId: string }) => {
-  //   const newData: ICreatePortofolio = {
-  //     namaBisnis: data.namaBisnis,
-  //     masterBidangBisnisId: data.masterBidangBisnisId,
-  //     alamatKantor: data.alamatKantor,
-  //     tlpn: data.tlpn,
-  //     deskripsi: data.deskripsi,
-  //     fileId: fileId,
-  //     facebook: dataMedsos.facebook,
-  //     twitter: dataMedsos.twitter,
-  //     instagram: dataMedsos.instagram,
-  //     tiktok: dataMedsos.tiktok,
-  //     youtube: dataMedsos.youtube,
-  //   };
-
-  //   try {
-  //     const response = await apiPortofolioCreate({
-  //       id: id,
-  //       data: newData,
-  //     });
-  //     console.log("Response >>", JSON.stringify(response, null, 2));
-  //     return response;
-  //   } catch (error) {
-  //     throw error;
-  //   }
-
-  //   // router.replace(`/maps/create`);
-  // };
-
   return (
     <BoxButtonOnFooter>
-      <ButtonCustom onPress={handleCreatePortofolio}>Selanjutnya</ButtonCustom>
+      <ButtonCustom
+        isLoading={isLoadingCreate}
+        onPress={handleCreatePortofolio}
+      >
+        Selanjutnya
+      </ButtonCustom>
     </BoxButtonOnFooter>
   );
 }

screens/Portofolio/ButtonDelete.tsx

@@ -1,17 +1,53 @@
-import { ButtonCustom } from "@/components";
+import { AlertDefaultSystem, ButtonCustom } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { Ionicons } from "@expo/vector-icons";
+import { apiDeletePortofolio } from "@/service/api-client/api-portofolio";
+import { router } from "expo-router";
 
 export default function Portofolio_ButtonDelete({
-  setShowDeleteAlert,
+  id,
+  isLoadingDelete,
+  setIsLoadingDelete,
 }: {
-  setShowDeleteAlert: (value: boolean) => void;
+  id: string;
+  isLoadingDelete: boolean;
+  setIsLoadingDelete: (value: boolean) => void;
 }) {
-  const handleDelete = () => {
-    setShowDeleteAlert(true);
+  const handleDelete = async () => {
+    AlertDefaultSystem({
+      title: "Hapus Portofolio",
+      message: "Yakin ingin menghapus portofolio ini?",
+      textLeft: "Batal",
+      textRight: "Hapus",
+      onPressRight: async () => {
+        try {
+          setIsLoadingDelete(true);
+          const response = await apiDeletePortofolio({ id: id });
+          console.log("Response portofolio >>", response);
+          if (response.success) {
+            console.log("Portofolio berhasil dihapus");
+            router.back();
+          }
+
+          console.log("Gagal dihapus >>", response);
+        } catch (error) {
+          console.log("Error delete portofolio >>", error);
+        } finally {
+          setIsLoadingDelete(false);
+        }
+      },
+    })
+   
   };
+
   return (
-    <ButtonCustom textColor={MainColor.white} iconLeft={<Ionicons name="trash-outline" size={20} color="white" />} onPress={handleDelete} backgroundColor={MainColor.red}>
+    <ButtonCustom
+      isLoading={isLoadingDelete}
+      textColor={MainColor.white}
+      iconLeft={<Ionicons name="trash-outline" size={20} color="white" />}
+      onPress={handleDelete}
+      backgroundColor={MainColor.red}
+    >
       Hapus
     </ButtonCustom>
   );

service/api-client/api-file.ts

@@ -0,0 +1,45 @@
+import axios from "axios";
+import { API_BASE_URL } from "../api-config";
+
+const url = `${API_BASE_URL}/mobile/file`;
+
+export async function apiFileUpload({
+  token,
+  formData,
+}: {
+  token: string;
+  formData: FormData;
+}) {
+  try {
+    const response = await axios.post(url, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+        Authorization: `Bearer ${token}`,
+      },
+      // timeout: 30000,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiFileDelete({
+  token,
+  id,
+}: {
+  token: string;
+  id: string;
+}) {
+  try {
+    const response = await axios.delete(`${url}/${id}`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+      // timeout: 30000,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}

service/api-client/api-portofolio.ts

@@ -31,3 +31,14 @@ export async function apiGetOnePortofolio({ id }: { id: string }) {
     throw error;
   }
 }
+
+export async function apiDeletePortofolio({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.delete(`/mobile/portofolio/${id}`);
+    
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+  

service/upload-service.ts

@@ -1,6 +1,6 @@
 import { API_BASE_URL } from "@/service/api-config";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import axios from "axios";
+import { apiFileUpload } from "./api-client/api-file";
 
 export async function uploadImageService({
   dirId,
@@ -10,7 +10,7 @@ export async function uploadImageService({
   imageUri: string | null;
 }) {
   const token = await AsyncStorage.getItem("authToken");
-  const url = `${API_BASE_URL}/mobile/upload`;
+  const url = `${API_BASE_URL}/mobile/file`;
 
   console.log("url >>", url);
 
@@ -33,21 +33,18 @@ export async function uploadImageService({
     });
     formData.append("dirId", dirId);
 
-    const response = await axios.post(url, formData, {
-      headers: {
-        "Content-Type": "multipart/form-data",
-        Authorization: `Bearer ${token}`,
-      },
-      // timeout: 30000,
+    const response = await apiFileUpload({
+      token: token as string,
+      formData,
     });
 
-    const { data } = response;
+    console.log("Response upload file >>", JSON.stringify(response, null, 2));
 
-    if (!data.success) {
-      throw new Error(data.message);
+    if (!response.success) {
+      throw new Error(response.message);
     }
 
-    return data;
+    return response;
   } catch (error) {
     throw error;
   }