From d2f5fb1e964bf1ac759d554c7698971a1bf2cf55 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 25 Sep 2024 19:13:53 +0100 Subject: [PATCH] stuff --- .env | 1 + app/(tabs)/index.tsx | 105 +++++++++++++++++-------------- app/wallpaper.tsx | 1 - cloudinary/cloudinary.ts | 131 +-------------------------------------- 4 files changed, 62 insertions(+), 176 deletions(-) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 0000000..9199580 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +EXPO_PUBLIC_API_URL=http://localhost:8080 diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 7d556a7..9fa668c 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -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 ( - ( - - Wallpapers - - )} - renderItem={({ item }) => ( - - - { - setSelectedWallpaper(item); - router.push("/wallpaper"); - }} - > - - - - - {item.public_id.replace("wallpaper/", "")} - + {isLoading ? ( + + + + ) : ( + ( + + Wallpapers + + )} + renderItem={({ item }) => ( + + + { + setSelectedWallpaper(item); + router.push("/wallpaper"); + }} + > + + + + + {item.public_id.replace("wallpaper/", "")} + + - - )} - estimatedItemSize={200} - /> + )} + estimatedItemSize={200} + /> + )} ); } diff --git a/app/wallpaper.tsx b/app/wallpaper.tsx index f9aef68..b2b5b41 100644 --- a/app/wallpaper.tsx +++ b/app/wallpaper.tsx @@ -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); diff --git a/cloudinary/cloudinary.ts b/cloudinary/cloudinary.ts index 8768b14..b2f29db 100644 --- a/cloudinary/cloudinary.ts +++ b/cloudinary/cloudinary.ts @@ -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 };