Profile

Add:
- Api upload background
- /api-client/api-validation.ts

### No Issue

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

@@ -1,9 +1,33 @@
-import { LandscapeFrameUploaded, 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>
-      <LandscapeFrameUploaded />
+      {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]/edit.tsx

@@ -39,7 +39,11 @@ export default function ProfileEdit() {
   const handleUpdate = async () => {
     try {
       setIsLoading(true);
-      const response = await apiUpdateProfile({ id: id as string, data });
+      const response = await apiUpdateProfile({
+        id: id as string,
+        data,
+        category: "profile",
+      });
       if (!response.success) {
         Toast.show({
           type: "info",
@@ -50,6 +54,8 @@ export default function ProfileEdit() {
         return;
       }
 
+      
+
       Toast.show({
         type: "success",
         text1: "Sukses",

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

@@ -1,5 +1,4 @@
 import {
-  AvatarCustom,
   BaseBox,
   BoxButtonOnFooter,
   ButtonCenteredOnly,
@@ -9,7 +8,7 @@ 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 { apiProfile } from "@/service/api-client/api-profile";
+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";
@@ -51,8 +50,18 @@ export default function UpdatePhotoProfile() {
         dirId: DIRECTORY_ID.profile_foto,
       });
 
-      console.log("Upload res >>", JSON.stringify(response, null, 2));
+      console.log(
+        "response upload photo>>",
+        JSON.stringify(response, null, 2)
+      );
+
       if (response.success) {
+        const fileId = response.data.id;
+        await apiUpdateProfile({
+          id: id as string,
+          data: { fileId },
+          category: "photo",
+        });
         router.back();
       }
     } catch (error) {
@@ -78,15 +87,18 @@ export default function UpdatePhotoProfile() {
   );
 
   const image = imageUri ? (
-    <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />
+    <Image
+      source={{ uri: imageUri }}
+      style={{ width: "100%", height: "100%" }}
+    />
   ) : (
-    <AvatarCustom
-      size="xl"
+    <Image
       source={
         data?.imageId
-          ? API_STRORAGE.GET({ fileId: data.imageId })
+          ? { uri: API_STRORAGE.GET({ fileId: data.imageId }) }
           : DUMMY_IMAGE.avatar
       }
+      style={{ width: "100%", height: "100%" }}
     />
   );
 

app/(application)/(user)/profile/create.tsx

@@ -1,25 +1,34 @@
 import {
-  AvatarCustom,
+  BaseBox,
   ButtonCenteredOnly,
   ButtonCustom,
   SelectCustom,
   Spacing,
   StackCustom,
   TextInputCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 import InformationBox from "@/components/Box/InformationBox";
-import LandscapeFrameUploaded from "@/components/Image/LandscapeFrameUploaded";
+import DIRECTORY_ID from "@/constants/directory-id";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { useAuth } from "@/hooks/use-auth";
-import { apiCreateProfile } from "@/service/api-client/api-profile";
-import { router, useFocusEffect } from "expo-router";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
+import {
+  apiCreateProfile
+} from "@/service/api-client/api-profile";
+import { apiValidationEmail } from "@/service/api-client/api-validation";
+import { uploadImageService } from "@/service/upload-service";
+import pickImage from "@/utils/pickImage";
+import { router } from "expo-router";
+import { useEffect, useState } from "react";
+import { Image, View } from "react-native";
+import { Avatar } from "react-native-paper";
 import Toast from "react-native-toast-message";
 
 export default function CreateProfile() {
   const { user } = useAuth();
+  const [imagePhoto, setImagePhoto] = useState<string | null>(null);
+  const [imageBackground, setImageBackground] = useState<string | null>(null);
 
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [data, setData] = useState({
@@ -30,17 +39,19 @@ export default function CreateProfile() {
     jenisKelamin: "",
   });
 
-  useFocusEffect(
-    useCallback(() => {
-      Toast.show({
-        type: "info",
-        text1: "Lengkapi Profile Anda",
-        text2: "Untuk menjelajahi fitur-fitur yang ada",
-      });
-    }, [])
-  );
+  useEffect(() => {
+    Toast.show({
+      type: "info",
+      text1: "Lengkapi Profile Anda",
+      text2: "Untuk menjelajahi fitur-fitur yang ada",
+    });
+  }, []);
 
   const handlerSave = async () => {
+    let IMG = {
+      imageId: "",
+      imageBackgroundId: "",
+    };
     if (!data.name || !data.email || !data.alamat || !data.jenisKelamin) {
       Toast.show({
         type: "info",
@@ -52,7 +63,72 @@ export default function CreateProfile() {
 
     try {
       setIsLoading(true);
-      const response = await apiCreateProfile(data);
+
+      const responseValidateEmail = await apiValidationEmail({
+        email: data.email,
+      });
+
+      if (!responseValidateEmail.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal",
+          text2: responseValidateEmail.message,
+        });
+        return;
+      }
+
+      console.log(
+        "responseValidateEmail >>",
+        JSON.stringify(responseValidateEmail, null, 2)
+      );
+
+      
+
+
+      
+
+      if (imagePhoto) {
+        const responseUploadPhoto = await uploadImageService({
+          imageUri: imagePhoto,
+          dirId: DIRECTORY_ID.profile_foto,
+        });
+
+        console.log(
+          "responseUploadPhoto >>",
+          JSON.stringify(responseUploadPhoto, null, 2)
+        );
+
+        if (responseUploadPhoto.success) {
+          const fileIdPhoto = responseUploadPhoto.data.id;
+
+          IMG.imageId = fileIdPhoto;
+        }
+      }
+
+      if (imageBackground) {
+        const responseUploadBackground = await uploadImageService({
+          imageUri: imageBackground,
+          dirId: DIRECTORY_ID.profile_background,
+        });
+
+        console.log(
+          "responseUploadBackground >>",
+          JSON.stringify(responseUploadBackground, null, 2)
+        );
+
+        if (responseUploadBackground.success) {
+          const fileIdBackground = responseUploadBackground.data.id;
+
+          IMG.imageBackgroundId = fileIdBackground;
+        }
+      }
+
+      const fixData = {
+        ...data,
+        ...IMG,
+      };
+
+      const response = await apiCreateProfile(fixData);
       if (response.status === 400) {
         Toast.show({
           type: "error",
@@ -67,7 +143,10 @@ export default function CreateProfile() {
         text1: "Sukses",
         text2: "Profile berhasil dibuat",
       });
+
+      console.log("fixResponse >>", JSON.stringify(response, null, 2));
       router.push("/(application)/(user)/home");
+      return;
     } catch (error) {
       console.log("error create profile >>", error);
     } finally {
@@ -92,11 +171,18 @@ export default function CreateProfile() {
       <StackCustom>
         <InformationBox text="Upload foto profile anda." />
         <View style={{ alignItems: "center" }}>
-          <AvatarCustom size="xl" />
+          <Avatar.Image
+            size={100}
+            source={imagePhoto ? { uri: imagePhoto } : DUMMY_IMAGE.avatar}
+          />
           <Spacing />
           <ButtonCenteredOnly
             icon="upload"
-            onPress={() => router.navigate(`/take-picture/${user?.id}`)}
+            onPress={() => {
+              pickImage({
+                setImageUri: setImagePhoto,
+              });
+            }}
           >
             Upload
           </ButtonCenteredOnly>
@@ -106,11 +192,24 @@ export default function CreateProfile() {
 
         <View>
           <InformationBox text="Upload foto latar belakang anda." />
-          <LandscapeFrameUploaded />
-          <Spacing />
+          <BaseBox>
+            <Image
+              source={
+                imageBackground
+                  ? { uri: imageBackground }
+                  : DUMMY_IMAGE.background
+              }
+              style={{ width: "100%", height: 200 }}
+            />
+          </BaseBox>
+          {/* <Spacing /> */}
           <ButtonCenteredOnly
             icon="upload"
-            onPress={() => router.navigate(`/take-picture/${user?.id}`)}
+            onPress={() => {
+              pickImage({
+                setImageUri: setImageBackground,
+              });
+            }}
           >
             Upload
           </ButtonCenteredOnly>

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();

components/Image/AvatarComp.tsx

@@ -0,0 +1,59 @@
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { Href, router } from "expo-router";
+import { TouchableOpacity } from "react-native";
+import { Avatar } from "react-native-paper";
+
+type Size = "base" | "sm" | "md" | "lg" | "xl";
+
+const sizeMap = {
+  base: 40,
+  sm: 60,
+  md: 80,
+  lg: 100,
+  xl: 120,
+};
+
+interface AvatarCompProps {
+  fileId?: string;
+  size: Size;
+  onPress?: () => void | any;
+  href?: Href | undefined | any;
+}
+
+export default function AvatarComp({
+  fileId,
+  size,
+  onPress,
+  href = `/(application)/(image)/preview-image/${fileId}`,
+}: AvatarCompProps) {
+  const dimension = sizeMap[size];
+
+  const avatarImage = () => {
+    return (
+      <Avatar.Image
+        size={dimension}
+        source={
+          fileId ? { uri: API_STRORAGE.GET({ fileId }) } : DUMMY_IMAGE.avatar
+        }
+      />
+    );
+  };
+
+  return (
+    <>
+      {onPress || href ? (
+        <TouchableOpacity
+          activeOpacity={0.9}
+          onPress={
+            href && fileId ? () => router.navigate(href as any) : onPress
+          }
+        >
+          {avatarImage()}
+        </TouchableOpacity>
+      ) : (
+        avatarImage()
+      )}
+    </>
+  );
+}

components/Image/AvatarCustom.tsx

@@ -14,8 +14,8 @@ type Size = "base" | "sm" | "md" | "lg" | "xl";
 interface AvatarCustomProps {
   source?: ImageSourcePropType;
   size?: Size;
-  onPress?: () => void;
-  href?: Href | undefined;
+  onPress?: () => any;
+  href?: Href | undefined | any;
 }
 
 const sizeMap = {

components/index.ts

@@ -38,6 +38,7 @@ import StackCustom from "./Stack/StackCustom";
 import SelectCustom from "./Select/SelectCustom";
 // Image
 import AvatarCustom from "./Image/AvatarCustom";
+import AvatarComp from "./Image/AvatarComp";
 import LandscapeFrameUploaded from "./Image/LandscapeFrameUploaded";
 // Divider
 import Divider from "./Divider/Divider";
@@ -69,6 +70,7 @@ export {
   AlertDefaultSystem,
   // Image
   AvatarCustom,
+  AvatarComp,
   // ShareComponent
   AvatarUsernameAndOtherComponent,
   // Button

screens/Profile/AvatarAndBackground.tsx

@@ -1,4 +1,5 @@
-import { AvatarCustom, ClickableCustom } from "@/components";
+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,8 +13,6 @@ const AvatarAndBackground = ({
   imageId: string;
 }) => {
   return (
-    // console.log("backgroundId", backgroundId),
-    // console.log("imageId", imageId),
     <View style={styles.container}>
       {/* Background Image */}
       <ClickableCustom
@@ -24,24 +23,19 @@ const AvatarAndBackground = ({
         }}
       >
         <ImageBackground
-          source={DUMMY_IMAGE.background}
+          source={
+            backgroundId
+              ? { uri: API_STRORAGE.GET({ fileId: backgroundId }) }
+              : DUMMY_IMAGE.background
+          }
           style={styles.backgroundImage}
           resizeMode="cover"
         />
       </ClickableCustom>
 
       {/* Avatar yang sedikit keluar */}
-
       <View style={styles.avatarOverlap}>
-        <ClickableCustom
-          onPress={() => {
-            router.navigate(
-              `/(application)/(image)/preview-image/${imageId}`
-            );
-          }}
-        >
-          <AvatarCustom source={DUMMY_IMAGE.avatar} size="lg" />
-        </ClickableCustom>
+        <AvatarComp size="lg" fileId={imageId} />
       </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-client/api-profile.ts

@@ -15,11 +15,13 @@ export async function apiProfile({ id }: { id: string }) {
 export async function apiUpdateProfile({
   id,
   data,
+  category,
 }: {
   id: string;
   data: any;
+  category: "profile" | "photo" | "background";
 }) {
-  const response = await apiConfig.put(`/mobile/profile/${id}`, {
+  const response = await apiConfig.put(`/mobile/profile/${id}?category=${category}`, {
     data: data,
   });
   return response.data;

service/api-client/api-validation.ts

@@ -0,0 +1,8 @@
+import { apiConfig } from "../api-config";
+
+export async function apiValidationEmail({ email }: { email: string }) {
+  const response = await apiConfig.post(`/mobile/validate/email`, {
+    data: email,
+  });
+  return response.data;
+}

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

@@ -47,11 +47,11 @@ export async function uploadImageService({
         "Content-Type": "multipart/form-data",
         Authorization: `Bearer ${token}`,
       },
-      timeout: 30000,
+      // timeout: 30000,
     });
 
-    console.log("Response", JSON.stringify(response, null, 2));
     const { data } = response;
+    console.log("response upload >>", JSON.stringify(data, null, 2));
 
     if (!data.success) {
       Toast.show({
@@ -63,10 +63,10 @@ export async function uploadImageService({
       return;
     }
 
-    Toast.show({
-      type: "success",
-      text1: "File berhasil diunggah",
-    });
+    // Toast.show({
+    //   type: "success",
+    //   text1: "File berhasil diunggah",
+    // });
 
     return data;
   } catch (error) {