feat: add github avatars to users

3 files changed, 53 insertions, 31 deletions

diff --git a/src/components/GithubAvatar/GithubAvatar.tsx b/src/components/GithubAvatar/GithubAvatar.tsx
new file mode 100644
index 0000000..6aab28e
--- /dev/null
+++ b/src/components/GithubAvatar/GithubAvatar.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {
+  Avatar,
+  Link,
+} from '@material-ui/core';
+
+interface PropTypes {
+  username: string;
+}
+
+const GithubAvatar: React.FC<PropTypes> = ({ username }) => {
+  if (username === 'anonymous') return <Avatar/>;
+
+  const githubUrl = `https://github.com/${username}`;
+  const avatarUrl = githubUrl + '.png';
+  const usernameTokens = username.split(/[ ,.\-_#@;]/g);
+  const altText = (
+    (usernameTokens.length > 1)?
+      (usernameTokens[0][0] + usernameTokens[1][0])
+    :
+      usernameTokens[0][0]
+  ).toUpperCase()
+
+  return (
+    <Link href={githubUrl}>
+      <Avatar>
+        <img src={avatarUrl} alt={altText} />
+      </Avatar>
+    </Link>
+  )
+};
+
+export default GithubAvatar;
+
diff --git a/src/components/SolutionCard/SolutionCard.tsx b/src/components/SolutionCard/SolutionCard.tsx
index 5adbff9..7ec8888 100644
--- a/src/components/SolutionCard/SolutionCard.tsx
+++ b/src/components/SolutionCard/SolutionCard.tsx
@@ -6,7 +6,6 @@ import {
   CardHeader,
   CardContent,
   IconButton,
-  Avatar,
   Grid,
   Menu,
   MenuItem,
@@ -18,6 +17,7 @@ import TimerIcon from '@material-ui/icons/Timer';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import DeleteIcon from '@material-ui/icons/Delete';
 
+import GithubAvatar from '../GithubAvatar/GithubAvatar';
 import { del } from '../../requests';
 
 
@@ -77,12 +77,7 @@ const SolutionCard: React.FC<PropTypes> = ({ data, removeThisCard }) => {
   return (
     <Card className={classes.root}>
       <CardHeader
-        avatar={
-          author === 'anonymous'?
-            (<Avatar/>)
-            :
-            (<Avatar>{author[0].toUpperCase()}</Avatar>)
-        }
+        avatar={<GithubAvatar username={author} />}
         title={author}
         subheader={date.toLocaleString('default', DATE_FORMAT)}
         action={
diff --git a/src/pages/Contribute/Contribute.tsx b/src/pages/Contribute/Contribute.tsx
index 4c37fb9..77228a1 100644
--- a/src/pages/Contribute/Contribute.tsx
+++ b/src/pages/Contribute/Contribute.tsx
@@ -6,7 +6,6 @@ import {
   List,
   ListItem,
   Link,
-  Avatar,
   Divider,
   makeStyles,
 } from '@material-ui/core';
@@ -16,6 +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 developers from '../../developers.json';
 
@@ -111,31 +111,23 @@ const Contribute: React.FC = () => {
         <ContentSection sectionName="Developers">
           <List>
             {
-              developers.map(developer => {
-                const githubUrl = `https://github.com/${developer.username}`;
-
-                return (
-                  <div key={developer.username}>
-                    <ListItem>
-                      <Link href={githubUrl}>
-                        <Avatar alt={developer.username} src={`${githubUrl}.png`} />
-                      </Link>
-                      <div>
-                        <Link href={githubUrl}>
-                          {developer.username}
-                        </Link>
-                        <Typography component="div" color="textSecondary">
-                          {developer.role}
-                        </Typography>
-                      </div>
-                    </ListItem>
-                    <Divider variant="middle" />
-                  </div>
-                )
-              })
+              developers.map(developer => (
+                <div key={developer.username}>
+                  <ListItem>
+                    <GithubAvatar username={developer.username} />
+                    <div>
+                      <Link href="#">{developer.username}</Link>
+                      <Typography component="div" color="textSecondary">
+                        {developer.role}
+                      </Typography>
+                    </div>
+                  </ListItem>
+                  <Divider variant="middle" />
+                </div>
+              ))
             }
             <ListItem>
-              <Avatar />
+              <GithubAvatar username="anonymous" />
               You can be here!
             </ListItem>
           </List>