diff --git a/app/(application)/(user)/portofolio/[id]/index.tsx b/app/(application)/(user)/portofolio/[id]/index.tsx index 2b4ba62..a8cf067 100644 --- a/app/(application)/(user)/portofolio/[id]/index.tsx +++ b/app/(application)/(user)/portofolio/[id]/index.tsx @@ -1,4 +1,5 @@ -import { DrawerCustom, Spacing, StackCustom } from "@/components"; +/* eslint-disable react-hooks/exhaustive-deps */ +import { DrawerCustom, LoaderCustom, Spacing, StackCustom } from "@/components"; import LeftButtonCustom from "@/components/Button/BackButton"; import ViewWrapper from "@/components/_ShareComponent/ViewWrapper"; import { MainColor } from "@/constants/color-palet"; @@ -10,18 +11,21 @@ import { drawerItemsPortofolio } from "@/screens/Portofolio/ListPage"; import Portofolio_MenuDrawerSection from "@/screens/Portofolio/MenuDrawer"; import Portofolio_SocialMediaSection from "@/screens/Portofolio/SocialMediaSection"; import { apiGetOnePortofolio } from "@/service/api-client/api-portofolio"; +import { apiUser } from "@/service/api-client/api-user"; import { GStyles } from "@/styles/global-styles"; import { Ionicons } from "@expo/vector-icons"; import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router"; -import { useCallback, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { TouchableOpacity } from "react-native"; export default function Portofolio() { const { id } = useLocalSearchParams(); - const { user } = useAuth(); const [isDrawerOpen, setIsDrawerOpen] = useState(false); const [isLoadingDelete, setIsLoadingDelete] = useState(false); const [data, setData] = useState(); + const [profileId, setProfileId] = useState(); + + const { user } = useAuth(); const openDrawer = () => { setIsDrawerOpen(true); @@ -33,24 +37,27 @@ export default function Portofolio() { useFocusEffect( useCallback(() => { onLoadData(id as string); + onLoadUserByToken(); }, [id]) ); async function onLoadData(id: string) { const response = await apiGetOnePortofolio({ id: id }); - // console.log( - // "Response portofolio >>", - // JSON.stringify(response.data, null, 2) - // ); - + console.log( + "[PROFILE ID]>>", + JSON.stringify(response.data.Profile.id, null, 2) + ); setData(response.data); } - const userId = user?.id; - const userLoginId = data?.Profile?.userId - - console.log("User ID >>", userId); - console.log("User Login ID >>", userLoginId); + const onLoadUserByToken = async () => { + const response = await apiUser(user?.id as string); + console.log( + "[PROFILE LOGIN]>>", + JSON.stringify(response.data?.Profile.id, null, 2) + ); + setProfileId(response?.data?.Profile?.id); + }; return ( <> @@ -59,32 +66,41 @@ export default function Portofolio() { options={{ title: "Portofolio", headerLeft: () => , - headerRight: () => ( - - - - ), + headerRight: () => + data?.Profile?.id !== profileId ? null : ( + + + + ), headerStyle: GStyles.headerStyle, headerTitleStyle: GStyles.headerTitleStyle, }} /> - {/* */} - - - - - - - + {!data || !profileId ? ( + + ) : ( + + + + + + + + )} {/* Drawer Komponen Eksternal */} diff --git a/app/(application)/(user)/profile/[id]/index.tsx b/app/(application)/(user)/profile/[id]/index.tsx index ffd86a4..bf3acfe 100644 --- a/app/(application)/(user)/profile/[id]/index.tsx +++ b/app/(application)/(user)/profile/[id]/index.tsx @@ -1,3 +1,5 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +import { LoaderCustom } from "@/components"; import ViewWrapper from "@/components/_ShareComponent/ViewWrapper"; import LeftButtonCustom from "@/components/Button/BackButton"; import DrawerCustom from "@/components/Drawer/DrawerCustom"; @@ -9,6 +11,7 @@ import Profile_PortofolioSection from "@/screens/Profile/PortofolioSection"; import ProfileSection from "@/screens/Profile/ProfileSection"; import { apiGetPortofolio } from "@/service/api-client/api-portofolio"; import { apiProfile } from "@/service/api-client/api-profile"; +import { apiUser } from "@/service/api-client/api-user"; import { GStyles } from "@/styles/global-styles"; import { IProfile } from "@/types/Type-Profile"; import { Ionicons } from "@expo/vector-icons"; @@ -20,9 +23,10 @@ export default function Profile() { const { id } = useLocalSearchParams(); const [isDrawerOpen, setIsDrawerOpen] = useState(false); const [data, setData] = useState(); - const [dataPortofolio, setDataPortofolio] = useState(); + const [dataToken, setDataToken] = useState(); + const [listPortofolio, setListPortofolio] = useState(); - const { logout, isAdmin } = useAuth(); + const { logout, isAdmin, user } = useAuth(); const openDrawer = () => { setIsDrawerOpen(true); @@ -36,14 +40,28 @@ export default function Profile() { useCallback(() => { onLoadData(id as string); onLoadPortofolio(id as string); + onLoadUserByToken(); + isUserCheck(); }, [id]) ); + const isUserCheck = () => { + const userId = id; + const userLoginId = dataToken?.id; + + return userId === userLoginId; + }; + const onLoadData = async (id: string) => { const response = await apiProfile({ id: id }); setData(response.data); }; + const onLoadUserByToken = async () => { + const response = await apiUser(user?.id as string); + setDataToken(response?.data?.Profile); + }; + const onLoadPortofolio = async (id: string) => { const response = await apiGetPortofolio({ id: id }); const lastTwoByDate = response.data @@ -52,7 +70,7 @@ export default function Profile() { new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() ) // urut desc .slice(0, 2); - setDataPortofolio(lastTwoByDate); + setListPortofolio(lastTwoByDate); }; return ( @@ -61,27 +79,34 @@ export default function Profile() { options={{ title: "Profile", headerLeft: () => , - headerRight: () => ( - - - - ), + headerRight: () => + isUserCheck() && ( + + + + ), headerStyle: GStyles.headerStyle, headerTitleStyle: GStyles.headerTitleStyle, }} /> {/* Main View */} - + {!data || !dataToken ? ( + + ) : ( + <> + - + + + )} {/* Drawer Komponen Eksternal */} diff --git a/app/(application)/(user)/user-search/index.tsx b/app/(application)/(user)/user-search/index.tsx index 580b5c7..775fa88 100644 --- a/app/(application)/(user)/user-search/index.tsx +++ b/app/(application)/(user)/user-search/index.tsx @@ -1,5 +1,5 @@ import { - AvatarCustom, + AvatarComp, ClickableCustom, Grid, Spacing, @@ -10,39 +10,42 @@ import { } from "@/components"; import { MainColor } from "@/constants/color-palet"; import { ICON_SIZE_SMALL } from "@/constants/constans-value"; +import { apiAllUser } from "@/service/api-client/api-user"; import { Ionicons } from "@expo/vector-icons"; import { router } from "expo-router"; +import _ from "lodash"; +import { useEffect, useState } from "react"; export default function UserSearch() { - function generateRandomPhoneNumber(index: number) { - let prefix; + const [data, setData] = useState([]); + const [search, setSearch] = useState(""); - // Menentukan prefix berdasarkan index genap atau ganjil - if (index % 2 === 0) { - const evenPrefixes = ["6288", "6289", "6281"]; - prefix = evenPrefixes[Math.floor(Math.random() * evenPrefixes.length)]; - } else { - const oddPrefixes = ["6285", "6283"]; - prefix = oddPrefixes[Math.floor(Math.random() * oddPrefixes.length)]; + useEffect(() => { + onLoadData(search); + }, [search]); + + const onLoadData = async (search: string) => { + try { + const response = await apiAllUser({ search: search }); + console.log("[DATA USER] >", JSON.stringify(response.data, null, 2)); + setData(response.data); + } catch (error) { + console.log("Error fetching data", error); } + }; - // Menghitung panjang sisa nomor acak (antara 10 - 12 digit) - const remainingLength = Math.floor(Math.random() * 3) + 10; // 10, 11, atau 12 + const handleSearch = (search: string) => { + setSearch(search); + onLoadData(search); + }; - // Membuat sisa nomor acak - let randomNumber = ""; - for (let i = 0; i < remainingLength; i++) { - randomNumber += Math.floor(Math.random() * 10); // Digit acak antara 0-9 - } - - // Menggabungkan prefix dan sisa nomor - return prefix + randomNumber; - } return ( <> - {Array.from({ length: 20 }).map((e, index) => { - return ( - - - - - - Nama user {index} - - +{generateRandomPhoneNumber(index)} - - - { + return ( + { + console.log("Ke Profile"); + router.push(`/profile/${e?.Profile?.id}`); }} > - { - console.log("Ke Profile"); - router.push(`/profile/${index}`); - }} - > - - - - - ); - })} + + + + + + + {e?.username} + +{e?.nomor} + + + + + + + + ); + }) + ) : ( + Tidak ditemukan + )} diff --git a/components/Loader/LoaderCustom.tsx b/components/Loader/LoaderCustom.tsx new file mode 100644 index 0000000..48d21bc --- /dev/null +++ b/components/Loader/LoaderCustom.tsx @@ -0,0 +1,8 @@ +import { MainColor } from "@/constants/color-palet"; +import { ActivityIndicator } from "react-native"; + +export default function LoaderCustom({ size }: { size?: "small" | "large" }) { + return ( + + ); +} diff --git a/components/index.ts b/components/index.ts index 2448ce6..9c05846 100644 --- a/components/index.ts +++ b/components/index.ts @@ -61,6 +61,8 @@ import DummyLandscapeImage from "./_ShareComponent/DummyLandscapeImage"; import GridComponentView from "./_ShareComponent/GridSectionView"; // Progress import ProgressCustom from "./Progress/ProgressCustom"; +// Loader +import LoaderCustom from "./Loader/LoaderCustom"; export { // ActionIcon @@ -128,4 +130,6 @@ export { TextInputCustom, // ViewWrapper ViewWrapper, + // Loader + LoaderCustom, }; diff --git a/context/AuthContext.tsx b/context/AuthContext.tsx index bdb007f..94e3523 100644 --- a/context/AuthContext.tsx +++ b/context/AuthContext.tsx @@ -92,7 +92,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => { await AsyncStorage.setItem("authToken", token); const responseUser = await apiConfig.get( - `/mobile/user?token=${token}`, + `/mobile?token=${token}`, { headers: { Authorization: `Bearer ${token}`, diff --git a/service/api-client/api-user.ts b/service/api-client/api-user.ts index defce65..5e05653 100644 --- a/service/api-client/api-user.ts +++ b/service/api-client/api-user.ts @@ -1,6 +1,12 @@ import { apiConfig } from "../api-config"; export async function apiUser(id: string) { - const response = await apiConfig.get(`/user/${id}`); + const response = await apiConfig.get(`/mobile/user/${id}`); return response.data; } + +export async function apiAllUser({ search }: { search: string }) { + const response = await apiConfig.get(`/mobile/user?search=${search}`); + return response.data; +} +