From ea2aab4bd8ac88b8b6fbb5af67b491c731cb2333 Mon Sep 17 00:00:00 2001 From: ehemp Date: Sun, 8 Dec 2024 14:36:24 -0500 Subject: [PATCH 1/7] Fixed #244 -- Created apiDataCard.ts, configured DataCard count numbers for fetching actual data - Subscribers, Contributors, Stars --- frontend/src/components/DataCard/DataCard.tsx | 47 +++++++++++++++---- .../src/components/DataCard/apiDataCard.ts | 11 +++++ 2 files changed, 49 insertions(+), 9 deletions(-) create mode 100644 frontend/src/components/DataCard/apiDataCard.ts diff --git a/frontend/src/components/DataCard/DataCard.tsx b/frontend/src/components/DataCard/DataCard.tsx index bfd22d86..2e3a6061 100644 --- 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 { + 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 (
} /> } /> } />
@@ -54,7 +83,7 @@ const StatCard: React.FC = ({ threshold: 0.4, }); const intervalTime = count === 31818 ? 1 : 100; - + useEffect(() => { let start = startCount; const interval = setInterval(() => { @@ -81,7 +110,7 @@ const StatCard: React.FC = ({
{count === 50 ? '' : ''} - {inView ? number : 0}+ + {inView ? number : 0} {title}
diff --git a/frontend/src/components/DataCard/apiDataCard.ts b/frontend/src/components/DataCard/apiDataCard.ts new file mode 100644 index 00000000..da31dc35 --- /dev/null +++ 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", +}; + + + From 2ecde32ec2ecce15c4ffd39990914c34b9cdef78 Mon Sep 17 00:00:00 2001 From: ehemp Date: Sun, 8 Dec 2024 14:38:41 -0500 Subject: [PATCH 2/7] Fixed #244 -- Created apiDataCard.ts, configured DataCard count numbers for fetching actual data - Subscribers, Contributors, Stars --- frontend/src/components/DataCard/DataCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/DataCard/DataCard.tsx b/frontend/src/components/DataCard/DataCard.tsx index 2e3a6061..99350fd1 100644 --- a/frontend/src/components/DataCard/DataCard.tsx +++ b/frontend/src/components/DataCard/DataCard.tsx @@ -1,5 +1,5 @@ 'use client'; -import React, { useEffect, useState, useContext } from 'react'; +import React, { useEffect, useState } from 'react'; import { FaCity, FaGithub, FaUsers } from 'react-icons/fa'; import { useInView } from 'react-intersection-observer'; From fd808177dbf7c38243ff3bdb91657713ca738b20 Mon Sep 17 00:00:00 2001 From: ehemp Date: Sun, 8 Dec 2024 19:45:25 -0500 Subject: [PATCH 3/7] Fixed #244 -- Created apiDataCard.ts, configured DataCard count numbers for fetching actual data - Subscribers, Contributors, Stars --- frontend/src/components/DataCard/DataCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/DataCard/DataCard.tsx b/frontend/src/components/DataCard/DataCard.tsx index 99350fd1..3c5580e3 100644 --- a/frontend/src/components/DataCard/DataCard.tsx +++ b/frontend/src/components/DataCard/DataCard.tsx @@ -21,7 +21,7 @@ export const DataCard = () => { const [dataCount, setDataCount] = useState({}); const [loading, setLoading] = useState(true); useEffect(() => { - async function fetchStargazerCount(url1: string, url2: string, options: object): Promise { + async function fetchDataCount(url1: string, url2: string, options: object): Promise { try { if (url1 && url2) { let res = await fetch(url1, options); @@ -38,7 +38,7 @@ export const DataCard = () => { } } if (loading){ - fetchStargazerCount(url.stargazers_subs_count, url.contributors, requestOptions.options); + fetchDataCount(url.stargazers_subs_count, url.contributors, requestOptions.options); } },[]) From c92293308c38289517d8a5d5eab86dd19176ece0 Mon Sep 17 00:00:00 2001 From: ehemp Date: Mon, 9 Dec 2024 09:49:07 -0500 Subject: [PATCH 4/7] Fixed #244 -- Created apiDataCard.ts, configured DataCard count numbers for fetching actual data - Subscribers explicitly set, Contributors & Stars set by API --- frontend/src/components/DataCard/DataCard.tsx | 6 +++--- frontend/src/components/DataCard/apiDataCard.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/DataCard/DataCard.tsx b/frontend/src/components/DataCard/DataCard.tsx index 3c5580e3..6e5e89d5 100644 --- a/frontend/src/components/DataCard/DataCard.tsx +++ b/frontend/src/components/DataCard/DataCard.tsx @@ -18,7 +18,7 @@ interface StatCardProps { export const DataCard = () => { - const [dataCount, setDataCount] = useState({}); + const [dataCount, setDataCount] = useState({stargazers_count: Number, subscribers_count: Number, contributors_count: Number}); const [loading, setLoading] = useState(true); useEffect(() => { async function fetchDataCount(url1: string, url2: string, options: object): Promise { @@ -28,7 +28,7 @@ export const DataCard = () => { 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)}); + setDataCount({stargazers_count: Number(data.stargazers_count), subscribers_count: 250, contributors_count: Number(data2.length)}); setLoading(false); } @@ -38,7 +38,7 @@ export const DataCard = () => { } } if (loading){ - fetchDataCount(url.stargazers_subs_count, url.contributors, requestOptions.options); + fetchDataCount(url.stargazers_count, url.contributors, requestOptions.options); } },[]) diff --git a/frontend/src/components/DataCard/apiDataCard.ts b/frontend/src/components/DataCard/apiDataCard.ts index da31dc35..ad4a26e8 100644 --- a/frontend/src/components/DataCard/apiDataCard.ts +++ b/frontend/src/components/DataCard/apiDataCard.ts @@ -3,7 +3,7 @@ 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", + stargazers_count: "https://api.github.com/repos/djangoindia/djangoindia.org", contributors: "https://api.github.com/repos/djangoindia/djangoindia.org/contributors", }; From ad239f71e82c305283c86da59226361d0c678f0a Mon Sep 17 00:00:00 2001 From: ehemp Date: Mon, 9 Dec 2024 09:52:17 -0500 Subject: [PATCH 5/7] Fixed #244 -- Created apiDataCard.ts, configured DataCard count numbers for fetching actual data - Subscribers explicitly set, Contributors & Stars set by API --- frontend/src/components/DataCard/DataCard.tsx | 3 --- frontend/src/components/DataCard/apiDataCard.ts | 5 +---- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/frontend/src/components/DataCard/DataCard.tsx b/frontend/src/components/DataCard/DataCard.tsx index 6e5e89d5..7f2451d8 100644 --- a/frontend/src/components/DataCard/DataCard.tsx +++ b/frontend/src/components/DataCard/DataCard.tsx @@ -14,9 +14,6 @@ interface StatCardProps { icon: React.ReactNode; } - - - export const DataCard = () => { const [dataCount, setDataCount] = useState({stargazers_count: Number, subscribers_count: Number, contributors_count: Number}); const [loading, setLoading] = useState(true); diff --git a/frontend/src/components/DataCard/apiDataCard.ts b/frontend/src/components/DataCard/apiDataCard.ts index ad4a26e8..0ae36a5c 100644 --- a/frontend/src/components/DataCard/apiDataCard.ts +++ b/frontend/src/components/DataCard/apiDataCard.ts @@ -5,7 +5,4 @@ export const requestOptions = { export const url = { stargazers_count: "https://api.github.com/repos/djangoindia/djangoindia.org", contributors: "https://api.github.com/repos/djangoindia/djangoindia.org/contributors", -}; - - - +}; \ No newline at end of file From 94bafddacad6e1b1921e0e0ceceeab4c94188b24 Mon Sep 17 00:00:00 2001 From: ehemp Date: Mon, 9 Dec 2024 10:04:17 -0500 Subject: [PATCH 6/7] Fixed #244 -- Created apiDataCard.ts, configured DataCard count numbers for fetching actual data - Subscribers explicitly set, Contributors & Stars set by API. Added comments. --- frontend/src/components/DataCard/DataCard.tsx | 2 +- frontend/src/components/DataCard/apiDataCard.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/DataCard/DataCard.tsx b/frontend/src/components/DataCard/DataCard.tsx index 7f2451d8..cb611df2 100644 --- a/frontend/src/components/DataCard/DataCard.tsx +++ b/frontend/src/components/DataCard/DataCard.tsx @@ -1,6 +1,5 @@ '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'; @@ -18,6 +17,7 @@ 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 { try { if (url1 && url2) { diff --git a/frontend/src/components/DataCard/apiDataCard.ts b/frontend/src/components/DataCard/apiDataCard.ts index 0ae36a5c..bbac23a8 100644 --- a/frontend/src/components/DataCard/apiDataCard.ts +++ b/frontend/src/components/DataCard/apiDataCard.ts @@ -1,4 +1,4 @@ - +//API URL and Headers exported for DataCard.tsx export const requestOptions = { options: {method: "GET", headers: {'X-GitHub-Api-Version': '2022-11-28'}}, }; From 6d062b24dea0f78b5e85a7ed45a50965433295b9 Mon Sep 17 00:00:00 2001 From: ehemp Date: Thu, 9 Jan 2025 14:02:48 -0500 Subject: [PATCH 7/7] Added api URLs to .env and .env.example --- .env.example | 4 ++++ frontend/src/components/DataCard/apiDataCard.ts | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/.env.example b/.env.example index d3769a6a..05f4c897 100644 --- a/.env.example +++ b/.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 diff --git a/frontend/src/components/DataCard/apiDataCard.ts b/frontend/src/components/DataCard/apiDataCard.ts index bbac23a8..02741362 100644 --- a/frontend/src/components/DataCard/apiDataCard.ts +++ b/frontend/src/components/DataCard/apiDataCard.ts @@ -3,6 +3,6 @@ export const requestOptions = { options: {method: "GET", headers: {'X-GitHub-Api-Version': '2022-11-28'}}, }; export const url = { - stargazers_count: "https://api.github.com/repos/djangoindia/djangoindia.org", - contributors: "https://api.github.com/repos/djangoindia/djangoindia.org/contributors", + stargazers_count: process.env.STARGAZERS_COUNT, + contributors: process.env.CONTRIBUTORS, }; \ No newline at end of file