Add ability to specify states

[jessex]

Is your feature request related to a problem? Please describe. The components will be embedded into an app where the page will be available and selectable for all 50 states. We need to ensure that our components can take in a property defining which state is being viewed and display data accordingly.

Describe the solution you'd like

1. The app that is going to include these components will have a URL parameter (e.g. something.com/justice_counts?state_code=US_NY). The outer layer that we do not control will perform the URL parameter parsing, and pass the state code (e.g. US_NY) down into our React components
2. Our components should take in that state code and use it to display the appropriate state name wherever a state name is shown (e.g. near the top of the page in the mocks) and use it to select data for the right state from the CSV file.
3. If a state code is passed in that we have no data for, we should render some sort of appropriate error state (to be determined)

Describe alternatives you've considered We could do the URL query param parsing ourselves in each React component, but that's a less than optimal separation of concerns and would be more prone to bugs and inconsistencies.

Additional context @hobuobi: see the solution section above. What do you want to do if the JC website passes us a state code for which we have no data?

[hobuobi]

For now, I think the "Not Available" treatment that's already scoped out should cover it (even if it means that there would be no data on the page at all).

We might try to coordinate this with CSG for a more intentional solution; if for whatever reason we weren't able to get any public data for a state, we could just have them make it impossible to select that state. I'll ask them and see if they'd prefer to do that or have us render something entirely different.

On Thu, Dec 3, 2020 at 10:39 AM Joshua Essex notifications@github.com wrote:

Is your feature request related to a problem? Please describe. The components will be embedded into an app where the page will be available and selectable for all 50 states. We need to ensure that our components can take in a property defining which state is being viewed and display data accordingly.

Describe the solution you'd like

1. The app that is going to include these components will have a URL parameter (e.g. something.com/justice_counts?state_code=US_NY). The outer layer that we do not control will perform the URL parameter parsing, and pass the state code (e.g. US_NY) down into our React components
2. Our components should take in that state code and use it to display the appropriate state name wherever a state name is shown (e.g. near the top of the page in the mocks) and use it to select data for the right state from the CSV file.
3. If a state code is passed in that we have no data for, we should render some sort of appropriate error state (to be determined)

Describe alternatives you've considered We could do the URL query param parsing ourselves in each React component, but that's a less than optimal separation of concerns and would be more prone to bugs and inconsistencies.

Additional context @hobuobi https://github.com/hobuobi: see the solution section above. What do you want to do if the JC website passes us a state code for which we have no data?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Recidiviz/justice-counts-components/issues/16, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABWN4DI4TYAG5UTRNPX35ATSS7LMRANCNFSM4UMMA4DQ .

[jessex]

Here are the state code to state name mappings which I presume will be required to support showing the state's name in copy. We specifically will want mappings for all states and also the District of Columbia.