diff --git a/src/components/charts/ActivityContributionChart.js b/src/components/charts/ActivityContributionChart.js index 6afd0d9..40f1d33 100644 --- a/src/components/charts/ActivityContributionChart.js +++ b/src/components/charts/ActivityContributionChart.js @@ -157,71 +157,76 @@ const ActivityContributionChart = ({ session }) => { const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; return ( -
-
-

- {totalActivities} learning activities in the last year -

- - +
+
+

Activity

+ +
-
- {/* Days of week labels */} -
- {weekDays.map((day, index) => ( -
- {index % 2 === 0 && day} +
+
+

+ {totalActivities} learning activities 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] && ( +
0 + ? `${row[weekIndex].count} activit${row[weekIndex].count !== 1 ? 'ies' : 'y'}` + : 'No activities' + }`} + >
+ ) + ))} +
+ ))}
- ))} + {/* Month labels */} +
+ {getMonthLabels().map((month, index) => ( +
+ {month.name} +
+ ))} +
+
-
- {/* Calendar grid */} + {/* Legend */} +
+ Less
- {calendar[0].map((_, weekIndex) => ( -
- {calendar.map((row, dayIndex) => ( - row[weekIndex] && ( -
0 - ? `${row[weekIndex].count} activit${row[weekIndex].count !== 1 ? 'ies' : 'y'}` - : 'No activities' - }`} - >
- ) - ))} -
- ))} -
- {/* Month labels */} -
- {getMonthLabels().map((month, index) => ( -
- {month.name} -
- ))} +
+
+
+
+
+ More
- {/* Legend */} -
- Less -
-
-
-
-
-
-
- More -
); }; diff --git a/src/components/charts/CombinedContributionChart.js b/src/components/charts/CombinedContributionChart.js index c4708cb..7dbf477 100644 --- a/src/components/charts/CombinedContributionChart.js +++ b/src/components/charts/CombinedContributionChart.js @@ -9,10 +9,10 @@ const CombinedContributionChart = ({ session }) => { const prepareProgressData = useCallback(() => { if (!session?.user?.userCourses) return {}; - + const activityData = {}; const allActivities = []; // Array to store all activities for logging - + // Process course activities session.user.userCourses.forEach(courseProgress => { if (courseProgress.started) { @@ -74,15 +74,15 @@ const CombinedContributionChart = ({ session }) => { const handleNewCommit = useCallback(({ contributionData, totalCommits }) => { const activityData = prepareProgressData(); console.log("GitHub Contribution Data:", contributionData); - + // Create a new object with GitHub commits const combinedData = { ...contributionData }; - + // Add activities to the combined data Object.entries(activityData).forEach(([date, count]) => { combinedData[date] = (combinedData[date] || 0) + count; }); - + console.log("Combined Data:", combinedData); setContributionData(combinedData); setTotalContributions(totalCommits + Object.values(activityData).reduce((a, b) => a + b, 0)); @@ -95,12 +95,12 @@ const CombinedContributionChart = ({ session }) => { if (data && !isLoading) { const activityData = prepareProgressData(); const combinedData = { ...data.contributionData }; - + // Add activities to the combined data Object.entries(activityData).forEach(([date, count]) => { combinedData[date] = (combinedData[date] || 0) + count; }); - + setContributionData(combinedData); setTotalContributions(data.totalCommits + Object.values(activityData).reduce((a, b) => a + b, 0)); } @@ -117,15 +117,15 @@ const CombinedContributionChart = ({ session }) => { const generateCalendar = useCallback(() => { const today = new Date(); today.setHours(23, 59, 59, 999); - + // Calculate the start date (52 weeks + remaining days to today) const oneYearAgo = new Date(today); oneYearAgo.setDate(today.getDate() - 364); // 52 weeks * 7 days = 364 days - + // Start from the first Sunday before or on oneYearAgo const startDate = new Date(oneYearAgo); startDate.setDate(startDate.getDate() - startDate.getDay()); - + const calendar = []; // Create 7 rows for days of the week (Sunday to Saturday) for (let i = 0; i < 7; i++) { @@ -140,14 +140,14 @@ const CombinedContributionChart = ({ session }) => { const githubCount = data?.contributionData[dateString] || 0; const activityCount = (contributionData[dateString] || 0) - (data?.contributionData[dateString] || 0); const totalCount = githubCount + activityCount; - + calendar[weekDay].push({ date: new Date(currentDate), count: totalCount, githubCount, activityCount }); - + currentDate.setDate(currentDate.getDate() + 1); } @@ -181,73 +181,77 @@ const CombinedContributionChart = ({ session }) => { }, [calendar]); return ( -
- {(isLoading || isFetching) &&

Loading contribution data... ({totalContributions} total contributions / activities fetched)

} - {!isLoading && !isFetching && -
-

- {totalContributions} total contributions / activities in the last year -

- - +
+
+

Activity

+ +
- } -
- {/* Days of week labels */} -
- {weekDays.map((day, index) => ( -
- {index % 2 === 0 && day} -
- ))} -
-
- {/* Calendar grid */} -
- {calendar[0].map((_, weekIndex) => ( -
- {calendar.map((row, dayIndex) => ( - row[weekIndex] && ( -
+ {(isLoading || isFetching) &&

Loading contribution data... ({totalContributions} total contributions / activities fetched)

} + {!isLoading && !isFetching && +
+

+ {totalContributions} total contributions / activities 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] && ( +
0 ? `${row[weekIndex].githubCount} contribution${row[weekIndex].githubCount !== 1 ? 's' : ''}` : '', row[weekIndex].activityCount > 0 ? `${row[weekIndex].activityCount} activit${row[weekIndex].activityCount !== 1 ? 'ies' : 'y'}` : '' ].filter(Boolean).join(' & ') || 'No contributions or activities' - }`} - >
- ) - ))} -
- ))} -
- {/* Month labels moved to bottom */} -
- {getMonthLabels().map((month, index) => ( -
- {month.name} -
- ))} + }`} + >
+ ) + ))} +
+ ))} +
+ {/* Month labels moved to bottom */} +
+ {getMonthLabels().map((month, index) => ( +
+ {month.name} +
+ ))} +
-
-
- Less -
-
-
-
-
-
+
+ Less +
+
+
+
+
+
+
+ More
- More
); diff --git a/src/components/profile/DataTables/UserProgressTable.js b/src/components/profile/DataTables/UserProgressTable.js index e804b22..af8d9b7 100644 --- a/src/components/profile/DataTables/UserProgressTable.js +++ b/src/components/profile/DataTables/UserProgressTable.js @@ -129,7 +129,7 @@ const UserProgressTable = ({ session, ndk, windowWidth }) => { emptyMessage="No Courses or Milestones completed" value={prepareProgressData()} header={header} - style={{ maxWidth: windowWidth < 768 ? "100%" : "90%", margin: "0 auto" }} + style={{ margin: 8, width: "100%", borderRadius: "8px", border: "1px solid #333", boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)" }} pt={{ wrapper: { className: "rounded-b-lg shadow-md" diff --git a/src/components/profile/DataTables/UserPurchaseTable.js b/src/components/profile/DataTables/UserPurchaseTable.js index db764b1..1226aad 100644 --- a/src/components/profile/DataTables/UserPurchaseTable.js +++ b/src/components/profile/DataTables/UserPurchaseTable.js @@ -53,7 +53,7 @@ const UserPurchaseTable = ({ session, windowWidth }) => { emptyMessage="No purchases" value={session.user?.purchased} header={purchasesHeader} - style={{ maxWidth: windowWidth < 768 ? "100%" : "90%", margin: "0 auto", marginTop: "2rem" }} + style={{ margin: 8, width: "100%", borderRadius: "8px", border: "1px solid #333", boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)" }} pt={{ wrapper: { className: "rounded-b-lg shadow-md" diff --git a/src/components/profile/UserProfile.js b/src/components/profile/UserProfile.js index ff7c437..bcc1bc5 100644 --- a/src/components/profile/UserProfile.js +++ b/src/components/profile/UserProfile.js @@ -37,24 +37,27 @@ const UserProfile = () => {

Profile

) } -
+
- {account && account?.provider === "github" ? ( - - ) : ( - - )} - +
+ + {account && account?.provider === "github" ? ( + + ) : ( + + )} + + + +
- -
) ); diff --git a/src/components/profile/UserProfileCard.js b/src/components/profile/UserProfileCard.js index aced8f0..3a72059 100644 --- a/src/components/profile/UserProfileCard.js +++ b/src/components/profile/UserProfileCard.js @@ -41,8 +41,8 @@ const UserProfileCard = ({ user }) => { ]; return ( - <> -
+
+
user's avatar { height={100} className="rounded-full my-4" /> -
- menu.current.toggle(e)} - /> - + +
+
+ menu.current.toggle(e)} + /> + +
+

+ {user.username || user?.name || user?.email || "Anon"} +

+ { + user?.pubkey && ( +
+

+ {nip19.npubEncode(user.pubkey).slice(0, 12)}... +

+ + +
+ ) + } + {user?.createdAt && ( +

+ Joined: {new Date(user.createdAt).toLocaleDateString()} +

+ )}
- - -

- {user.username || user?.name || user?.email || "Anon"} -

- {user.pubkey && ( -

- - {nip19.npubEncode(user.pubkey)} -

- )} - {user?.lightningAddress && ( -

- Lightning Address: {user.lightningAddress.name}@plebdevs.com copyToClipboard(user.lightningAddress.name + "@plebdevs.com")} /> -

- )} - {user?.nip05 && ( -

- NIP-05: {user.nip05.name}@plebdevs.com copyToClipboard(user.nip05.name + "@plebdevs.com")} /> -

- )} - +
+ {user?.lightningAddress ? ( +

+ Lightning Address: {user.lightningAddress.name}@plebdevs.com copyToClipboard(user.lightningAddress.name + "@plebdevs.com")} /> +

+ ) : ( +
+

+ Lightning Address: None +

+ {/* todo: add tooltip */} + + +
+ )} + {user?.nip05 ? ( +

+ NIP-05: {user.nip05.name}@plebdevs.com copyToClipboard(user.nip05.name + "@plebdevs.com")} /> +

+ ) : ( +
+

+ NIP-05: None +

+ {/* todo: add tooltip */} + + +
+ )} +
+
); }; diff --git a/src/components/profile/progress/UserProgress.js b/src/components/profile/progress/UserProgress.js index d5a3f7b..0f4b63f 100644 --- a/src/components/profile/progress/UserProgress.js +++ b/src/components/profile/progress/UserProgress.js @@ -6,6 +6,7 @@ import { useRouter } from 'next/router'; import GenericButton from '@/components/buttons/GenericButton'; import UserBadges from '@/components/profile/UserBadges'; import UserProgressFlow from './UserProgressFlow'; +import { Tooltip } from 'primereact/tooltip'; const allTasks = [ { @@ -56,12 +57,14 @@ const UserProgress = () => { const [completedCourses, setCompletedCourses] = useState([]); const [tasks, setTasks] = useState([]); const [showBadges, setShowBadges] = useState(false); + const [isLoading, setIsLoading] = useState(true); const router = useRouter(); const { data: session, update } = useSession(); useEffect(() => { if (session?.user) { + setIsLoading(true); const user = session.user; const ids = user?.userCourses?.map(course => course?.completed ? course.courseId : null).filter(id => id !== null); if (ids && ids.length > 0) { @@ -74,6 +77,7 @@ const UserProgress = () => { calculateProgress([]); calculateCurrentTier([]); } + setIsLoading(false); } }, [session]); @@ -173,8 +177,13 @@ const UserProgress = () => { }; return ( -
-

Dev Journey

+
+
+

Dev Journey

+ + +

Track your progress from Pleb to Plebdev

@@ -200,88 +209,98 @@ const UserProgress = () => { )}
-
- -
- -
    - {tasks.map((task, index) => ( -
  • - handleAccordionChange(index, e.index === 0)} - > - -
    - {task.completed ? ( -
    - +
    +
    +
      + {tasks.map((task, index) => ( +
    • + handleAccordionChange(index, e.index === 0)} + > + +
      + {task.completed ? ( +
      + +
      + ) : ( +
      + +
      + )} + {task.status}
      - ) : ( -
      - -
      - )} - {task.status} -
    - - {task.tier} - -
    - } - > - {task.status === 'Connect GitHub' && !task.completed && ( -
    - -
    - )} - {task.subTasks && ( -
      - {task.subTasks.map((subTask, subIndex) => ( -
    • - {subTask.completed ? ( -
      - -
      - ) : ( -
      - -
      - )} - - {subTask.status} + + {task.tier} -
      • - ))} -
    - )} - {task.courseId && ( -
    - router.push(`/courses/${task.courseId}`)} - tooltip="View Course" - tooltipOptions={{ - position: "top" - }} - outlined - size="small" - /> -
    - )} - - -
    • - ))} -
+
+ } + > + {task.status === 'Connect GitHub' && !task.completed && ( +
+ +
+ )} + {task.subTasks && ( +
    + {task.subTasks.map((subTask, subIndex) => ( +
  • + {subTask.completed ? ( +
    + +
    + ) : ( +
    + +
    + )} + + {subTask.status} + +
    • + ))} +
+ )} + {task.courseId && ( +
+ router.push(`/courses/${task.courseId}`)} + tooltip="View Course" + tooltipOptions={{ + position: "top" + }} + outlined + size="small" + /> +
+ )} + + + + ))} + +
+ +
+ {isLoading ? ( +
+ +
+ ) : ( + + )} +
+