feat: replace placeholder avatars with contributor avatars (#28)

* feat: replace avatar fixtures with contributor avatars

fixes #21

* test: add tests for getAvatar

* style: adddress linting issues

Author: nulfrost

src/components/PostGrid.jsx

@@ -3,9 +3,10 @@ import av1 from "./placeholders/av01.jpg";
 import av2 from "./placeholders/av02.jpg";
 import cover2 from "./placeholders/cover2.jpg";
 import humanizeNumber from "../lib/humanizeNumber";
+import getAvatar from "../lib/getAvatar";
 
 function PostGrid({ data }) {
-  const [repoOwner, repoName]= data.repo_name.split("/");
+  const [repoOwner, repoName] = data.repo_name.split("/");
 
   const repoLink = `https://github.com/${data.repo_name}`;
   const handleClick = () => {
@@ -17,10 +18,22 @@ function PostGrid({ data }) {
       {/* Avator Container */}
       <div className=" w-full flex  mb-3 ">
         <div className="bg-blue-400 w-10 h-10 overflow-hidden  rounded-full mr-3 ">
-          <img className="object-cover" src={av1} alt="Avatar 01" width={500} height={500} />
+          <img
+            className="object-cover"
+            src={getAvatar(data?.contributors[0])}
+            alt="Avatar 01"
+            width={500}
+            height={500}
+          />
         </div>
         <div className="bg-blue-400 w-10 h-10 overflow-hidden  rounded-full mr-3 ">
-          <img className="object-cover" src={av2} alt="Avatar 02" width={500} height={500} />
+          <img
+            className="object-cover"
+            src={getAvatar(data?.contributors[1])}
+            alt="Avatar 02"
+            width={500}
+            height={500}
+          />
         </div>
       </div>
       {/* Title */}
@@ -29,7 +42,8 @@ function PostGrid({ data }) {
       </div>
       {/* Description */}
       <div className=" text-lightGrey text-sm mb-2 ">
-      <h3> {data.description} </h3>      </div>
+        <h3> {data.description} </h3>{" "}
+      </div>
       {/* Cover photo */}
       <div className="w-full bg-blue-400 h-28 overflow-hidden rounded-md mb-2 ">
         <img className="object-cover" src={cover2} alt="Avatar 02" width={1000} height={1000} />

src/components/PostList.jsx

@@ -1,12 +1,11 @@
 import React from "react";
-import av1 from "./placeholders/av01.jpg";
-import av2 from "./placeholders/av02.jpg";
 import cover1 from "./placeholders/cover1.jpg";
 import cover2 from "./placeholders/cover2.jpg";
 import humanizeNumber from "../lib/humanizeNumber";
+import getAvatar from "../lib/getAvatar";
 
 function PostList({ data }) {
-  const [repoOwner, repoName]= data.repo_name.split("/");
+  const [repoOwner, repoName] = data.repo_name.split("/");
 
   const repoLink = `https://github.com/${data.repo_name}`;
   const handleClick = () => {
@@ -21,11 +20,23 @@ function PostList({ data }) {
         <div className=" flex flex-col ">
           {/* Avatar */}
           <div className="bg-blue-400 w-10 h-10 overflow-hidden  rounded-full mb-2 ">
-            <img className="object-cover" src={av1} alt="Avatar 01" width={500} height={500} />
+            <img
+              className="object-cover"
+              src={getAvatar(data?.contributors[0])}
+              alt="Avatar 01"
+              width={500}
+              height={500}
+            />
           </div>
           {/* Avatar */}
           <div className="bg-blue-400 w-10 h-10 overflow-hidden  rounded-full ">
-            <img className="object-cover" src={av2} alt="Avatar 02" width={500} height={500} />
+            <img
+              className="object-cover"
+              src={getAvatar(data?.contributors[1])}
+              alt="Avatar 02"
+              width={500}
+              height={500}
+            />
           </div>
         </div>
 

src/lib/getAvatar.js

@@ -0,0 +1,5 @@
+export default function getAvatar(username) {
+  // if for some reason a username isn't present just use github's avatar
+  if (!username) return 'https://github.com/github.png?size=460';
+  return `https://github.com/${username}.png?size=460`;
+}

src/lib/getAvatar.test.js

@@ -0,0 +1,14 @@
+import getAvatar from './getAvatar';
+
+describe('Test: getAvatar()', () => {
+  test('Passing nulfrost should return return the correct URL', () => {
+    const expected = 'https://github.com/nulfrost.png?size=460';
+    const actual = getAvatar('nulfrost');
+    expect(expected).toBe(actual);
+  });
+  test('Passing nothing should return the github avatar', () => {
+    const expected = 'https://github.com/github.png?size=460';
+    const actual = getAvatar();
+    expect(expected).toBe(actual);
+  });
+});