add maps

app/(tabs)/index.tsx

@@ -1,101 +1,88 @@
-import { Image } from "expo-image";
-import { Platform, StyleSheet, TouchableOpacity } from "react-native";
+import { showToastError } from "@/config";
+import { fetchGpsData } from "@/controller/DeviceController";
+import { useState } from "react";
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
 
-import { HelloWave } from "@/components/hello-wave";
-import ParallaxScrollView from "@/components/parallax-scroll-view";
-import { ThemedText } from "@/components/themed-text";
-import { ThemedView } from "@/components/themed-view";
-import { Text } from "@react-navigation/elements";
-import { Link, useRouter } from "expo-router";
+import MapView, { Marker } from "react-native-maps";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 export default function HomeScreen() {
-  const router = useRouter();
-  return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
-      headerImage={
-        <Image
-          source={require("@/assets/images/partial-react-logo.png")}
-          style={styles.reactLogo}
-        />
-      }
-    >
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Nicce!</ThemedText>
-        <HelloWave />
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 1: Try it</ThemedText>
-        <ThemedText>
-          Edit{" "}
-          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText>{" "}
-          to see changes. Press{" "}
-          <ThemedText type="defaultSemiBold">
-            {Platform.select({
-              ios: "cmd + d",
-              android: "cmd + m",
-              web: "F12",
-            })}
-          </ThemedText>{" "}
-          to open developer tools.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <Link href="/modal">
-          <Link.Trigger>
-            <ThemedText type="subtitle">Step 2: Explore</ThemedText>
-          </Link.Trigger>
-          <Link.Preview />
-          <Link.Menu>
-            <Link.MenuAction
-              title="Action"
-              icon="cube"
-              onPress={() => alert("Action pressed")}
-            />
-            <Link.MenuAction
-              title="Share"
-              icon="square.and.arrow.up"
-              onPress={() => alert("Share pressed")}
-            />
-            <Link.Menu title="More" icon="ellipsis">
-              <Link.MenuAction
-                title="Delete"
-                icon="trash"
-                destructive
-                onPress={() => alert("Delete pressed")}
-              />
-            </Link.Menu>
-          </Link.Menu>
-        </Link>
+  const [gpsData, setGpsData] = useState<Model.GPSResonse | null>(null);
 
-        <ThemedText>
-          {`Tap the Explore tab to learn more about what's included in this starter app.`}
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-        <ThemedText>
-          {`When you're ready, run `}
-          <ThemedText type="defaultSemiBold">
-            npm run reset-project
-          </ThemedText>{" "}
-          to get a fresh <ThemedText type="defaultSemiBold">app</ThemedText>{" "}
-          directory. This will move the current{" "}
-          <ThemedText type="defaultSemiBold">app</ThemedText> to{" "}
-          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
-        </ThemedText>
-      </ThemedView>
-      <TouchableOpacity
-        onPress={() => router.replace("/auth/login")}
-        // disabled={loading}
+  // useEffect(() => {
+  //   getGpsData();
+  // }, []);
+
+  const getGpsData = async () => {
+    try {
+      const response = await fetchGpsData();
+      console.log("GpsData: ", response.data);
+
+      setGpsData(response.data);
+    } catch (error) {
+      showToastError("Lỗi", "Không thể lấy dữ liệu GPS");
+    }
+  };
+
+  return (
+    <SafeAreaProvider style={styles.container}>
+      <MapView
+        style={styles.map}
+        initialRegion={{
+          latitude: 15.70581,
+          longitude: 116.152685,
+          latitudeDelta: 2,
+          longitudeDelta: 2,
+        }}
+        mapType="none"
       >
-        <Text>Đăng nhập</Text>
+        {gpsData && (
+          <Marker
+            coordinate={{
+              latitude: gpsData.lat,
+              longitude: gpsData.lon,
+            }}
+            title="Device Location"
+            description={`Lat: ${gpsData.lat}, Lon: ${gpsData.lon}`}
+          />
+        )}
+      </MapView>
+      <TouchableOpacity style={styles.button} onPress={getGpsData}>
+        <Text style={styles.buttonText}>Get GPS Data</Text>
       </TouchableOpacity>
-    </ParallaxScrollView>
+    </SafeAreaProvider>
   );
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  map: {
+    flex: 1,
+  },
+  button: {
+    position: "absolute",
+    top: 50,
+    right: 20,
+    backgroundColor: "#007AFF",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 8,
+    elevation: 5,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
   titleContainer: {
     flexDirection: "row",
     alignItems: "center",

app/auth/login.tsx

@@ -31,6 +31,8 @@ export default function LoginScreen() {
 
   const checkLogin = useCallback(async () => {
     const token = await getStorageItem(TOKEN);
+    console.log("Token:", token);
+
     if (!token) {
       return;
     }
@@ -71,6 +73,8 @@ export default function LoginScreen() {
       console.log("Login thành công với data:", response.data);
       if (response?.data.token) {
         // Lưu token vào storage nếu cần (thêm logic này sau)
+        console.log("Login Token:", response.data.token);
+
         await setStorageItem(TOKEN, response.data.token);
         console.log("Token:", response.data.token);
         router.replace("/(tabs)");