get list of location and get location by id

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 (