add Zustand and del unnecessary files

app/(tabs)/index.jsx

@@ -1,56 +1,36 @@
-import { View, StyleSheet, FlatList, ActivityIndicator, RefreshControl } from 'react-native';
-import { useTheme, Card, Text, Button } from 'react-native-paper';
-import { Link } from 'expo-router';
-import { useState, useEffect } from 'react';
-import { listLocations } from '@/api/locations';
+import {
+  View,
+  StyleSheet,
+  FlatList,
+  ActivityIndicator,
+  RefreshControl,
+} from "react-native";
+import { useTheme, Card, Text, Button } from "react-native-paper";
+import { Link } from "expo-router";
+import { useState, useEffect } from "react";
+import useLocationStore from "@/locationStore";
 
 export default function Index() {
   const theme = useTheme();
-  const [locations, setLocations] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-
-  const fetchLocations = async () => {
-    try {
-      const data = await listLocations();
-      setLocations(data);
-    } catch (error) {
-      console.error("Error fetching locations:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const onRefresh = async () => {
-    setRefreshing(true);
-    await fetchLocations();
-    setRefreshing(false);
-  };
-
-  useEffect(() => {
-    fetchLocations();
-  }, []);
-
-  if (loading) {
-    return (
-      <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
-        <ActivityIndicator size="large" color={theme.colors.primary} />
-      </View>
-    );
-  }
+  const { locations } = useLocationStore();
 
   return (
-    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.background }]}
+    >
       <FlatList
         data={locations}
         keyExtractor={(item) => item.id.toString()}
         renderItem={({ item }) => (
           <Card style={{ margin: 10 }}>
-            <Card.Cover style={{ marginBottom: 10 }} source={{ uri: item.image }} />
+            <Card.Cover
+              style={{ marginBottom: 10 }}
+              source={{ uri: item.image }}
+            />
             <Card.Content style={{ marginBottom: 10 }}>
               <Text variant="titleLarge">{item.name}</Text>
               <Text variant="bodyMedium">
-                {item.description && item.description.split('.')[0]}...
+                {item.description && item.description.split(".")[0]}...
               </Text>
             </Card.Content>
             <Card.Actions>
@@ -60,14 +40,6 @@ export default function Index() {
             </Card.Actions>
           </Card>
         )}
-        refreshControl={
-        <RefreshControl
-            refreshing={refreshing || loading}
-            onRefresh={onRefresh}
-            colors={["#3b82f6"]}
-            tintColor="#3b82f6"
-        />
-      }
       />
     </View>
   );
@@ -76,8 +48,8 @@ export default function Index() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#25292e',
-    justifyContent: 'center',
-    alignItems: 'center',
+    backgroundColor: "#25292e",
+    justifyContent: "center",
+    alignItems: "center",
   },
-});
+});