Code submission for FLIP fest 'Playground: Fix client-side errors in the playground frontend #58' - Milestone 1

[hichana]

Closes: #163 #164 #165 #166

Description

This PR includes work done in PR #167. #167 resolves the main issues that were causing the cascade of console errors. As I wrote in that PR, and as encouraged in the FLIP issue, I refactored the code in order to help avoid similar issues in the future. This refactor was done as a part of FLIP fest issue #58. My basic thinking for this refactor was:

• There are 5 entries are added into the browser's history stack upon loading of the playground (as explained in my 0.5 submission.
• I saw a way to remove all of the redirects that were causing the multiple entries by moving the logic for fully loading the playground outside of the project provider (React Context API), which removes unnecessary redirects and helps reduce similar issues in the future. Appropriate data is then passed to the project provider.
• By reducing the number of redirects, the app is much more performant and results in a better experience for users.

---

For contributor use:

• [n/a ] Targeted PR against correct branch (see CONTRIBUTING.md)
• [x ] Linked to Github issue with discussion and accepted design OR link to spec that describes this work.
• [x ] Code follows the standards mentioned here.
• [n/a ] Updated relevant documentation
• [x ] Re-reviewed Files changed in the Github PR explorer
• Added appropriate labels

[vercel]

@hichana is attempting to deploy a commit to the Flow Team on Vercel.

A member of the Team first needs to authorize it.

[hichana]

Thanks for the feedback @MaxStalker. I made the revisions:

• removed the console.log
• added an exported constant for the local project id in 'url.ts', which is the same place where another helper is exported ('scriptTypes').
• made all places where the local project id is consumed import the local project id
• changed the other local ids in projectDefault.ts to also be lowercase, but did not add them to 'url.ts' as they are only used in the projectDefault.ts file

For now I've marked the comments you left in this thread as 'resolved', but please let me know if these changes don't satisfy your comments in some way and I'll be happy to revise again.

[MaxStalker]

Looking good! ⭐

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/onflow/flow-playground/6y5ZUUxxkRHRvHteAeKu5kxQSNxB
✅ Preview: https://flow-playground-git-fork-hichana-flip-58-submissi-27328b-onflow.vercel.app