Add:
- service/api-client/ : api route setting
- service/api-config.ts : api base url

Profil & User
Fix:
- auth logic
- crate profile

### No Issue
This commit is contained in:
2025-08-22 17:32:48 +08:00
parent 014cf387fd
commit ebcf16efba
14 changed files with 195 additions and 138 deletions

View File

@@ -10,28 +10,6 @@ export default function UserLayout() {
return ( return (
<> <>
<Stack screenOptions={HeaderStyles}> <Stack screenOptions={HeaderStyles}>
<Stack.Screen
name="home"
options={{
title: "HIPMI",
headerLeft: () => (
<Ionicons
name="search"
size={20}
color={MainColor.yellow}
onPress={() => router.push("/user-search")}
/>
),
headerRight: () => (
<Ionicons
name="notifications"
size={20}
color={MainColor.yellow}
onPress={() => router.push("/notifications")}
/>
),
}}
/>
<Stack.Screen <Stack.Screen
name="waiting-room" name="waiting-room"

View File

@@ -1,9 +1,71 @@
import UiHome from "@/screens/Home/UiHome"; /* eslint-disable react-hooks/exhaustive-deps */
import { StackCustom, ViewWrapper } from "@/components";
import { MainColor } from "@/constants/color-palet";
import { useAuth } from "@/hooks/use-auth";
import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
import Home_ImageSection from "@/screens/Home/imageSection";
import TabSection from "@/screens/Home/tabSection";
import { tabsHome } from "@/screens/Home/tabsList";
import Home_FeatureSection from "@/screens/Home/topFeatureSection";
import { apiUser } from "@/service/api-client/api-user";
import { Ionicons } from "@expo/vector-icons";
import { Redirect, router, Stack } from "expo-router";
import { useEffect, useState } from "react";
export default function Application() { export default function Application() {
const { user } = useAuth();
const [data, setData] = useState<any>({});
useEffect(() => {
onLoadData();
}, []);
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) {
return <Redirect href={`/waiting-room`} />;
}
return ( return (
<> <>
<UiHome /> <Stack.Screen
options={{
title: "HIPMI",
headerLeft: () => (
<Ionicons
name="search"
size={20}
color={MainColor.yellow}
onPress={() => {
router.push("/user-search");
}}
/>
),
headerRight: () => (
<Ionicons
name="notifications"
size={20}
color={MainColor.yellow}
onPress={() => {
router.push("/notifications");
}}
/>
),
}}
/>
<ViewWrapper footerComponent={<TabSection tabs={tabsHome} />}>
<StackCustom>
<Home_ImageSection />
<Home_FeatureSection />
<Home_BottomFeatureSection />
</StackCustom>
</ViewWrapper>
</> </>
); );
} }

View File

@@ -11,22 +11,27 @@ export default function ProfileLayout() {
headerTitleStyle: GStyles.headerTitleStyle, headerTitleStyle: GStyles.headerTitleStyle,
headerTitleAlign: "center", headerTitleAlign: "center",
headerBackButtonDisplayMode: "minimal", headerBackButtonDisplayMode: "minimal",
headerLeft: () => <BackButton />,
}} }}
> >
{/* <Stack.Screen name="[id]/index" options={{ headerShown: false }} /> */} {/* <Stack.Screen name="[id]/index" options={{ headerShown: false }} /> */}
<Stack.Screen name="[id]/edit" options={{ title: "Edit Profile" }} /> <Stack.Screen
name="[id]/edit"
options={{ title: "Edit Profile", headerLeft: () => <BackButton /> }}
/>
<Stack.Screen <Stack.Screen
name="[id]/update-photo" name="[id]/update-photo"
options={{ title: "Update Foto" }} options={{ title: "Update Foto", headerLeft: () => <BackButton /> }}
/> />
<Stack.Screen <Stack.Screen
name="[id]/update-background" name="[id]/update-background"
options={{ title: "Update Latar Belakang" }} options={{
title: "Update Latar Belakang",
headerLeft: () => <BackButton />,
}}
/> />
<Stack.Screen <Stack.Screen
name="[id]/create" name="create"
options={{ title: "Buat Profile" }} options={{ title: "Buat Profile", headerBackVisible: false }}
/> />
</Stack> </Stack>
</> </>

View File

@@ -11,27 +11,66 @@ import {
import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter"; import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
import InformationBox from "@/components/Box/InformationBox"; import InformationBox from "@/components/Box/InformationBox";
import LandscapeFrameUploaded from "@/components/Image/LandscapeFrameUploaded"; import LandscapeFrameUploaded from "@/components/Image/LandscapeFrameUploaded";
import { router, useLocalSearchParams } from "expo-router"; import { useAuth } from "@/hooks/use-auth";
import { apiCreateProfile } from "@/service/api-client/api-profile";
import { router } from "expo-router";
import { useState } from "react"; import { useState } from "react";
import { View } from "react-native"; import { View } from "react-native";
import Toast from "react-native-toast-message";
export default function CreateProfile() { export default function CreateProfile() {
const { id } = useLocalSearchParams(); const { user } = useAuth();
const [isLoading, setIsLoading] = useState<boolean>(false);
const [data, setData] = useState({ const [data, setData] = useState({
id: user?.id,
name: "", name: "",
email: "", email: "",
address: "", alamat: "",
gender: "", jenisKelamin: "",
}); });
const handlerSave = () => { const handlerSave = async () => {
console.log("data create profile >>", data); if (!data.name || !data.email || !data.alamat || !data.jenisKelamin) {
router.back(); Toast.show({
type: "info",
text1: "Info",
text2: "Harap isi semua data",
});
return;
}
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",
text1: "Email sudah terdaftar",
text2: "Gunakan email lain",
});
return;
}
Toast.show({
type: "success",
text1: "Success",
text2: "Profile berhasil dibuat",
});
router.push("/(application)/(user)/home");
} catch (error) {
console.log("error create profile >>", error);
} finally {
setIsLoading(false);
}
}; };
const footerComponent = ( const footerComponent = (
<BoxButtonOnFooter> <BoxButtonOnFooter>
<ButtonCustom <ButtonCustom
isLoading={isLoading}
onPress={handlerSave} onPress={handlerSave}
// disabled={!data.name || !data.email || !data.address || !data.gender} // disabled={!data.name || !data.email || !data.address || !data.gender}
> >
@@ -49,7 +88,7 @@ export default function CreateProfile() {
<Spacing /> <Spacing />
<ButtonCenteredOnly <ButtonCenteredOnly
icon="upload" icon="upload"
onPress={() => router.navigate(`/take-picture/${id}`)} onPress={() => router.navigate(`/take-picture/${user?.id}`)}
> >
Upload Upload
</ButtonCenteredOnly> </ButtonCenteredOnly>
@@ -63,7 +102,7 @@ export default function CreateProfile() {
<Spacing /> <Spacing />
<ButtonCenteredOnly <ButtonCenteredOnly
icon="upload" icon="upload"
onPress={() => router.navigate(`/take-picture/${id}`)} onPress={() => router.navigate(`/take-picture/${user?.id}`)}
> >
Upload Upload
</ButtonCenteredOnly> </ButtonCenteredOnly>
@@ -89,8 +128,8 @@ export default function CreateProfile() {
required required
label="Alamat" label="Alamat"
placeholder="Masukkan alamat" placeholder="Masukkan alamat"
value={data.address} value={data.alamat}
onChangeText={(text) => setData({ ...data, address: text })} onChangeText={(text) => setData({ ...data, alamat: text })}
/> />
<SelectCustom <SelectCustom
label="Jenis Kelamin" label="Jenis Kelamin"
@@ -99,9 +138,11 @@ export default function CreateProfile() {
{ label: "Laki-laki", value: "laki-laki" }, { label: "Laki-laki", value: "laki-laki" },
{ label: "Perempuan", value: "perempuan" }, { label: "Perempuan", value: "perempuan" },
]} ]}
value={data.gender} value={data.jenisKelamin}
required required
onChange={(value) => setData({ ...(data as any), gender: value })} onChange={(value) =>
setData({ ...(data as any), jenisKelamin: value })
}
/> />
<Spacing /> <Spacing />
</StackCustom> </StackCustom>

View File

@@ -14,18 +14,17 @@ import { router } from "expo-router";
import Toast from "react-native-toast-message"; import Toast from "react-native-toast-message";
export default function WaitingRoom() { export default function WaitingRoom() {
const { token, userData, isLoading, logout } = useAuth(); const { token, isLoading, logout, userData } = useAuth();
async function handleCheck() { async function handleCheck() {
try { try {
const response = await userData(token as string); const response = await userData(token as string);
console.log("response check", JSON.stringify(response, null, 2));
if (response.active) { if (response.active) {
Toast.show({ Toast.show({
type: "success", type: "success",
text1: "Akun anda telah aktif", // text2: "Anda berhasil login", text1: "Akun anda telah aktif", // text2: "Anda berhasil login",
}); });
router.replace("/(application)/(user)/home"); router.replace(`/(application)/(user)/profile/create`);
} else { } else {
Toast.show({ Toast.show({
type: "error", type: "error",
@@ -57,7 +56,7 @@ export default function WaitingRoom() {
onPressRight: () => { onPressRight: () => {
logout(); logout();
}, },
}) });
}} }}
> >
Keluar Keluar

View File

@@ -1,9 +1,9 @@
import { import {
apiClient, apiConfig,
apiLogin, apiLogin,
apiRegister, apiRegister,
apiValidationCode, apiValidationCode,
} from "@/service/api"; } from "@/service/api-config";
import { IUser } from "@/types/User"; import { IUser } from "@/types/User";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import { router } from "expo-router"; import { router } from "expo-router";
@@ -72,7 +72,6 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
setIsLoading(true); setIsLoading(true);
try { try {
const response = await apiLogin({ nomor: nomor }); const response = await apiLogin({ nomor: nomor });
console.log("Success login api", JSON.stringify(response, null, 2));
await AsyncStorage.setItem("kode_otp", response.kodeId); await AsyncStorage.setItem("kode_otp", response.kodeId);
} catch (error: any) { } catch (error: any) {
throw new Error(error.response?.data?.message || "Gagal kirim OTP"); throw new Error(error.response?.data?.message || "Gagal kirim OTP");
@@ -92,7 +91,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
setToken(token); setToken(token);
await AsyncStorage.setItem("authToken", token); await AsyncStorage.setItem("authToken", token);
const responseUser = await apiClient.get( const responseUser = await apiConfig.get(
`/mobile/user?token=${token}`, `/mobile/user?token=${token}`,
{ {
headers: { headers: {
@@ -101,7 +100,6 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
} }
); );
const dataUser = responseUser.data.data; const dataUser = responseUser.data.data;
console.log("res validasi user :", JSON.stringify(dataUser, null, 2));
setUser(dataUser); setUser(dataUser);
await AsyncStorage.setItem("userData", JSON.stringify(dataUser)); await AsyncStorage.setItem("userData", JSON.stringify(dataUser));
@@ -137,14 +135,13 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
const userData = async (token: string) => { const userData = async (token: string) => {
try { try {
setIsLoading(true); setIsLoading(true);
const response = await apiClient.get(`/mobile/user?token=${token}`, { const response = await apiConfig.get(`/mobile/user?token=${token}`, {
headers: { headers: {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
}, },
}); });
const dataUser = response.data.data; const dataUser = response.data.data;
console.log("res validasi user :", JSON.stringify(dataUser, null, 2));
setUser(dataUser); setUser(dataUser);
await AsyncStorage.setItem("userData", JSON.stringify(dataUser)); await AsyncStorage.setItem("userData", JSON.stringify(dataUser));
@@ -166,7 +163,6 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
setIsLoading(true); setIsLoading(true);
try { try {
const response = await apiRegister({ data: userData }); const response = await apiRegister({ data: userData });
console.log("Success register api", JSON.stringify(response, null, 2));
const { token } = response; const { token } = response;
if (!response.success) { if (!response.success) {

View File

@@ -3,7 +3,7 @@ import Spacing from "@/components/_ShareComponent/Spacing";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper"; import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { MainColor } from "@/constants/color-palet"; import { MainColor } from "@/constants/color-palet";
import { useAuth } from "@/hooks/use-auth"; import { useAuth } from "@/hooks/use-auth";
import { apiClient, apiVersion } from "@/service/api"; import { apiVersion } from "@/service/api-config";
import { GStyles } from "@/styles/global-styles"; import { GStyles } from "@/styles/global-styles";
import { Redirect, router } from "expo-router"; import { Redirect, router } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -19,18 +19,11 @@ export default function LoginView() {
const { loginWithNomor, token, isAdmin, isUserActive } = useAuth(); const { loginWithNomor, token, isAdmin, isUserActive } = useAuth();
// console.log("Token state:", token ? "AVAILABLE" : "NOT AVAILABLE");
// console.log("isAdmin state:", isAdmin);
// console.log("isUserActive state:", isUserActive);
// console.log("isAuthenticated state:", isAuthenticated);
useEffect(() => { useEffect(() => {
onLoadVersion(); onLoadVersion();
}, []); }, []);
async function onLoadVersion() { async function onLoadVersion() {
// const token = await AsyncStorage.getItem("authToken");
// console.log("Token Version:", token);
const res = await apiVersion(); const res = await apiVersion();
setVersion(res.data); setVersion(res.data);
} }

View File

@@ -42,12 +42,10 @@ export default function RegisterView() {
const isValid = validasiData(); const isValid = validasiData();
if (!isValid) return; if (!isValid) return;
const response = await registerUser({ await registerUser({
nomor: nomor as string, nomor: nomor as string,
username: username, username: username,
}); });
console.log("Success register page", JSON.stringify(response, null, 2));
} }
return ( return (

View File

@@ -3,7 +3,7 @@ import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import ButtonCustom from "@/components/Button/ButtonCustom"; import ButtonCustom from "@/components/Button/ButtonCustom";
import { MainColor } from "@/constants/color-palet"; import { MainColor } from "@/constants/color-palet";
import { useAuth } from "@/hooks/use-auth"; import { useAuth } from "@/hooks/use-auth";
import { apiCheckCodeOtp } from "@/service/api"; import { apiCheckCodeOtp } from "@/service/api-config";
import { GStyles } from "@/styles/global-styles"; import { GStyles } from "@/styles/global-styles";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import { router, useLocalSearchParams } from "expo-router"; import { router, useLocalSearchParams } from "expo-router";
@@ -29,7 +29,6 @@ export default function VerificationView() {
async function onLoadCheckCodeOtp() { async function onLoadCheckCodeOtp() {
const kodeId = await AsyncStorage.getItem("kode_otp"); const kodeId = await AsyncStorage.getItem("kode_otp");
const response = await apiCheckCodeOtp({ kodeId: kodeId as string }); const response = await apiCheckCodeOtp({ kodeId: kodeId as string });
console.log("response kode otp :", JSON.stringify(response.otp, null, 2));
setCodeOtp(response.otp); setCodeOtp(response.otp);
setUserNumber(response.nomor); setUserNumber(response.nomor);
} }
@@ -82,7 +81,7 @@ export default function VerificationView() {
<View style={GStyles.authContainer}> <View style={GStyles.authContainer}>
<View> <View>
<View style={GStyles.authContainerTitle}> <View style={GStyles.authContainerTitle}>
<Text style={GStyles.authTitle}>Verifikasi KOde OTP</Text> <Text style={GStyles.authTitle}>Verifikasi Kode OTP</Text>
<Spacing height={30} /> <Spacing height={30} />
<Text style={GStyles.textLabel}>Masukan 4 digit kode otp</Text> <Text style={GStyles.textLabel}>Masukan 4 digit kode otp</Text>
<Text style={GStyles.textLabel}> <Text style={GStyles.textLabel}>

View File

@@ -1,32 +0,0 @@
// import { ITabs } from "@/components/_Interface/types";
import { StackCustom } from "@/components";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { useNavigation } from "expo-router";
import React, { useEffect } from "react";
import Home_BottomFeatureSection from "./bottomFeatureSection";
import Home_ImageSection from "./imageSection";
import TabSection from "./tabSection";
import { tabsHome } from "./tabsList";
import Home_FeatureSection from "./topFeatureSection";
export default function UiHome() {
const navigation = useNavigation();
useEffect(() => {
navigation.setOptions({});
}, [navigation]);
return (
<>
<ViewWrapper footerComponent={<TabSection tabs={tabsHome} />}>
<StackCustom>
<Home_ImageSection />
<Home_FeatureSection />
<Home_BottomFeatureSection />
</StackCustom>
</ViewWrapper>
</>
);
}

View File

@@ -4,39 +4,42 @@ import { Text, TouchableOpacity, View } from "react-native";
import { stylesHome } from "./homeViewStyle"; import { stylesHome } from "./homeViewStyle";
export default function Home_FeatureSection() { export default function Home_FeatureSection() {
const listFeature = [
{
name: "Event",
icon: <Ionicons name="analytics" size={48} color="white" />,
onPress: () => router.push("/(application)/(user)/event/(tabs)"),
},
{
name: "Collaboration",
icon: <Ionicons name="share" size={48} color="white" />,
onPress: () => router.push("/(application)/(user)/collaboration/(tabs)"),
},
{
name: "Voting",
icon: <Ionicons name="cube" size={48} color="white" />,
onPress: () => router.push("/(application)/(user)/voting/(tabs)"),
},
{
name: "Crowdfunding",
icon: <Ionicons name="heart" size={48} color="white" />,
onPress: () => router.push("/(application)/(user)/crowdfunding"),
},
];
return ( return (
<> <>
<View style={stylesHome.gridContainer}> <View style={stylesHome.gridContainer}>
<TouchableOpacity {listFeature.map((item, index) => (
style={stylesHome.gridItem} <TouchableOpacity
onPress={() => router.push("/(application)/(user)/event/(tabs)")} key={index}
> style={stylesHome.gridItem}
<Ionicons name="analytics" size={48} color="white" /> onPress={item.onPress}
<Text style={stylesHome.gridLabel}>Event</Text> >
</TouchableOpacity> {item.icon}
<TouchableOpacity <Text style={stylesHome.gridLabel}>{item.name}</Text>
style={stylesHome.gridItem} </TouchableOpacity>
onPress={() => ))}
router.push("/(application)/(user)/collaboration/(tabs)")
}
>
<Ionicons name="share" size={48} color="white" />
<Text style={stylesHome.gridLabel}>Collaboration</Text>
</TouchableOpacity>
<TouchableOpacity
style={stylesHome.gridItem}
onPress={() => router.push("/(application)/(user)/voting/(tabs)")}
>
<Ionicons name="cube" size={48} color="white" />
<Text style={stylesHome.gridLabel}>Voting</Text>
</TouchableOpacity>
<TouchableOpacity
style={stylesHome.gridItem}
onPress={() => router.push("/(application)/(user)/crowdfunding")}
>
<Ionicons name="heart" size={48} color="white" />
<Text style={stylesHome.gridLabel}>Crowdfunding</Text>
</TouchableOpacity>
</View> </View>
</> </>
); );

View File

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

View File

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

View File

@@ -3,7 +3,7 @@ import axios, { AxiosInstance } from "axios";
import Constants from "expo-constants"; import Constants from "expo-constants";
const API_BASE_URL = Constants.expoConfig?.extra?.API_BASE_URL; const API_BASE_URL = Constants.expoConfig?.extra?.API_BASE_URL;
export const apiClient: AxiosInstance = axios.create({ export const apiConfig: AxiosInstance = axios.create({
baseURL: API_BASE_URL, baseURL: API_BASE_URL,
}); });
@@ -16,7 +16,7 @@ export const apiClient: AxiosInstance = axios.create({
// "/auth/logout", // opsional, tergantung kebutuhan // "/auth/logout", // opsional, tergantung kebutuhan
// ]; // ];
apiClient.interceptors.request.use( apiConfig.interceptors.request.use(
async (config) => { async (config) => {
const token = await AsyncStorage.getItem("authToken"); const token = await AsyncStorage.getItem("authToken");
if (token) { if (token) {
@@ -35,25 +35,25 @@ apiClient.interceptors.request.use(
export async function apiVersion() { export async function apiVersion() {
// console.log("API_BASE_URL", API_BASE_URL); // console.log("API_BASE_URL", API_BASE_URL);
const response = await apiClient.get("/version"); const response = await apiConfig.get("/version");
// console.log("Response version", JSON.stringify(response.data, null, 2)); // console.log("Response version", JSON.stringify(response.data, null, 2));
return response.data; return response.data;
} }
export async function apiLogin({ nomor }: { nomor: string }) { export async function apiLogin({ nomor }: { nomor: string }) {
const response = await apiClient.post("/auth/login", { const response = await apiConfig.post("/auth/login", {
nomor: nomor, nomor: nomor,
}); });
return response.data; return response.data;
} }
export async function apiCheckCodeOtp({ kodeId }: { kodeId: string }) { export async function apiCheckCodeOtp({ kodeId }: { kodeId: string }) {
const response = await apiClient.get(`/auth/check/${kodeId}`); const response = await apiConfig.get(`/auth/check/${kodeId}`);
return response.data; return response.data;
} }
export async function apiValidationCode({ nomor }: { nomor: string }) { export async function apiValidationCode({ nomor }: { nomor: string }) {
const response = await apiClient.post(`/auth/validasi`, { const response = await apiConfig.post(`/auth/validasi`, {
nomor: nomor, nomor: nomor,
}); });
return response.data; return response.data;
@@ -64,7 +64,7 @@ export async function apiRegister({
}: { }: {
data: { nomor: string; username: string }; data: { nomor: string; username: string };
}) { }) {
const response = await apiClient.post(`/auth/register`, { const response = await apiConfig.post(`/auth/register`, {
data: data, data: data,
}); });
return response.data; return response.data;