Move shortener outside CopyToClipboard and move ajax call to common.js

apache · Oct 12, 2016 · ad662cc · ad662cc
1 parent 0373f1d
commit ad662cc
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 33 deletions.
diff --git a/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx b/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import CopyToClipboard from '../../components/CopyToClipboard';
+import { getShortUrl } from '../../../utils/common';
 
 const propTypes = {
   qe: React.PropTypes.object,
@@ -10,7 +11,14 @@ const defaultProps = {
 };
 
 export default class CopyQueryTabUrl extends React.Component {
-  getQueryLink() {
+  constructor(props) {
+    super(props);
+    this.state = {
+      shortUrl: '',
+    };
+  }
+
+  componentWillMount() {
     const params = [];
     const qe = this.props.qe;
     if (qe.dbId) params.push('dbid=' + qe.dbId);
@@ -21,15 +29,20 @@ export default class CopyQueryTabUrl extends React.Component {
 
     const queryString = params.join('&');
     const queryLink = window.location.pathname + '?' + queryString;
+    getShortUrl(queryLink, this.onShortUrlSuccess.bind(this));
+  }
 
-    return queryLink;
+  onShortUrlSuccess(data) {
+    this.setState({
+      shortUrl: data,
+    });
   }
 
   render() {
     return (
       <CopyToClipboard
         inMenu
-        text={this.getQueryLink()}
+        text={this.state.shortUrl}
         copyNode={<span>share query</span>}
         tooltipText="copy URL to clipboard"
         shouldShowText={false}

diff --git a/caravel/assets/javascripts/components/CopyToClipboard.jsx b/caravel/assets/javascripts/components/CopyToClipboard.jsx
@@ -1,6 +1,5 @@
 import React, { PropTypes } from 'react';
 import { Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
-import $ from 'jquery';
 
 const propTypes = {
   copyNode: PropTypes.node,
@@ -24,7 +23,6 @@ export default class CopyToClipboard extends React.Component {
     super(props);
     this.state = {
       hasCopied: false,
-      shortUrl: '',
     };
 
     // bindings
@@ -33,42 +31,17 @@ export default class CopyToClipboard extends React.Component {
     this.onMouseOut = this.onMouseOut.bind(this);
   }
 
-  componentWillMount() {
-    this.getShortUrl();
-  }
-
   onMouseOut() {
     // delay to avoid flash of text change on tooltip
     setTimeout(this.resetTooltipText, 200);
   }
 
-  getShortUrl() {
-    $.ajax({
-      type: 'POST',
-      url: '/r/shortner/',
-      data: {
-        data: '/' + this.props.text,
-      },
-      success: (data) => {
-        this.setState({
-          shortUrl: data,
-        });
-      },
-      error: (error) => {
-        /* eslint no-console: 0 */
-        if (console && console.warn) {
-          console.warn('Something went wrong...');
-          console.warn(error);
-        }
-      },
-    });
-  }
   resetTooltipText() {
     this.setState({ hasCopied: false });
   }
 
   copyToClipboard() {
-    const textToCopy = this.state.shortUrl;
+    const textToCopy = this.props.text;
     const textArea = document.createElement('textarea');
 
     textArea.style.position = 'fixed';
@@ -103,7 +76,7 @@ export default class CopyToClipboard extends React.Component {
     return (
       <span>
         {this.props.shouldShowText &&
-          <span>{this.state.shortUrl}</span>
+          <span>{this.props.text}</span>
         }
         &nbsp;&nbsp;&nbsp;&nbsp;
         <OverlayTrigger placement="top" overlay={this.renderTooltip()} trigger={['hover']}>

diff --git a/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx b/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { Popover, OverlayTrigger } from 'react-bootstrap';
 import CopyToClipboard from './../../components/CopyToClipboard';
+import { getShortUrl } from '../../../utils/common';
 
 const propTypes = {
   slice: PropTypes.object.isRequired,
@@ -14,11 +15,22 @@ export default class URLShortLinkButton extends React.Component {
     };
   }
 
+  onShortUrlSuccess(data) {
+    this.setState({
+      shortUrl: data,
+    });
+  }
+
+  getCopyUrl() {
+    const longUrl = window.location.pathname + window.location.search;
+    getShortUrl(longUrl, this.onShortUrlSuccess.bind(this));
+  }
+
   renderPopover() {
     return (
       <Popover id="shorturl-popover">
         <CopyToClipboard
-          text={window.location.pathname + window.location.search}
+          text={this.state.shortUrl}
           copyNode={<i className="fa fa-clipboard" title="Copy to clipboard"></i>}
         />
       </Popover>
@@ -31,6 +43,7 @@ export default class URLShortLinkButton extends React.Component {
         trigger="click"
         rootClose
         placement="left"
+        onEnter={this.getCopyUrl.bind(this)}
         overlay={this.renderPopover()}
       >
         <span className="btn btn-default btn-sm">

diff --git a/caravel/assets/utils/common.js b/caravel/assets/utils/common.js
@@ -1,4 +1,5 @@
 /* eslint global-require: 0 */
+import $ from 'jquery';
 const d3 = window.d3 || require('d3');
 
 export const EARTH_CIRCUMFERENCE_KM = 40075.16;
@@ -53,3 +54,23 @@ export function getParamsFromUrl() {
   });
   return newParams;
 }
+
+export function getShortUrl(longUrl, callBack) {
+  $.ajax({
+    type: 'POST',
+    url: '/r/shortner/',
+    data: {
+      data: '/' + longUrl,
+    },
+    success: (data) => {
+      callBack(data);
+    },
+    error: (error) => {
+      /* eslint no-console: 0 */
+      if (console && console.warn) {
+        console.warn('Something went wrong...');
+        console.warn(error);
+      }
+    },
+  });
+}