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)");

config/axios.ts

@@ -1,5 +1,6 @@
+import { TOKEN } from "@/constants";
+import { getStorageItem } from "@/utils/storage";
 import axios, { AxiosInstance } from "axios";
-import { handle401 } from "./auth";
 import { showToastError } from "./toast";
 
 const codeMessage = {
@@ -31,12 +32,14 @@ const api: AxiosInstance = axios.create({
 
 // Interceptor cho request (thêm token nếu cần)
 api.interceptors.request.use(
-  (config) => {
+  async (config) => {
     // Thêm auth token nếu có
-    // const token = getTokenFromStorage();
-    // if (token) {
-    //   config.headers.Authorization = `Bearer ${token}`;
-    // }
+    const token = await getStorageItem(TOKEN);
+    console.log("Request Token: ", token);
+
+    if (token) {
+      config.headers.Authorization = `${token}`;
+    }
     return config;
   },
   (error) => {
@@ -61,7 +64,7 @@ api.interceptors.response.use(
       "Unknown error";
     showToastError(errMsg);
     if (error.response?.status === 401) {
-      handle401();
+      // handle401();
     }
     return Promise.reject(error);
   }

controller/DeviceController.ts

@@ -0,0 +1,6 @@
+import { api } from "@/config";
+import { API_GET_GPS } from "@/constants";
+
+export async function fetchGpsData() {
+  return api.get<Model.GPSResonse>(API_GET_GPS);
+}

controller/typings.d.ts

@@ -6,4 +6,12 @@ declare namespace Model {
   interface LoginResponse {
     token?: string;
   }
+
+  interface GPSResonse {
+    lat: number;
+    lon: number;
+    s: number;
+    h: number;
+    fishing: boolean;
+  }
 }

package-lock.json

@@ -30,6 +30,7 @@
         "react-dom": "19.1.0",
         "react-native": "0.81.5",
         "react-native-gesture-handler": "~2.28.0",
+        "react-native-maps": "^1.20.1",
         "react-native-reanimated": "~4.1.1",
         "react-native-safe-area-context": "~5.6.0",
         "react-native-screens": "~4.16.0",
@@ -3310,6 +3311,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -10671,6 +10678,28 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-maps": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-1.20.1.tgz",
+      "integrity": "sha512-NZI3B5Z6kxAb8gzb2Wxzu/+P2SlFIg1waHGIpQmazDSCRkNoHNY4g96g+xS0QPSaG/9xRBbDNnd2f2/OW6t6LQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "^7946.0.13"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": ">= 17.0.1",
+        "react-native": ">= 0.64.3",
+        "react-native-web": ">= 0.11"
+      },
+      "peerDependenciesMeta": {
+        "react-native-web": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-native-reanimated": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-4.1.3.tgz",

package.json

@@ -33,6 +33,7 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
+    "react-native-maps": "^1.20.1",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",