Shorten playground URL

Summary: Shorten URL using Google's URL shortner and display URL for copying.

Reviewed By: emilsjolander

Differential Revision: D6976973

fbshipit-source-id: cc791ffbf9e01a8dc2e0a40d05bce5022a3957bc

website/src/components/Playground/URLShortener.css

@@ -0,0 +1,7 @@
+.URLShortener {
+  position: absolute;
+  bottom: 30px;
+  left: 30px;
+  z-index: 4;
+  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.2);
+}

website/src/components/Playground/URLShortener.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2014-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ * @format
+ */
+
+import React, {Component} from 'react';
+import {Tooltip, notification, Button, Input} from 'antd';
+import './URLShortener.css';
+
+const API_KEY = 'AIzaSyCRvdtNY07SGUokChS8oA9EaYJafFL0zMI';
+
+export default class URLShortener extends Component<{}> {
+  _ref: ?HTMLElement = null;
+
+  onClick = () => {
+    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}) => {
+        notification.open({
+          message: 'Created short URL',
+          description: (
+            <Input
+              value={id}
+              autoFocus
+              ref={ref => {
+                if (ref) {
+                  ref.input.select();
+                }
+              }}
+            />
+          ),
+          placement: 'bottomLeft',
+        });
+      });
+  };
+
+  render() {
+    return (
+      <Tooltip title="Copy URL">
+        <Button
+          className="URLShortener"
+          onClick={this.onClick}
+          icon="share-alt"
+          type="primary"
+          shape="circle"
+          size="large"
+        />
+      </Tooltip>
+    );
+  }
+}

website/src/components/Playground/index.js

@@ -17,7 +17,7 @@ import Editor from './Editor';
 import {List, setIn} from 'immutable';
 import PositionRecord from './PositionRecord';
 import LayoutRecord from './LayoutRecord';
-// import Toolbar from './Toolbar';
+import URLShortener from './URLShortener';
 import Code from './Code';
 import Sidebar from './Sidebar';
 import type {LayoutRecordT} from './LayoutRecord';
@@ -301,6 +301,7 @@ export default class Playground extends Component<Props, State> {
             direction={this.state.direction}
           /> */}
         </Sidebar>
+        {this.props.persist && <URLShortener />}
       </div>
     );