import { router } from 'expo-router'; import { View, Text, ScrollView, Pressable, Image, Dimensions, ImageBackground } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import { CrossLogoSvg, GreenStarSvg, RightArrowIconSvg } from '../global/SVG'; import NormalButton from '../global/normal_button'; import { useEffect, useState } from 'react'; import { chargeStationService } from '../../service/chargeStationService'; import { authenticationService } from '../../service/authService'; const VehicleRowComponent = ({ deviceWidth, deviceHeight, carBrand, carModel, licensePlate, carID, capacitance, capacitance_unit, createdAt }: { deviceWidth: number; deviceHeight: number; carBrand: string; carModel: string; licensePlate: string; carID: string; capacitance: number; capacitance_unit: string; createdAt: any; }) => ( router.push({ pathname: 'manageVehiclePage', params: { carID: carID, capacitance: capacitance, capacitance_unit: capacitance_unit, createdAt: createdAt, carModel: carModel, licensePlate: licensePlate } }) } > {carBrand} {carModel} {licensePlate} ); const MyVehiclePageComponent = () => { const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window'); console.log(deviceHeight, deviceWidth); const [myVehicleData, setMyVehicleData] = useState([]); const [defaultCarInfo, setDefaultCarInfo] = useState(null); const [defaultCarId, setDefaultCarId] = useState(null); const extractDefaultCarInfo = (response) => { const defaultCar = response.cars.find( (car) => car.id === response.defaultCar.id ); if (defaultCar) { return { name: defaultCar.name, license_plate: defaultCar.license_plate }; } return null; }; useEffect(() => { const fetchData = async () => { try { const result = await chargeStationService.getUserCars(); // console.log(JSON.stringify(result.data)); setMyVehicleData(result.data); } catch (error) { console.log(error); } }; fetchData(); }, []); useEffect(() => { const fetchDefaultCar = async () => { try { const result = await authenticationService.getUserInfo(); const response = result.data; const carInfo = extractDefaultCarInfo(response); setDefaultCarInfo(carInfo); setDefaultCarId(response.defaultCar.id); console.log('i am car info' + defaultCarId); } catch (error) { console.log(error); } }; fetchDefaultCar(); }, []); return ( { if (router.canGoBack()) { router.back(); } else { router.replace('/accountMainPage'); } }} > 我的車輛 預設車輛 {defaultCarInfo?.name} {defaultCarInfo?.license_plate} 其他車輛 {myVehicleData .filter((car) => car.id !== defaultCarId) .map((car, index) => ( ))} 新增車輛 } onPress={() => router.push('addVehiclePage')} /> ); }; export default MyVehiclePageComponent;