DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

use search instead of hash

Browse Source 
Summary:
The state of the playground was stores in a hash appended to the URL. However, tinyURL ignores the hash part of the URL. For this reason, we are using the search part of the URL instead.

Before: `yogalayout.com/playground#ey...`
After: `yogalayout.com/playground?ey...`

Reviewed By: davidaurelio

Differential Revision: D14722638

fbshipit-source-id: ed135f60269e9136bb850c4c661bd88f8ee19323
This commit is contained in:
Daniel Büchele
2019-04-02 04:11:22 -07:00
committed by Facebook Github Bot
parent 74ce5afd9e
commit bfc6319daa
2 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
website/src/components/Playground/URLShortener.js
View File

@@ -28,11 +28,11 @@ export default class URLShortener extends Component<{}, State> {
};
componentDidMount() {
window.addEventListener('hashchange', this.onHashChange);
window.addEventListener('popstate', this.onHashChange);
}
componentWillUnmount() {
window.removeEventListener('hashchange', this.onHashChange);
window.removeEventListener('popstate', this.onHashChange);
}
onHashChange = () => {

21
website/src/components/Playground/index.js
View File

@@ -87,12 +87,18 @@ export default class Playground extends Component<Props, State> {
document.addEventListener('keydown', this.onKeyDown);
// rehydrate
if (window.location.hash && window.location.hash.length > 1) {
if (window.location.search && window.location.search.length > 1) {
try {
const restoredState = JSON.parse(atob(window.location.hash.substr(1)));
const restoredState = JSON.parse(
atob(window.location.search.substr(1)),
);
this.setState({layoutDefinition: this.rehydrate(restoredState)});
} catch (e) {
window.location.hash = '';
window.history.replaceState(
{},
null,
window.location.origin + window.location.pathname,
);
}
}
}
@@ -165,7 +171,14 @@ export default class Playground extends Component<Props, State> {
});
if (this.props.persist) {
window.location.hash = this.getHash(layoutDefinition);
window.history.replaceState(
{},
null,
window.location.origin +
window.location.pathname +
'?' +
this.getHash(layoutDefinition),
);
}
}