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);
+          onUpload();
-          router.back();
         }}
       >
-        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
+        {image}
-          source={DUMMY_IMAGE.background}
-          resizeMode="cover"
-          style={{ width: "100%", height: "100%", borderRadius: 10 }}
-        />
       </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();

screens/Profile/AvatarAndBackground.tsx

@@ -1,4 +1,5 @@
 import { AvatarComp, ClickableCustom } from "@/components";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
 import { AccentColor } from "@/constants/color-palet";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { router } from "expo-router";
@@ -12,30 +13,31 @@ const AvatarAndBackground = ({
   imageId: string;
 }) => {
   return (
-    console.log("backgroundId", backgroundId),
+    <View style={styles.container}>
-    (
+      {/* Background Image */}
-      <View style={styles.container}>
+      <ClickableCustom
-        {/* Background Image */}
+        onPress={() => {
-        <ClickableCustom
+          router.navigate(
-          onPress={() => {
+            `/(application)/(image)/preview-image/${backgroundId}`
-            router.navigate(
+          );
-              `/(application)/(image)/preview-image/${backgroundId}`
+        }}
-            );
+      >
-          }}
+        <ImageBackground
-        >
+          source={
-          <ImageBackground
+            backgroundId
-            source={DUMMY_IMAGE.background}
+              ? { uri: API_STRORAGE.GET({ fileId: backgroundId }) }
-            style={styles.backgroundImage}
+              : DUMMY_IMAGE.background
-            resizeMode="cover"
+          }
-          />
+          style={styles.backgroundImage}
-        </ClickableCustom>
+          resizeMode="cover"
+        />
+      </ClickableCustom>
 
-        {/* Avatar yang sedikit keluar */}
+      {/* Avatar yang sedikit keluar */}
-        <View style={styles.avatarOverlap}>
+      <View style={styles.avatarOverlap}>
-          <AvatarComp size="lg" fileId={imageId} />
+        <AvatarComp size="lg" fileId={imageId} />
-        </View>
       </View>
-    )
+    </View>
   );
 };
 

screens/Profile/ProfileSection.tsx

@@ -47,9 +47,6 @@ export default function ProfileSection({ data }: { data: IProfile }) {
   return (
     <>
       <BaseBox>
-        {/* <TextCustom>
-          {JSON.stringify(data.imageBackgroundId, null, 2)}
-        </TextCustom> */}
         <AvatarAndBackground
           backgroundId={data?.imageBackgroundId as any}
           imageId={data?.imageId as any}

service/api-config.ts

@@ -29,7 +29,6 @@ apiConfig.interceptors.request.use(
 export async function apiVersion() {
   // console.log("API_BASE_URL", API_BASE_URL);
   const response = await apiConfig.get("/version");
-  // console.log("Response version", JSON.stringify(response.data, null, 2));
   return response.data;
 }
 

service/upload-service.ts

@@ -50,7 +50,6 @@ export async function uploadImageService({
       timeout: 30000,
     });
 
-    console.log("Response", JSON.stringify(response, null, 2));
     const { data } = response;
 
     if (!data.success) {