Steem Compare - share via custom url

Steem Compare ⬅️

Steem Compare is a tool I've been working on that allows you to compare multiple Steem user accounts in one place. On the last update I added ranking to allow you to sort your searches by various metrics. I wanted to share a result with a friend and suddnly realised I needed to say "Go to Steem-Compare, here's the link and enter these names" I thought it makes more sense to be able to just send the link by itself and automatically show the same search I had.

Details

The aim of this update was to add the ability to set and read query strings of searched users. These query strings would allow sharing of search results directly as a link. As a bonus I decided to add the share button that auto copies the url. You can now see in the addressbar whever searching the query paramaters will automatticaly update. The history state stores each search to allow a user to use the default back behaviour to navigate to previous searches.

After finish the code for this PR I also realised I should seperate some of the Javascript into modules. Now seperated into modules/steemActions.js, modules/uiActions.js, modules/util.js

Components

I've done a full refactor of the Javascript after updating the features in this PR. at ~300 lines of JS it was getting a little messy so pulled the project into one main file with three modules.

The main components for this PR was ensuring the URL state was correct after each add/remove or re-searching for users.

Related issues

I struggled to get a good native 'copy to clipboard' and in the end opted for clipboard.js, while my custom implementation did work it only seemed to work once, I couldn't seem to reset state for multiple uses. At 3kb it's not a big deal to include.

While refacoting the Javascript into modules there were a couple minor issues. I had forgot that imported varibles are view-only, when working with varibles from a module you need to createa function that updates that varible and also export that function, then use the function toupdate the varible rather than trying to update it directly form outside the module. Example of this here

Steem Compare is comming along nicely, if you have any ideas you think might make this more useful please let me know. ✌

---

Posted on Utopian.io - Rewarding Open Source Contributors

---