refactor: consolidate implementation of ExternalIconLink and External…

…DocsIconLink (#890) Re #867
SwissDataScienceCenter · Apr 1, 2020 · f66149c · f66149c
1 parent 40fdce9
commit f66149c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 23 deletions.
diff --git a/src/help/Help.present.js b/src/help/Help.present.js
@@ -25,22 +25,13 @@
 
 import React, { Component } from "react";
 import { Route } from "react-router-dom";
-import { ExternalDocsLink, RenkuNavLink } from "../utils/UIComponents";
+import { ExternalDocsLink, ExternalIconLink, RenkuNavLink } from "../utils/UIComponents";
 
 import { Row, Col } from "reactstrap";
 import { Nav, NavItem } from "reactstrap";
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDiscourse, faGithub, faGitter } from "@fortawesome/free-brands-svg-icons";
 
-function ExternalDocsIconLink(props) {
-  return (
-    <a href={props.url} target="_blank" rel="noreferrer noopener">
-      <FontAwesomeIcon icon={props.icon} /> {props.title}
-    </a>
-  );
-}
-
 class HelpNav extends Component {
   render() {
     return (
@@ -75,7 +66,7 @@ class HelpGetting extends Component {
       <div key="main1" className="d-flex mb-3 flex-wrap">
         <div className="mr-4" style={{ flex: "0 1", flexBasis }}>
           <h2>
-            <ExternalDocsIconLink url="https://renku.discourse.group" icon={faDiscourse} title="Forum" />
+            <ExternalIconLink url="https://renku.discourse.group" icon={faDiscourse} title="Forum" />
           </h2>
           <p>
             We maintain a <ExternalDocsLink url="https://renku.discourse.group" title="help forum" /> for
@@ -84,7 +75,7 @@ class HelpGetting extends Component {
         </div>
         <div className="mr-4" style={{ flex: "0 1", flexBasis }}>
           <h2>
-            <ExternalDocsIconLink url="https://gitter.im/SwissDataScienceCenter/renku" icon={faGitter} title="Gitter" />
+            <ExternalIconLink url="https://gitter.im/SwissDataScienceCenter/renku" icon={faGitter} title="Gitter" />
           </h2>
           <p>
             Want to reach out to the development team live? Contact us on{" "}
@@ -94,7 +85,7 @@ class HelpGetting extends Component {
         </div>
         <div className="mr-4" style={{ flex: "0 1", flexBasis }}>
           <h2>
-            <ExternalDocsIconLink
+            <ExternalIconLink
               url="https://github.com/SwissDataScienceCenter/renku"
               icon={faGithub}
               title="GitHub"

diff --git a/src/utils/UIComponents.js b/src/utils/UIComponents.js
@@ -599,26 +599,41 @@ function IconLink(props) {
   </span>;
 }
 
-/**
- * ExternalIconLink
- * External application link that is shown as a font-awesome icon
- *
- * @param {string} [to] - url of link
- * @param {icon} [icon] - font-awesome icon to display
- * @param {string} [tooltip] - the text of the tooltip
- */
-function ExternalIconLink(props) {
+function ExternalIconLinkWithTooltip(props) {
   // eslint-disable-next-line no-unused-vars
   const [uniqueId, setUniqueId] = useState(`external-icon-link-${_.uniqueId()}`);
 
   return <span>
-    <a href={props.to} role="button" target="_blank" rel="noreferrer noopener">
+    <a href={props.url} role="button" target="_blank" rel="noreferrer noopener">
       <FontAwesomeIcon className="icon-link" icon={props.icon} id={uniqueId} />
     </a>
     <ThrottledTooltip target={uniqueId} tooltip={props.tooltip} />
   </span>;
 }
 
+function ExternalIconLinkWithoutTooltip(props) {
+  return <a href={props.url} target="_blank" rel="noreferrer noopener">
+    <FontAwesomeIcon icon={props.icon} /> {props.title}
+  </a>;
+}
+
+/**
+ * ExternalIconLink
+ * External application link that is shown as a font-awesome icon
+ *
+ * @param {string} [to] - url of link
+ * @param {string} [url] - alternative for 'to' -- takes precedence over to
+ * @param {icon} [icon] - font-awesome icon to display
+ * @param {string} [tooltip] - the text of the tooltip or null for no tooltip
+ */
+function ExternalIconLink(props) {
+  const url = (props.url) ? props.url : props.to;
+  const myProps = {url, ...props};
+  return (props.tooltip) ?
+    ExternalIconLinkWithTooltip(myProps) :
+    ExternalIconLinkWithoutTooltip(myProps)
+}
+
 /**
  * TooltipToggleButton
  * Toggle button that is displayed as a font-awesome icon