Merge branch 'new-develop' into f2f-30069264-issue-894

Author: suppermancool

__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]}

__tests__/shared/components/__snapshots__/Content.jsx.snap

@@ -263,13 +263,20 @@ exports[`Matches shallow shapshot 1`] = `
         /members/:handle
       </code>
        
-      endpoint. Valid link on dev
-       
+      endpoint. Valid links on dev:
+      <br />
       <Link
         replace={false}
         to="/members/TonyJ"
       >
-        here.
+        Profile 1.
+      </Link>
+      <br />
+      <Link
+        replace={false}
+        to="/members/mess"
+      >
+        Profile 2.
       </Link>
     </li>
     <li>

src/assets/images/profile/ico-hobby.svg

@@ -250,10 +250,14 @@ Member Programs Page
           </code>
           {' '}
 endpoint.
-          Valid link on dev
-          {' '}
+          Valid links on dev:
+          <br />
           <Link to="/members/TonyJ">
-here.
+Profile 1.
+          </Link>
+          <br />
+          <Link to="/members/mess">
+Profile 2.
           </Link>
         </li>
         <li>

src/assets/images/profile/ico-organization.svg

@@ -37,6 +37,7 @@ export default class DistributionGraph extends React.Component {
   constructor(props) {
     super(props);
     this.state = {};
+    this.mobileWidth = 0;
     this.graphRef = React.createRef();
   }
 
@@ -45,7 +46,9 @@ export default class DistributionGraph extends React.Component {
     $scope.desktop = window.innerWidth >= 900;
     this.draw();
     this.resizeHandle = () => {
-      if (window.innerWidth < 900 && $scope.desktop) {
+      if (window.innerWidth < 900
+        && ($scope.desktop
+        || (this.mobileWidth !== DistributionGraph.getMobileWidthGrapthMeasurements()))) {
         $scope.desktop = false;
         this.draw();
       } else if (window.innerWidth >= 900 && !$scope.desktop) {
@@ -67,6 +70,13 @@ export default class DistributionGraph extends React.Component {
     window.removeEventListener('resize', this.resizeHandle);
   }
 
+  static getMobileWidthGrapthMeasurements() {
+    if (window.innerWidth < 400) {
+      return 250;
+    }
+    return 370;
+  }
+
   draw() {
     const $scope = this;
     const { distribution: wrapper, rating } = this.props;
@@ -87,7 +97,7 @@ export default class DistributionGraph extends React.Component {
     };
 
     const mobileMeasurements = {
-      w: 370,
+      w: 0,
       h: 200,
       padding: {
         top: 50,
@@ -98,7 +108,12 @@ export default class DistributionGraph extends React.Component {
     };
 
     d3.select($scope.graphRef.current).select('svg').remove();
-    const { w, h, padding } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+    let { w } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+    const { h, padding } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+    if (!$scope.desktop) {
+      w = DistributionGraph.getMobileWidthGrapthMeasurements();
+      this.mobileWidth = w;
+    }
     const totalW = w + padding.left + padding.right;
     const totalH = h + padding.top + padding.bottom;
 

src/shared/components/Content/index.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 || ((webLink.split('.').length > 2) && /^(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/ProfilePage/Stats/DistributionGraph/index.jsx

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

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

@@ -12,6 +12,7 @@
     form {
       display: flex;
       flex-direction: column;
+      min-height: 60px;
 
       label {
         @include roboto-medium;

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

@@ -37,7 +37,7 @@ export default function Track({
           </div>
         </div>
       </div>
-      <div className="onoffswitch" styleName="onoffswitch-no-padding-right">
+      <div styleName="onoffswitch-no-padding-right">
         <input
           type="checkbox"
           name="eprf-onoffswitch"

src/shared/components/Settings/Account/LinkedAccount/styles.scss

@@ -1,5 +1,14 @@
 @import "~styles/mixins";
 
+@mixin switch-transition {
+  transition: all 0.15s ease-in-out;
+}
+
+$switch-active-color: $tc-dark-blue-110;
+$switch-inactive-color: $tc-gray-20;
+$switch-width: 34px;
+$switch-height: 20px;
+
 .track-container {
   display: flex;
   flex-direction: row;
@@ -57,4 +66,17 @@
 .onoffswitch-no-padding-right {
   margin-right: 10px;
   margin-left: 30px;
+
+  @include switch-transition;
+
+  align-self: center;
+  background-color: $switch-inactive-color;
+  border-radius: $switch-height;
+  box-sizing: border-box;
+  height: $switch-height;
+  width: $switch-width;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 }