fix: use internal links instead of "a"

- also, fix User profile link and refactor

Author: maxceem

src/components/User/index.jsx

@@ -9,24 +9,27 @@ import PT from "prop-types";
 import "./styles.module.scss";
 import { formatFullName } from "utils/format";
 import { TOPCODER_COMMUNITY_WEBSITE_URL } from "../../../config";
+import { Link } from "@reach/router";
 
-const User = ({ user, hideFullName = false }) => {
-  {
-    console.log(user);
-  }
+const User = ({ user, hideFullName = false, handleLinkTo }) => {
   return (
     <div styleName="user">
       <Avatar {...user} />
       <div styleName="user-details">
-        <a
-          href={
-            user.teamId
-              ? `/taas/myteams/${user.teamId}/rb/${user.id}`
-              : `${TOPCODER_COMMUNITY_WEBSITE_URL}/members/${user.handle}`
-          }
-        >
-          <strong>{user.handle}</strong>
-        </a>
+        {/* 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>
+        )}
+
         {!hideFullName && (
           <div>{formatFullName(user.firstName, user.lastName)}</div>
         )}
@@ -43,6 +46,7 @@ User.propTypes = {
     handle: PT.string,
   }),
   hideFullName: PT.bool,
+  handleLinkTo: PT.string,
 };
 
 export default User;

src/routes/MyTeamsDetails/components/TeamMembers/index.jsx

@@ -115,8 +115,8 @@ const TeamMembers = ({ team }) => {
                     user={{
                       ...member,
                       photoUrl: member.photo_url,
-                      teamId: team.id,
                     }}
+                    handleLinkTo={`/taas/myteams/${team.id}/rb/${member.id}`}
                   />
                 </div>
                 <div styleName="table-group-first-inner">

src/routes/MyTeamsDetails/components/TeamPositions/index.jsx

@@ -11,6 +11,7 @@ import Button from "components/Button";
 import { POSITION_STATUS, POSITION_STATUS_TO_TEXT, RATE_TYPE } from "constants";
 import "./styles.module.scss";
 import { formatDateRange } from "utils/format";
+import { Link } from "@reach/router";
 
 const TeamPositions = ({ teamId, positions }) => {
   return (
@@ -33,12 +34,12 @@ const TeamPositions = ({ teamId, positions }) => {
             <div styleName="table-row" key={index}>
               <div styleName="table-group-first">
                 <div styleName="table-cell cell-skills">
-                  <a
+                  <Link
                     styleName="job-title"
-                    href={`/taas/myteams/${teamId}/positions/${position.id}`}
+                    to={`/taas/myteams/${teamId}/positions/${position.id}`}
                   >
                     <strong>{position.title}</strong>
-                  </a>
+                  </Link>
                   <SkillsList skills={position.skills} limit={5} />
                 </div>
                 <div styleName="table-group-first-inner">

src/routes/PositionDetails/components/PositionCandidates/index.jsx

@@ -55,12 +55,7 @@ const populateSkillsMatched = (position, candidate) => ({
   skillsMatched: _.intersectionBy(position.skills, candidate.skills, "id"),
 });
 
-const PositionCandidates = ({
-  position,
-  candidateStatus,
-  updateCandidate,
-  teamId,
-}) => {
+const PositionCandidates = ({ position, candidateStatus, updateCandidate }) => {
   const { candidates } = position;
   const [sortBy, setSortBy] = useState(CANDIDATES_SORT_BY.SKILL_MATCHED);
   const filteredCandidates = useMemo(
@@ -170,7 +165,6 @@ const PositionCandidates = ({
                   user={{
                     ...candidate,
                     photoUrl: candidate.photo_url,
-                    teamId: teamId,
                   }}
                   hideFullName
                 />
@@ -247,7 +241,6 @@ const PositionCandidates = ({
 PositionCandidates.propType = {
   position: PT.object,
   candidateStatus: PT.oneOf(Object.values(CANDIDATE_STATUS)),
-  teamId: PT.string.isRequired,
 };
 
 export default PositionCandidates;

src/routes/PositionDetails/index.jsx

@@ -50,7 +50,6 @@ const PositionDetails = ({ teamId, positionId }) => {
             position={position}
             candidateStatus={candidateStatus}
             updateCandidate={updateCandidate}
-            teamId={teamId}
           />
         </>
       )}