892913a69d
Summary: Adds tracking for: - short URL created - value in interactive documentation changed Reviewed By: priteshrnandgaonkar Differential Revision: D7123493 fbshipit-source-id: 2fc19fa6c9b5614043af508a82e898b3ccefcbaa
97 lines
2.1 KiB
JavaScript
97 lines
2.1 KiB
JavaScript
/**
|
|
* Copyright (c) 2014-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
* @format
|
|
*/
|
|
|
|
import React, {Component} from 'react';
|
|
import {Tooltip, notification, Button, Input} from 'antd';
|
|
import './URLShortener.css';
|
|
|
|
const API_KEY = 'AIzaSyCRvdtNY07SGUokChS8oA9EaYJafFL0zMI';
|
|
|
|
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 = () => {
|
|
this.setState(
|
|
{
|
|
loading: true,
|
|
},
|
|
() => {
|
|
if (window.ga) {
|
|
window.ga('send', {
|
|
hitType: 'event',
|
|
eventCategory: 'URLShortener',
|
|
eventAction: 'created'
|
|
});
|
|
}
|
|
|
|
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 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>
|
|
);
|
|
}
|
|
}
|