Playground: Fix client-side errors in the playground frontend

[psiemens]

👋   If you are interested in working on this issue, please check out the Getting Started guide on HackerEarth!

Description (Problem Statement)

The Flow Playground frontend app throws a number of console errors in product. Those errors shouldn't be there.

Each error is documented in an issue:

• A 'uncaught' warning the the browser console flow-playground#163
• Location Provider Error flow-playground#164
• React state update is attempted on unmounted component flow-playground#165
• Multiple Keys error throws in browser console flow-playground#166

Your task is to eliminate these errors and, when applicable, refactor the code to avoid similar errors in the future.

Experience Required

• Familiarity with JavaScript
• Familiarity with React

Milestone Requirements

1. Eliminate each error referenced in the issues above. When applicable, refactor the code to avoid similar errors in the future.

Other Requirements

Code standards or guidelines

• Follow the general contribution guidelines.

Judging Criteria

• For all projects, technical & high-level judging criteria apply.

Resources

• General Resource Guide
• Flow Playground repository

[hichana]

Hello @psiemens I'd like to work on this issue.

My GH profile: https://github.com/hichana

My hacker earth team name is here: https://www.hackerearth.com/challenges/hackathon/flip-fest/dashboard/ae2cb67/team/

[psiemens]

Sounds good, thanks @hichana!

[tigco]

hey @hichana , are you still working on this?

[hichana]

Hi @tigco , I am definitely still working on this. Actually, my "0.5" PR resolves the issues completely, so in that sense it is complete. I have, however, investigating further optimizations which I described in my PR here: #59

[wander1ust]

Yup, I can confirm. Minor code deletions will eliminate the errors thrown. First three errors are related to React router Redirect + componentDidCatch & last error is due to non-unique, duplicate key prop. I don't think any refactoring is needed, so I'm guessing this issue will be closed soon.

[hichana]

Hi @psiemens I read that approval is needed for each of our milestones in order to be considered a solution to a FLIP issue, so I'm posting my two PRs to the flip-fest repo here. Together they comprise my solution to this FLIP issue, but I made it in such a way that the first or the second can be ultimately used. I'm open to any feedback you might have as well. Thanks

#59
#77

[MaxStalker]

Congrats, @hichana on finishing work for this issue! 🎉
Much appreciated 🙇