Profile

Add:
- Api background profile

Asset
Add:
- assets/images/loading.gif: untuk loading

### No Issue

app/(application)/(image)/preview-image/[id]/index.tsx

@@ -1,13 +1,33 @@
-import { ViewWrapper } from "@/components";
+import { CenterCustom, TextCustom, ViewWrapper } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import { Image } from "expo-image";
 import { useLocalSearchParams } from "expo-router";
+import React, { useState } from "react";
 
 export default function PreviewImage() {
   const { id } = useLocalSearchParams();
+  const [isLoading, setIsLoading] = useState(true);
+
   return (
     <ViewWrapper>
-      <Image source={API_STRORAGE.GET({ fileId: id as string })}  contentFit="contain" style={{ width: "100%", height: "100%" }}/>
+      {id ? (
+        <Image
+          onLoad={() => {
+            setIsLoading(false);
+          }}
+          source={
+            isLoading
+              ? require("@/assets/images/loading.gif")
+              : API_STRORAGE.GET({ fileId: id as string })
+          }
+          contentFit="contain"
+          style={{ width: "100%", height: "100%" }}
+        />
+      ) : (
+        <CenterCustom>
+          <TextCustom>File not found</TextCustom>
+        </CenterCustom>
+      )}
     </ViewWrapper>
   );
 }

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

@@ -5,40 +5,111 @@ import {
   ButtonCustom,
 } from "@/components";
 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 { router, useLocalSearchParams } from "expo-router";
+import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
+import { uploadImageService } from "@/service/upload-service";
+import { IProfile } from "@/types/Type-Profile";
+import pickImage from "@/utils/pickImage";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 import { Image } from "react-native";
 
 export default function UpdateBackgroundProfile() {
   const { id } = useLocalSearchParams();
+  const [data, setData] = useState<IProfile>();
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  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);
+    }
+  }
+
+  async function onUpload() {
+    try {
+      setIsLoading(true);
+
+      const response = await uploadImageService({
+        imageUri,
+        dirId: DIRECTORY_ID.profile_background,
+      });
+
+      if (response.success) {
+        const fileId = response.data.id;
+        await apiUpdateProfile({
+          id: id as string,
+          data: { fileId },
+          category: "background",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("error upload >>", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
         onPress={() => {
-          console.log("Simpan foto background >>", id);
-          router.back();
+          onUpload();
         }}
       >
-        Simpan
+        Update
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
 
+  const image = imageUri ? (
+    <Image
+      source={{ uri: imageUri }}
+      style={{ width: "100%", height: "100%" }}
+    />
+  ) : (
+    <Image
+      source={
+        data?.imageBackgroundId
+          ? { uri: API_STRORAGE.GET({ fileId: data.imageBackgroundId }) }
+          : DUMMY_IMAGE.background
+      }
+      style={{ width: "100%", height: "100%", borderRadius: 10 }}
+    />
+  );
+
   return (
     <ViewWrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
-        <Image
-          source={DUMMY_IMAGE.background}
-          resizeMode="cover"
-          style={{ width: "100%", height: "100%", borderRadius: 10 }}
-        />
+        {image}
       </BaseBox>
 
       <ButtonCenteredOnly
         icon="upload"
-        onPress={() => router.navigate(`/(application)/take-picture/${id}`)}
+        onPress={() => {
+          pickImage({
+            setImageUri,
+          });
+        }}
       >
         Update
       </ButtonCenteredOnly>

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

@@ -2,7 +2,7 @@ import {
   BaseBox,
   BoxButtonOnFooter,
   ButtonCenteredOnly,
-  ButtonCustom
+  ButtonCustom,
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
@@ -50,12 +50,11 @@ export default function UpdatePhotoProfile() {
         dirId: DIRECTORY_ID.profile_foto,
       });
 
-      console.log("Upload res >>", JSON.stringify(response, null, 2));
       if (response.success) {
-        const imageId = response.data.id;
+        const fileId = response.data.id;
         await apiUpdateProfile({
           id: id as string,
-          data: { imageId },
+          data: { fileId },
           category: "photo",
         });
         router.back();
@@ -83,7 +82,10 @@ export default function UpdatePhotoProfile() {
   );
 
   const image = imageUri ? (
-    <Image source={{ uri: imageUri }} style={{ width: "100%", height: "100%" }} />
+    <Image
+      source={{ uri: imageUri }}
+      style={{ width: "100%", height: "100%" }}
+    />
   ) : (
     <Image
       source={

app/(application)/coba/screen-upload.tsx

@@ -26,7 +26,6 @@ export default function ScreenUpload() {
         dirId: DIRECTORY_ID.profile_foto,
       });
 
-      console.log("Response", JSON.stringify(response, null, 2));
       if (response.success) {
         await AsyncStorage.setItem("idImage", response.data.id);
         router.back();