change API usage

config.example.js

@@ -1,7 +1,6 @@
 // See readme for details
 exports.config = {
  mapsAPIKey: 'YOUR_KEY_HERE',
- auth: 'YOUR_FAMILY_SEARCH_AUTHORIZATION_HERE', 
- cookie: `YOUR_FAMILY_SEARCH_COOKIE_HERE`,
- rootPersonId: 'YOUR_FAMILY_SEARCH_PERSON_ID_HERE',
+ fsAppKey: 'YOUR_APP_KEY_HERE',
+ fsEnvironment: 'integration or production',
 }

package.json

@@ -11,12 +11,14 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
+ "es6-promisify": "^5.0.0",
+ "fs-js-lite": "^2.5.0",
  "request": "^2.83.0",
  "request-promise-native": "^1.0.5",
  "requests": "^0.2.2"
  },
  "devDependencies": {
- "babel-core": "^6.26.0",
+ "babel-core": "7.",
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.0",
  "html-loader": "^0.5.1",

readme.md

@@ -10,14 +10,12 @@ Create a file, called config.js, with these properties exported on a variable ca
 ### mapsAPIKey
 API key for the Google Maps Javscript API. You can get one [here](https://developers.google.com/maps/documentation/javascript/)
 
-### rootPersonId
-The family search person id of the person who's ancestors you want to get burial data for. This will probably be yourself, so you can see ancestors with burial sites near you.
+### fsAppKey
+API key for Family Search API. You can get one [here](https://www.familysearch.org/developers/).
 
-### auth
-Go to www.familysearch.org/tree/, and open the chrome developer tools. Go to the **network** tab, and click on **XHR** to only show XHR requests. Click on a random person on your tree to make their info card pop up. In the network tab, you should see a request to the `card` endpoint. Click on that request to show its details, and copy everything listed in the `authorization` property under **Request Headers**.
+### fsEnvironment
+Which Family Search environment to use. It can *production*, *beta*, or *integration*.
 
-### cookie
-Follow the steps above, and copy the `cookie` property under **Request Headers**.
 
 ## Run it
 First, run `npm install`, and then `npm run fetchData` to download all the ancestor's data from family search. Then, run `npm start` to start the web app, and go to a browser. It should automatically open the app in a new tab. 

src/familySearch.js

@@ -0,0 +1,71 @@
+import FamilySearch from 'fs-js-lite'
+import promisify from 'es6-promisify';
+
+const config = require('../config.js').config
+
+let fsGet = null
+
+export function authenticate() {
+ const fs = new FamilySearch({
+ environment: config.fsEnvironment,
+ appKey: config.fsAppKey,
+ redirectUri: `${window.location.origin}/authenticated`,
+ saveAccessToken: true,
+ requestInterval: 200
+ });
+ fsGet = promisify(fs.get, fs)
+
+ if (window.location.pathname === '/') {
+ fs.oauthRedirect()
+ } else if (window.location.pathname === '/authenticated') {
+ fs.oauthResponse()
+ window.location.href = '/map'
+ }
+}
+
+export function getAncestorInfo() {
+ return fsGet('/platform/users/current')
+ .then(res => fsGet(`/platform/tree/ancestry?person=${res.data.users[0].personId}&generations=8`))
+ .then(res => {
+ const personIds = res.data.persons.map(person => person.id)
+ const idLists = [], maxSize = 450;
+
+ while (personIds.length > 0) {
+ idLists.push(personIds.splice(0, maxSize));
+ }
+ const getDetailsPromises = idLists.map(idList => fsGet(`/platform/tree/persons?pids=${idList.join(',')}`))
+ return Promise.all(getDetailsPromises)
+ })
+ .then(results => {
+ const persons = [].concat(...results.map(res => res.data.persons))
+ const promises = []
+
+ const simplifiedPersons = persons.map(person => {
+ const burialInfo = person.facts.find(fact => fact.type.includes("Burial"))
+
+ const simplifiedPerson = {
+ name: person.display.name,
+ id: person.id,
+ gender: person.display.gender,
+ lifespan: person.display.lifespan,
+ burialDate: burialInfo && burialInfo.date && burialInfo.date.normalized[0].value,
+ }
+
+ const burialPlaceDesc = burialInfo && burialInfo.place && burialInfo.place.description
+ if (burialPlaceDesc) {
+ promises.push(
+ fsGet(`/platform/places/description/${burialInfo.place.description.slice(1)}`)
+ .then(res => {
+ const placeInfo = res.data.places[0]
+ simplifiedPerson.burialPlace = { lat: placeInfo.latitude, lng: placeInfo.longitude }
+ })
+ )
+ }
+
+ return simplifiedPerson
+ })
+
+ return Promise.all(promises)
+ .then(() => simplifiedPersons)
+ })
+}

src/main.js

@@ -1,30 +1,37 @@
-document.body.innerHTML = require('./map.html');
-const loadGoogleMapsAPI = require('load-google-maps-api');
-const people = require('./getData/peopleWithBurialInfo.json');
+import loadGoogleMapsAPI from 'load-google-maps-api'
+import { authenticate, getAncestorInfo } from './familySearch.js'
+
+document.body.innerHTML = `<div id="map" style="width: 100vw; height: 100vh"></div>`
+const people = []
 const apiKey = require('../config.js').mapsAPIKey;
 
-loadGoogleMapsAPI({
- key: apiKey
-}).then(googleMaps => {
- const map = new googleMaps.Map(document.getElementById('map'), {
- zoom: 3,
- center: { lat: 0, lng: 0 }
- });
 
- people.filter(p => p).forEach(person => {
- const marker = new googleMaps.Marker({
- position: person.burialPlace,
- map: map
+authenticate()
+getAncestorInfo()
+ .then(ancestors => {
+ people.push(...ancestors)
+ return loadGoogleMapsAPI({ key: apiKey })
+ })
+ .then(googleMaps => {
+ const map = new googleMaps.Map(document.getElementById('map'), {
+ zoom: 3,
+ center: { lat: 0, lng: 0 }
  });
 
- const personInfo = `<h1>${person.name}</h1>
+ people.filter(p => p).forEach(person => {
+ const marker = new googleMaps.Marker({
+ position: person.burialPlace,
+ map: map
+ });
+
+ const personInfo = `<h1>${person.name}</h1>
  <h2><em>${person.lifespan}</em></h2>
  <div>
  <a href="https://www.familysearch.org/tree/person/${person.id}/details">
  Family Search Link
  </a>
  </div>`;
- const infowindow = new googleMaps.InfoWindow({ content: personInfo });
- marker.addListener('click', () => infowindow.open(map, marker));
+ const infowindow = new googleMaps.InfoWindow({ content: personInfo });
+ marker.addListener('click', () => infowindow.open(map, marker));
+ });
  });
-});

webpack.config.js

@@ -9,6 +9,9 @@ module.exports = {
  },
  devServer: {
  contentBase: './dist',
+ historyApiFallback: {
+ index: 'index.html'
+ }
  },
  module: {
  rules: [