[#163] created contribution detail page

src/pages/contributor/ContributorCard.jsx

@@ -2,7 +2,8 @@ import React from 'react'
 import { Link } from 'react-router-dom';
 
 function ContributorCard(props) {
-  const { name, img } = props;
+  const { name, img,contributions } = props;
+
   return (
     <>
 
@@ -11,7 +12,10 @@ function ContributorCard(props) {
         <img src={img} className="card-img-top" alt="..."/>
           <div className="card-body ">
             <h5 className="card-title">{name}</h5>
-            <Link to="/contributor/details" className="btn btn-primary">Get Details</Link>
+            <Link to="/contributor/details" className="btn btn-primary" onClick={()=>{
+              localStorage.setItem('contributorName',name);
+              localStorage.setItem('contributions',contributions);
+            }} >Get Details</Link>
           </div>
       </div>
     </>

src/pages/contributor/ContributorDetail.jsx

@@ -1,10 +1,95 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+function ContributorDetail(props) {
+
+  const contributorName = localStorage.getItem('contributorName');
+
+  const [mergedPRs, setMergedPRs] = useState([]);
+  const [error, setError] = useState(null);
+
+  const owner = 'Avdhesh-Varshney'; // Replace with actual owner username/organization
+  const repo = 'chanakya-niti'; // Replace with actual repo name
+  const contributor_username = contributorName; // Replace with contributor username
+
+  const fetchMergedPRs = async () => {
+    try {
+      const baseUrl = 'https://api.github.com';
+      const url = `${baseUrl}/repos/${owner}/${repo}/pulls?state=closed&author=${contributor_username}`;
+
+      const response = await axios.get(url);
+      let data = response.data;
+      const arr = await data.filter((pr) => {
+        return pr.user.login === `${contributorName}` && pr.merged_at != null;
+
+      })
+      setMergedPRs(arr);
+      // console.log(arr);
+    } catch (error) {
+      setError(error);
+      console.error('Error fetching merged PRs:', error);
+    }
+  };
+  useEffect(() => {
+    fetchMergedPRs();
+  }, [])
 
-function ContributorDetail() {
   return (
-    <div className=''>
-      Contributor Detail Page 
-    </div>
+    <>
+      {mergedPRs.length > 0 &&
+        <div className='d-flex flex-wrap justify-content-center'>
+          <div className="common">
+            <div className="card mx-1 my-2" style={{ width: "18rem" }}>
+              <img src={mergedPRs[0].user.avatar_url} className="card-img-top" alt="..." />
+              <div className="card-body ">
+                <h5 className="card-title">{contributorName}</h5>
+                <div className="card-header">
+                  No of contributions : {localStorage.getItem('contributions')}
+                </div>
+                <div className="card-header">
+                  <p><a href={mergedPRs[0].user.html_url} target='_blank' className="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Github &#8599;</a></p>
+                </div>
+
+              </div>
+            </div>
+          </div>
+            {
+              mergedPRs.map((element) => {
+                return <div key={element.number} className="card my-3 mx-2" style={{width:"350px"}}>
+                  <div className="card-header fw-bold">
+                    #{element.number}
+                  </div>
+                  <div className="card-body">
+                    <h5 className="card-title">Title: {element.title}</h5>
+                    <div className="card-text">
+                      <p className='fw-bold'> Labels:</p> 
+                      {
+                        element.labels.length > 0 &&
+                        element.labels.map((label) => {
+                          return<div key={label.description} className="ms-2 me-auto">
+                            <div className="fw-bold">*{label.name}</div>
+                            -{label.description}
+                          </div>
+                        })
+                      }
+                    </div>
+                    <a href={element.html_url} target='_blank' className="btn btn-primary my-2">View PR</a>
+                    <p className='fw-bold'>Created at: {element.created_at.substring(0,10).split("-").reverse().join("-")}</p>
+                    <p className='fw-bold'>Closed at: {element.closed_at.substring(0,10).split("-").reverse().join("-")}</p>
+                  </div>
+                </div>
+
+              })
+            }
+        </div>
+      }
+      {
+        mergedPRs.length < 1 && <div>
+          Sorry not merged prs available
+        </div>
+      }
+
+    </>
   )
 }
 

src/pages/contributor/Contributors.jsx

@@ -3,19 +3,20 @@ import { useEffect, useState } from 'react'
 import axios from 'axios'
 import ContributorCard from './ContributorCard'
 
-const Contributors = () => {
-
+const Contributors = (props) => {
   const [data, setdata] = useState([])
   useEffect(() => {
     getContributor();
+    localStorage.setItem('contributorName','');
+    localStorage.setItem('contributions','');
   }, [])
 
 
   const getContributor = async () => {
     await axios.get('https://api.github.com/repos/Avdhesh-Varshney/chanakya-niti/contributors')
       .then(function (response) {
         setdata(response.data);
-        // console.log(response.data);
+        // console.log(data);
       })
       .catch(function (error) {
         console.log(error);
@@ -33,7 +34,7 @@ const Contributors = () => {
         {
           data.map((element) => {
             return <div key={data.indexOf(element)}>
-              <ContributorCard name={element.login} img={element.avatar_url} />
+              <ContributorCard name={element.login} img={element.avatar_url} contributions={element.contributions} />
             </div>
           })
         }