get list of location and get location by id

app/(tabs)/index.jsx

@@ -1,11 +1,43 @@
-import { View, StyleSheet, FlatList } from 'react-native';
+import { View, StyleSheet, FlatList, ActivityIndicator, RefreshControl } from 'react-native';
 import { useTheme, Card, Text, Button } from 'react-native-paper';
 import { Link } from 'expo-router';
-import useLocationStore from '@/store';
+import { useState, useEffect } from 'react';
+import { listLocations } from '@/api/locations';
 
 export default function Index() {
   const theme = useTheme();
-  const locations = useLocationStore((state) => state.locations);
+  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>
+    );
+  }
 
   return (
     <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
@@ -17,7 +49,9 @@ export default function Index() {
             <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.split('.')[0]}...</Text>
+              <Text variant="bodyMedium">
+                {item.description && item.description.split('.')[0]}...
+              </Text>
             </Card.Content>
             <Card.Actions>
               <Link href={`/location/${item.id}`} asChild>
@@ -26,6 +60,14 @@ export default function Index() {
             </Card.Actions>
           </Card>
         )}
+        refreshControl={
+        <RefreshControl
+            refreshing={refreshing || loading}
+            onRefresh={onRefresh}
+            colors={["#3b82f6"]}
+            tintColor="#3b82f6"
+        />
+      }
       />
     </View>
   );

app/location/[id].jsx

@@ -1,13 +1,36 @@
-import { View, ScrollView, StyleSheet } from 'react-native';
-import { Text, Card } from 'react-native-paper';
+import { View, ScrollView, StyleSheet, ActivityIndicator } from 'react-native';
+import { useTheme, Text, Card } from 'react-native-paper';
 import { useLocalSearchParams } from 'expo-router';
-import useLocationStore from '@/store';
+import { useEffect, useState } from 'react';
+import { getLocation } from '@/api/locations';
 
 export default function Location() {
+  const theme = useTheme();
   const { id } = useLocalSearchParams();
-  const location = useLocationStore((state) =>
-    state.locations.find((loc) => loc.id == id)
-  );
+  const [location, setLocation] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchLocation = async () => {
+      try {
+        const data = await getLocation(id)
+        setLocation(data);
+      } catch (error) {
+        console.error("Error fetching location:", error);
+      } finally {
+      setLoading(false);
+      }
+    }
+    fetchLocation();
+  }, [id]);
+
+  if (loading) {
+    return (
+      <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+        <ActivityIndicator size="large" color={theme.colors.primary} />
+      </View>
+    );
+  }
 
   if (!location) {
     return (