From fd6e07ee24f4ca31623cd6109f1b858b53e1a753 Mon Sep 17 00:00:00 2001 From: Tran Anh Tuan Date: Thu, 30 Oct 2025 12:34:45 +0700 Subject: [PATCH] add maps --- app/(tabs)/index.tsx | 163 +++++++++++++++------------------ app/auth/login.tsx | 4 + config/axios.ts | 17 ++-- controller/DeviceController.ts | 6 ++ controller/typings.d.ts | 8 ++ package-lock.json | 29 ++++++ package.json | 1 + 7 files changed, 133 insertions(+), 95 deletions(-) create mode 100644 controller/DeviceController.ts diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 17675f1..0f83e7d 100644 --- a/app/(tabs)/index.tsx +++ b/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 ( - - } - > - - Nicce! - - - - Step 1: Try it - - Edit{" "} - app/(tabs)/index.tsx{" "} - to see changes. Press{" "} - - {Platform.select({ - ios: "cmd + d", - android: "cmd + m", - web: "F12", - })} - {" "} - to open developer tools. - - - - - - Step 2: Explore - - - - alert("Action pressed")} - /> - alert("Share pressed")} - /> - - alert("Delete pressed")} - /> - - - + const [gpsData, setGpsData] = useState(null); - - {`Tap the Explore tab to learn more about what's included in this starter app.`} - - - - Step 3: Get a fresh start - - {`When you're ready, run `} - - npm run reset-project - {" "} - to get a fresh app{" "} - directory. This will move the current{" "} - app to{" "} - app-example. - - - 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 ( + + - Đăng nhập + {gpsData && ( + + )} + + + Get GPS Data - + ); } 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", diff --git a/app/auth/login.tsx b/app/auth/login.tsx index da6ae04..640fe04 100644 --- a/app/auth/login.tsx +++ b/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)"); diff --git a/config/axios.ts b/config/axios.ts index 3e177ca..c467c53 100644 --- a/config/axios.ts +++ b/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); } diff --git a/controller/DeviceController.ts b/controller/DeviceController.ts new file mode 100644 index 0000000..a704e1d --- /dev/null +++ b/controller/DeviceController.ts @@ -0,0 +1,6 @@ +import { api } from "@/config"; +import { API_GET_GPS } from "@/constants"; + +export async function fetchGpsData() { + return api.get(API_GET_GPS); +} diff --git a/controller/typings.d.ts b/controller/typings.d.ts index 27e0970..d74c237 100644 --- a/controller/typings.d.ts +++ b/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; + } } diff --git a/package-lock.json b/package-lock.json index 2ad0170..b82e014 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 73c25be..8c4c5a6 100644 --- a/package.json +++ b/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",