103 lines
2.4 KiB
TypeScript
103 lines
2.4 KiB
TypeScript
import {
|
|
View,
|
|
Image,
|
|
Text,
|
|
TouchableOpacity,
|
|
ActivityIndicator,
|
|
Alert,
|
|
} from "react-native";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { type ImageAsset } from "@/cloudinary/cloudinary";
|
|
import { MasonryFlashList } from "@shopify/flash-list";
|
|
import { useRouter } from "expo-router";
|
|
import { useStore } from "@/store/store";
|
|
|
|
export default function HomeScreen() {
|
|
const router = useRouter();
|
|
const setSelectedWallpaper = useStore((store) => store.setSelectedWallpaper);
|
|
const [images, setImages] = useState<ImageAsset[] | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetchWallpapers();
|
|
}, []);
|
|
|
|
async function fetchWallpapers() {
|
|
try {
|
|
setIsLoading(true);
|
|
const res = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/wallpapers`);
|
|
if (res.status !== 200) {
|
|
throw new Error("server returned error response");
|
|
}
|
|
const images: ImageAsset[] = await res.json();
|
|
setImages(images);
|
|
} catch (err) {
|
|
Alert.alert(
|
|
"Unable to fetch wallpaper",
|
|
"Check your internet connection. Otherwise, it's probably our fault.",
|
|
);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
function content() {
|
|
if (isLoading) {
|
|
return (
|
|
<View className="flex-1 items-center justify-center">
|
|
<ActivityIndicator />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (images) {
|
|
return (
|
|
<MasonryFlashList
|
|
data={images}
|
|
numColumns={2}
|
|
ListHeaderComponent={() => (
|
|
<Text className="px-4 pt-20 pb-4 text-xl font-bold text-center dark:text-white">
|
|
Wallpapers
|
|
</Text>
|
|
)}
|
|
renderItem={({ item }) => (
|
|
<View className="w-full relative overflow-hidden">
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
setSelectedWallpaper(item);
|
|
router.push("/wallpaper");
|
|
}}
|
|
>
|
|
<Image
|
|
className="w-full h-60"
|
|
source={{ uri: item.thumbnail_url }}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
estimatedItemSize={200}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View className="flex-1 items-center justify-center">
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
fetchWallpapers();
|
|
}}
|
|
>
|
|
<View className="flex-col items-center justify-center space-y-2">
|
|
<Ionicons name="refresh" size={24} color="white" />
|
|
<Text className="text-white">Reload</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return <View className="flex-1">{content()}</View>;
|
|
}
|