Merge pull request #136 from yoution/issue-135

fix: issue #135

Author: maxceem

src/components/User/index.jsx

@@ -9,12 +9,14 @@ import PT from "prop-types";
 import "./styles.module.scss";
 import { formatFullName } from "utils/format";
 import { TOPCODER_COMMUNITY_WEBSITE_URL } from "../../../config";
+import IconDirectArrow from "../../assets/images/icon-direct-arrow.svg";
 import { Link } from "@reach/router";
 
-const User = ({ user, hideFullName = false, handleLinkTo }) => {
+const User = ({ showArrow, user, hideFullName = false, handleLinkTo }) => {
   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 ? (
@@ -47,6 +49,7 @@ User.propTypes = {
   }),
   hideFullName: PT.bool,
   handleLinkTo: PT.string,
+  showArrow: PT.bool,
 };
 
 export default User;

src/components/User/styles.module.scss

@@ -3,8 +3,24 @@
 .user {
   align-items: center;
   display: flex;
+  position: relative;
 }
 
+.direct-arrow {
+  position: absolute;
+  left: 20px;
+  top: 24px;
+  bottom: 0;
+  text-align: center;
+  background-color: #404041;
+  border-radius: 80%;
+  width: 14px;
+  height: 14px;
+  padding: 3px;
+  path {
+    fill: white;
+  }
+}
 .user-details {
   margin-left: 16px;
 }

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

@@ -7,11 +7,9 @@ import PT from "prop-types";
 import CardHeader from "components/CardHeader";
 import Button from "components/Button";
 import "./styles.module.scss";
-import Avatar from "components/Avatar";
-import { Link } from "@reach/router";
+import User from "components/User";
 import TimeSection from "../TimeSection";
 import { formatInviteTime } from "utils/format";
-import IconDirectArrow from "../../../../assets/images/icon-direct-arrow.svg";
 import DeleteModal from "../DeleteModal";
 import AddModalContainer from "../AddModalContainer";
 
@@ -41,16 +39,14 @@ const MemberList = ({ teamId, members, invitees }) => {
                 <div styleName="table-row">
                   <div styleName="table-group avatar-name">
                     <div styleName="table-cell">
-                      <Avatar
-                        photoUrl={member.photoURL}
-                        handle={member.handle || member.email}
+                      <User
+                        user={{
+                          ...member,
+                          photoUrl: member.photoURL,
+                        }}
+                        hideFullName
                       />
                     </div>
-                    <div styleName="table-cell">
-                      <Link to={`/taas/myteams/${teamId}/rb/${member.id}`}>
-                        {member.handle || member.email}
-                      </Link>
-                    </div>
                   </div>
                   <TimeSection
                     start={member.workingHourStart}
@@ -71,18 +67,15 @@ const MemberList = ({ teamId, members, invitees }) => {
                 <div styleName="table-row">
                   <div styleName="table-group avatar-name">
                     <div styleName="table-cell">
-                      <div styleName="invite-avatar">
-                        <Avatar
-                          photoUrl={invitee.photoURL}
-                          handle={invitee.handle || invitee.email}
-                        />
-                        <IconDirectArrow styleName="direct-arrow" />
-                      </div>
-                    </div>
-                    <div styleName="table-cell">
-                      <Link to={`/taas/myteams/${teamId}/rb/${invitee.id}`}>
-                        {invitee.handle || invitee.email}
-                      </Link>
+                      <User
+                        user={{
+                          ...invitee,
+                          photoUrl: invitee.photoURL,
+                          handle: invitee.handle || invitee.email,
+                        }}
+                        showArrow
+                        hideFullName
+                      />
                     </div>
                   </div>
                   <div styleName="table-group invite-date">

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

@@ -67,25 +67,6 @@
   flex: 1 2 320px;
 }
 
-.invite-avatar {
-  position: relative;
-}
-
-.direct-arrow {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  text-align: center;
-  background-color: #404041;
-  border-radius: 80%;
-  width: 14px;
-  height: 14px;
-  padding: 3px;
-  path {
-    fill: white;
-  }
-}
-
 .row-container {
   position: relative;
 }