API Profile:

Fix: - api create, get , edit Types Add: - Type-Profile ### No Issue
2025-08-25 17:59:07 +08:00
parent df5313a243
commit 59482ca712
17 changed files with 323 additions and 198 deletions
--- a/app/(application)/(user)/home.tsx
+++ b/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 />

--- a/app/(application)/(user)/profile/[id]/edit.tsx
+++ b/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 { StyleSheet } from "react-native";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";

 export default function ProfileEdit() {
  const { id } = useLocalSearchParams();

-  const [data, setData] = useState({
-    nama: "Bagas Banuna",
-    email: "bagasbanuna@gmail.com",
-    alamat: "Jember",
-    selectedValue: "",
-  });
+  const [data, setData] = useState<IProfile | any>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);

  const options = [
    { label: "Laki-laki", value: "laki-laki" },
    { label: "Perempuan", value: "perempuan" },
  ];

-  const handleSave = () => {
-    console.log({
-      nama: data.nama,
-      email: data.email,
-      alamat: data.alamat,
-      selectedValue: data.selectedValue,
-    });
-    router.back();
+  useEffect(() => {
+    onLoadData(id as string);
+  }, [id]);
+
+  async function onLoadData(id: string) {
+    try {
+      const response = await apiProfile({ id });
+      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
-            // disabled={
-            //   !data.nama || !data.email || !data.alamat || !data.selectedValue
-            // }
-            onPress={handleSave}
-          >
-            Simpan
+          <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
+            Update
          </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",
-  },
-});
--- a/app/(application)/(user)/profile/[id]/index.tsx
+++ b/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 React, { useState } from "react";
+import {
+  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 = () => {
-    console.log("User logout");
-    router.replace("/");
-    setShowLogoutAlert(false);
-  };
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [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
-          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 />
+        <ProfileSection data={data as any} />
      </ViewWrapper>

      {/* Drawer Komponen Eksternal */}
      <DrawerCustom
-        height={350}
+        height={"auto"}
        isVisible={isDrawerOpen}
        closeDrawer={closeDrawer}
      >
        <Profile_MenuDrawerSection
-          drawerItems={drawerItemsProfile({ id: id as string })}
-          setShowLogoutAlert={setShowLogoutAlert}
+          drawerItems={drawerItemsProfile({ id: id as string, isAdmin })}
          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}
-      />
    </>
  );
 }
--- a/app/(application)/(user)/profile/create.tsx
+++ b/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 { useState } from "react";
+import { router, useFocusEffect } from "expo-router";
+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");
--- a/app/(application)/admin/_layout.tsx
+++ b/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") {
--- a/components/_Interface/types.ts
+++ b/components/_Interface/types.ts
@@ -24,4 +24,5 @@ interface IMenuDrawerItem {
  label: string;
  path?: string;
  color?: string;
+  value?: string;
 }
--- a/screens/Authentication/VerificationView.tsx
+++ b/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);
  }
--- a/screens/Home/tabsList.ts
+++ b/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,
  },
-];
+];
--- a/screens/Profile/AvatarAndBackground.tsx
+++ b/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
--- a/screens/Profile/ListPage.tsx
+++ b/screens/Profile/ListPage.tsx
@@ -5,85 +5,139 @@ import { Ionicons } from "@expo/vector-icons";

 export const drawerItemsProfile = ({
  id,
+  isAdmin,
 }: {
  id: string;
-}): IMenuDrawerItem[] => [
-  {
-    icon: (
-      <Ionicons
-        name="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="settings"
-        size={ICON_SIZE_MEDIUM}
-        color={AccentColor.white}
-      />
-    ),
-    label: "Dashboard Admin",
-    path: `/(application)/admin/dashboard`,
-  },
-  {
-    icon: (
-      <Ionicons
-        name="log-out"
-        size={ICON_SIZE_MEDIUM}
-        color={AccentColor.white}
-      />
-    ),
-    label: "Keluar",
-    color: MainColor.red,
-    path: "",
-  },
-  {
-    icon: (
-      <Ionicons
-        name="create-outline"
-        size={ICON_SIZE_MEDIUM}
-        color={AccentColor.white}
-      />
-    ),
-    label: "Create profile",
-    path: `/(application)/profile/${id}/create`,
-  },
-];
+  isAdmin: boolean;
+}) => {
+  const adminItems: IMenuDrawerItem[] = [
+    {
+      icon: (
+        <Ionicons
+          name="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="settings"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Dashboard Admin",
+      path: `/(application)/admin/dashboard`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="log-out"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Keluar",
+      color: MainColor.red,
+      path: "",
+    },
+  ];
+
+  const userItems: IMenuDrawerItem[] = [
+    {
+      icon: (
+        <Ionicons
+          name="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;
+};
--- a/screens/Profile/ProfileSection.tsx
+++ b/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} />

--- a/screens/Profile/menuDrawerSection.tsx
+++ b/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>;
 }) {
--- a/service/api-client/api-profile.ts
+++ b/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;
 }
--- a/service/api-client/api-user.ts
+++ b/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;
-}
+}
--- a/service/api-config.ts
+++ b/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;
--- a/types/Type-Profile.ts
+++ b/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
+}
--- a/types/User.ts
+++ b/types/User.ts
@@ -6,12 +6,12 @@ export interface IMasterUserRole {
 }

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