few cosmetic fixes

app/(tabs)/add.jsx

@@ -90,6 +90,7 @@ export default function FormScreen() {
         const result = await launchCameraAsync({
             allowsEditing: false,
             base64: true,
+            quality: 0.2,
         });
 
         if (!result.canceled && result.assets && result.assets.length > 0) {

app/(tabs)/index.jsx

@@ -3,28 +3,37 @@ import {
     StyleSheet,
     FlatList,
 } from "react-native";
-import { useTheme, Card, Text, Button } from "react-native-paper";
+import {useTheme, Card, Text, Button, ActivityIndicator} from "react-native-paper";
-import { Link } from "expo-router";
+import {Link} from "expo-router";
 import useLocationStore from "@/locationStore";
 
 export default function Index() {
     const theme = useTheme();
-  const { locations } = useLocationStore();
+    const {locations} = useLocationStore();
+    const loading = useLocationStore((state) => state.loading);
+
+    if (loading) {
+        return (
+            <View style={[styles.container, {backgroundColor: theme.colors.background}]}>
+                <ActivityIndicator size="large" color={theme.colors.primary}/>
+            </View>
+        );
+    }
 
     return (
         <View
-      style={[styles.container, { backgroundColor: theme.colors.background }]}
+            style={[styles.container, {backgroundColor: theme.colors.background}]}
         >
             <FlatList
                 data={locations}
                 keyExtractor={(item) => item.id.toString()}
-        renderItem={({ item }) => (
+                renderItem={({item}) => (
-          <Card style={{ margin: 10 }}>
+                    <Card style={{margin: 10}}>
                         <Card.Cover
-                  style={{ marginBottom: 10 }}
+                            style={{marginBottom: 10}}
                             source={item.imageSource}
                         />
-            <Card.Content style={{ marginBottom: 10 }}>
+                        <Card.Content style={{marginBottom: 10}}>
                             <Text variant="titleLarge">{item.name}</Text>
                             <Text variant="bodyMedium">
                                 {item.description && item.description.split(".")[0]}...

app/_layout.jsx

@@ -16,7 +16,6 @@ export default function RootLayout() {
     fetchLocations();
   }, []);
 
-  console.log();
   const deleteLocation = useLocationStore((state) => state.deleteLocation);
 
   const handleDelete = async (id) => {

app/location/[id].jsx

@@ -1,6 +1,6 @@
 import { View, ScrollView, StyleSheet } from "react-native";
 import { useEffect } from "react";
-import { useTheme, Text, Card } from "react-native-paper";
+import {useTheme, Text, Card, ActivityIndicator} from "react-native-paper";
 import { useLocalSearchParams } from "expo-router";
 import useLocationStore from "@/locationStore";
 
@@ -19,7 +19,15 @@ export default function Location() {
     }
   }, [location, loading, fetchLocations]);
 
-  if (loading || !location) {
+  if (loading) {
+    return (
+        <View style={[styles.container, {backgroundColor: theme.colors.background}]}>
+          <ActivityIndicator size="large" color={theme.colors.primary}/>
+        </View>
+    );
+  }
+
+  if (!location) {
     return (
         <View style={styles.container}>
           <Text style={styles.text}>Brak lokalizacji - {id}</Text>
@@ -27,6 +35,7 @@ export default function Location() {
     );
   }
 
+
   return (
     <View style={[styles.container, {backgroundColor: theme.colors.background}]}>
       <ScrollView>

app/location/edit/[id].jsx

@@ -6,10 +6,12 @@ import {
     KeyboardAvoidingView,
     View,
     ActivityIndicator,
+    Image,
 } from "react-native";
-import {TextInput, Button, Snackbar, useTheme} from "react-native-paper";
+import {TextInput, Button, Snackbar, useTheme, Text} from "react-native-paper";
 import {useLocalSearchParams, useRouter} from "expo-router";
 import useLocationStore from "@/locationStore";
+import {normalizeImageSource} from "@/api/locations";
 
 export default function EditLocation() {
     const theme = useTheme();
@@ -89,6 +91,16 @@ export default function EditLocation() {
         }
     };
 
+    const isBase64Image = (str) => {
+        let image = normalizeImageSource(str);
+        return image && (
+            image.uri.startsWith('data:image/jpeg;base64,') ||
+            image.uri.startsWith('data:image/png;base64,') ||
+            image.uri.startsWith('data:image/gif;base64,') ||
+            image.uri.startsWith('data:image/webp;base64,')
+        );
+    };
+
     if (loading) {
         return (
             <View
@@ -99,6 +111,14 @@ export default function EditLocation() {
         );
     }
 
+    if (!formData) {
+        return (
+            <View style={styles.container}>
+                <Text style={styles.text}>Brak lokalizacji - {id}</Text>
+            </View>
+        );
+    }
+
     return (
         <KeyboardAvoidingView
             style={{flex: 1}}
@@ -112,6 +132,30 @@ export default function EditLocation() {
                 >
                     {message}
                 </Snackbar>
+
+                {isBase64Image(formData.image) ? (
+                    <View style={styles.imageContainer}>
+                        <Text style={{color: theme.colors.onBackground, marginBottom: 5}}>
+                            Aktualne zdjęcie:
+                        </Text>
+                        <Image
+                            source={normalizeImageSource(formData.image)}
+                            style={styles.imagePreview}
+                            resizeMode="contain"
+                        />
+                    </View>
+                ) : (
+                    <TextInput
+                        mode="outlined"
+                        label="Link do zdjęcia"
+                        multiline={true}
+                        placeholder="Wpisz link do zdjęcia"
+                        style={{margin: 10, width: "100%"}}
+                        value={formData.image}
+                        onChangeText={(e) => setFormData({...formData, image: e})}
+                    />
+                )}
+
                 <TextInput
                     mode="outlined"
                     label="Nazwa"
@@ -129,15 +173,6 @@ export default function EditLocation() {
                     value={formData.description}
                     onChangeText={(e) => setFormData({...formData, description: e})}
                 />
-                <TextInput
-                    mode="outlined"
-                    label="Link do zdjęcia"
-                    multiline={true}
-                    placeholder="Wpisz link do zdjęcia"
-                    style={{margin: 10, width: "100%"}}
-                    value={formData.image}
-                    onChangeText={(e) => setFormData({...formData, image: e})}
-                />
                 <TextInput
                     mode="outlined"
                     label="Powierzchnia"
@@ -194,4 +229,15 @@ const styles = StyleSheet.create({
         alignItems: "center",
         flexGrow: 1,
     },
+    imageContainer: {
+        margin: 10,
+        width: "100%",
+        alignItems: "center",
+        padding: 10,
+    },
+    imagePreview: {
+        width: "100%",
+        height: 200,
+        borderRadius: 5,
+    }
 });

locationStore.js

@@ -1,4 +1,4 @@
-import { create } from "zustand";
+import {create} from "zustand";
 import * as api from "@/api/locations";
 
 const useLocationStore = create((set, get) => ({
@@ -7,17 +7,17 @@ const useLocationStore = create((set, get) => ({
     error: null,
 
     fetchLocations: async () => {
-    set({ loading: true, error: null });
+        set({loading: true, error: null});
         try {
             const data = await api.listLocations();
-      set({ locations: data, loading: false });
+            set({locations: data, loading: false});
         } catch (error) {
-      set({ error, loading: false });
+            set({error, loading: false});
         }
     },
 
-addLocation: async (location) => {
+    addLocation: async (location) => {
-  set({ loading: true, error: null });
+        set({loading: true, error: null});
         try {
             const newLoc = await api.addLocation(location);
             const normalizedLoc = {
@@ -30,13 +30,13 @@ addLocation: async (location) => {
             }));
             return normalizedLoc;
         } catch (error) {
-    set({ error, loading: false });
+            set({error, loading: false});
             return null;
         }
-},
+    },
 
     updateLocation: async (id, location) => {
-    set({ loading: true, error: null });
+        set({loading: true, error: null});
         try {
             const updated = await api.updateLocation(id, location);
             set((state) => ({
@@ -49,30 +49,35 @@ addLocation: async (location) => {
 
             return updated;
         } catch (error) {
-      set({ error, loading: false });
+            set({error, loading: false});
             return null;
         }
     },
 
     deleteLocation: async (id) => {
-    set({ loading: true, error: null });
+        set({loading: true, error: null});
         try {
             const deleted = await api.deleteLocation(id);
             set((state) => ({
                 locations: state.locations.filter((loc) => loc.id !== id),
                 loading: false,
             }));
-      if(deleted) {
+            return deleted;
-        return true;
-      }
         } catch (error) {
-      set({ error, loading: false });
+            set({error, loading: false});
             return false;
         }
     },
 
     getLocation: (id) => {
-    return get().locations.find((loc) => String(loc.id) === String(id));
+        const location = get().locations.find((loc) => String(loc.id) === String(id));
+        if (location && !location.imageSource) {
+            return {
+                ...location,
+                imageSource: api.normalizeImageSource(location.image)
+            };
+        }
+        return location;
     },
 }));