Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

State: Use getHttpData() for geolocation data #24631

Merged
merged 7 commits into from
May 8, 2018
Merged

State: Use getHttpData() for geolocation data #24631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
688510a
State: Use getHttpData() for geolocation data
dmsnell May 2, 2018
46d2e84
Make `fromApi` lazy and skip parser creation
dmsnell May 3, 2018
9df67f6
Fix merge conflict
dmsnell May 6, 2018
d78abea
Update getter for thunk `fromApi`
dmsnell May 6, 2018
4f36209
Update selector test code
dmsnell May 6, 2018
16c766c
Rename and move files around
dmsnell May 8, 2018
f1f547d
Fix bug in getter
dmsnell May 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 0 additions & 18 deletions client/components/data/query-geo/README.md
View file
Open in desktop

This file was deleted.

36 changes: 0 additions & 36 deletions client/components/data/query-geo/index.jsx
View file
Open in desktop

This file was deleted.

10 changes: 4 additions & 6 deletions client/components/language-picker/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-getters';
import { getLanguageCodeLabels } from './utils';

export class LanguagePicker extends PureComponent {
Expand Down Expand Up @@ -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 } ) )(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm thinking loudly here: a mapStateToProps function that doesn't use state and yet it works looks strange and suspicious. I didn't trust it until I understood the HTTP_DATA_TICK trick 😄

There's an opportunity for a more friendly API that uses the popular "render prop" approach:

<WithHttpData store="geo">
  { geo => <LanguagePicker countryCode="geo" /> }
</WithHttpData>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

on a similar note: if we made HttpData a Context Provider using React 16.3 APIs then we could avoid the data tick and still have the flexibility for either HoCs or render props.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah I'm open to update later but I don't like the "render prop" approach because it seems to add a lot of code when we already have a place to put things like this that's normal. connect() is Redux-oriented but it's also serving a very specific purpose for us: what are the data objects that we need, what are the side-effecting functions that we need?

To me it makes sense to add into mapStateToProps because that's how I think many of us think about what role it's fulfilling; that or create a custom connect() wrapper but in my explorations there I've found it gets much more complicated that getHttpData() needs to be.

localize( LanguagePicker )
);
4 changes: 2 additions & 2 deletions client/lib/abtest/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) {
Expand Down Expand Up @@ -161,7 +161,7 @@ You would need to update [config/default.json](https://github.com/Automattic/wp-
"knownABTestKeys": [
"freeTrialButtonWording"
]

"overrideABTests": [
[ "freeTrialButtonWording_201502160", "startFreeTrial" ]
]
Expand Down
2 changes: 0 additions & 2 deletions client/my-sites/checkout/checkout/checkout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -610,7 +609,6 @@ export class Checkout extends React.Component {
<QueryProducts />
<QueryContactDetailsCache />
<QueryStoredCards />
<QueryGeo />

{ this.content() }
</div>
Expand Down
16 changes: 16 additions & 0 deletions client/state/data-getters/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/** @format */
/**
* Internal dependencies
*/
import { http as rawHttp } from 'state/http/actions';
import { requestHttpData } from 'state/data-layer/http-data';

export const requestGeoLocation = () =>
requestHttpData(
'geo',
rawHttp( {
method: 'GET',
url: 'https://public-api.wordpress.com/geo/',
} ),
{ fromApi: () => ( { body: { country_short } } ) => [ [ 'geo', country_short ] ] }
);
0 client/state/data-layer/http-data/index.js → client/state/data-layer/http-data.js
View file
Open in desktop
File renamed without changes.
57 changes: 0 additions & 57 deletions client/state/geo/actions.js
View file
Open in desktop

This file was deleted.

49 changes: 0 additions & 49 deletions client/state/geo/reducer.js
View file
Open in desktop

This file was deleted.

12 changes: 0 additions & 12 deletions client/state/geo/schema.js
View file
Open in desktop

This file was deleted.

47 changes: 0 additions & 47 deletions client/state/geo/selectors.js
View file
Open in desktop

This file was deleted.

Loading