kennethnym/doors-wallpaper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stuff

Browse Source
This commit is contained in:
Kenneth
2024-09-25 19:13:53 +01:00
parent 6f939ec5ec
commit d2f5fb1e96
4 changed files with 62 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env Normal file
View File

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

105
app/(tabs)/index.tsx
View File

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

1
app/wallpaper.tsx
View File

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

131
cloudinary/cloudinary.ts
View File

@@ -9,134 +9,9 @@ interface ImageAsset {
width: number; width: number;
height: number; height: number;
secure_url: string; 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 type { ImageAsset };
export { FAKE_DATA };