Implement pingers page

[dmitrijs-balcers]

• Add new route to see pingers
• Show all pingers on one page
• Each pinger should fit the selected polygon by centering and zooming accordingly
• Disable editing on every pinger map in all pingers view
• Modify pinger creation page, to pinger update page
  • Have to implement update
• Make links to each individual pinger to allow modification
• Add links from all pingers page to individual modification page
• Add ability to delete pinger from all pingers page
  • To be investigated, seems like BE is not removing pinger
• Add ability to delete pinger from individual pinger page (? not sure if necessary) lets do this in another PR
• Mobile ready
• tests

to test use: http:https://localhost:3000/#/pingers/<id>,<unsubscribe_key>

#1

[MatissJanis]

💬 suggestion: ‏Would you mind just console.loging the error (and maybe sending to bugsnag too) instead of showing it in the UI. The users shouldn't see the error messages. So ideally just a friendly error message is enough.

[dmitrijs-balcers]

I'm not fluent in graphql and bugsnag, but it seems to me that this should already handle reporting to it:
https://github.com/dmitrijs-balcers/pinger-app/blob/1acc627fc140d14af5403eebe23f942c51bfa8fb/src/shared/apollo-client.ts#L10

[MatissJanis]

Overall LGTM. Just a few small nitpicks.

Plus: could you please take care of the eslint warnings?

WARNING in src/components/Form/Fields/RegionField/RegionField.tsx
  Line 43:10:  'center' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 44:10:  'zoom' is assigned a value but never used    @typescript-eslint/no-unused-vars

src/components/Form/Form.tsx
  Line 5:3:  'DropdownItemProps' is defined but never used  @typescript-eslint/no-unused-vars

src/components/RegionSelector/RegionSelector.tsx
  Line 35:6:  React Hook useCallback has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useCallback call and refer to those specific props inside useCallback  react-hooks/exhaustive-deps

src/pages/Pingers/Pingers.tsx
  Line 1:33:    'gql' is defined but never used                                                                                                                     @typescript-eslint/no-unused-vars
  Line 134:5:   React Hook useCallback has missing dependencies: 'pinger.id' and 'pinger.unsubscribe_key'. Either include them or remove the dependency array       react-hooks/exhaustive-deps
  Line 196:12:  React Hook React.useCallback has missing dependencies: 'onUnsubscribe' and 'unsubscribePinger'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

[dmitrijs-balcers]

Ahh Matiss, one moment I found a bug. With latest commit I broke this:

It is not updating map center and zoom, let me fix that

---

Fixed, all good now

[dmitrijs-balcers]

@MatissJanis this might have slipped through your notifications. PR I think is ready for you to check 🙏

[MatissJanis]

Ok, one final comment (apologies for not noticing this before):

we are missing a message/view if there are no pingers.

[dmitrijs-balcers]

@MatissJanis fixed and updated apollo/client functionality, otherwise I couldn't use maxUsageCount: 2, in tests, do you think that would be a problem? It didn't see that it would introduce any issues in communication with API.

[MatissJanis]

LGTM! Thanks for adding this!