State: Use getHttpData() for geolocation data

In #22549 we added the `getHttpData()` abstraction
for simple network data needs.

In this patch we're moving the `geo` state subtree over to this
new abstraction and removing the old code it previously required.

This approach is build on the data-layer ideas and extends it
to store data outside of Redux.

client/components/language-picker/index.jsx

@@ -14,10 +14,9 @@ import { find, isString, noop } from 'lodash';
 /**
  * Internal dependencies
  */
-import { getGeoCountryShort } from 'state/geo/selectors';
-import QueryGeo from 'components/data/query-geo';
 import LanguagePickerModal from './modal';
 import QueryLanguageNames from 'components/data/query-language-names';
+import { requestGeoLocation } from 'state/data-layer/http-data/getters';
 import { getLanguageCodeLabels } from './utils';
 
 export class LanguagePicker extends PureComponent {
@@ -174,13 +173,12 @@ export class LanguagePicker extends PureComponent {
 					</div>
 				</div>
 				{ this.renderModal( language.langSlug ) }
-				<QueryGeo />
 				<QueryLanguageNames />
 			</div>
 		);
 	}
 }
 
-export default connect( state => ( {
-	countryCode: getGeoCountryShort( state ),
-} ) )( localize( LanguagePicker ) );
+export default connect( () => ( { countryCode: requestGeoLocation().data } ) )(
+	localize( LanguagePicker )
+);

client/lib/abtest/README.md

@@ -68,7 +68,7 @@ Also, the user's variation is saved in local storage. You can see this in Chrome
 
 Here's another example with country targeting:
 ```jsx
-const userCountryCode = getGeoCountryShort( state );
+const userCountryCode = requestGeoLocation().data;
 let buttonWording;
 
 if ( abtest( 'freeTrialButtonWordingForIndia', userCountryCode ) === 'startFreeTrial' ) {
@@ -161,7 +161,7 @@ You would need to update [config/default.json](https://github.com/Automattic/wp-
 "knownABTestKeys": [
    "freeTrialButtonWording"
  ]
- 
+
  "overrideABTests": [
   [ "freeTrialButtonWording_201502160", "startFreeTrial" ]
  ]

client/my-sites/checkout/checkout/checkout.jsx

@@ -32,7 +32,6 @@ import { managePurchase } from 'me/purchases/paths';
 import SubscriptionLengthPicker from 'blocks/subscription-length-picker';
 import QueryContactDetailsCache from 'components/data/query-contact-details-cache';
 import QueryStoredCards from 'components/data/query-stored-cards';
-import QueryGeo from 'components/data/query-geo';
 import QuerySitePlans from 'components/data/query-site-plans';
 import QueryPlans from 'components/data/query-plans';
 import SecurePaymentForm from './secure-payment-form';
@@ -610,7 +609,6 @@ export class Checkout extends React.Component {
 					<QueryProducts />
 					<QueryContactDetailsCache />
 					<QueryStoredCards />
-					<QueryGeo />
 
 					{ this.content() }
 				</div>

client/state/data-layer/http-data/getters.js

@@ -0,0 +1,38 @@
+/** @format */
+/**
+ * Internal dependencies
+ */
+import makeJsonSchemaParser from 'lib/make-json-schema-parser';
+import { http as rawHttp } from 'state/http/actions';
+import { requestHttpData } from 'state/data-layer/http-data/common';
+
+export const requestGeoLocation = () =>
+	requestHttpData(
+		'geo',
+		rawHttp( {
+			method: 'GET',
+			url: 'https://public-api.wordpress.com/geo/',
+		} ),
+		{
+			fromApi: makeJsonSchemaParser(
+				{
+					type: 'object',
+					properties: {
+						body: {
+							type: [ 'object', 'null' ],
+							properties: {
+								latitude: { type: 'string' },
+								longitude: { type: 'string' },
+								country_short: { type: 'string' },
+								country_long: { type: 'string' },
+								region: { type: 'string' },
+								city: { type: 'string' },
+							},
+						},
+					},
+				},
+				// we only use the short code currently
+				( { body: { country_short } } ) => [ [ 'geo', country_short ] ]
+			),
+		}
+	);

client/state/data-layer/http-data/index.js

@@ -105,8 +105,10 @@ const parseResponse = ( data, fromApi ) => {
 };
 
 const onSuccess = ( action, apiData ) => {
-	const fromApi = 'function' === typeof action.fromApi && action.fromApi();
-	const [ error, data ] = fromApi ? parseResponse( apiData, fromApi ) : [ undefined, [] ];
+	const [ error, data ] =
+		'function' === typeof action.fromApi
+			? parseResponse( apiData, action.fromApi )
+			: [ undefined, [] ];
 
 	if ( undefined !== error ) {
 		return onError( action, error );