web-geolocation

Connects Doodle's geolocation service (https://github.com/DoodleScheduling/service-geoip) to redux.

The object returned by the geolocation service has the following shape:

{
  "ip": "84.74.100.162",
  "country_code": "CH",
  "country_name": "Switzerland",
  "region_code": "ZH",
  "region_name": "Zurich",
  "city": "Zurich",
  "zip_code": "8047",
  "time_zone": "Europe/Zurich",
  "latitude": 47.3667,
  "longitude" :8.55,
  "metro_code": 0
}

!!! For now only country_code and country_name are available. !!!

Usage in another project

To use geolocation state in one of your projects you need to follow these steps:

• Add @doodle/geolocation to your project's dependencies in package.json.

add @doodle/geolocation

• Add geolocation's saga to your rootSaga:

import { loadGeolocationSaga } from '@doodle/geolocation';

export default function* rootSaga(options = {}) {
  yield all([
    call(loadGeolocationSaga, options.geolocation),
    // ... add other sagas here
  ]);
}

• Add geolocation to your initialState.js:

import { createState as createGeolocationInitialState } from '@doodle/geolocation';

export default {
  ...createGeolocationInitialState(),
  // ... add other initial states here
};

• Add geolocation's reducer to your project:

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import { createReducer as createGeolocationReducer } from '@doodle/geolocation';

export default function createReducer(injectedReducers = {}) {
  return combineReducers({
    router: routerReducer,
    ...createGeolocationReducer(),
    // ... add other reducers here
    ...injectedReducers,
  });
}

• Add geolocation API's url to client.js:

store.runRootSaga({
  geolocation: {
     geoipServiceUrl: 'https://doodle-test.com/api/geoip/v1.0',
   },
});

• Use geolocation in one of yours sagas, for example:

import { ActionTypes as GeolocationActionTypes, fetchGeolocation } from '@doodle/geolocation';

function* onFetchGeolocationSuccess() {
  const geolocation = yield select(state => state.geolocation.geolocation);
}


function* watchFetchGeolocationSuccess(options) {
  yield takeLatest(GeolocationActionTypes.FETCH_GEOLOCATION_SUCCESS, onFetchGeolocationSuccess, options);
}

export default function* exampleSaga(options = {}) {
  yield all([
    call(watchFetchGeolocationSuccess, options),
    put(fetchGeolocation()),
  ]);
}

Contributing

• Clone repository

  git clone https://github.com/DoodleScheduling/web-geolocation.git
  cd web-geolocation
  

• Install dependencies and start watcher

  $ yarn
  $ yarn start
  

• Contribute

  git fetch
  git checkout -b my-branch origin/master
  # ... commit changes
  git push origin my-branch
  

• Successfully built master branch is published as @doodle/geolocation

Creating a link

In order to check how your changes to geolocation will work with other project, link the geolocation package into another project:

• Run link command in the dist folder of the package you want to link

yarn link

• Run link command in the package folder you’d like to link

yarn link "@doodle/geolocation"

• In case of similar error - Can't resolve 'react-dom' in ... - add an alias to webpack.config file:

resolve: {
    alias: {
      'react-redux': path.resolve('./node_modules/react-redux'),
      'react-dom': path.resolve('./node_modules/react-dom'),
    },
  },

• After you're done run unlink command in the folder that was previously used to create a link:

yarn unlink

and:

yarn unlink "@doodle/geolocation"
yarn

to unlink a geolocation package that was symlinked during development in your project,

Publishing

After bumping version in package.json, publish new version:

gulp publish