diff --git a/src/components/charts/CombinedContributionChart.js b/src/components/charts/CombinedContributionChart.js
index 682921b..9fdc0ce 100644
--- a/src/components/charts/CombinedContributionChart.js
+++ b/src/components/charts/CombinedContributionChart.js
@@ -8,6 +8,7 @@ const CombinedContributionChart = ({ session }) => {
const [contributionData, setContributionData] = useState({});
const [totalContributions, setTotalContributions] = useState(0);
const windowWidth = useWindowWidth();
+ const [retryCount, setRetryCount] = useState(0);
const prepareProgressData = useCallback(() => {
if (!session?.user?.userCourses) return {};
@@ -85,7 +86,45 @@ const CombinedContributionChart = ({ session }) => {
setTotalContributions(totalCommits + Object.values(activityData).reduce((a, b) => a + b, 0));
}, [prepareProgressData]);
- const { data, isLoading, isFetching } = useFetchGithubCommits(session, handleNewCommit);
+ const {
+ data,
+ isLoading,
+ isFetching,
+ error,
+ refetch
+ } = useFetchGithubCommits(session, handleNewCommit);
+
+ // Add recovery logic
+ useEffect(() => {
+ if (error && retryCount < 3) {
+ const timer = setTimeout(() => {
+ setRetryCount(prev => prev + 1);
+ refetch();
+ }, 1000 * (retryCount + 1)); // Exponential backoff
+
+ return () => clearTimeout(timer);
+ }
+ }, [error, retryCount, refetch]);
+
+ // Reset retry count on successful data fetch
+ useEffect(() => {
+ if (data) {
+ setRetryCount(0);
+ }
+ }, [data]);
+
+ // Add loading state check
+ useEffect(() => {
+ if (isLoading || isFetching) {
+ const loadingTimeout = setTimeout(() => {
+ if (!data) {
+ refetch();
+ }
+ }, 5000); // Timeout after 5 seconds
+
+ return () => clearTimeout(loadingTimeout);
+ }
+ }, [isLoading, isFetching, data, refetch]);
// Initialize from cached data if available
useEffect(() => {
@@ -256,6 +295,16 @@ const CombinedContributionChart = ({ session }) => {
More
+ {error && retryCount >= 3 && (
+
+ Error loading data.
+
+ )}
diff --git a/src/components/charts/GithubContributionChart.js b/src/components/charts/GithubContributionChart.js
deleted file mode 100644
index 24c6df0..0000000
--- a/src/components/charts/GithubContributionChart.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { useFetchGithubCommits } from '@/hooks/githubQueries/useFetchGithubCommits';
-import { Tooltip } from 'primereact/tooltip';
-
-const GithubContributionChart = ({ username }) => {
- const [contributionData, setContributionData] = useState({});
- const [totalCommits, setTotalCommits] = useState(0);
-
- const handleNewCommit = useCallback(({ contributionData, totalCommits }) => {
- setContributionData(contributionData);
- setTotalCommits(totalCommits);
- }, []);
-
- const { data, isLoading, isFetching } = useFetchGithubCommits(username, handleNewCommit);
-
- // Initialize from cached data if available
- useEffect(() => {
- if (data && !isLoading) {
- setContributionData(data.contributionData);
- setTotalCommits(data.totalCommits);
- }
- }, [data, isLoading]);
-
- const getColor = useCallback((count) => {
- if (count === 0) return 'bg-gray-100';
- if (count < 5) return 'bg-green-300';
- if (count < 10) return 'bg-green-400';
- if (count < 20) return 'bg-green-600';
- return 'bg-green-700';
- }, []);
-
- const generateCalendar = useCallback(() => {
- const today = new Date();
- const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());
- const calendar = [];
-
- // Create 7 rows for days of the week
- for (let i = 0; i < 7; i++) {
- calendar[i] = [];
- }
-
- // Fill in the dates
- for (let d = new Date(oneYearAgo); d <= today; d.setDate(d.getDate() + 1)) {
- const dateString = d.toISOString().split('T')[0];
- const count = contributionData[dateString] || 0;
- const dayOfWeek = d.getDay();
- calendar[dayOfWeek].push({ date: new Date(d), count });
- }
-
- return calendar;
- }, [contributionData]);
-
- const calendar = generateCalendar();
- const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-
- const getMonthLabels = useCallback(() => {
- const today = new Date();
- const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());
- const months = [];
- let currentMonth = -1;
-
- for (let d = new Date(oneYearAgo); d <= today; d.setDate(d.getDate() + 1)) {
- const month = d.getMonth();
- if (month !== currentMonth) {
- months.push({
- name: d.toLocaleString('default', { month: 'short' }),
- index: calendar[0].findIndex(
- (_, weekIndex) => calendar[0][weekIndex]?.date.getMonth() === month
- )
- });
- currentMonth = month;
- }
- }
- return months;
- }, [calendar]);
-
- return (
-
- {(isLoading || isFetching) &&
Loading contribution data... ({totalCommits} commits fetched)
}
- {!isLoading && !isFetching &&
-
-
- {totalCommits} contributions in the last year
-
-
-
-
- }
-
- {/* Days of week labels */}
-
- {weekDays.map((day, index) => (
-
- {index % 2 === 0 && day}
-
- ))}
-
-
- {/* Calendar grid */}
-
- {calendar[0].map((_, weekIndex) => (
-
- {calendar.map((row, dayIndex) => (
- row[weekIndex] && (
-
- )
- ))}
-
- ))}
-
- {/* Month labels moved to bottom */}
-
- {getMonthLabels().map((month, index) => (
-
- {month.name}
-
- ))}
-
-
-
-
-
-
-
- {calendar.map((day, index) => (
-
- ))}
-
-
-
-
-
Connect to GitHub (Coming Soon)
-
-
-
+
{rowData.type}
);
const eventTemplate = (rowData) => (
-
+
{rowData.eventType}
);
const nameTemplate = (rowData) => (
- {rowData.type === 'course'
- ?
- :
- }
+ {rowData.type === 'badge' ? (
+
+ {rowData.name}
+
+ ) : rowData.type === 'course' ? (
+
+ ) : (
+
+ )}