Closed henrygoodman closed 1 year ago
Added button that allows user to Share URL, which copies the current URL and allows the state to be loadable in a new tab/window
Share URL
The user can also manually share the URL from the browser URL bar, as state is encoded in URL as per below.
Added state serialization
state
http://localhost:3000/?state=N4IgLgpgHmCSB2AHArmEAuEAFATgewCsIBjMAAgHcBDAZzICNaIATMveMsACwjIDMAlvCrxiAqgBsyEAG6TkVMAPZs+nHmQDCeRIir0IEiVTIB1IawBiVHAFsyuQiTAAaMonyI8NFgwCeZADieBLMFBZkAILINGA4kuIAdGQA0hABQjQCAOZcYHR8+PbcvB5OpGQ2vCWV9AISAmABYHjSchIKkOq8gsKi4lJeWUoqeGomxHi2evB+biKsLWQCzBDwSnzNGjgCNADWdGOV7vhEFVQ8VKxHSrbVrauQdkK8FDwlOMvkNFx4yKEMXjEGw7Xx-MDJLAQHB8PDPeDZMg0ZDELiVDiyeSKZQcKjEYjIeKQCQZOgCaZwsAiVyVApUepCRFLR7Q2wvY5lM75fhCERiSRkGTiOoNJpkYEcCQQK6cVomCTeQ5qHCyNbIHpw470GIvGhktRlQTcqpkeB4ci2K68Kh8J4c-DMFHkLi0QFrMjGZCiHjMZIIMjZNbQyRuWD8P7wRYu8hh2I4ZDZbJSxatL2rHCxBZIxAkASCYjSSZmtkFp62OhZovECCIfJuZGo2lkVYeXPYlQGRni9hZdO+V0mIaNAQyXjtdWUHgY8fYhFkAByEHIkT1S5ofvFhJV6xJlDheybJgAymMwNQVWQAKIIl7Q9GsPQ4cg3DTAlV3o7H0-n3hrbK3z5wiMZZRA6VY2ixEYOCOLxIHWAYTnKY1I2bJdWSELs826AITSFfQpVlbt4F7aFkgAFS4XZZQBGJ1EUbognwPUyBVUd4AnQN4GDSBWHoLZSlOZxKFdIsSPiehd1sOFeHJLwn2pOjcVmNgPkFGxhSlcjKLoCVASRCB3T4iCOlnRE3iXHhPkHB0nTIO4lwYlUAEdkAEFU7nWJUGLWVgYmheY6AoQwpFdFU8UoucaipHBAwtGw9gcz8kW-E0ykdUg-Q4Zg8C7Gg8DcILxREJEqC2ejuCozkhJdOgDHdTETJ4kDjiLbJ4zWOL4C4z4lm4ei3gERsqOgHNSF8IQGKLSAYFUdQqOReguWSAAhAJoCoNl4C7GoyiGXw8o6KD72Mzpcqma1BQ060JCeYQlFHAreBZeFfD68gds8bxfBPQ6cTIAAKSIbuhO6R14SIAEo93+XjeCki8DC4-MEKWN8cACcFFLYQkVMsqJgZwUHR0SEAXBAIQUDAAA1eQIAwbBBIqI9kFsS10bIABZekOF6ZhGS8j6kLIAB5HGqoqahaqYa4OBqXo+QQhrTtGNQam0XR9GCkxzBQ6w7AcRmaV2r7eICYJQnCFDojjBIqBWtaoA2jDIo0Y2fFYA7UD+rMldM5K7mOPCJOu27sQeygnrQl6o3K13Pvd5LfpUQGCaJ8GoYoP4AQMOzpMBJHBpR1o0Yx1Asb+T5zTxoHQ-uiAtKoyXm3YaouHwBM0XWzbto0IOGTFCxBsUOEvPoKvKlTsOIHXMgjxIdhmBJR6A258biJyPIQN6jRp9uRRfGBH5+AVChwx6uOdBNxCuTYUdPkaOgGj4JdyQgNwjOe7uXd4NrFRY1V2LWhQpMWINA3C+yUHOEQGMcxEi7Hie6w5p7HXlv0KBpARxIJnhRKimQN7OkMDmXydBmRR02q3UopVGDEAPLA5QzA3Cal+KfBUc5GjQwBFSBKZ8GLi3eq0AwkwA6GkaPheuZBLC8iMHMCOK8XisDwbkcgE1P7OyZNsXYB4jgly7JjQWe0HyG3rKNPMQ9pH+FQmWNRk5BpojkDsMRJDozLGmAghi84sBU0qBeKSsR9LrzrgDAQiR64FUoo2exV0wGTndKiEQgYGEBjBgxYwMVd7ihdAiGSHAPFUwhg3EhIRiF0XehoQITE6CsTVD-IMRJfBGUFjfJuokVjBgkgEeGMkKTyXWFjaBuM7yRLEfMFCb0vhIl+DDPSsICQJxUJaKA5IBAAC9GSQkNjySM-NmpTWgM+VW2kkTIEWkJUwU4iJiR7kCdg019lzToAtLky9dItPTNmXM+ZJC7jlryfoAoIF-U-BiG8XFoRdj4SMqMAkhY7H2LSHweoPIQjIP6EwbwQi7CUAWHwxE36TRuXs2aNRHlCSoksCBrx3h42Kn+AC4KNk-CzrDIqOBQTXDLoUKYxxUH8ikJmSMXghDIoAEoQGyDYPmc4K7vLEPma+zg3ATQBd-LQOg9AGCMNrCIetbDPOKjQUqJTZEulHJUfEhJ967lUVxVg5lVKNKEkBKQOceUDF3EHAi-0jLKsRLvck+9WCHzRHwE+FZgFTEfNtVoHqQ4gynjQCGkLjVUFNZIPK8Lp4J1hQcfgRQGDjxMC5akojAlZiLaKKel0IAUEFb0iacI3mkKsVxZYBzeCIwgMjAU2bDioCChvBijwdhIu7Zome-pspnWXiayOzbXrOImmi34DRYiDX8T4Nwas1Wa01WYbVNh7B8ImUyvSaMBBgg5XmkwrqBT8uYLW5FAAJFNXYhH3HuURYgHQsjsD1RwA1ZVSmVQ2TVN005IJrxauwNq6pemWi6nebe-VwlomGlAUaTUJo1F2TNF881jlLVSOkECWQlGHHoFSeRAB+FFm5WUdV3JnHAB4ByzxShea8-5QU4CTY+O52GqgfnGGx20P4rwgoMoBeoUghBfuQOBAFKt3Dmg6ghPhYbWDWswm2nCF4Y2EVeXeRd2oshcWYjh5FUIYRwk2oiBsaIaUziOniAkdTdy4O6VSdYAV+D0gaJFB4ZD2TWSQgUX5vLLr6H7gEXSUoZRLHlH-I4VTAE8JMCZ3U+pEJGgrBeM0cVwI2jtCF9KzpXR1UlFQL0qIWCZU4KyAWr4CW4YOfhk5pB5hkAShkdeSijVhhnXZK0RrdI5yFWKuptrzlMb2PAisImzwmk4wBZYhSTr70cmO2aIWb5NvQi2h+myFYCj7qKPwBSiocBzq6LI0wCKuh9TE1SJXbJOrsgZUpvBnKuXch1Rrv4UJ+R44ebKtZAXCbyqJ1KNlzgoTCqiK5nAbCxSG8xhylUbAbQjMo2WTX1iEqSieKHHGJNgoRPbIqEgCTGEgYiC40priq1fk9vGNQVTIhutt+VEtpOIXShdVYDQ75iKNW9lUkw77eVJzsOcIDuSozCl0Roiq6BcWrHqGwPXLH7a7Ha1nF8b6MqmTnQzKpWD0S+ckUVIbnB-TOfRQbYY4uEzADR-0ZYvKwLysIKQKobcYN-f7Xg3WSP4LoANlNP9V6sE5cUA3QkTQ1Ci2dwiFKGI3sGN4YcSmJgRv6VmPyRq9svQYqdxoOFgFUD0GIMUJQAjLpTCy9mmMTA0BMXKiFx0litPgpsTb+wvI7YT5cRnnBmfF-ISzoz3xJnZyBCCc97LkVHnb2YpetGvfsC+QEJuIvyVQAgHdvM9e8Cn3JU5ihR2-mZ+GODoIRTLasGtnEW278HZOy2t-NyUQuoKCkKKuSfhSnanDbPKAOQeYEFoDMLSaebJPmSAkeFeU1cA3rTeIVVoH5PoCLIcI6F8a5VxWYJNBaHwFyBjHrbeCAb-ZPcvY6YEavGg1GEEUuT7b-N2XwPhZII8JZVJdfCPU1aAQ-RAJ+RfMgZhVPVdS0LoNnLbJKNgwxIWRdMgIteCKkUtFCctEtZJeDbqN-cURXeBMgYVTRTmRQHYKAVPC-U0GzStDtLtX3LbKgcVTIcgIdV+dYUdAfBgaWNgXHSg++VxWHeQxgEULBQiPAc1YHLMIyWBWEeEOnWeNYW-IUMUSIH3PwLIaJcyFUIyMMJwm1UPPrdAmxCJdSRxI1WI+wCmMuIomoXJAGRccgXAWA3pGmDoCAKGPgarZzC8GoXxb4RI4cU1VGTJQMIJEJRIMJWxNSBxYOQKc5OJLJU2BiA1AONmLjPQ6UKQjQVJQMPxBY0YrDDQTo0QXA1ASmfJMwZxJuaUGgAIWI97GjCiaEV4Z4mVUxAsIRLwLiTySgRoCKZYgjISMZMMWENMaQWgc9c+YqKuaEGeFfD5NfGREEiMQNSQEA2nLwrIAsCA4eDMXNLlXPAgvwQATAI6BUj2IBQADKRCJrUKFv8M9lNb9A8swJpOJgwJB5hdASQuwKj-hXQsjL8qjyAhlZjvFeAbZ8FYjzxG9aTEgwwKp4ADw+Co95ECi0D1hWhbAAg9gzQKBkxRisx9hpNok28ETgRzFgT9JD9CJBsaVaBmhmctM5w3hY5eBwRKYudjiA8OA7gRBokswxChTpiolLtRDI8tQgw7C2BPhXCR0pBO1n4KgVAah3Sy4kovSoINxn5DAmxuA-hcgBlPgcwdACJdJbTmw8x8x-h3pmdHtr0ui-p60cBG1As50GIDA-FqBmhNSqBFk2QfB2zIzC4BRUz+NnEMycRkgVx0RpBHY7s8VzJwNGpEcAADTQLcDqQw9sFcrnT46BMJZ4oyQqNPNndsIlHgb-VzbccgWgHweXDAi8z4K8zchoagpQaeRVZRHSZ3QiAOMZeUZHO8Z83pOBVoKiTpVCLIcSKUHzCqOgX04ifFIksM+CvOW8tcbsVxM3QiEob-V8kI98mee3cgJuPmPgKszne4u4GjM5eocU86TCr4v7COC8CUpRKUiVX8vFZEsE6seSCaKsGsbkMiiioAtqWgRAOrNk+IDk2jUE0ZZxWMOIBMJMV6VMSMWErzD2VfAseeYsNdD3Wg9gasWsE0lEBzOgFscXcQI6TsWXHsVpbCwcLPQJccSleqJzLsBolFUQBi-6V0LUsgNMTShYXRNQKytsI6JuMZdhKiEwVYYgMKAciaPwaVbylcO8hNKciQPKNwJ0xEYWWBP2SIDBZI89DTCRcLLsEqxBQi4SSyyswaas34vMsuE1Awv3Z40QPFdNW7IQ4-K5AcyAsVOEcq+qwUaEAINXTNTXHhaVX+ZASSsgHBHSYqHOAQo-QQepE-U+Qqc09E3wSRLA6q0qrBHzQqPq3cTMJqGKkik9E3CNWFMEA0UqLsahFjDgDCJQAUCqZsgAWj4wCAVGKn-DYh4WMBQhQBwDiR8A3AVIPDGS4hmluG4o4VYAVDwBYwtDzk6u3GrHhRyHgCRQqrCgkCYwBC7iEOQTwKGuMqErWzyOOFWBrDvGCozC0rCsnFdICCNwBFkzAiAWuDZAhFJhABxRRvWDIj2SwGMGrAb2hHplFsP3NBxEkClpgBlrxAgHlpwEVrJm6yY2YBoAwFAD4QwAACYABGMmDPDAS2gABjJlpIwAAE4yYfUMAAAOMmHtL2smOQjAAAdjJkUTyCDqdqC0-2yHDpAAsxjpFKlGNvQAADYABfd2qSKCAAGR3UVtTqAA
Checkout the PR and see how it works
@gracebilliris
Added more state encodings
Updated share buttons styling
Added button that allows user to
Share URL
, which copies the current URL and allows the state to be loadable in a new tab/windowThe user can also manually share the URL from the browser URL bar, as state is encoded in URL as per below.
Added state serialization
state
param, deserialize it and populate the state values from the parsed value.