mirror of
https://github.com/Sosokker/chefhai.git
synced 2025-12-18 21:44:09 +01:00
Tantikon P.
GitHub
commit
e22e9b2a34
@ -1,14 +1,17 @@
|
||||
import { IconSymbol } from "@/components/ui/IconSymbol";
|
||||
import { getFoods, insertGenAIResult } from "@/services/data/foods";
|
||||
import { uploadImageToSupabase } from "@/services/data/imageUpload";
|
||||
import { callGenAIonImage } from "@/services/gemini";
|
||||
import { supabase } from "@/services/supabase";
|
||||
import { Feather, FontAwesome, Ionicons } from "@expo/vector-icons";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import * as FileSystem from "expo-file-system";
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
import { router } from "expo-router";
|
||||
import React, { useMemo, useState } from "react";
|
||||
"use client"
|
||||
|
||||
import { IconSymbol } from "@/components/ui/IconSymbol"
|
||||
import { getFoods, insertGenAIResult } from "@/services/data/foods"
|
||||
import { uploadImageToSupabase } from "@/services/data/imageUpload"
|
||||
import { getProfile } from "@/services/data/profile"
|
||||
import { callGenAIonImage } from "@/services/gemini"
|
||||
import { supabase } from "@/services/supabase"
|
||||
import { Feather, FontAwesome, Ionicons } from "@expo/vector-icons"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import * as FileSystem from "expo-file-system"
|
||||
import * as ImagePicker from "expo-image-picker"
|
||||
import { router } from "expo-router"
|
||||
import { useMemo, useState, useEffect } from "react"
|
||||
import {
|
||||
Alert,
|
||||
Image,
|
||||
@ -19,71 +22,104 @@ import {
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
ActivityIndicator,
|
||||
} from "react-native"
|
||||
|
||||
const useFoodsQuery = () => {
|
||||
return useQuery({
|
||||
queryKey: ["highlight-foods"],
|
||||
queryFn: async () => {
|
||||
const { data, error } = await getFoods(undefined, true, undefined, 4);
|
||||
if (error) throw error;
|
||||
return data || [];
|
||||
const { data, error } = await getFoods(undefined, true, undefined, 4)
|
||||
if (error) throw error
|
||||
return data || []
|
||||
},
|
||||
staleTime: 1000 * 60 * 5,
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
const runImagePipeline = async (
|
||||
imageBase64: string,
|
||||
imageType: string,
|
||||
userId: string
|
||||
) => {
|
||||
const imageUri = await uploadImageToSupabase(imageBase64, imageType, userId);
|
||||
const genAIResult = await callGenAIonImage(imageUri);
|
||||
if (genAIResult.error) throw genAIResult.error;
|
||||
const { data: genAIResultData } = genAIResult;
|
||||
if (!genAIResultData) throw new Error("GenAI result is null");
|
||||
await insertGenAIResult(genAIResultData, userId, imageUri);
|
||||
};
|
||||
const useUserProfile = () => {
|
||||
const [userId, setUserId] = useState<string | null>(null)
|
||||
const [isLoadingUserId, setIsLoadingUserId] = useState(true)
|
||||
|
||||
const processImage = async (
|
||||
asset: ImagePicker.ImagePickerAsset,
|
||||
userId: string
|
||||
) => {
|
||||
// Get current user ID
|
||||
useEffect(() => {
|
||||
const fetchUserId = async () => {
|
||||
try {
|
||||
const { data, error } = await supabase.auth.getUser()
|
||||
if (error) throw error
|
||||
setUserId(data?.user?.id || null)
|
||||
} catch (error) {
|
||||
console.error("Error fetching user:", error)
|
||||
} finally {
|
||||
setIsLoadingUserId(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchUserId()
|
||||
}, [])
|
||||
|
||||
// Fetch user profile data
|
||||
const {
|
||||
data: profileData,
|
||||
isLoading: isLoadingProfile,
|
||||
error: profileError,
|
||||
} = useQuery({
|
||||
queryKey: ["profile", userId],
|
||||
queryFn: async () => {
|
||||
if (!userId) throw new Error("No user id")
|
||||
return getProfile(userId)
|
||||
},
|
||||
enabled: !!userId,
|
||||
staleTime: 1000 * 60 * 5, // 5 minutes
|
||||
})
|
||||
|
||||
return {
|
||||
userId,
|
||||
profileData: profileData?.data,
|
||||
isLoading: isLoadingUserId || isLoadingProfile,
|
||||
error: profileError,
|
||||
}
|
||||
}
|
||||
|
||||
const runImagePipeline = async (imageBase64: string, imageType: string, userId: string) => {
|
||||
const imageUri = await uploadImageToSupabase(imageBase64, imageType, userId)
|
||||
const genAIResult = await callGenAIonImage(imageUri)
|
||||
if (genAIResult.error) throw genAIResult.error
|
||||
const { data: genAIResultData } = genAIResult
|
||||
if (!genAIResultData) throw new Error("GenAI result is null")
|
||||
await insertGenAIResult(genAIResultData, userId, imageUri)
|
||||
}
|
||||
|
||||
const processImage = async (asset: ImagePicker.ImagePickerAsset, userId: string) => {
|
||||
const base64 = await FileSystem.readAsStringAsync(asset.uri, {
|
||||
encoding: "base64",
|
||||
});
|
||||
const imageType = asset.mimeType || "image/jpeg";
|
||||
await runImagePipeline(base64, imageType, userId);
|
||||
};
|
||||
})
|
||||
const imageType = asset.mimeType || "image/jpeg"
|
||||
await runImagePipeline(base64, imageType, userId)
|
||||
}
|
||||
|
||||
const navigateToFoodDetail = (foodId: string) => {
|
||||
router.push({ pathname: "/recipe-detail", params: { id: foodId } });
|
||||
};
|
||||
router.push({ pathname: "/recipe-detail", params: { id: foodId } })
|
||||
}
|
||||
|
||||
const handleImageSelection = async (
|
||||
pickerFn:
|
||||
| typeof ImagePicker.launchCameraAsync
|
||||
| typeof ImagePicker.launchImageLibraryAsync
|
||||
pickerFn: typeof ImagePicker.launchCameraAsync | typeof ImagePicker.launchImageLibraryAsync,
|
||||
) => {
|
||||
const result = await pickerFn({
|
||||
mediaTypes: ["images"],
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||
allowsEditing: true,
|
||||
aspect: [1, 1],
|
||||
quality: 1,
|
||||
});
|
||||
})
|
||||
|
||||
if (!result.canceled) {
|
||||
try {
|
||||
const { data, error } = await supabase.auth.getUser();
|
||||
if (error || !data?.user?.id) throw new Error("Cannot get user id");
|
||||
const userId = data.user.id;
|
||||
await processImage(result.assets[0], userId);
|
||||
const { data, error } = await supabase.auth.getUser()
|
||||
if (error || !data?.user?.id) throw new Error("Cannot get user id")
|
||||
const userId = data.user.id
|
||||
await processImage(result.assets[0], userId)
|
||||
} catch (err) {
|
||||
Alert.alert(
|
||||
"Image Processing Failed",
|
||||
(err as Error).message || "Unknown error"
|
||||
);
|
||||
Alert.alert("Image Processing Failed", (err as Error).message || "Unknown error")
|
||||
}
|
||||
router.push({
|
||||
pathname: "/recipe-detail",
|
||||
@ -91,28 +127,38 @@ const handleImageSelection = async (
|
||||
title: "My New Recipe",
|
||||
image: result.assets[0].uri,
|
||||
},
|
||||
});
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default function HomeScreen() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const { data: foodsData = [], isLoading, error } = useFoodsQuery();
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const { data: foodsData = [], isLoading: isLoadingFoods, error: foodsError } = useFoodsQuery()
|
||||
const { profileData, isLoading: isLoadingProfile, userId } = useUserProfile()
|
||||
|
||||
const filteredFoods = useMemo(() => {
|
||||
return searchQuery
|
||||
? foodsData.filter((food) =>
|
||||
food.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)
|
||||
: foodsData;
|
||||
}, [foodsData, searchQuery]);
|
||||
? foodsData.filter((food) => food.name.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||
: foodsData
|
||||
}, [foodsData, searchQuery])
|
||||
|
||||
// Get username or fallback to a default greeting
|
||||
const username = profileData?.username || profileData?.full_name || "Chef"
|
||||
const greeting = `Hi! ${username}`
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-white">
|
||||
<StatusBar barStyle="dark-content" />
|
||||
|
||||
<View className="flex-row justify-between items-center px-6 pt-4 pb-2">
|
||||
<Text className="text-3xl font-bold">Hi! Mr. Chef</Text>
|
||||
<View className="flex-row items-center justify-between px-6 pt-4 pb-2">
|
||||
{isLoadingProfile ? (
|
||||
<View className="flex-row items-center">
|
||||
<Text className="mr-2 text-3xl font-bold">Hi!</Text>
|
||||
<ActivityIndicator size="small" color="#bb0718" />
|
||||
</View>
|
||||
) : (
|
||||
<Text className="text-3xl font-bold">{greeting}</Text>
|
||||
)}
|
||||
<View className="bg-[#ffd60a] p-3 rounded-lg">
|
||||
<Ionicons name="settings-outline" size={24} color="black" />
|
||||
</View>
|
||||
@ -123,132 +169,105 @@ export default function HomeScreen() {
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ paddingBottom: 100 }}
|
||||
>
|
||||
<View className="px-6 mb-6">
|
||||
<View className="flex-row items-center mb-4">
|
||||
<Text className="text-2xl font-bold mr-2">Show your dishes</Text>
|
||||
<Feather name="wifi" size={20} color="black" />
|
||||
</View>
|
||||
{/* Main content container with consistent padding */}
|
||||
<View className="px-6">
|
||||
{/* "Show your dishes" section */}
|
||||
<View className="mb-6">
|
||||
<View className="flex-row items-center mb-4">
|
||||
<Text className="mr-2 text-2xl font-bold">Show your dishes</Text>
|
||||
<Feather name="wifi" size={20} color="black" />
|
||||
</View>
|
||||
|
||||
<View className="bg-white border border-gray-300 rounded-full mb-6 flex-row items-center px-4 py-3">
|
||||
<TextInput
|
||||
className="flex-1"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChangeText={setSearchQuery}
|
||||
/>
|
||||
<View className="bg-[#ffd60a] p-2 rounded-full">
|
||||
<Feather name="send" size={20} color="black" />
|
||||
<View className="flex-row items-center px-4 py-3 mb-6 bg-white border border-gray-300 rounded-full">
|
||||
<TextInput className="flex-1" placeholder="Search..." value={searchQuery} onChangeText={setSearchQuery} />
|
||||
<View className="bg-[#ffd60a] p-2 rounded-full">
|
||||
<Feather name="send" size={20} color="black" />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="flex-row justify-between">
|
||||
<TouchableOpacity
|
||||
className="bg-[#ffd60a] p-4 rounded-xl w-[48%]"
|
||||
onPress={async () => {
|
||||
const { status } =
|
||||
await ImagePicker.requestCameraPermissionsAsync();
|
||||
if (status !== "granted") {
|
||||
Alert.alert(
|
||||
"Permission needed",
|
||||
"Please grant camera permissions."
|
||||
);
|
||||
return;
|
||||
}
|
||||
await handleImageSelection(ImagePicker.launchCameraAsync);
|
||||
}}
|
||||
>
|
||||
<View className="items-center">
|
||||
<FontAwesome name="camera" size={24} color="black" />
|
||||
<Text className="text-lg font-bold mt-2">From Camera</Text>
|
||||
<Text className="text-sm text-gray-700">
|
||||
Straight from Camera
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
className="bg-[#f9be25] p-4 rounded-xl w-[48%]"
|
||||
onPress={async () => {
|
||||
const { status } =
|
||||
await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
if (status !== "granted") {
|
||||
Alert.alert(
|
||||
"Permission needed",
|
||||
"Please grant gallery permissions."
|
||||
);
|
||||
return;
|
||||
}
|
||||
await handleImageSelection(ImagePicker.launchImageLibraryAsync);
|
||||
}}
|
||||
>
|
||||
<View className="items-center">
|
||||
<Feather name="image" size={24} color="black" />
|
||||
<Text className="text-lg font-bold mt-2">From Gallery</Text>
|
||||
<Text className="text-sm text-gray-700">
|
||||
Straight from Gallery
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
{/* Upload feature section */}
|
||||
<View className="mb-8">
|
||||
<View className="flex-row justify-between">
|
||||
<TouchableOpacity
|
||||
className="bg-[#ffd60a] p-4 rounded-xl w-[48%]"
|
||||
onPress={async () => {
|
||||
const { status } = await ImagePicker.requestCameraPermissionsAsync()
|
||||
if (status !== "granted") {
|
||||
Alert.alert("Permission needed", "Please grant camera permissions.")
|
||||
return
|
||||
}
|
||||
await handleImageSelection(ImagePicker.launchCameraAsync)
|
||||
}}
|
||||
>
|
||||
<View className="items-center">
|
||||
<FontAwesome name="camera" size={24} color="black" />
|
||||
<Text className="mt-2 text-lg font-bold">From Camera</Text>
|
||||
<Text className="text-sm text-gray-700">Straight from Camera</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
className="bg-[#f9be25] p-4 rounded-xl w-[48%]"
|
||||
onPress={async () => {
|
||||
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync()
|
||||
if (status !== "granted") {
|
||||
Alert.alert("Permission needed", "Please grant gallery permissions.")
|
||||
return
|
||||
}
|
||||
await handleImageSelection(ImagePicker.launchImageLibraryAsync)
|
||||
}}
|
||||
>
|
||||
<View className="items-center">
|
||||
<Feather name="image" size={24} color="black" />
|
||||
<Text className="mt-2 text-lg font-bold">From Gallery</Text>
|
||||
<Text className="text-sm text-gray-700">Straight from Gallery</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="px-6 mb-6">
|
||||
{/* Highlights section */}
|
||||
<View className="mb-8">
|
||||
<View className="flex-row items-center mb-4">
|
||||
<Text className="text-2xl font-bold mr-2">Highlights</Text>
|
||||
<Text className="mr-2 text-2xl font-bold">Highlights</Text>
|
||||
<Ionicons name="star-outline" size={20} color="#bb0718" />
|
||||
</View>
|
||||
{isLoading ? (
|
||||
<Text className="text-center text-gray-500">
|
||||
Loading highlights...
|
||||
</Text>
|
||||
) : error ? (
|
||||
<Text className="text-center text-red-600">
|
||||
Failed to load highlights
|
||||
</Text>
|
||||
{isLoadingFoods ? (
|
||||
<Text className="text-center text-gray-500">Loading highlights...</Text>
|
||||
) : foodsError ? (
|
||||
<Text className="text-center text-red-600">Failed to load highlights</Text>
|
||||
) : filteredFoods.length === 0 ? (
|
||||
<Text className="text-center text-gray-400">
|
||||
No highlights available
|
||||
</Text>
|
||||
<Text className="text-center text-gray-400">No highlights available</Text>
|
||||
) : (
|
||||
<View className="flex-row justify-between">
|
||||
{filteredFoods.map((food, idx) => (
|
||||
<TouchableOpacity
|
||||
key={food.id}
|
||||
className="bg-white rounded-xl shadow-md flex-1 mr-4"
|
||||
className="flex-1 mr-4 bg-white shadow-sm rounded-xl"
|
||||
style={{
|
||||
marginRight: idx === filteredFoods.length - 1 ? 0 : 12,
|
||||
}}
|
||||
onPress={() => navigateToFoodDetail(food.id)}
|
||||
>
|
||||
{food.image_url ? (
|
||||
<Image
|
||||
source={{ uri: food.image_url }}
|
||||
className="w-full h-32 rounded-t-xl"
|
||||
resizeMode="cover"
|
||||
/>
|
||||
<Image source={{ uri: food.image_url }} className="w-full h-32 rounded-t-xl" resizeMode="cover" />
|
||||
) : (
|
||||
<View className="w-full h-32 rounded-t-xl bg-gray-200 items-center justify-center">
|
||||
<View className="items-center justify-center w-full h-32 bg-gray-200 rounded-t-xl">
|
||||
<Text className="text-gray-400">No Image</Text>
|
||||
</View>
|
||||
)}
|
||||
<View className="flex-1 p-3 justify-between">
|
||||
<Text
|
||||
className="text-base font-bold text-[#333] mb-1"
|
||||
numberOfLines={1}
|
||||
>
|
||||
<View className="justify-between flex-1 p-3">
|
||||
<Text className="text-base font-bold text-[#333] mb-1" numberOfLines={1}>
|
||||
{food.name}
|
||||
</Text>
|
||||
<Text
|
||||
className="text-sm text-[#666] mb-2"
|
||||
numberOfLines={1}
|
||||
>
|
||||
<Text className="text-sm text-[#666] mb-2" numberOfLines={1}>
|
||||
{food.description || "No description"}
|
||||
</Text>
|
||||
<View className="flex-row justify-between">
|
||||
<View className="flex-row items-center">
|
||||
<IconSymbol name="clock" size={12} color="#666" />
|
||||
<Text className="text-xs text-[#666] ml-1">
|
||||
{food.time_to_cook_minutes
|
||||
? `${food.time_to_cook_minutes} min`
|
||||
: "-"}
|
||||
{food.time_to_cook_minutes ? `${food.time_to_cook_minutes} min` : "-"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
@ -259,9 +278,10 @@ export default function HomeScreen() {
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Extra space at bottom */}
|
||||
<View className="h-20"></View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ import { getBookmarkedPosts } from "@/services/data/bookmarks"
|
||||
import { getLikedPosts } from "@/services/data/likes"
|
||||
import { getProfile, updateProfile } from "@/services/data/profile"
|
||||
import { supabase } from "@/services/supabase"
|
||||
import { useIsFocused, useNavigation } from "@react-navigation/native"
|
||||
import { useIsFocused } from "@react-navigation/native"
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query"
|
||||
import * as ImagePicker from "expo-image-picker"
|
||||
import { useEffect, useState } from "react"
|
||||
@ -23,6 +23,7 @@ import {
|
||||
} from "react-native"
|
||||
import { SafeAreaView } from "react-native-safe-area-context"
|
||||
import uuid from "react-native-uuid"
|
||||
import { router } from "expo-router"
|
||||
|
||||
// Define the Food type based on your database structure
|
||||
type Food = {
|
||||
@ -44,7 +45,6 @@ export default function ProfileScreen() {
|
||||
const { isAuthenticated } = useAuth()
|
||||
const isFocused = useIsFocused()
|
||||
const queryClient = useQueryClient()
|
||||
const navigation = useNavigation()
|
||||
|
||||
const {
|
||||
data: userData,
|
||||
@ -125,10 +125,9 @@ export default function ProfileScreen() {
|
||||
staleTime: 1000 * 60, // 1 minute
|
||||
})
|
||||
|
||||
// Navigate to post detail
|
||||
// Navigate to post detail using Expo Router instead of navigation API
|
||||
const handleFoodPress = (foodId: number) => {
|
||||
// @ts-ignore - Navigation typing might be different in your app
|
||||
navigation.navigate("post-detail", { id: foodId })
|
||||
router.push(`/post-detail/${foodId}`)
|
||||
}
|
||||
|
||||
// Refetch data when tab changes
|
||||
@ -237,7 +236,7 @@ export default function ProfileScreen() {
|
||||
|
||||
if (isUserLoading) {
|
||||
return (
|
||||
<SafeAreaView className="flex-1 justify-center items-center bg-white">
|
||||
<SafeAreaView className="items-center justify-center flex-1 bg-white">
|
||||
<ActivityIndicator size="large" color="#bb0718" />
|
||||
</SafeAreaView>
|
||||
)
|
||||
@ -245,8 +244,8 @@ export default function ProfileScreen() {
|
||||
|
||||
if (userError) {
|
||||
return (
|
||||
<SafeAreaView className="flex-1 justify-center items-center bg-white px-4">
|
||||
<Text className="text-red-600 font-bold text-center">{userError.message || "Failed to load user data."}</Text>
|
||||
<SafeAreaView className="items-center justify-center flex-1 px-4 bg-white">
|
||||
<Text className="font-bold text-center text-red-600">{userError.message || "Failed to load user data."}</Text>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
@ -268,12 +267,12 @@ export default function ProfileScreen() {
|
||||
{isLoading ? (
|
||||
<ActivityIndicator size="small" color="#bb0718" />
|
||||
) : error ? (
|
||||
<Text className="text-red-600 font-bold mb-3">{error.message || error.toString()}</Text>
|
||||
<Text className="mb-3 font-bold text-red-600">{error.message || error.toString()}</Text>
|
||||
) : (
|
||||
<Text className="text-xl font-bold mb-3">{profileData?.data?.username ?? "-"}</Text>
|
||||
<Text className="mb-3 text-xl font-bold">{profileData?.data?.username ?? "-"}</Text>
|
||||
)}
|
||||
<TouchableOpacity
|
||||
className="bg-red-600 py-2 px-10 rounded-lg"
|
||||
className="px-10 py-2 bg-red-600 rounded-lg"
|
||||
onPress={() => {
|
||||
setEditUsername(profileData?.data?.username ?? "")
|
||||
setEditImage(profileData?.data?.avatar_url ?? null)
|
||||
@ -281,49 +280,49 @@ export default function ProfileScreen() {
|
||||
setModalVisible(true)
|
||||
}}
|
||||
>
|
||||
<Text className="text-white font-bold">Edit</Text>
|
||||
<Text className="font-bold text-white">Edit</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Edit Modal */}
|
||||
<Modal visible={modalVisible} animationType="slide" transparent onRequestClose={() => setModalVisible(false)}>
|
||||
<View className="flex-1 justify-center items-center bg-black bg-opacity-40">
|
||||
<View className="bg-white rounded-xl p-6 w-11/12 max-w-md shadow-lg">
|
||||
<Text className="text-lg font-bold mb-4 text-center">Edit Profile</Text>
|
||||
<View className="items-center justify-center flex-1 bg-gray-50 bg-opacity-40">
|
||||
<View className="w-11/12 max-w-md p-6 bg-white shadow-md rounded-xl">
|
||||
<Text className="mb-4 text-lg font-bold text-center">Edit Profile</Text>
|
||||
|
||||
<Pressable className="items-center mb-4" onPress={pickImage}>
|
||||
<Image
|
||||
source={editImage ? { uri: editImage } : require("@/assets/images/placeholder-food.jpg")}
|
||||
className="w-24 h-24 rounded-full mb-2 bg-gray-200"
|
||||
className="w-24 h-24 mb-2 bg-gray-200 rounded-full"
|
||||
/>
|
||||
<Text className="text-blue-600 underline">Change Photo</Text>
|
||||
</Pressable>
|
||||
|
||||
<Text className="mb-1 font-medium">Username</Text>
|
||||
<TextInput
|
||||
className="border border-gray-300 rounded px-3 py-2 mb-4"
|
||||
className="px-3 py-2 mb-4 border border-gray-300 rounded"
|
||||
value={editUsername}
|
||||
onChangeText={setEditUsername}
|
||||
placeholder="Enter new username"
|
||||
/>
|
||||
{editError && <Text className="text-red-600 mb-2 text-center">{editError}</Text>}
|
||||
{editError && <Text className="mb-2 text-center text-red-600">{editError}</Text>}
|
||||
|
||||
<View className="flex-row justify-between mt-2">
|
||||
<TouchableOpacity
|
||||
className="bg-gray-300 py-2 px-6 rounded-lg"
|
||||
className="px-6 py-2 bg-gray-300 rounded-lg"
|
||||
onPress={() => setModalVisible(false)}
|
||||
disabled={editLoading}
|
||||
>
|
||||
<Text className="text-gray-700 font-bold">Cancel</Text>
|
||||
<Text className="font-bold text-gray-700">Cancel</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
className="bg-red-600 py-2 px-6 rounded-lg"
|
||||
className="px-6 py-2 bg-red-600 rounded-lg"
|
||||
onPress={handleSaveProfile}
|
||||
disabled={editLoading}
|
||||
>
|
||||
{editLoading ? (
|
||||
<ActivityIndicator size="small" color="#fff" />
|
||||
) : (
|
||||
<Text className="text-white font-bold">Save</Text>
|
||||
<Text className="font-bold text-white">Save</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@ -347,23 +346,23 @@ export default function ProfileScreen() {
|
||||
|
||||
{/* Tab Content */}
|
||||
{isActiveLoading ? (
|
||||
<View className="flex-1 items-center justify-center py-8">
|
||||
<View className="items-center justify-center flex-1 py-8">
|
||||
<ActivityIndicator size="small" color="#bb0718" />
|
||||
</View>
|
||||
) : activeError ? (
|
||||
<View className="flex-1 items-center justify-center py-8">
|
||||
<Text className="text-red-600 font-bold text-center">{activeError.message || "Failed to load data"}</Text>
|
||||
<View className="items-center justify-center flex-1 py-8">
|
||||
<Text className="font-bold text-center text-red-600">{activeError.message || "Failed to load data"}</Text>
|
||||
</View>
|
||||
) : !activeData?.data?.length ? (
|
||||
<View className="flex-1 items-center justify-center py-8">
|
||||
<Text className="text-gray-400 font-medium text-center">No items found</Text>
|
||||
<View className="items-center justify-center flex-1 py-8">
|
||||
<Text className="font-medium text-center text-gray-400">No items found</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View className="flex-row flex-wrap p-2">
|
||||
{activeData.data.map((item: Food) => (
|
||||
<TouchableOpacity
|
||||
key={item.id}
|
||||
className="w-1/2 p-2 relative"
|
||||
className="relative w-1/2 p-2"
|
||||
onPress={() => handleFoodPress(item.id)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
@ -371,7 +370,7 @@ export default function ProfileScreen() {
|
||||
source={item.image_url ? { uri: item.image_url } : require("@/assets/images/placeholder-food.jpg")}
|
||||
className="w-full h-[120px] rounded-lg"
|
||||
/>
|
||||
<View className="absolute bottom-4 left-4 py-1 px-2 rounded bg-opacity-90 bg-white/80">
|
||||
<View className="absolute px-2 py-1 rounded bottom-4 left-4 bg-opacity-90 bg-white/80">
|
||||
<Text className="text-[#333] font-bold text-xs">{item.name}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
@ -504,7 +504,7 @@ export default function PostDetailScreen() {
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: "white" }}>
|
||||
{/* Fixed Header */}
|
||||
<View className="flex-row justify-between items-center px-4 py-3 mt-11">
|
||||
<View className="flex-row items-center justify-between px-4 py-3 mt-11">
|
||||
<TouchableOpacity
|
||||
className="bg-[#ffd60a] p-3 rounded-lg"
|
||||
onPress={() => router.back()}
|
||||
@ -716,9 +716,6 @@ export default function PostDetailScreen() {
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Separator */}
|
||||
<View style={{ height: 1, backgroundColor: "#e0e0e0", marginTop: 16 }} />
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user