feat: implement persisted country selection; deps for writing tests #94
Conversation
piperchester
changed the title
|
Hey Phil and Mike! Requested you as reviewers as I'm not sure who the best folks to reach out to are. Happy to elaborate on any of this! |
|
Thanks for taking a swing at this! Sorry for any confusion, but this is only meant to be a country selector. Everyone is still stuck seeing english, it's just going to display content for Brazil or Australia or Bolivia, it's all about restricting to content relevant to you. A basic filter, which is persisted. Localiztion is out of scope, as #14 will give people language. If somebody else wants to view the site in French when they live in Mongolia that should be fine. Do you think you could tweak that to make it clear? |
For sure! So is the intent to fold the functionality from the "Filter site for your country" bit into a single dropdown? Also good timing I think - guessing the site's undergoing some maintenance but getting a "website is pending domain owner verification" on https://protect.earth/. |
|
Right, the goal was to make the "Filter site for your country" work properly.
Does that make sense? The hosted URL is https://actions.protect.earth whilst we switch the main page over to Squarespace, which is surprisingly slow at making SSL certificates. 😓 |
| "editor.defaultFormatter": "esbenp.prettier-vscode", |
There was a problem hiding this comment.
Added this to automatically invoke prettier on save. This streamlines my DX but can definitely pull this out if undesired!
| // Get the country code. e.g., "BG" for "Bulgaria" | ||
| const [country] = useState(sessionStorage.getItem('country_pref')); | ||
|
|
||
| // Default to Great Britain | ||
| const countryName = Countries.fromAlpha2Code(country || 'GB').name; | ||
| const countryEmoji = Countries.fromAlpha2Code(country || 'GB').emoji; |
There was a problem hiding this comment.
Always look into the session storage first. Defaults to 'GB' which I could see being controversial. @ reviewers, wdyt?
There was a problem hiding this comment.
Cn we make the default be no country? The idea of a filter is that it reduces the overall data to a subset of more relevant information, but that is an optional feature which is only used when folks need it.
There was a problem hiding this comment.
Sure thing! Will fix this 👍. I'll continually update the "TODO" section in the PR description and toggle between ready / draft.
| /** | ||
| * When a country is selected, we store a | ||
| * temporary "country_pref" value in session storage | ||
| * that persists through reloads. This enables users to have | ||
| * continuity when refreshing, or returning to the site. | ||
| * | ||
| * We also bind the update to React's state, so that when a user re-selects | ||
| * an option, we trigger a state change to refresh the site. | ||
| */ | ||
| const updateCountry = (country) => { | ||
| setCountry(country); | ||
| sessionStorage.setItem('country_pref', country); | ||
| }; |
There was a problem hiding this comment.
This is the core piece where we write to session storage, and update React's state.
piperchester
changed the title
|
Took another stab at this @philsturgeon! Happy to make any desired changes. |
|
Getting a chance to revisit this @philsturgeon - apologies for the delays! Following the contrib guidelines, do you mind sharing env variables for the new Airtable setup? |
|
Sorry or the delays here too! Agh. This project is finally getting its new home, merged with climatechoice over here impactmakers/climatechoice#161 The airtable source and directory approach is simply being moved over there, so this will still need to be done, just once the dust has settled of that PR. Could you subscribe to the PR and when its done try and help with a country selector? |
|
Btw I'll try and get the read-only version of the API up so people dont need EVN vars soon. |
This implements #28. I use
window.sessionStorageto persist the selected country as well as React's state to trigger a client-side refresh when the user selects and clears the option.Open to any suggestions, big or small on any of this!
Also
.test.jsfile,__snapshots__and necessary Jest depsselected-itemclass to scope the white color for the countryRecentLinkItemTodo