395 datepicker data

[gsehrlich]

Checklist

• [x] Add description
• [x] Reference the open issue that the pull request addresses
• [x] Pass code quality checks
  • spin up docker docker-compose up -d --build
  • enter api container docker-compose exec api /bin/bash
  • run api tests make validate
  • exit container ctrl/command+D or exit
  • enter web container docker-compose exec web /bin/sh
  • run front-end tests npm run test or npx jest
  • lint npm run lint-fix
  • exit container as above
• [x] Request code review
  • Please allow 36 hours from opening a pull request before merging a pull request- even if it has already received an approving review.
• [x] Address comments on code and resolve requested changes
• [x] Merge own code

Description

Issue: #395

Brief description of solution I'm an experienced developer of individual Python code for scientific applications, but I'm totally new to web development, Javascript, and collaborating on a codebase. Please feel free to offer any guidance, and thanks for bearing with me!

When the page loads, the map menu will now fetch data from the API to get a list of dates with at least one collection. The date is then automatically set to the most recent date with data. In the date picker, the dates with data are highlighted in blue and the dates without data are disabled so that they cannot be clicked.

• In /web/src/components/map:
  • Wrote new api call in utils.js and refactored similar calls
  • Added effect hook in index.js
  • Updated menu.js to use the data
  • Changed style in menu.css
  • Wrote tests for new behavior in utils.test.js and menu.test.js
• In api/woeip/apps/air_quality/:
  • Handled new api call in views.py
  • Wrote tests for new behavior in tests/test_api.py

Questions:

• [x] In views.py, is it okay to use queryset.distinct? All that's need is a list of distinct dates, but that method includes the unneeded columns of the table too (which isn't very much data). When I tried using queryset.values_list to omit those columns, the serializer threw an error.
• [x] I'm not sure how to test the desired behavior of automatically setting the date. That code is in the new effect hook in index.js.
• [x] In index.js, the linter complained that I check location?.state?.date but have no corresponding state variable in the dependency array, so I added location to it. Is that necessary? It shouldn't change after the page loads, right?
• [x] In menu.test.js, the linter complained that I wasn't using the data from July 19th that I added to correspond to the new date I added to setOfDates. I pacified it by putting all the collections data in a single object. Is there a better way of handling that? Should I omit the data entirely? It's true that it's unneeded, but it feels dangerous to omit it when setOfDates has that date.

[TangoYankee]

In views.py, is it okay to use queryset.distinct?

For a short term solution, I'm not too concerned. It does bloat the http response. It also pollutes the browser application memory. But, we only make the request once on render. Also, we immediately discard the bloat and the garbage collector should get to it before it causes problems. In the long term, I think there should be a way to access start dates directly. I'll write more about that on the original issue.

I'm not sure how to test the desired behavior of automatically setting the date

Yeah, this is pretty complex. As a rough outline, I would make a mock request that returns a collection on a specific date. Await that response. Then, the data picker should display the start date of that mocked collection.

In index.js, the linter complained that I check location?.state?.date

React dependency arrays can be a nightmare. Your misgiving are warranted. It may cause issues in the future, if the code gets a feature that updates the location for the component. But for now, it's fine the way it is.

In menu.test.js, the linter complained that I wasn't using the data from July 19th

I think the law of diminishing returns is kicking in. It's probably not worth worrying much more about. Perhaps leave a comment providing background info for the next developer?

[gsehrlich]

In views.py, is it okay to use queryset.distinct?

I'll write more about that on the original issue.

Thanks. This was what originally thinking we should do, but I agree that it's a longer-term issue.

I'm not sure how to test the desired behavior of automatically setting the date

Yeah, this is pretty complex. As a rough outline, I would make a mock request that returns a collection on a specific date. Await that response. Then, the data picker should display the start date of that mocked collection.

This is beyond my capacity right now, so I think I'll leave this for a future update. Should I open a new issue for this?