Feature/liveactivity #493
Feature/liveactivity #493
Conversation
…g Contributors component
…tyles and GitHub event links
…ting Contributors component; add detailed README documentation.
|
Someone is attempting to deploy a commit to the recode Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs. In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊 Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv. We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰 🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨ 📚Your perks for contribution to this community 👇🏻
If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
There was a problem hiding this comment.
Pull Request Overview
The PR adds a new FloatingContributors component that displays live GitHub activity and contributor information for the recodehive/recode-website repository. It replaces static demo data with real-time GitHub API integration and implements comprehensive fallback mechanisms.
Key changes:
- Complete rewrite of activity data fetching to use real GitHub Events API
- Addition of comprehensive type definitions for GitHub API responses
- Implementation of localStorage caching with 2-minute expiration for API optimization
- Enhanced UI interactions with clickable elements and improved accessibility
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/components/FloatingContributors/index.tsx | Complete rewrite with live GitHub API integration, caching, and enhanced interactivity |
| src/components/FloatingContributors/README.md | New comprehensive documentation covering features, API integration, and usage |
| src/components/FloatingContributors/FloatingContributors.css | Enhanced styling with new activity item styles, hover effects, and accessibility improvements |
| package.json | Added date-fns dependency |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
|
||
| // Format relative time (e.g., "2 hours ago") | ||
| const formatTimeAgo = (date: Date): string => { | ||
| const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000); | ||
|
|
||
| let interval = Math.floor(seconds / 31536000); | ||
| if (interval > 1) return `${interval} years ago`; | ||
|
|
||
| interval = Math.floor(seconds / 2592000); | ||
| if (interval > 1) return `${interval} months ago`; | ||
|
|
||
| interval = Math.floor(seconds / 86400); | ||
| if (interval > 1) return `${interval} days ago`; | ||
| if (interval === 1) return `1 day ago`; | ||
|
|
||
| interval = Math.floor(seconds / 3600); | ||
| if (interval > 1) return `${interval} hours ago`; | ||
| if (interval === 1) return `1 hour ago`; | ||
|
|
||
| interval = Math.floor(seconds / 60); | ||
| if (interval > 1) return `${interval} minutes ago`; | ||
| if (interval === 1) return `1 minute ago`; | ||
|
|
||
| return `just now`; |
There was a problem hiding this comment.
The date-fns import is missing, but formatTimeAgo function is implemented manually. Since date-fns was added as a dependency, consider using its format functions like formatDistanceToNow for more robust time formatting instead of the custom implementation.
| // Format relative time (e.g., "2 hours ago") | |
| const formatTimeAgo = (date: Date): string => { | |
| const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000); | |
| let interval = Math.floor(seconds / 31536000); | |
| if (interval > 1) return `${interval} years ago`; | |
| interval = Math.floor(seconds / 2592000); | |
| if (interval > 1) return `${interval} months ago`; | |
| interval = Math.floor(seconds / 86400); | |
| if (interval > 1) return `${interval} days ago`; | |
| if (interval === 1) return `1 day ago`; | |
| interval = Math.floor(seconds / 3600); | |
| if (interval > 1) return `${interval} hours ago`; | |
| if (interval === 1) return `1 hour ago`; | |
| interval = Math.floor(seconds / 60); | |
| if (interval > 1) return `${interval} minutes ago`; | |
| if (interval === 1) return `1 minute ago`; | |
| return `just now`; | |
| import { formatDistanceToNow } from 'date-fns'; | |
| // Format relative time (e.g., "2 hours ago") | |
| const formatTimeAgo = (date: Date): string => { | |
| return formatDistanceToNow(date, { addSuffix: true }); |
Copilot uses AI. Check for mistakes.
| if (lastFetched && now - lastFetched < 30000) { | ||
| // Don't fetch more than once every 30 seconds | ||
| return; | ||
| } |
There was a problem hiding this comment.
The 30-second throttle value should be extracted as a named constant (e.g., const FETCH_THROTTLE_MS = 30000) to improve maintainability and make the timing configurable.
Copilot uses AI. Check for mistakes.
| {contributors.length > 12 && ( | ||
| <div className="contributors-more"> | ||
| <span>+{contributors.length - 8}</span> | ||
| <span>+{contributors.length - 12} more</span> |
There was a problem hiding this comment.
There's a logic inconsistency: the code displays 'more than 12' contributors but only shows the top 5 (line 549: .slice(0, 5)). The condition should check contributors.length > 5 and display +{contributors.length - 5} more to match the actual display count.
Copilot uses AI. Check for mistakes.
| fallbackActivities.forEach(activity => { | ||
| const login = activity.contributor.login; | ||
| if (!contributorsMap.has(login)) { | ||
| contributorsMap.set(login, { | ||
| id: `fallback-${login}`, | ||
| login, | ||
| avatar_url: activity.contributor.avatar_url, | ||
| contributions: Math.floor(Math.random() * 50) + 10, |
There was a problem hiding this comment.
Using Math.random() for fallback contribution counts creates non-deterministic behavior. Consider using fixed values or deriving them from array indices to ensure consistent fallback data across renders.
| fallbackActivities.forEach(activity => { | |
| const login = activity.contributor.login; | |
| if (!contributorsMap.has(login)) { | |
| contributorsMap.set(login, { | |
| id: `fallback-${login}`, | |
| login, | |
| avatar_url: activity.contributor.avatar_url, | |
| contributions: Math.floor(Math.random() * 50) + 10, | |
| fallbackActivities.forEach((activity, idx) => { | |
| const login = activity.contributor.login; | |
| if (!contributorsMap.has(login)) { | |
| contributorsMap.set(login, { | |
| id: `fallback-${login}`, | |
| login, | |
| avatar_url: activity.contributor.avatar_url, | |
| contributions: 10 + 5 * idx, |
Copilot uses AI. Check for mistakes.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
iitzIrFan
added
documentation
2 participants
Description
The
FloatingContributorscomponent is a dynamic React component that displays live GitHub activity and a list of contributors for therecodehive/recode-websiterepository. It fetches data from GitHub APIs, processes it, and renders it in an interactive and animated UI.More details can be viewed in the Readme file under the
FloatingContributorsSolves: #321
Type of Change
Changes Made
Dependencies
Checklist
npm run buildand attached scrrenshot in this PR.