sosokker/chefhai
1
0
Fork 0
mirror of https://github.com/Sosokker/chefhai.git synced 2025-12-19 05:54:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: rearrange home and forum

Browse Source
This commit is contained in:
Tantikon Phasanphaengsi 2025-05-11 11:32:22 +07:00
parent a6fc985f9b
commit 0cece7d075
3 changed files with 206 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

334
app/(tabs)/home.tsx
View File

@ -1,14 +1,17 @@
import { IconSymbol } from "@/components/ui/IconSymbol"; "use client"
import { getFoods, insertGenAIResult } from "@/services/data/foods";
import { uploadImageToSupabase } from "@/services/data/imageUpload"; import { IconSymbol } from "@/components/ui/IconSymbol"
import { callGenAIonImage } from "@/services/gemini"; import { getFoods, insertGenAIResult } from "@/services/data/foods"
import { supabase } from "@/services/supabase"; import { uploadImageToSupabase } from "@/services/data/imageUpload"
import { Feather, FontAwesome, Ionicons } from "@expo/vector-icons"; import { getProfile } from "@/services/data/profile"
import { useQuery } from "@tanstack/react-query"; import { callGenAIonImage } from "@/services/gemini"
import * as FileSystem from "expo-file-system"; import { supabase } from "@/services/supabase"
import * as ImagePicker from "expo-image-picker"; import { Feather, FontAwesome, Ionicons } from "@expo/vector-icons"
import { router } from "expo-router"; import { useQuery } from "@tanstack/react-query"
import React, { useMemo, useState } from "react"; 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 { import {
Alert, Alert,
Image, Image,
@ -19,71 +22,104 @@ import {
TextInput, TextInput,
TouchableOpacity, TouchableOpacity,
View, View,
} from "react-native"; ActivityIndicator,
} from "react-native"
const useFoodsQuery = () => { const useFoodsQuery = () => {
return useQuery({ return useQuery({
queryKey: ["highlight-foods"], queryKey: ["highlight-foods"],
queryFn: async () => { queryFn: async () => {
const { data, error } = await getFoods(undefined, true, undefined, 4); const { data, error } = await getFoods(undefined, true, undefined, 4)
if (error) throw error; if (error) throw error
return data || []; return data || []
}, },
staleTime: 1000 * 60 * 5, staleTime: 1000 * 60 * 5,
}); })
}; }
const runImagePipeline = async ( const useUserProfile = () => {
imageBase64: string, const [userId, setUserId] = useState<string | null>(null)
imageType: string, const [isLoadingUserId, setIsLoadingUserId] = useState(true)
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 ( // Get current user ID
asset: ImagePicker.ImagePickerAsset, useEffect(() => {
userId: string 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, { const base64 = await FileSystem.readAsStringAsync(asset.uri, {
encoding: "base64", encoding: "base64",
}); })
const imageType = asset.mimeType || "image/jpeg"; const imageType = asset.mimeType || "image/jpeg"
await runImagePipeline(base64, imageType, userId); await runImagePipeline(base64, imageType, userId)
}; }
const navigateToFoodDetail = (foodId: string) => { const navigateToFoodDetail = (foodId: string) => {
router.push({ pathname: "/recipe-detail", params: { id: foodId } }); router.push({ pathname: "/recipe-detail", params: { id: foodId } })
}; }
const handleImageSelection = async ( const handleImageSelection = async (
pickerFn: pickerFn: typeof ImagePicker.launchCameraAsync | typeof ImagePicker.launchImageLibraryAsync,
| typeof ImagePicker.launchCameraAsync
| typeof ImagePicker.launchImageLibraryAsync
) => { ) => {
const result = await pickerFn({ const result = await pickerFn({
mediaTypes: ["images"], mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true, allowsEditing: true,
aspect: [1, 1], aspect: [1, 1],
quality: 1, quality: 1,
}); })
if (!result.canceled) { if (!result.canceled) {
try { try {
const { data, error } = await supabase.auth.getUser(); const { data, error } = await supabase.auth.getUser()
if (error || !data?.user?.id) throw new Error("Cannot get user id"); if (error || !data?.user?.id) throw new Error("Cannot get user id")
const userId = data.user.id; const userId = data.user.id
await processImage(result.assets[0], userId); await processImage(result.assets[0], userId)
} catch (err) { } catch (err) {
Alert.alert( Alert.alert("Image Processing Failed", (err as Error).message || "Unknown error")
"Image Processing Failed",
(err as Error).message || "Unknown error"
);
} }
router.push({ router.push({
pathname: "/recipe-detail", pathname: "/recipe-detail",
@ -91,28 +127,38 @@ const handleImageSelection = async (
title: "My New Recipe", title: "My New Recipe",
image: result.assets[0].uri, image: result.assets[0].uri,
}, },
}); })
} }
}; }
export default function HomeScreen() { export default function HomeScreen() {
const [searchQuery, setSearchQuery] = useState(""); const [searchQuery, setSearchQuery] = useState("")
const { data: foodsData = [], isLoading, error } = useFoodsQuery(); const { data: foodsData = [], isLoading: isLoadingFoods, error: foodsError } = useFoodsQuery()
const { profileData, isLoading: isLoadingProfile, userId } = useUserProfile()
const filteredFoods = useMemo(() => { const filteredFoods = useMemo(() => {
return searchQuery return searchQuery
? foodsData.filter((food) => ? foodsData.filter((food) => food.name.toLowerCase().includes(searchQuery.toLowerCase()))
food.name.toLowerCase().includes(searchQuery.toLowerCase()) : foodsData
) }, [foodsData, searchQuery])
: foodsData;
}, [foodsData, searchQuery]); // Get username or fallback to a default greeting
const username = profileData?.username || profileData?.full_name || "Chef"
const greeting = `Hi! ${username}`
return ( return (
<SafeAreaView className="flex-1 bg-white"> <SafeAreaView className="flex-1 bg-white">
<StatusBar barStyle="dark-content" /> <StatusBar barStyle="dark-content" />
<View className="flex-row justify-between items-center px-6 pt-4 pb-2"> <View className="flex-row items-center justify-between px-6 pt-4 pb-2">
<Text className="text-3xl font-bold">Hi! Mr. Chef</Text> {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"> <View className="bg-[#ffd60a] p-3 rounded-lg">
<Ionicons name="settings-outline" size={24} color="black" /> <Ionicons name="settings-outline" size={24} color="black" />
</View> </View>
@ -123,132 +169,105 @@ export default function HomeScreen() {
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 100 }} contentContainerStyle={{ paddingBottom: 100 }}
> >
<View className="px-6 mb-6"> {/* Main content container with consistent padding */}
<View className="flex-row items-center mb-4"> <View className="px-6">
<Text className="text-2xl font-bold mr-2">Show your dishes</Text> {/* "Show your dishes" section */}
<Feather name="wifi" size={20} color="black" /> <View className="mb-6">
</View> <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"> <View className="flex-row items-center px-4 py-3 mb-6 bg-white border border-gray-300 rounded-full">
<TextInput <TextInput className="flex-1" placeholder="Search..." value={searchQuery} onChangeText={setSearchQuery} />
className="flex-1" <View className="bg-[#ffd60a] p-2 rounded-full">
placeholder="Search..." <Feather name="send" size={20} color="black" />
value={searchQuery} </View>
onChangeText={setSearchQuery}
/>
<View className="bg-[#ffd60a] p-2 rounded-full">
<Feather name="send" size={20} color="black" />
</View> </View>
</View> </View>
<View className="flex-row justify-between"> {/* Upload feature section */}
<TouchableOpacity <View className="mb-8">
className="bg-[#ffd60a] p-4 rounded-xl w-[48%]" <View className="flex-row justify-between">
onPress={async () => { <TouchableOpacity
const { status } = className="bg-[#ffd60a] p-4 rounded-xl w-[48%]"
await ImagePicker.requestCameraPermissionsAsync(); onPress={async () => {
if (status !== "granted") { const { status } = await ImagePicker.requestCameraPermissionsAsync()
Alert.alert( if (status !== "granted") {
"Permission needed", Alert.alert("Permission needed", "Please grant camera permissions.")
"Please grant camera permissions." return
); }
return; await handleImageSelection(ImagePicker.launchCameraAsync)
} }}
await handleImageSelection(ImagePicker.launchCameraAsync); >
}} <View className="items-center">
> <FontAwesome name="camera" size={24} color="black" />
<View className="items-center"> <Text className="mt-2 text-lg font-bold">From Camera</Text>
<FontAwesome name="camera" size={24} color="black" /> <Text className="text-sm text-gray-700">Straight from Camera</Text>
<Text className="text-lg font-bold mt-2">From Camera</Text> </View>
<Text className="text-sm text-gray-700"> </TouchableOpacity>
Straight from Camera <TouchableOpacity
</Text> className="bg-[#f9be25] p-4 rounded-xl w-[48%]"
</View> onPress={async () => {
</TouchableOpacity> const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync()
<TouchableOpacity if (status !== "granted") {
className="bg-[#f9be25] p-4 rounded-xl w-[48%]" Alert.alert("Permission needed", "Please grant gallery permissions.")
onPress={async () => { return
const { status } = }
await ImagePicker.requestMediaLibraryPermissionsAsync(); await handleImageSelection(ImagePicker.launchImageLibraryAsync)
if (status !== "granted") { }}
Alert.alert( >
"Permission needed", <View className="items-center">
"Please grant gallery permissions." <Feather name="image" size={24} color="black" />
); <Text className="mt-2 text-lg font-bold">From Gallery</Text>
return; <Text className="text-sm text-gray-700">Straight from Gallery</Text>
} </View>
await handleImageSelection(ImagePicker.launchImageLibraryAsync); </TouchableOpacity>
}} </View>
>
<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>
</View> </View>
<View className="px-6 mb-6"> {/* Highlights section */}
<View className="mb-8">
<View className="flex-row items-center mb-4"> <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" /> <Ionicons name="star-outline" size={20} color="#bb0718" />
</View> </View>
{isLoading ? ( {isLoadingFoods ? (
<Text className="text-center text-gray-500"> <Text className="text-center text-gray-500">Loading highlights...</Text>
Loading highlights... ) : foodsError ? (
</Text> <Text className="text-center text-red-600">Failed to load highlights</Text>
) : error ? (
<Text className="text-center text-red-600">
Failed to load highlights
</Text>
) : filteredFoods.length === 0 ? ( ) : filteredFoods.length === 0 ? (
<Text className="text-center text-gray-400"> <Text className="text-center text-gray-400">No highlights available</Text>
No highlights available
</Text>
) : ( ) : (
<View className="flex-row justify-between"> <View className="flex-row justify-between">
{filteredFoods.map((food, idx) => ( {filteredFoods.map((food, idx) => (
<TouchableOpacity <TouchableOpacity
key={food.id} 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={{ style={{
marginRight: idx === filteredFoods.length - 1 ? 0 : 12, marginRight: idx === filteredFoods.length - 1 ? 0 : 12,
}} }}
onPress={() => navigateToFoodDetail(food.id)} onPress={() => navigateToFoodDetail(food.id)}
> >
{food.image_url ? ( {food.image_url ? (
<Image <Image source={{ uri: food.image_url }} className="w-full h-32 rounded-t-xl" resizeMode="cover" />
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> <Text className="text-gray-400">No Image</Text>
</View> </View>
)} )}
<View className="flex-1 p-3 justify-between"> <View className="justify-between flex-1 p-3">
<Text <Text className="text-base font-bold text-[#333] mb-1" numberOfLines={1}>
className="text-base font-bold text-[#333] mb-1"
numberOfLines={1}
>
{food.name} {food.name}
</Text> </Text>
<Text <Text className="text-sm text-[#666] mb-2" numberOfLines={1}>
className="text-sm text-[#666] mb-2"
numberOfLines={1}
>
{food.description || "No description"} {food.description || "No description"}
</Text> </Text>
<View className="flex-row justify-between"> <View className="flex-row justify-between">
<View className="flex-row items-center"> <View className="flex-row items-center">
<IconSymbol name="clock" size={12} color="#666" /> <IconSymbol name="clock" size={12} color="#666" />
<Text className="text-xs text-[#666] ml-1"> <Text className="text-xs text-[#666] ml-1">
{food.time_to_cook_minutes {food.time_to_cook_minutes ? `${food.time_to_cook_minutes} min` : "-"}
? `${food.time_to_cook_minutes} min`
: "-"}
</Text> </Text>
</View> </View>
</View> </View>
@ -259,9 +278,10 @@ export default function HomeScreen() {
)} )}
</View> </View>
</View> </View>
{/* Extra space at bottom */} {/* Extra space at bottom */}
<View className="h-20"></View> <View className="h-20"></View>
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
); )
} }

57
app/(tabs)/profile.tsx
View File

@ -6,7 +6,7 @@ import { getBookmarkedPosts } from "@/services/data/bookmarks"
import { getLikedPosts } from "@/services/data/likes" import { getLikedPosts } from "@/services/data/likes"
import { getProfile, updateProfile } from "@/services/data/profile" import { getProfile, updateProfile } from "@/services/data/profile"
import { supabase } from "@/services/supabase" 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 { useQuery, useQueryClient } from "@tanstack/react-query"
import * as ImagePicker from "expo-image-picker" import * as ImagePicker from "expo-image-picker"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
@ -23,6 +23,7 @@ import {
} from "react-native" } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context" import { SafeAreaView } from "react-native-safe-area-context"
import uuid from "react-native-uuid" import uuid from "react-native-uuid"
import { router } from "expo-router"
// Define the Food type based on your database structure // Define the Food type based on your database structure
type Food = { type Food = {
@ -44,7 +45,6 @@ export default function ProfileScreen() {
const { isAuthenticated } = useAuth() const { isAuthenticated } = useAuth()
const isFocused = useIsFocused() const isFocused = useIsFocused()
const queryClient = useQueryClient() const queryClient = useQueryClient()
const navigation = useNavigation()
const { const {
data: userData, data: userData,
@ -125,10 +125,9 @@ export default function ProfileScreen() {
staleTime: 1000 * 60, // 1 minute staleTime: 1000 * 60, // 1 minute
}) })
// Navigate to post detail // Navigate to post detail using Expo Router instead of navigation API
const handleFoodPress = (foodId: number) => { const handleFoodPress = (foodId: number) => {
// @ts-ignore - Navigation typing might be different in your app router.push(`/post-detail/${foodId}`)
navigation.navigate("post-detail", { id: foodId })
} }
// Refetch data when tab changes // Refetch data when tab changes
@ -237,7 +236,7 @@ export default function ProfileScreen() {
if (isUserLoading) { if (isUserLoading) {
return ( 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" /> <ActivityIndicator size="large" color="#bb0718" />
</SafeAreaView> </SafeAreaView>
) )
@ -245,8 +244,8 @@ export default function ProfileScreen() {
if (userError) { if (userError) {
return ( return (
<SafeAreaView className="flex-1 justify-center items-center bg-white px-4"> <SafeAreaView className="items-center justify-center flex-1 px-4 bg-white">
<Text className="text-red-600 font-bold text-center">{userError.message || "Failed to load user data."}</Text> <Text className="font-bold text-center text-red-600">{userError.message || "Failed to load user data."}</Text>
</SafeAreaView> </SafeAreaView>
) )
} }
@ -268,12 +267,12 @@ export default function ProfileScreen() {
{isLoading ? ( {isLoading ? (
<ActivityIndicator size="small" color="#bb0718" /> <ActivityIndicator size="small" color="#bb0718" />
) : error ? ( ) : 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 <TouchableOpacity
className="bg-red-600 py-2 px-10 rounded-lg" className="px-10 py-2 bg-red-600 rounded-lg"
onPress={() => { onPress={() => {
setEditUsername(profileData?.data?.username ?? "") setEditUsername(profileData?.data?.username ?? "")
setEditImage(profileData?.data?.avatar_url ?? null) setEditImage(profileData?.data?.avatar_url ?? null)
@ -281,49 +280,49 @@ export default function ProfileScreen() {
setModalVisible(true) setModalVisible(true)
}} }}
> >
<Text className="text-white font-bold">Edit</Text> <Text className="font-bold text-white">Edit</Text>
</TouchableOpacity> </TouchableOpacity>
{/* Edit Modal */} {/* Edit Modal */}
<Modal visible={modalVisible} animationType="slide" transparent onRequestClose={() => setModalVisible(false)}> <Modal visible={modalVisible} animationType="slide" transparent onRequestClose={() => setModalVisible(false)}>
<View className="flex-1 justify-center items-center bg-black bg-opacity-40"> <View className="items-center justify-center flex-1 bg-gray-50 bg-opacity-40">
<View className="bg-white rounded-xl p-6 w-11/12 max-w-md shadow-lg"> <View className="w-11/12 max-w-md p-6 bg-white shadow-md rounded-xl">
<Text className="text-lg font-bold mb-4 text-center">Edit Profile</Text> <Text className="mb-4 text-lg font-bold text-center">Edit Profile</Text>
<Pressable className="items-center mb-4" onPress={pickImage}> <Pressable className="items-center mb-4" onPress={pickImage}>
<Image <Image
source={editImage ? { uri: editImage } : require("@/assets/images/placeholder-food.jpg")} 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> <Text className="text-blue-600 underline">Change Photo</Text>
</Pressable> </Pressable>
<Text className="mb-1 font-medium">Username</Text> <Text className="mb-1 font-medium">Username</Text>
<TextInput <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} value={editUsername}
onChangeText={setEditUsername} onChangeText={setEditUsername}
placeholder="Enter new username" 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"> <View className="flex-row justify-between mt-2">
<TouchableOpacity <TouchableOpacity
className="bg-gray-300 py-2 px-6 rounded-lg" className="px-6 py-2 bg-gray-300 rounded-lg"
onPress={() => setModalVisible(false)} onPress={() => setModalVisible(false)}
disabled={editLoading} disabled={editLoading}
> >
<Text className="text-gray-700 font-bold">Cancel</Text> <Text className="font-bold text-gray-700">Cancel</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
className="bg-red-600 py-2 px-6 rounded-lg" className="px-6 py-2 bg-red-600 rounded-lg"
onPress={handleSaveProfile} onPress={handleSaveProfile}
disabled={editLoading} disabled={editLoading}
> >
{editLoading ? ( {editLoading ? (
<ActivityIndicator size="small" color="#fff" /> <ActivityIndicator size="small" color="#fff" />
) : ( ) : (
<Text className="text-white font-bold">Save</Text> <Text className="font-bold text-white">Save</Text>
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
@ -347,23 +346,23 @@ export default function ProfileScreen() {
{/* Tab Content */} {/* Tab Content */}
{isActiveLoading ? ( {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" /> <ActivityIndicator size="small" color="#bb0718" />
</View> </View>
) : activeError ? ( ) : activeError ? (
<View className="flex-1 items-center justify-center py-8"> <View className="items-center justify-center flex-1 py-8">
<Text className="text-red-600 font-bold text-center">{activeError.message || "Failed to load data"}</Text> <Text className="font-bold text-center text-red-600">{activeError.message || "Failed to load data"}</Text>
</View> </View>
) : !activeData?.data?.length ? ( ) : !activeData?.data?.length ? (
<View className="flex-1 items-center justify-center py-8"> <View className="items-center justify-center flex-1 py-8">
<Text className="text-gray-400 font-medium text-center">No items found</Text> <Text className="font-medium text-center text-gray-400">No items found</Text>
</View> </View>
) : ( ) : (
<View className="flex-row flex-wrap p-2"> <View className="flex-row flex-wrap p-2">
{activeData.data.map((item: Food) => ( {activeData.data.map((item: Food) => (
<TouchableOpacity <TouchableOpacity
key={item.id} key={item.id}
className="w-1/2 p-2 relative" className="relative w-1/2 p-2"
onPress={() => handleFoodPress(item.id)} onPress={() => handleFoodPress(item.id)}
activeOpacity={0.7} 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")} source={item.image_url ? { uri: item.image_url } : require("@/assets/images/placeholder-food.jpg")}
className="w-full h-[120px] rounded-lg" 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> <Text className="text-[#333] font-bold text-xs">{item.name}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>

5
app/post-detail/[id].tsx
View File

@ -504,7 +504,7 @@ export default function PostDetailScreen() {
return ( return (
<View style={{ flex: 1, backgroundColor: "white" }}> <View style={{ flex: 1, backgroundColor: "white" }}>
{/* Fixed Header */} {/* 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 <TouchableOpacity
className="bg-[#ffd60a] p-3 rounded-lg" className="bg-[#ffd60a] p-3 rounded-lg"
onPress={() => router.back()} onPress={() => router.back()}
@ -716,9 +716,6 @@ export default function PostDetailScreen() {
</Text> </Text>
</View> </View>
</View> </View>
{/* Separator */}
<View style={{ height: 1, backgroundColor: "#e0e0e0", marginTop: 16 }} />
</View> </View>
)) ))
) : ( ) : (