ft(user): Implements user can view contributors in a repository

README.md

@@ -1,4 +1,4 @@
-# Getting Started with Create React App
+# Description
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 

src/UI/pages/Contributors/Contributors.tsx

@@ -1,19 +1,22 @@
 import useDataContext from "hooks/useDataContext";
-import { Item } from "interfaces/dataItem";
+import { Item, ItemII } from "interfaces/dataItem";
 import React, { useEffect } from "react";
 import Title from "UI/atoms/Title/Title";
+import { CardII } from "UI/templates/Card/Card";
+import { CardDisplayWrapper } from "../Home/Home.styles";
 
 const Contributors: React.FC<{}> = (props: any) => {
   const { data, error, loading, makeRequest } = useDataContext();
 
-  let datum = data?.find(
-    (data: any) => data.owner.id === +props.match.params.id
+  let datum = data.find(
+    (data: any) => data.owner?.id === +props.match.params.id
   );
 
   useEffect(() => {
     if (datum) {
       makeRequest(
-        `https://api.github.com/repos/${datum.full_name}/contributors`
+        `https://api.github.com/repos/${datum.full_name}/contributors`,
+        "contributors"
       );
     }
   }, [makeRequest, datum]);
@@ -22,14 +25,16 @@ const Contributors: React.FC<{}> = (props: any) => {
 
   const attributedData = loading ? Array(20).fill(null) : data;
 
-  //   const cardDisplay = attributedData.map((item: Item, index: number) => (
-  //     <Card key={index} datum={item} state={loading} />
-  //   ));
+  const cardDisplay = attributedData.map((item: ItemII, index: number) => (
+    <CardII key={index} datum={item} state={loading} />
+  ));
 
   return (
     <>
-      <Title>Contributors</Title>
-      {/* <CardDisplayWrapper>{cardDisplay}</CardDisplayWrapper> */}
+      <Title>
+        {datum ? `${datum.full_name} Contributors` : "Retrieving Contributors"}
+      </Title>
+      <CardDisplayWrapper>{cardDisplay}</CardDisplayWrapper>
     </>
   );
 };

src/UI/templates/Card/Card.tsx

@@ -1,4 +1,4 @@
-import { Item, objectLiteral } from "interfaces/dataItem";
+import { Item, ItemII } from "interfaces/dataItem";
 import Avatar from "UI/atoms/Avatar/Avatar";
 import Description from "UI/atoms/Description/Description";
 import { StyledCard, StyledLink } from "./Card.styles";
@@ -11,7 +11,7 @@ const Card: React.FC<{ datum: Item; state: boolean }> = ({ datum, state }) => (
   <StyledCard>
     {!state ? (
       <Avatar
-        imgUrl={datum.owner.avatar_url}
+        imgUrl={datum.owner?.avatar_url}
         fullName={`${datum.full_name}-avatar`}
       />
     ) : (
@@ -50,11 +50,41 @@ const Card: React.FC<{ datum: Item; state: boolean }> = ({ datum, state }) => (
     )}
 
     {!state ? (
-      <StyledLink to={`contributors/${datum.owner.id}`}>
+      <StyledLink to={`contributors/${datum.owner?.id}`}>
         View Contributors
       </StyledLink>
     ) : (
-      <Skeleton width={150} height={40} />
+      <div style={{ marginTop: "2rem" }}>
+        <Skeleton width={150} height={40} />
+      </div>
+    )}
+  </StyledCard>
+);
+
+export const CardII: React.FC<{ datum: ItemII; state: boolean }> = ({
+  datum,
+  state,
+}) => (
+  <StyledCard>
+    {!state ? (
+      <Avatar imgUrl={datum.avatar_url} fullName={`${datum.login}-avatar`} />
+    ) : (
+      <AvatarImg>
+        <Skeleton circle={true} height={80} width={80} />
+      </AvatarImg>
+    )}
+    {!state ? (
+      <Description label="UserName" content={datum.login} />
+    ) : (
+      <CardSkeleton />
+    )}
+    {!state ? (
+      <Description
+        label="Number of Contributions"
+        content={datum.contributions}
+      />
+    ) : (
+      <CardSkeleton />
     )}
   </StyledCard>
 );

src/context/dataContext.ts

@@ -13,7 +13,7 @@ type contextProps = {
   error: string;
   loading: boolean;
   data: Array<objectLiteral>;
-  makeRequest: (url: string) => void;
+  makeRequest: (url: string, type?: string) => void;
 };
 
 const dataContext = createContext<contextProps>(state);

src/hooks/request.ts

@@ -38,15 +38,19 @@ function useRequest() {
   const { error, data, loading } = state;
 
   const makeRequest = useCallback(
-    async (url: string) => {
+    async (url: string, type = "") => {
       dispatch({ type: "loading" });
 
       try {
         const response = await (await fetch(url)).json();
 
         console.log({ response });
 
-        dispatch({ type: "data", payload: response.items });
+        if (type === "contributors") {
+          dispatch({ type: "data", payload: response });
+        } else {
+          dispatch({ type: "data", payload: response.items });
+        }
       } catch (err: any) {
         dispatch({ type: "error", error: err.message });
 

src/interfaces/dataItem.ts

@@ -100,3 +100,25 @@ export interface Item {
 export interface objectLiteral {
   [propsName: string]: any;
 }
+
+export interface ItemII {
+  login: string;
+  id: number;
+  node_id: string;
+  avatar_url: string;
+  gravatar_id: string;
+  url: string;
+  html_url: string;
+  followers_url: string;
+  following_url: string;
+  gists_url: string;
+  starred_url: string;
+  subscriptions_url: string;
+  organizations_url: string;
+  repos_url: string;
+  events_url: string;
+  received_events_url: string;
+  type: string;
+  site_admin: boolean;
+  contributions: number;
+}