Fixed djangoindia#244 -- Created apiDataCard.ts, configured DataCard …

…count numbers for fetching actual data - Subscribers, Contributors, Stars
ehemp · Dec 8, 2024 · ea2aab4 · ea2aab4
1 parent 903cc95
commit ea2aab4
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 9 deletions.
diff --git a/frontend/src/components/DataCard/DataCard.tsx b/frontend/src/components/DataCard/DataCard.tsx
@@ -1,8 +1,9 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 
 import { FaCity, FaGithub, FaUsers } from 'react-icons/fa';
 import { useInView } from 'react-intersection-observer';
+import { url, requestOptions } from './apiDataCard';
 
 // Define props type for StatCard component
 interface StatCardProps {
@@ -13,28 +14,56 @@ interface StatCardProps {
   icon: React.ReactNode;
 }
 
+
+
+
 export const DataCard = () => {
+  const [dataCount, setDataCount] = useState({});
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    async function fetchStargazerCount(url1: string, url2: string, options: object): Promise<any> {
+      try {
+        if (url1 && url2) {
+          let res = await fetch(url1, options);
+          let res2 = await fetch(url2, options);
+          let data = await res.json();
+          let data2 = await res2.json();
+          setDataCount({stargazers_count: Number(data.stargazers_count), subscribers_count: Number( data.subscribers_count), contributors_count: Number(data2.length)});
+          setLoading(false);
+        }
+
+      }
+      catch(err){
+          console.log('Error:', err)
+      }
+    }
+    if (loading){
+      fetchStargazerCount(url.stargazers_subs_count, url.contributors, requestOptions.options);
+    }
+
+  },[])
+
   return (
     <div className='grid w-full items-center justify-center gap-6 p-8 md:grid-cols-2 lg:grid-cols-3'>
       <StatCard
         title='Active Contributors'
-        subText='& counting till date'
+        subText='& counting to date'
         startCount={0}
-        count={20}
+        count={dataCount.contributors_count}
         icon={<FaCity className='text-[2rem]' />}
       />
       <StatCard
         title='Subscribers'
         subText='loving Django India'
-        startCount={10}
-        count={100}
+        startCount={0}
+        count={dataCount.subscribers_count}
         icon={<FaUsers className='text-[3rem]' />}
       />
       <StatCard
         title='GitHub Stars'
-        subText='till date'
+        subText='to date'
         startCount={0}
-        count={70}
+        count={dataCount.stargazers_count}
         icon={<FaGithub className='text-[2rem]' />}
       />
     </div>
@@ -54,7 +83,7 @@ const StatCard: React.FC<StatCardProps> = ({
     threshold: 0.4,
   });
   const intervalTime = count === 31818 ? 1 : 100;
-
+  
   useEffect(() => {
     let start = startCount;
     const interval = setInterval(() => {
@@ -81,7 +110,7 @@ const StatCard: React.FC<StatCardProps> = ({
       <div className='ml-4 flex grow flex-col'>
         <span className='text-4xl font-bold'>
           {count === 50 ? '' : ''}
-          {inView ? number : 0}+
+          {inView ? number : 0}
         </span>
         <span className='text-xl font-bold'>{title}</span>
         <div className='flex items-center justify-between'>

diff --git a/frontend/src/components/DataCard/apiDataCard.ts b/frontend/src/components/DataCard/apiDataCard.ts
@@ -0,0 +1,11 @@
+
+export const requestOptions = {
+    options: {method: "GET", headers: {'X-GitHub-Api-Version': '2022-11-28'}},
+};
+export const url = {
+    stargazers_subs_count: "https://api.github.com/repos/djangoindia/djangoindia.org",
+    contributors: "https://api.github.com/repos/djangoindia/djangoindia.org/contributors",
+};
+
+
+