API Profile:

Fix:
- api create, get , edit

Types
Add:
- Type-Profile

### No Issue

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

@@ -22,14 +22,17 @@ export default function Application() {
 
   async function onLoadData() {
     const response = await apiUser(user?.id as string);
-    console.log("data user >>", JSON.stringify(response.active, null, 2));
     setData(response.data);
   }
 
-  if (data?.active === false) {
+  if (data && data?.active === false) {
     return <Redirect href={`/waiting-room`} />;
   }
 
+  if (data && data?.Profile === null) {
+    return <Redirect href={`/profile/create`} />;
+  }
+
   return (
     <>
       <Stack.Screen
@@ -57,7 +60,11 @@ export default function Application() {
           ),
         }}
       />
-      <ViewWrapper footerComponent={<TabSection tabs={tabsHome} />}>
+      <ViewWrapper
+        footerComponent={
+          <TabSection tabs={tabsHome(data?.Profile?.id as string)} />
+        }
+      >
         <StackCustom>
           <Home_ImageSection />
 

app/(application)/(user)/profile/[id]/edit.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   ButtonCustom,
   SelectCustom,
@@ -7,46 +6,69 @@ import {
   ViewWrapper,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
+import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
+import { IProfile } from "@/types/Type-Profile";
 import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
-import { StyleSheet } from "react-native";
+import Toast from "react-native-toast-message";
 
 export default function ProfileEdit() {
   const { id } = useLocalSearchParams();
 
-  const [data, setData] = useState({
+  const [data, setData] = useState<IProfile | any>();
-    nama: "Bagas Banuna",
+  const [isLoading, setIsLoading] = useState<boolean>(false);
-    email: "bagasbanuna@gmail.com",
-    alamat: "Jember",
-    selectedValue: "",
-  });
 
   const options = [
     { label: "Laki-laki", value: "laki-laki" },
     { label: "Perempuan", value: "perempuan" },
   ];
 
-  const handleSave = () => {
+  useEffect(() => {
-    console.log({
+    onLoadData(id as string);
-      nama: data.nama,
+  }, [id]);
-      email: data.email,
+
-      alamat: data.alamat,
+  async function onLoadData(id: string) {
-      selectedValue: data.selectedValue,
+    try {
-    });
+      const response = await apiProfile({ id });
-    router.back();
+      setData(response.data);
+    } catch (error) {
+      console.log("error get profile >>", error);
+    }
+  }
+
+  const handleUpdate = async () => {
+    try {
+      setIsLoading(true);
+      const response = await apiUpdateProfile({ id: id as string, data });
+      if (!response.success) {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Sukses",
+        text2: "Profile berhasil diupdate",
+      });
+      return router.back();
+    } catch (error) {
+      console.log("error update profile >>", error);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
     <ViewWrapper
       footerComponent={
         <BoxButtonOnFooter>
-          <ButtonCustom
+          <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
-            // disabled={
+            Update
-            //   !data.nama || !data.email || !data.alamat || !data.selectedValue
-            // }
-            onPress={handleSave}
-          >
-            Simpan
           </ButtonCustom>
         </BoxButtonOnFooter>
       }
@@ -55,16 +77,17 @@ export default function ProfileEdit() {
         <TextInputCustom
           label="Nama"
           placeholder="Nama"
-          value={data.nama}
+          value={data?.name}
           onChangeText={(text) => {
-            setData({ ...data, nama: text });
+            setData({ ...data, name: text });
           }}
           required
         />
         <TextInputCustom
+          keyboardType="email-address"
           label="Email"
           placeholder="Email"
-          value={data.email}
+          value={data?.email}
           onChangeText={(text) => {
             setData({ ...data, email: text });
           }}
@@ -73,7 +96,7 @@ export default function ProfileEdit() {
         <TextInputCustom
           label="Alamat"
           placeholder="Alamat"
-          value={data.alamat}
+          value={data?.alamat}
           onChangeText={(text) => {
             setData({ ...data, alamat: text });
           }}
@@ -84,25 +107,12 @@ export default function ProfileEdit() {
           label="Jenis Kelamin"
           placeholder="Pilih jenis kelamin"
           data={options}
-          value={data.selectedValue}
+          value={data?.jenisKelamin}
           onChange={(value) => {
-            setData({ ...(data as any), selectedValue: value });
+            setData({ ...(data as any), jenisKelamin: value });
           }}
         />
       </StackCustom>
     </ViewWrapper>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    padding: 20,
-  },
-  result: {
-    marginTop: 20,
-    fontSize: 16,
-    fontWeight: "bold",
-  },
-});

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

@@ -1,5 +1,4 @@
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import AlertCustom from "@/components/Alert/AlertCustom";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import DrawerCustom from "@/components/Drawer/DrawerCustom";
 import { MainColor } from "@/constants/color-palet";
@@ -7,18 +6,24 @@ import { useAuth } from "@/hooks/use-auth";
 import { drawerItemsProfile } from "@/screens/Profile/ListPage";
 import Profile_MenuDrawerSection from "@/screens/Profile/menuDrawerSection";
 import ProfileSection from "@/screens/Profile/ProfileSection";
+import { apiProfile } from "@/service/api-client/api-profile";
 import { GStyles } from "@/styles/global-styles";
+import { IProfile } from "@/types/Type-Profile";
 import { Ionicons } from "@expo/vector-icons";
-import { router, Stack, useLocalSearchParams } from "expo-router";
+import {
-import React, { useState } from "react";
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams
+} from "expo-router";
+import React, { useCallback, useState } from "react";
 import { TouchableOpacity } from "react-native";
 
 export default function Profile() {
   const { id } = useLocalSearchParams();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [showLogoutAlert, setShowLogoutAlert] = useState(false);
+  const [data, setData] = useState<IProfile>();
 
-  const { logout } = useAuth();
+  const { logout, isAdmin } = useAuth();
 
   const openDrawer = () => {
     setIsDrawerOpen(true);
@@ -28,60 +33,53 @@ export default function Profile() {
     setIsDrawerOpen(false);
   };
 
-  const handleLogout = () => {
+  useFocusEffect(
-    console.log("User logout");
+    useCallback(() => {
-    router.replace("/");
+      onLoadData(id as string);
-    setShowLogoutAlert(false);
+    }, [id])
-  };
+  );
+
+  async function onLoadData(id: string) {
+    const response = await apiProfile({ id: id });
+    setData(response.data);
+  }
 
   return (
     <>
+      <Stack.Screen
+        options={{
+          title: "Profile",
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => (
+            <TouchableOpacity onPress={openDrawer}>
+              <Ionicons
+                name="ellipsis-vertical"
+                size={20}
+                color={MainColor.yellow}
+              />
+            </TouchableOpacity>
+          ),
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
+        }}
+      />
       <ViewWrapper>
         {/* Header */}
-        <Stack.Screen
+        <ProfileSection data={data as any} />
-          options={{
-            title: "Profile",
-            headerLeft: () => <LeftButtonCustom />,
-            headerRight: () => (
-              <TouchableOpacity onPress={openDrawer}>
-                <Ionicons
-                  name="ellipsis-vertical"
-                  size={20}
-                  color={MainColor.yellow}
-                />
-              </TouchableOpacity>
-            ),
-            headerStyle: GStyles.headerStyle,
-            headerTitleStyle: GStyles.headerTitleStyle,
-          }}
-        />
-        <ProfileSection />
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={isDrawerOpen}
         closeDrawer={closeDrawer}
       >
         <Profile_MenuDrawerSection
-          drawerItems={drawerItemsProfile({ id: id as string })}
+          drawerItems={drawerItemsProfile({ id: id as string, isAdmin })}
-          setShowLogoutAlert={setShowLogoutAlert}
           setIsDrawerOpen={setIsDrawerOpen}
           logout={logout}
         />
       </DrawerCustom>
-
-      {/* Alert Komponen Eksternal */}
-      <AlertCustom
-        isVisible={showLogoutAlert}
-        onLeftPress={() => setShowLogoutAlert(false)}
-        onRightPress={handleLogout}
-        title="Apakah anda yakin ingin keluar?"
-        textLeft="Batal"
-        textRight="Keluar"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

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

@@ -13,8 +13,8 @@ import InformationBox from "@/components/Box/InformationBox";
 import LandscapeFrameUploaded from "@/components/Image/LandscapeFrameUploaded";
 import { useAuth } from "@/hooks/use-auth";
 import { apiCreateProfile } from "@/service/api-client/api-profile";
-import { router } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { View } from "react-native";
 import Toast from "react-native-toast-message";
 
@@ -30,6 +30,16 @@ export default function CreateProfile() {
     jenisKelamin: "",
   });
 
+  useFocusEffect(
+    useCallback(() => {
+      Toast.show({
+        type: "info",
+        text1: "Lengkapi Profile Anda",
+        text2: "Untuk menjelajahi fitur-fitur yang ada",
+      });
+    }, [])
+  );
+
   const handlerSave = async () => {
     if (!data.name || !data.email || !data.alamat || !data.jenisKelamin) {
       Toast.show({
@@ -43,8 +53,6 @@ export default function CreateProfile() {
     try {
       setIsLoading(true);
       const response = await apiCreateProfile(data);
-      console.log("data create profile >>", JSON.stringify(response, null, 2));
-
       if (response.status === 400) {
         Toast.show({
           type: "error",
@@ -56,7 +64,7 @@ export default function CreateProfile() {
 
       Toast.show({
         type: "success",
-        text1: "Success",
+        text1: "Sukses",
         text2: "Profile berhasil dibuat",
       });
       router.push("/(application)/(user)/home");

app/(application)/admin/_layout.tsx

@@ -221,7 +221,7 @@ export default function AdminLayout() {
                   textLeft: "Batal",
                   textRight: "Ya",
                   onPressRight: () => {
-                    router.replace(`/(application)/(user)/profile/${123}`);
+                    router.replace(`/(application)/(user)/home`);
                   },
                 });
               } else if (item.value === "logout") {

components/_Interface/types.ts

@@ -24,4 +24,5 @@ interface IMenuDrawerItem {
   label: string;
   path?: string;
   color?: string;
+  value?: string;
 }

screens/Authentication/VerificationView.tsx

@@ -29,6 +29,7 @@ export default function VerificationView() {
   async function onLoadCheckCodeOtp() {
     const kodeId = await AsyncStorage.getItem("kode_otp");
     const response = await apiCheckCodeOtp({ kodeId: kodeId as string });
+    console.log("Response check code otp >>", JSON.stringify(response.otp, null, 2));
     setCodeOtp(response.otp);
     setUserNumber(response.nomor);
   }

screens/Home/tabsList.ts

@@ -1,6 +1,6 @@
 import { ITabs } from "@/components/_Interface/types";
 
-export  const tabsHome: ITabs[] = [
+export const tabsHome: any = (profileId: string) => [
   {
     id: "forum",
     icon: "chatbubble-ellipses-outline",
@@ -33,8 +33,8 @@ export  const tabsHome: ITabs[] = [
     icon: "person-outline",
     activeIcon: "person",
     label: "Profile",
-    path: "/profile/id-percoban-123456",
+    path: `/profile/${profileId}`,
     isActive: true,
     disabled: false,
   },
-];
+];

screens/Profile/AvatarAndBackground.tsx

@@ -12,6 +12,8 @@ const AvatarAndBackground = ({
   imageId: string;
 }) => {
   return (
+    // console.log("backgroundId", backgroundId),
+    // console.log("imageId", imageId),
     <View style={styles.container}>
       {/* Background Image */}
       <ClickableCustom

screens/Profile/ListPage.tsx

@@ -5,85 +5,139 @@ import { Ionicons } from "@expo/vector-icons";
 
 export const drawerItemsProfile = ({
   id,
+  isAdmin,
 }: {
   id: string;
-}): IMenuDrawerItem[] => [
+  isAdmin: boolean;
-  {
+}) => {
-    icon: (
+  const adminItems: IMenuDrawerItem[] = [
-      <Ionicons
+    {
-        name="create"
+      icon: (
-        size={ICON_SIZE_MEDIUM}
+        <Ionicons
-        color={AccentColor.white}
+          name="create"
-      />
+          size={ICON_SIZE_MEDIUM}
-    ),
+          color={AccentColor.white}
-    label: "Edit profile",
+        />
-    path: `/(application)/profile/${id}/edit`,
+      ),
-  },
+      label: "Edit profile",
-  {
+      path: `/(application)/profile/${id}/edit`,
-    icon: (
+    },
-      <Ionicons
+    {
-        name="camera"
+      icon: (
-        size={ICON_SIZE_MEDIUM}
+        <Ionicons
-        color={AccentColor.white}
+          name="camera"
-      />
+          size={ICON_SIZE_MEDIUM}
-    ),
+          color={AccentColor.white}
-    label: "Ubah foto profile",
+        />
-    path: `/(application)/profile/${id}/update-photo`,
+      ),
-  },
+      label: "Ubah foto profile",
-  {
+      path: `/(application)/profile/${id}/update-photo`,
-    icon: (
+    },
-      <Ionicons
+    {
-        name="image"
+      icon: (
-        size={ICON_SIZE_MEDIUM}
+        <Ionicons
-        color={AccentColor.white}
+          name="image"
-      />
+          size={ICON_SIZE_MEDIUM}
-    ),
+          color={AccentColor.white}
-    label: "Ubah latar belakang",
+        />
-    path: `/(application)/profile/${id}/update-background`,
+      ),
-  },
+      label: "Ubah latar belakang",
-  {
+      path: `/(application)/profile/${id}/update-background`,
-    icon: (
+    },
-      <Ionicons
+    {
-        name="add-circle"
+      icon: (
-        size={ICON_SIZE_MEDIUM}
+        <Ionicons
-        color={AccentColor.white}
+          name="add-circle"
-      />
+          size={ICON_SIZE_MEDIUM}
-    ),
+          color={AccentColor.white}
-    label: "Tambah portofolio",
+        />
-    path: `/(application)/portofolio/${id}/create`,
+      ),
-  },
+      label: "Tambah portofolio",
-  {
+      path: `/(application)/portofolio/${id}/create`,
-    icon: (
+    },
-      <Ionicons
+    {
-        name="settings"
+      icon: (
-        size={ICON_SIZE_MEDIUM}
+        <Ionicons
-        color={AccentColor.white}
+          name="settings"
-      />
+          size={ICON_SIZE_MEDIUM}
-    ),
+          color={AccentColor.white}
-    label: "Dashboard Admin",
+        />
-    path: `/(application)/admin/dashboard`,
+      ),
-  },
+      label: "Dashboard Admin",
-  {
+      path: `/(application)/admin/dashboard`,
-    icon: (
+    },
-      <Ionicons
+    {
-        name="log-out"
+      icon: (
-        size={ICON_SIZE_MEDIUM}
+        <Ionicons
-        color={AccentColor.white}
+          name="log-out"
-      />
+          size={ICON_SIZE_MEDIUM}
-    ),
+          color={AccentColor.white}
-    label: "Keluar",
+        />
-    color: MainColor.red,
+      ),
-    path: "",
+      label: "Keluar",
-  },
+      color: MainColor.red,
-  {
+      path: "",
-    icon: (
+    },
-      <Ionicons
+  ];
-        name="create-outline"
+
-        size={ICON_SIZE_MEDIUM}
+  const userItems: IMenuDrawerItem[] = [
-        color={AccentColor.white}
+    {
-      />
+      icon: (
-    ),
+        <Ionicons
-    label: "Create profile",
+          name="create"
-    path: `/(application)/profile/${id}/create`,
+          size={ICON_SIZE_MEDIUM}
-  },
+          color={AccentColor.white}
-];
+        />
+      ),
+      label: "Edit profile",
+      path: `/(application)/profile/${id}/edit`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="camera"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Ubah foto profile",
+      path: `/(application)/profile/${id}/update-photo`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="image"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Ubah latar belakang",
+      path: `/(application)/profile/${id}/update-background`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="add-circle"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Tambah portofolio",
+      path: `/(application)/portofolio/${id}/create`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="log-out"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Keluar",
+      color: MainColor.red,
+      path: "",
+    },
+  ];
+
+  return isAdmin ? adminItems : userItems;
+};

screens/Profile/ProfileSection.tsx

@@ -5,8 +5,10 @@ import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { View } from "react-native";
 import AvatarAndBackground from "./AvatarAndBackground";
+import { IProfile } from "@/types/Type-Profile";
+import _ from "lodash";
 
-export default function ProfileSection() {
+export default function ProfileSection({ data }: { data: IProfile }) {
   const { id } = useLocalSearchParams();
 
   const listData = [
@@ -14,13 +16,13 @@ export default function ProfileSection() {
       icon: (
         <Ionicons name="call-outline" size={ICON_SIZE_SMALL} color="white" />
       ),
-      label: "+6282340374412",
+      label: `+${data && data.User.nomor ? data.User.nomor : "-"}`,
     },
     {
       icon: (
         <Ionicons name="mail-outline" size={ICON_SIZE_SMALL} color="white" />
       ),
-      label: "bagasbanuna@gmail.com",
+      label: `${data && data.email ? data.email : "-"}`,
     },
     {
       icon: (
@@ -30,28 +32,38 @@ export default function ProfileSection() {
           color="white"
         />
       ),
-      label: "Jalan Raya Sesetan No. 123, Bandung, Indonesia",
+      label: `${data && data.alamat ? data.alamat : "-"}`,
     },
     {
       icon: (
         <FontAwesome5 name="transgender" size={ICON_SIZE_SMALL} color="white" />
       ),
-      label: "Laki-laki",
+      label: `${
+        data && data.jenisKelamin ? _.startCase(data.jenisKelamin) : "-"
+      }`,
     },
   ];
 
   return (
     <>
       <BaseBox>
-        <AvatarAndBackground backgroundId="test-background-id" imageId="test-image-id" />
+        {/* <TextCustom>
+          {JSON.stringify(data.imageBackgroundId, null, 2)}
+        </TextCustom> */}
+        <AvatarAndBackground
+          backgroundId={data?.imageBackgroundId as any}
+          imageId={data?.imageId as any}
+        />
         <Spacing height={50} />
 
         <View style={{ alignItems: "center" }}>
           <TextCustom bold size="large" align="center">
-            Nama User
+            {data && data.name ? data.name : "-"}
           </TextCustom>
           <Spacing height={5} />
-          <TextCustom size="small">@Username</TextCustom>
+          <TextCustom size="small">
+            @{data && data.User.username ? data.User.username : "-"}
+          </TextCustom>
         </View>
         <Spacing height={30} />
 

screens/Profile/menuDrawerSection.tsx

@@ -5,12 +5,10 @@ import { router } from "expo-router";
 
 export default function Profile_MenuDrawerSection({
   drawerItems,
-  setShowLogoutAlert,
   setIsDrawerOpen,
   logout,
 }: {
   drawerItems: IMenuDrawerItem[];
-  setShowLogoutAlert: (value: boolean) => void;
   setIsDrawerOpen: (value: boolean) => void;
   logout: () => Promise<void>;
 }) {

service/api-client/api-profile.ts

@@ -4,5 +4,23 @@ export async function apiCreateProfile(data: any) {
   const response = await apiConfig.post(`/mobile/profile`, {
     data: data,
   });
- return response;
+  return response.data;
+}
+
+export async function apiProfile({ id }: { id: string }) {
+  const response = await apiConfig.get(`/mobile/profile/${id}`);
+  return response.data;
+}
+
+export async function apiUpdateProfile({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  const response = await apiConfig.put(`/mobile/profile/${id}`, {
+    data: data,
+  });
+  return response.data;
 }

service/api-client/api-user.ts

@@ -1,7 +1,6 @@
 import { apiConfig } from "../api-config";
 
-
 export async function apiUser(id: string) {
   const response = await apiConfig.get(`/user/${id}`);
   return response.data;
-}
+}

service/api-config.ts

@@ -10,6 +10,7 @@ export const apiConfig: AxiosInstance = axios.create({
 
 apiConfig.interceptors.request.use(
   async (config) => {
+    console.log("API_BASE_URL >>", API_BASE_URL);
     const token = await AsyncStorage.getItem("authToken");
     if (token) {
       // config.timeout = 10000;

types/Type-Profile.ts

@@ -0,0 +1,16 @@
+import { IUser } from "./User";
+
+export interface IProfile {
+  id?: string;
+  name?: string;
+  email?: string;
+  alamat?: string;
+  jenisKelamin?: string;
+  active?: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+  userId?: string;
+  imageId?: string | null;
+  imageBackgroundId?: string | null;
+  User: IUser
+}

types/User.ts

@@ -6,12 +6,12 @@ export interface IMasterUserRole {
 }
 
 export interface IUser {
-  id: string;
+  id?: string;
-  username: string;
+  username?: string;
-  nomor: string;
+  nomor?: string;
-  active: boolean;
+  active?: boolean;
-  createdAt: string | null;
+  createdAt?: string | null;
-  updatedAt: string | null;
+  updatedAt?: string | null;
-  masterUserRoleId: string;
+  masterUserRoleId?: string;
-  MasterUserRole: IMasterUserRole;
+  MasterUserRole?: IMasterUserRole;
 }