add share and code buttons

Summary: Adds code and share buttons to the editor

Reviewed By: emilsjolander

Differential Revision: D6989097

fbshipit-source-id: 67478fe0810a0af43524f24458c520acf2999219

website/src/components/Playground/URLShortener.js

@@ -16,53 +16,75 @@ import './URLShortener.css';
 
 const API_KEY = 'AIzaSyCRvdtNY07SGUokChS8oA9EaYJafFL0zMI';
 
-export default class URLShortener extends Component<{}> {
+type State = {
+  shortURL: ?string,
+  loading: boolean,
+};
+
+export default class URLShortener extends Component<{}, State> {
   _ref: ?HTMLElement = null;
 
+  state = {
+    loading: false,
+    shortURL: null,
+  };
+
+  componentDidMount() {
+    window.addEventListener('hashchange', this.onHashChange);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('hashchange', this.onHashChange);
+  }
+
+  onHashChange = () => {
+    this.setState({shortURL: null});
+  };
+
   onClick = () => {
-    fetch(`https://www.googleapis.com/urlshortener/v1/url?key=${API_KEY}`, {
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
+    this.setState(
+      {
+        loading: true,
       },
-      body: JSON.stringify({
-        kind: 'urlshortener#url',
-        longUrl: window.location.href,
-      }),
-    })
-      .then(res => res.json())
-      .then(({id}) => {
-        notification.open({
-          message: 'Created short URL',
-          description: (
-            <Input
-              value={id}
-              autoFocus
-              ref={ref => {
-                if (ref) {
-                  ref.input.select();
-                }
-              }}
-            />
-          ),
-          placement: 'bottomLeft',
-        });
-      });
+      () => {
+        fetch(`https://www.googleapis.com/urlshortener/v1/url?key=${API_KEY}`, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            kind: 'urlshortener#url',
+            longUrl: window.location.href,
+          }),
+        })
+          .then(res => res.json())
+          .then(({id}) => this.setState({shortURL: id, loading: false}))
+          .catch(() => this.setState({shortURL: null, loading: false}));
+      },
+    );
   };
 
   render() {
-    return (
-      <Tooltip title="Copy URL">
-        <Button
-          className="URLShortener"
-          onClick={this.onClick}
-          icon="share-alt"
-          type="primary"
-          shape="circle"
-          size="large"
-        />
-      </Tooltip>
+    return this.state.shortURL ? (
+      <Input
+        value={this.state.shortURL}
+        autoFocus
+        ref={ref => {
+          if (ref) {
+            ref.input.select();
+          }
+        }}
+      />
+    ) : (
+      <Button
+        className="URLShortener"
+        onClick={this.onClick}
+        icon="share-alt"
+        disabled={this.state.loading}
+        type="primary">
+        Share URL
+      </Button>
     );
   }
 }