fix: don't add link when non-existent user invited

ref issue #135

Author: maxceem

src/components/User/index.jsx

@@ -12,26 +12,32 @@ import { TOPCODER_COMMUNITY_WEBSITE_URL } from "../../../config";
 import IconDirectArrow from "../../assets/images/icon-direct-arrow.svg";
 import { Link } from "@reach/router";
 
-const User = ({ showArrow, user, hideFullName = false, handleLinkTo }) => {
+const User = ({ showArrow, user, hideFullName = false, handleLinkTo, noLink }) => {
+  let link = <strong>{user.handle}</strong>
+
+  // if we set flag for no-link, then don't add link
+  if (!noLink) {
+    /* if "handleLinkTo" is provided, use it as internal link, otherwise as external profile link */
+    link = handleLinkTo ? (
+      <Link to={handleLinkTo}>
+        <strong>{user.handle}</strong>
+      </Link>
+    ) : (
+      <a
+        href={`${TOPCODER_COMMUNITY_WEBSITE_URL}/members/${user.handle}`}
+        target="_blank"
+      >
+        <strong>{user.handle}</strong>
+      </a>
+    )
+  }
+
   return (
     <div styleName="user">
       <Avatar {...user} />
       {showArrow ? <IconDirectArrow styleName="direct-arrow" /> : null}
       <div styleName="user-details">
-        {/* if "handleLinkTo" is provided, use it as internal link, otherwise as external profile link */}
-        {handleLinkTo ? (
-          <Link to={handleLinkTo}>
-            <strong>{user.handle}</strong>
-          </Link>
-        ) : (
-          <a
-            href={`${TOPCODER_COMMUNITY_WEBSITE_URL}/members/${user.handle}`}
-            target="_blank"
-          >
-            <strong>{user.handle}</strong>
-          </a>
-        )}
-
+        {link}
         {!hideFullName && (
           <div>{formatFullName(user.firstName, user.lastName)}</div>
         )}
@@ -50,6 +56,7 @@ User.propTypes = {
   hideFullName: PT.bool,
   handleLinkTo: PT.string,
   showArrow: PT.bool,
+  noLink: PT.bool,
 };
 
 export default User;

src/components/User/styles.module.scss

@@ -4,6 +4,10 @@
   align-items: center;
   display: flex;
   position: relative;
+
+  strong {
+    font-weight: bold;
+  }
 }
 
 .direct-arrow {

src/routes/TeamAccess/components/MemberList/index.jsx

@@ -73,6 +73,8 @@ const MemberList = ({ teamId, members, invitees }) => {
                           photoUrl: invitee.photoURL,
                           handle: invitee.handle || invitee.email,
                         }}
+                        // if we don't know the handle of invited user, then don't add link
+                        noLink={!invitee.handle}
                         showArrow
                         hideFullName
                       />

src/routes/TeamAccess/components/MemberList/styles.module.scss

@@ -42,9 +42,6 @@
 .table-cell {
   @include table-cell;
   flex: initial;
-  a {
-    font-weight: bold;
-  }
 }
 
 .delete {