Skip to content

Instantly share code, notes, and snippets.

@melitus
Last active April 9, 2018 21:08
Show Gist options
  • Save melitus/4b8804945c1d26df152258afce154776 to your computer and use it in GitHub Desktop.
Save melitus/4b8804945c1d26df152258afce154776 to your computer and use it in GitHub Desktop.
I am working on a react redux app with express framework .The app will show users 20 items according to their point of interest within 25 miles to their current location
This is the code i have written to obtain the current user geolocation with react redux. I have this sql query to show 20 items according to their point of interest within 25 miles to their current location
```
SELECT id, ( 3959 * acos( cos( radians(37) ) * cos( radians( lat ) )
* cos( radians( lng ) - radians(-122) ) + sin( radians(37) ) * sin(radians(lat)) ) )
AS distance
FROM shops
HAVING distance < 25
ORDER BY distance
LIMIT 0 , 20;
```
The challenge is how to fetch the current user location at the frontend and feed it into the above sql query at the server side to perform the above sql operation on the items table.
The table looks like this
id | name_of_item | latitude | longitude
```
function requestGeolocation() {
return function (dispatch) {
navigator.geolocation.getCurrentPosition((position) => {
dispatch({
type: FETCHING_LOCATION,
coords: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
inProgress: true,
},
});
});
};
}
function getGeolocation() {
return function (dispatch) {
if (!navigator.geolocation) {
return dispatch({
type: FETCHING_LOCATION
});
}
return dispatch(requestGeolocation());
};
}
export default getGeolocation;
```
```
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import getGeolocation from '../client/actions/location_action';
class Location extends React.Component {
componentDidMount() {
this.props.onGelocation();
}
render() {
return (
<div>
<div>Latitude is: <span>{this.props.location.latitude}</span></div>
<div>Longitude is: <span>{this.props.location.longitude}</span></div>
</div>
);
}
}
// THe state here is the one set in the reducer .is from the store.not from the container.
const mapStateToProps = state =>
// Location refers to the property name set in the reducer
({ location: state.location });
const mapDispatchToProps = dispatch => ({
onGelocation: bindActionCreators(getGeolocation, dispatch)
});
// Here connect give LOcation component conatiner access to the state
export default connect(mapStateToProps, mapDispatchToProps)(Location);
```
I would appreciate your assistance on how to achieve this goal. Thanks a lot
```
import { FETCHING_LOCATION } from '../actions/constants/actionTypes';
const INIT_STATE = {
coords: {
latitude: 0,
longitude: 0,
inProgress: false
}
};
const LocationReducer = (state = INIT_STATE, action) => {
switch (action.type) {
case FETCHING_LOCATION:
return Object.assign({}, state, action.coords);
default:
return state;
}
};
export default LocationReducer;
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment