react_native/ev_station/app/screen/HomeScreen.jsx
2024-07-31 20:28:02 -05:00

62 lines
No EOL
2 KiB
JavaScript

import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
import React, { useContext, useEffect, useState } from 'react';
import MapViewScreen from "../screen/mapView/MapViewScreen";
import HomeHeader from './HomeHeader';
import HomeSearch from './HomeSearch';
import { UserLocationContext } from '../context/UserLocationContext';
import GlobalApi from '../misc/GlobalApi';
import EVListView from '../screen/googleList/EVListView';
import { MarkerContext } from '../context/MakerContext';
const HomeScreen = () => {
const {location, setLocation} = useContext(UserLocationContext);
const [placeList, setPlaceList] = useState([]);
const [selectedMarker, setSelectedMarker] = useState('');
useEffect(() => {
location && GetNearByPlace();
},[location])
const GetNearByPlace = () => {
const data = {
"includedTypes": ["electric_vehicle_charging_station"],
"maxResultCount": 10,
"locationRestriction": {
"circle": {
"center": {
"latitude": location?.latitude,
"longitude": location?.longitude
},
"radius": 5000.0
}
}
}
GlobalApi.NewNearByPlace(data).then(res => {
console.log(JSON.stringify(res.data));
setPlaceList(res.data?.places);
})
}
return (
<MarkerContext.Provider value={{selectedMarker, setSelectedMarker}}>
<View style={{flex: 1, backgroundColor: 'white'}}>
<View style={{position: 'absolute', zIndex: 10, width: '100%'}}>
<HomeHeader />
<HomeSearch searchedLocation={(location) => setLocation({latitude: location.lat, longitude: location.lng})}/>
</View>
{placeList && <MapViewScreen placeList={placeList}/>}
<View style={{position: 'absolute', bottom: 0, zIndex: 20, width: '100%'}}>
{placeList && <EVListView placeList={placeList}/>}
</View>
</View>
</MarkerContext.Provider>
)
}
export default HomeScreen
const styles = StyleSheet.create({})