feat: add loading state and error handling

This commit is contained in:
2024-09-25 19:27:59 +01:00
parent 0204b8fa9c
commit ad6e0dd769

View File

@@ -4,9 +4,11 @@ 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 { useState } from "react";
export default function WallpaperPage() { export default function WallpaperPage() {
const selectedWallpaper = useStore((store) => store.selectedWallpaper); const selectedWallpaper = useStore((store) => store.selectedWallpaper);
const [isDownloading, setIsDownloading] = useState(false);
const router = useRouter(); const router = useRouter();
if (!selectedWallpaper) { if (!selectedWallpaper) {
@@ -20,6 +22,9 @@ export default function WallpaperPage() {
return; return;
} }
setIsDownloading(true);
try {
const permStatus = await MediaLibrary.requestPermissionsAsync(); const permStatus = await MediaLibrary.requestPermissionsAsync();
if (permStatus.status != MediaLibrary.PermissionStatus.GRANTED) { if (permStatus.status != MediaLibrary.PermissionStatus.GRANTED) {
Alert.alert( Alert.alert(
@@ -29,10 +34,6 @@ export default function WallpaperPage() {
return; return;
} }
console.log(
`${FileSystem.documentDirectory}${selectedWallpaper.asset_id}.${selectedWallpaper.format}`,
);
const result = await FileSystem.downloadAsync( const result = await FileSystem.downloadAsync(
selectedWallpaper.secure_url, selectedWallpaper.secure_url,
`${FileSystem.documentDirectory}${selectedWallpaper.asset_id}.${selectedWallpaper.format}`, `${FileSystem.documentDirectory}${selectedWallpaper.asset_id}.${selectedWallpaper.format}`,
@@ -42,6 +43,14 @@ export default function WallpaperPage() {
"Wallpaper saved successfully", "Wallpaper saved successfully",
"You can change the wallpaper in Settings.", "You can change the wallpaper in Settings.",
); );
} catch {
Alert.alert(
"Unable to download wallpaper",
"Check your internet connection. Otherwise, it's probably our fault.",
);
} finally {
setIsDownloading(false);
}
} }
return ( return (
@@ -83,9 +92,12 @@ export default function WallpaperPage() {
) : null} ) : null}
</View> </View>
<TouchableOpacity <TouchableOpacity
disabled={isDownloading}
className="w-full" className="w-full"
onPress={() => { onPress={() => {
if (!isDownloading) {
downloadWallpaper(); downloadWallpaper();
}
}} }}
> >
<View <View
@@ -94,7 +106,9 @@ export default function WallpaperPage() {
backgroundColor: "#E5202B", backgroundColor: "#E5202B",
}} }}
> >
<Text className="text-white">Download</Text> <Text className="text-white">
{isDownloading ? "Downloading…" : "Download"}
</Text>
<Text className="text-white opacity-80 text-xs"> <Text className="text-white opacity-80 text-xs">
{selectedWallpaper.width}x{selectedWallpaper.height} {selectedWallpaper.width}x{selectedWallpaper.height}
</Text> </Text>