Created
March 17, 2023 09:45
-
-
Save Victorvikson1996/a5b25084c2202893a9aae12b10f6cd68 to your computer and use it in GitHub Desktop.
RIDE SLICE 2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { createSlice } from '@reduxjs/toolkit'; | |
| const initialState = { | |
| senderLocation: null, | |
| receiverLocation: null, | |
| // other state properties... | |
| }; | |
| const locationSlice = createSlice({ | |
| name: 'location', | |
| initialState, | |
| reducers: { | |
| updateSenderLocation: (state, action) => { | |
| state.senderLocation = action.payload; | |
| }, | |
| updateReceiverLocation: (state, action) => { | |
| state.receiverLocation = action.payload; | |
| }, | |
| // other reducers... | |
| }, | |
| }); | |
| // Export the reducer and actions | |
| export const { updateSenderLocation, updateReceiverLocation } = locationSlice.actions; | |
| export default locationSlice.reducer; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete'; | |
| import { useDispatch } from 'react-redux'; | |
| import { updateSenderLocation, updateReceiverLocation } from '../store/locationSlice'; | |
| const PlacesSearchBar = ({ placeholder, isSender }) => { | |
| const dispatch = useDispatch(); | |
| const handlePlaceSelected = (data, details) => { | |
| const { description, geometry: { location } } = details; | |
| const locationLatLong = { | |
| description, | |
| latitude: location.lat, | |
| longitude: location.lng, | |
| }; | |
| if (isSender) { | |
| dispatch(updateSenderLocation(locationLatLong)); | |
| } else { | |
| dispatch(updateReceiverLocation(locationLatLong)); | |
| } | |
| }; | |
| return ( | |
| <GooglePlacesAutocomplete | |
| placeholder={placeholder} | |
| onPress={handlePlaceSelected} | |
| fetchDetails | |
| enablePoweredByContainer={false} | |
| query={{ key: YOUR_API_KEY, language: 'en', types: 'address' }} | |
| styles={{ ... }} | |
| /> | |
| ); | |
| }; | |
| export default PlacesSearchBar; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { View, Text } from 'react-native'; | |
| import PlacesSearchBar from './PlacesSearchBar'; | |
| const LocationForm = () => { | |
| return ( | |
| <View style={{ ... }}> | |
| <Text style={{ ... }}>Sender Location</Text> | |
| <PlacesSearchBar placeholder="Search sender location" isSender /> | |
| <Text style={{ ... }}>Receiver Location</Text> | |
| <PlacesSearchBar placeholder="Search receiver location" /> | |
| </View> | |
| ); | |
| }; | |
| export default LocationForm; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { View, Text } from 'react-native'; | |
| import { useSelector } from 'react-redux'; | |
| const MyComponent = () => { | |
| const senderLocation = useSelector((state) => state.location.senderLocation); | |
| const receiverLocation = useSelector((state) => state.location.receiverLocation); | |
| return ( | |
| <View style={{ ... }}> | |
| <Text style={{ ... }}>Sender Location:</Text> | |
| <Text>{senderLocation?.description}</Text> | |
| <Text style={{ ... }}>Receiver Location:</Text> | |
| <Text>{receiverLocation?.description}</Text> | |
| </View> | |
| ); | |
| }; | |
| export default MyComponent; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment