From bfc6319daa4695e0d0cb4c21c0d4ab1357231061 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Tue, 2 Apr 2019 04:11:22 -0700
Subject: [PATCH] use search instead of hash

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
---
 .../src/components/Playground/URLShortener.js |  4 ++--
 website/src/components/Playground/index.js    | 21 +++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/website/src/components/Playground/URLShortener.js b/website/src/components/Playground/URLShortener.js
index 2e0194a1..4dc99190 100644
--- a/website/src/components/Playground/URLShortener.js
+++ b/website/src/components/Playground/URLShortener.js
@@ -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 = () => {
diff --git a/website/src/components/Playground/index.js b/website/src/components/Playground/index.js
index 327ca962..5a39f236 100644
--- a/website/src/components/Playground/index.js
+++ b/website/src/components/Playground/index.js
@@ -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),
+      );
     }
   }