diff options
| -rw-r--r-- | src/components/GithubAvatar/GithubAvatar.tsx | 10 | ||||
| -rw-r--r-- | src/pages/Contribute/Contribute.tsx | 4 |
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> |