Issue 244 - update KPI numbers on the website

.env.example

@@ -29,6 +29,10 @@ DJANGO_SUPERUSER_PASSWORD=admin
 
 # for running with docker, else put these variables inside .env in frontend folder
 
+# KPI API url for Stargazer count and contributors
+STARGAZERS_COUNT=https://api.github.com/repos/djangoindia/djangoindia.org
+CONTRIBUTORS=https://api.github.com/repos/djangoindia/djangoindia.org/contributors
+
 # Server-side URL (not prefixed with NEXT_PUBLIC_)
 API_URL=http://djangoindia-backend:8000/api/v1
 # without docker: API_URL=http://localhost:8000/api/v1

frontend/src/components/DataCard/DataCard.tsx

@@ -1,8 +1,8 @@
 'use client';
 import React, { useEffect, useState } 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 {
@@ -14,27 +14,53 @@ interface StatCardProps {
 }
 
 export const DataCard = () => {
+  const [dataCount, setDataCount] = useState({stargazers_count: Number, subscribers_count: Number, contributors_count: Number});
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    //Set up use effect so API runs on component load and stops once loading is set to false.
+    async function fetchDataCount(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: 250, contributors_count: Number(data2.length)});
+          setLoading(false);
+        }
+
+      }
+      catch(err){
+          console.log('Error:', err)
+      }
+    }
+    if (loading){
+      fetchDataCount(url.stargazers_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 +80,7 @@ const StatCard: React.FC<StatCardProps> = ({
     threshold: 0.4,
   });
   const intervalTime = count === 31818 ? 1 : 100;
-
+  
   useEffect(() => {
     let start = startCount;
     const interval = setInterval(() => {
@@ -81,7 +107,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'>

frontend/src/components/DataCard/apiDataCard.ts

@@ -0,0 +1,8 @@
+//API URL and Headers exported for DataCard.tsx
+export const requestOptions = {
+    options: {method: "GET", headers: {'X-GitHub-Api-Version': '2022-11-28'}},
+};
+export const url = {
+    stargazers_count: process.env.STARGAZERS_COUNT,
+    contributors: process.env.CONTRIBUTORS,
+};