add Zustand and del unnecessary files

app/location/[id].jsx

@@ -1,38 +1,25 @@
-import { View, ScrollView, StyleSheet, ActivityIndicator } from 'react-native';
-import { useTheme, Text, Card } from 'react-native-paper';
-import { useLocalSearchParams } from 'expo-router';
-import { useEffect, useState } from 'react';
-import { getLocation } from '@/api/locations';
+import { View, ScrollView, StyleSheet, ActivityIndicator } from "react-native";
+import { useEffect } from "react";
+import { useTheme, Text, Card } from "react-native-paper";
+import { useLocalSearchParams } from "expo-router";
+import useLocationStore from "@/locationStore";
 
 export default function Location() {
   const theme = useTheme();
   const { id } = useLocalSearchParams();
-  const [location, setLocation] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const getLocation = useLocationStore((state) => state.getLocation);
+  const fetchLocations = useLocationStore((state) => state.fetchLocations);
+  const loading = useLocationStore((state) => state.loading);
+
+  const location = getLocation(id);
 
   useEffect(() => {
-    const fetchLocation = async () => {
-      try {
-        const data = await getLocation(id)
-        setLocation(data);
-      } catch (error) {
-        console.error("Error fetching location:", error);
-      } finally {
-      setLoading(false);
-      }
+    if (!location && !loading) {
+      fetchLocations();
     }
-    fetchLocation();
-  }, [id]);
+  }, [location, loading, fetchLocations]);
 
-  if (loading) {
-    return (
-      <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
-        <ActivityIndicator size="large" color={theme.colors.primary} />
-      </View>
-    );
-  }
-
-  if (!location) {
+  if (loading || !location) {
     return (
       <View style={styles.container}>
         <Text style={styles.text}>Brak lokalizacji - {id}</Text>
@@ -44,7 +31,10 @@ export default function Location() {
     <View style={styles.container}>
       <ScrollView>
         <Card style={{ margin: 10 }}>
-          <Card.Cover style={{ marginBottom: 10 }} source={{ uri: location.image }} />
+          <Card.Cover
+            style={{ marginBottom: 10 }}
+            source={{ uri: location.image }}
+          />
           <Card.Content style={{ marginBottom: 10 }}>
             <Text variant="headlineLarge" style={{ marginBottom: 10 }}>
               {location.name}
@@ -75,11 +65,11 @@ export default function Location() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#25292e',
-    justifyContent: 'center',
-    alignItems: 'center',
+    backgroundColor: "#25292e",
+    justifyContent: "center",
+    alignItems: "center",
   },
   text: {
-    color: '#fff',
+    color: "#fff",
   },
-});
+});