This commit is contained in:
2024-09-25 19:13:53 +01:00
parent 6f939ec5ec
commit d2f5fb1e96
4 changed files with 62 additions and 176 deletions

1
.env Normal file
View File

@@ -0,0 +1 @@
EXPO_PUBLIC_API_URL=http://localhost:8080

View File

@@ -1,18 +1,14 @@
import {
View,
Image,
StyleSheet,
Platform,
Text,
TouchableOpacity,
ActivityIndicator,
Alert,
} from "react-native";
import { HelloWave } from "@/components/HelloWave";
import ParallaxScrollView from "@/components/ParallaxScrollView";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { useEffect, useState } from "react";
import { FAKE_DATA, type ImageAsset } from "@/cloudinary/cloudinary";
import { type ImageAsset } from "@/cloudinary/cloudinary";
import { MasonryFlashList } from "@shopify/flash-list";
import { useRouter } from "expo-router";
import { useStore } from "@/store/store";
@@ -25,54 +21,69 @@ export default function HomeScreen() {
useEffect(() => {
async function fetchWallpapers() {
setIsLoading(true);
const res = await fetch("http://localhost:8080/wallpapers");
const images: ImageAsset[] = await res.json();
setImages(images);
setIsLoading(false);
try {
setIsLoading(true);
const res = await fetch(
`${process.env.EXPO_PUBLIC_API_URL}/wallpapers`,
);
const images: ImageAsset[] = await res.json();
setImages(images);
setIsLoading(false);
} catch {
Alert.alert(
"Unable to fetch wallpaper",
"Check your internet connection. Otherwise, it's probably our fault.",
);
}
}
fetchWallpapers();
}, []);
return (
<View className="flex-1">
<MasonryFlashList
data={FAKE_DATA}
numColumns={2}
ListHeaderComponent={() => (
<Text className="px-2 pt-20 text-2xl font-bold text-white">
Wallpapers
</Text>
)}
renderItem={({ item }) => (
<View className="w-full p-2">
<View className="w-full relative">
<TouchableOpacity
onPress={() => {
setSelectedWallpaper(item);
router.push("/wallpaper");
}}
>
<Image
className="w-full h-60"
source={{ uri: item.secure_url }}
/>
</TouchableOpacity>
<View
className="w-full absolute bottom-0 left-0 right-0 p-2"
style={{
backgroundColor: "rgba(0, 0, 0, 0.8)",
}}
>
<Text className="text-white opacity-80">
{item.public_id.replace("wallpaper/", "")}
</Text>
{isLoading ? (
<View className="flex-1 items-center justify-center">
<ActivityIndicator />
</View>
) : (
<MasonryFlashList
data={images}
numColumns={2}
ListHeaderComponent={() => (
<Text className="px-2 pt-20 text-2xl font-bold text-white">
Wallpapers
</Text>
)}
renderItem={({ item }) => (
<View className="w-full p-2">
<View className="w-full relative rounded overflow-hidden">
<TouchableOpacity
onPress={() => {
setSelectedWallpaper(item);
router.push("/wallpaper");
}}
>
<Image
className="w-full h-60"
source={{ uri: item.secure_url }}
/>
</TouchableOpacity>
<View
className="w-full absolute bottom-0 left-0 right-0 p-2"
style={{
backgroundColor: "rgba(0, 0, 0, 0.8)",
}}
>
<Text className="text-white opacity-80">
{item.public_id.replace("wallpaper/", "")}
</Text>
</View>
</View>
</View>
</View>
)}
estimatedItemSize={200}
/>
)}
estimatedItemSize={200}
/>
)}
</View>
);
}

View File

@@ -4,7 +4,6 @@ import * as MediaLibrary from "expo-media-library";
import { Ionicons } from "@expo/vector-icons";
import { useRouter } from "expo-router";
import { Image, Text, View, TouchableOpacity, Alert } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
export default function WallpaperPage() {
const selectedWallpaper = useStore((store) => store.selectedWallpaper);

View File

@@ -9,134 +9,9 @@ interface ImageAsset {
width: number;
height: number;
secure_url: string;
thumbnail_url: string;
source_url?: string;
creator_name?: string;
}
const FAKE_DATA: ImageAsset[] = [
{
asset_id: "0bc266a5c13b32b7f391743e6190e64b",
public_id: "wallpaper/My Wife",
format: "png",
version: 1727208372,
resource_type: "image",
type: "upload",
bytes: 7298274,
width: 7680,
height: 4320,
asset_folder: "wallpaper",
display_name: "wtu9aapnvev6l3u4wxnn",
url: "http://res.cloudinary.com/duyynotn0/image/upload/v1727208372/wallpaper/My%20Wife.png",
secure_url:
"https://res.cloudinary.com/duyynotn0/image/upload/v1727208372/wallpaper/My%20Wife.png",
last_updated: {
public_id_updated_at: "2024-09-24T21:10:00+00:00",
updated_at: "2024-09-24T21:10:00+00:00",
},
},
{
asset_id: "054f3880e1b0ae0e1caf7353a3b5887f",
public_id: "wallpaper/Lycoris Recoil",
format: "jpg",
version: 1727208371,
resource_type: "image",
type: "upload",
bytes: 4393245,
width: 3840,
height: 2160,
asset_folder: "wallpaper",
display_name: "bcnwr6vgi6l7biqn10gx",
url: "http://res.cloudinary.com/duyynotn0/image/upload/v1727208371/wallpaper/Lycoris%20Recoil.jpg",
secure_url:
"https://res.cloudinary.com/duyynotn0/image/upload/v1727208371/wallpaper/Lycoris%20Recoil.jpg",
last_updated: {
public_id_updated_at: "2024-09-24T21:10:07+00:00",
updated_at: "2024-09-24T21:10:07+00:00",
},
},
{
asset_id: "c9f71873b584b74a5dce33c0a65319ac",
public_id: "wallpaper/Tokyo",
format: "jpg",
version: 1727208369,
resource_type: "image",
type: "upload",
created_at: "2024-09-24T20:06:09Z",
bytes: 7752039,
width: 6720,
height: 4480,
asset_folder: "wallpaper",
display_name: "v59wmbyztuy3hpinwsgo",
url: "http://res.cloudinary.com/duyynotn0/image/upload/v1727208369/wallpaper/Tokyo.jpg",
secure_url:
"https://res.cloudinary.com/duyynotn0/image/upload/v1727208369/wallpaper/Tokyo.jpg",
last_updated: {
public_id_updated_at: "2024-09-24T21:09:28+00:00",
updated_at: "2024-09-24T21:09:28+00:00",
},
},
{
asset_id: "7ff8cb0616c8091dc37aadec52a30658",
public_id: "wallpaper/Galaxy",
format: "jpg",
version: 1727208369,
resource_type: "image",
type: "upload",
created_at: "2024-09-24T20:06:09Z",
bytes: 4068457,
width: 7042,
height: 4699,
asset_folder: "wallpaper",
display_name: "xghgm5fp8icre4kmvsx5",
url: "http://res.cloudinary.com/duyynotn0/image/upload/v1727208369/wallpaper/Galaxy.jpg",
secure_url:
"https://res.cloudinary.com/duyynotn0/image/upload/v1727208369/wallpaper/Galaxy.jpg",
last_updated: {
public_id_updated_at: "2024-09-24T21:09:13+00:00",
updated_at: "2024-09-24T21:09:13+00:00",
},
},
{
asset_id: "8b1b17423a410a4b2f7bea13957f7de1",
public_id: "wallpaper/Raydrop",
format: "heic",
version: 1727208361,
resource_type: "image",
type: "upload",
created_at: "2024-09-24T20:06:01Z",
bytes: 1034763,
width: 6016,
height: 3388,
asset_folder: "wallpaper",
display_name: "yjcsdlty4pwqaich0fl4",
url: "http://res.cloudinary.com/duyynotn0/image/upload/v1727208361/wallpaper/Raydrop.heic",
secure_url:
"https://res.cloudinary.com/duyynotn0/image/upload/v1727208361/wallpaper/Raydrop.heic",
last_updated: {
public_id_updated_at: "2024-09-24T21:08:56+00:00",
updated_at: "2024-09-24T21:08:56+00:00",
},
},
{
asset_id: "7d95c3294cd84e64b004f54a002d3865",
public_id: "wallpaper/Alisa",
format: "jpg",
version: 1727208357,
resource_type: "image",
type: "upload",
created_at: "2024-09-24T20:05:57Z",
bytes: 1556534,
width: 5120,
height: 2880,
asset_folder: "wallpaper",
display_name: "qjbbkz8kn1rtsmvthdb5",
url: "http://res.cloudinary.com/duyynotn0/image/upload/v1727208357/wallpaper/Alisa.jpg",
secure_url:
"https://res.cloudinary.com/duyynotn0/image/upload/v1727208357/wallpaper/Alisa.jpg",
last_updated: {
public_id_updated_at: "2024-09-24T21:08:48+00:00",
updated_at: "2024-09-24T21:08:48+00:00",
},
},
];
export type { ImageAsset };
export { FAKE_DATA };