Automattic / wp-api-console

WordPress (.com and .org) API Console written in React/Redux
GNU General Public License v2.0
70 stars 20 forks source link

Add ability to share urls. #107

Open yansern opened 1 year ago

yansern commented 1 year ago

Update: I didn't realize there was another PR working on a similar feature here until I submitted this PR. https://github.com/Automattic/wp-api-console/pull/106

Update 2: I looked into the other PR and I would say the approach taken in this PR is more feature complete. This PR supports restoring the endpoint selected from suggestion dropdown, and the path values of those selected endpoint and also the query params from filled from the UI.

Description

This PR generates a shareable URL and pushes the browser history state when the "Run Endpoint" button is clicked, allowing the URL to be copied from the address bar and shared to colleagues.

In order to achieve this, I created a redux middleware called router that would encode and decode relevant states to and from URLs.

Test Instructions

  1. You can test this with the following urls and you can see the values prefilled:

  2. Test entering the URLs signed-out, and then sign-in. After signing-in, you should be redirected back to the same url with all the params intact.

Additional notes

Screenshots

image image
valterlorran commented 1 year ago

I have yet to test it, but it looks great! It's way simpler than my PR. 👍

yansern commented 1 year ago

@TimBroddin discovered that the existing implementation of state persistence needsStoring = nextState === state; is most likely incorrect, as it should be needsStoring = nextState !== state;.

At the same time, I'd like to ensure that loading initial state from param also takes in considering of existing data in local storage, which may already have endpoints data loaded, which will shave off a couple of seconds on repeat pageload.

Will continue refining this PR. We're in no rush.