Merge pull request #1186 from suppermancool/f2f-30069264-issue-1029

fix issue #1029

Author: ThomasKranitsas

__tests__/shared/components/Settings/Profile/ExternalLinks/__snapshots__/index.jsx.snap

@@ -26,6 +26,39 @@ exports[`renders external links section of profile setting page correctly 1`] =
     </div>
     <AddWebLink
       addWebLink={[Function]}
+      allLinks={
+        Array [
+          Object {
+            "data": Object {
+              "handle": "tcscoder",
+            },
+            "providerType": "github",
+            "status": "pending",
+          },
+          Object {
+            "data": Object {
+              "handle": "1233342",
+            },
+            "providerType": "stackoverflow",
+            "status": "pending",
+          },
+          Object {
+            "URL": "https://www.google.com",
+            "description": "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
+            "entities": null,
+            "handle": "tcscoder",
+            "images": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png",
+            "key": "4c7136cdbbf227274e49c475e7541abf",
+            "keywords": null,
+            "providerType": "weblink",
+            "source": "embed.ly",
+            "status": "linked",
+            "synchronizedAt": 1525560141959,
+            "title": "Google",
+            "userId": 22655076,
+          },
+        ]
+      }
       deleteWebLink={[Function]}
       handle=""
       linkExternalAccount={[Function]}

src/shared/components/Settings/Account/LinkedAccount/AddWebLink.jsx

@@ -3,6 +3,7 @@
  */
 /* eslint-disable jsx-a11y/label-has-for */
 import React from 'react';
+import _ from 'lodash';
 import PT from 'prop-types';
 
 import './styles.scss';
@@ -17,6 +18,7 @@ export default class AddWebLink extends React.Component {
     this.onUpdateWebLink = this.onUpdateWebLink.bind(this);
     this.onAddWebLink = this.onAddWebLink.bind(this);
     this.isWebLinkValid = this.isWebLinkValid.bind(this);
+    this.isWebLinkExist = this.isWebLinkExist.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -43,7 +45,7 @@ export default class AddWebLink extends React.Component {
         tokenV3,
       } = this.props;
       const { webLink } = this.state;
-      if (webLink && this.isWebLinkValid()) {
+      if (webLink && this.isWebLinkValid() && !this.isWebLinkExist()) {
         addWebLink(handle, tokenV3, webLink);
       }
     }
@@ -54,10 +56,19 @@ export default class AddWebLink extends React.Component {
     return !webLink || /^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,15})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/.test(webLink); /* eslint-disable-line no-useless-escape */
   }
 
+  isWebLinkExist() {
+    const { webLink } = this.state;
+    const {
+      allLinks,
+    } = this.props;
+    return _.some(allLinks, link => link.URL.toLowerCase() === webLink.toLowerCase());
+  }
+
   render() {
     const { webLink } = this.state;
 
     const webLinkValid = this.isWebLinkValid();
+    const isWebLinkExist = this.isWebLinkExist();
 
     return (
       <div styleName="external-web-link">
@@ -83,7 +94,7 @@ export default class AddWebLink extends React.Component {
                 required
               />
               {
-                !webLinkValid
+                !webLinkValid && !isWebLinkExist
                 && (
                   <div styleName="form-input-error">
                     <p>
@@ -92,6 +103,16 @@ Please enter a valid URL
                   </div>
                 )
               }
+              {
+                isWebLinkExist
+                && (
+                  <div styleName="form-input-error">
+                    <p>
+                      {`The URL ${webLink} already exists`}
+                    </p>
+                  </div>
+                )
+              }
             </div>
           </form>
         </div>
@@ -100,9 +121,14 @@ Please enter a valid URL
   }
 }
 
+AddWebLink.defaultProps = {
+  allLinks: [],
+};
+
 AddWebLink.propTypes = {
   handle: PT.string.isRequired,
   tokenV3: PT.string.isRequired,
   profileState: PT.shape().isRequired,
   addWebLink: PT.func.isRequired,
+  allLinks: PT.arrayOf(PT.shape),
 };

src/shared/components/Settings/Account/LinkedAccount/index.jsx

@@ -154,6 +154,7 @@ export default function LinkedAccount(props) {
         </h1>
         <AddWebLink
           {...props}
+          allLinks={allLinks}
         />
         <LinkAccounts
           {...props}

src/shared/components/Settings/Profile/ExternalLinks/AddWebLink.jsx

@@ -2,6 +2,7 @@
  * Renders 'Add a Web Link' section.
  */
 import React from 'react';
+import _ from 'lodash';
 import PT from 'prop-types';
 
 import { PrimaryButton } from 'topcoder-react-ui-kit';
@@ -17,6 +18,7 @@ export default class AddWebLink extends React.Component {
     this.onUpdateWebLink = this.onUpdateWebLink.bind(this);
     this.onAddWebLink = this.onAddWebLink.bind(this);
     this.isWebLinkValid = this.isWebLinkValid.bind(this);
+    this.webLinkExists = this.webLinkExists.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -41,7 +43,7 @@ export default class AddWebLink extends React.Component {
       tokenV3,
     } = this.props;
     const { webLink } = this.state;
-    if (webLink && this.isWebLinkValid()) {
+    if (webLink && this.isWebLinkValid() && !this.webLinkExists()) {
       addWebLink(handle, tokenV3, webLink);
     }
   }
@@ -51,6 +53,14 @@ export default class AddWebLink extends React.Component {
     return !webLink || /^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,15})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/.test(webLink); /* eslint-disable-line no-useless-escape */
   }
 
+  webLinkExists() {
+    const { webLink } = this.state;
+    const {
+      allLinks,
+    } = this.props;
+    return _.some(allLinks, link => link.URL.toLowerCase() === webLink.toLowerCase());
+  }
+
   render() {
     const {
       profileState,
@@ -60,15 +70,15 @@ export default class AddWebLink extends React.Component {
     const { webLink } = this.state;
 
     const webLinkValid = this.isWebLinkValid();
-
+    const webLinkExists = this.webLinkExists();
     return (
       <div styleName="external-web-link">
         <div styleName="web-link">
           <form name="addWebLinkFrm" onSubmit={this.onAddWebLink} autoComplete="off">
             <div styleName={webLinkValid ? 'validation-bar url' : 'validation-bar url error-bar'}>
               <input id="web-link-input" name="url" type="text" styleName="url" value={webLink} onChange={this.onUpdateWebLink} placeholder="http://www.yourlink.com" required />
               {
-                !webLinkValid
+                !webLinkValid && !webLinkExists
                 && (
                   <div styleName="form-input-error">
                     <p>
@@ -77,6 +87,16 @@ Please enter a valid URL
                   </div>
                 )
               }
+              {
+                webLinkExists
+                && (
+                  <div styleName="form-input-error">
+                    <p>
+                      {`The URL ${webLink} already exists`}
+                    </p>
+                  </div>
+                )
+              }
             </div>
             <PrimaryButton
               disabled={!webLink || !webLinkValid || addingWebLink}
@@ -97,9 +117,14 @@ Please enter a valid URL
   }
 }
 
+AddWebLink.defaultProps = {
+  allLinks: [],
+};
+
 AddWebLink.propTypes = {
   handle: PT.string.isRequired,
   tokenV3: PT.string.isRequired,
   profileState: PT.shape().isRequired,
   addWebLink: PT.func.isRequired,
+  allLinks: PT.arrayOf(PT.shape),
 };

src/shared/components/Settings/Profile/ExternalLinks/index.jsx

@@ -159,6 +159,7 @@ Add a web link
         </div>
         <AddWebLink
           {...props}
+          allLinks={allLinks}
         />
         <div className="form-label">
 Link Your Accounts