fix: bind link to developer name

2 files changed, 9 insertions, 5 deletions

diff --git a/src/components/GithubAvatar/GithubAvatar.tsx b/src/components/GithubAvatar/GithubAvatar.tsx
index 6aab28e..5daaac1 100644
--- a/src/components/GithubAvatar/GithubAvatar.tsx
+++ b/src/components/GithubAvatar/GithubAvatar.tsx
@@ -9,11 +9,14 @@ interface PropTypes {
   username: string;
 }
 
+const githubUrl = 'https://github.com/';
+const getUserGithubUrl = (username: string) => githubUrl + username;
+
 const GithubAvatar: React.FC<PropTypes> = ({ username }) => {
   if (username === 'anonymous') return <Avatar/>;
 
-  const githubUrl = `https://github.com/${username}`;
-  const avatarUrl = githubUrl + '.png';
+  const userGithubUrl = getUserGithubUrl(username);
+  const avatarUrl = userGithubUrl + '.png';
   const usernameTokens = username.split(/[ ,.\-_#@;]/g);
   const altText = (
     (usernameTokens.length > 1)?
@@ -23,7 +26,7 @@ const GithubAvatar: React.FC<PropTypes> = ({ username }) => {
   ).toUpperCase()
 
   return (
-    <Link href={githubUrl}>
+    <Link href={userGithubUrl}>
       <Avatar>
         <img src={avatarUrl} alt={altText} />
       </Avatar>
@@ -31,5 +34,6 @@ const GithubAvatar: React.FC<PropTypes> = ({ username }) => {
   )
 };
 
+export { getUserGithubUrl };
 export default GithubAvatar;
 
diff --git a/src/pages/Contribute/Contribute.tsx b/src/pages/Contribute/Contribute.tsx
index 77228a1..67f2b8a 100644
--- a/src/pages/Contribute/Contribute.tsx
+++ b/src/pages/Contribute/Contribute.tsx
@@ -15,7 +15,7 @@ import BugReportIcon from '@material-ui/icons/BugReport';
 import NewReleasesIcon from '@material-ui/icons/NewReleases';
 
 import { Window, ContentSection } from 'react-benzin';
-import GithubAvatar from '../../components/GithubAvatar/GithubAvatar';
+import GithubAvatar, { getUserGithubUrl } from '../../components/GithubAvatar/GithubAvatar';
 
 import developers from '../../developers.json';
 
@@ -116,7 +116,7 @@ const Contribute: React.FC = () => {
                   <ListItem>
                     <GithubAvatar username={developer.username} />
                     <div>
-                      <Link href="#">{developer.username}</Link>
+                      <Link href={getUserGithubUrl(developer.username)}>{developer.username}</Link>
                       <Typography component="div" color="textSecondary">
                         {developer.role}
                       </Typography>