Website: Add a toggle feature to sort open-source contributors #1005
Conversation
…to sort the list of contributors by the number of commits or the lastest commits
activus-d
requested review from
andrashee,
mkue,
ssandino and
socialincome-dev
as code owners
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthroughThis pull request introduces updates to the open-source contributors section of the website, focusing on enhancing component exports, contributor display logic, and commit data retrieval. Key changes include exporting the Changes
Possibly related PRs
Suggested Labels
Suggested Reviewers
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx (2)
Line range hint
7-18: Consolidate contributor interfaces
ContributorPropandContributorinterfaces have overlapping properties. Consider using a single interface.-type ContributorProp = { - name: string; - commits: number; - avatarUrl: string; -}; - interface Contributor { id: number; name: string; avatarUrl: string; commits: number; } + +type ContributorProp = Omit<Contributor, 'id'>;
54-54: Extract magic number to constantThe value 16 for pagination should be defined as a named constant.
+const CONTRIBUTORS_PER_PAGE = 16; + export function OpenSourceContributorsClient({ // ... - const displayedContributors = showAllContributors ? contributors : contributors.slice(0, 16); + const displayedContributors = showAllContributors ? contributors : contributors.slice(0, CONTRIBUTORS_PER_PAGE);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
ui/src/index.ts(1 hunks)website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx(4 hunks)website/src/app/[lang]/[region]/(website)/open-source/(components)/get-commits.ts(2 hunks)website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx(2 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
[error] 49-49: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Test website
🔇 Additional comments (3)
ui/src/index.ts (1)
30-30: LGTM!The toggle-group component export is correctly added.
website/src/app/[lang]/[region]/(website)/open-source/(components)/get-commits.ts (1)
Line range hint
6-11: Consider handling null authorsMaking the author field non-nullable might cause runtime errors if GitHub API returns null authors for some commits.
website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx (1)
74-77: LGTM!Toggle implementation is clean and follows the UI component library patterns.
website/src/app/[lang]/[region]/(website)/open-source/(components)/get-commits.ts
Show resolved
Hide resolved
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
Outdated
Show resolved
Hide resolved
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
Show resolved
Hide resolved
|
@activus-d is attempting to deploy a commit to the Social Income Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx (1)
49-54: Strengthen null safety in date comparison.The null check could be more robust by verifying the date value before creating a Date object.
-if (commit.author?.id && commit.commit?.author?.date) { +const date = commit.commit?.author?.date; +if (commit.author?.id && date) { const contributorId = commit.author.id; - const commitDate = new Date(commit.commit.author.date); + const commitDate = new Date(date); if (!latestCommitDates.has(contributorId) || commitDate > latestCommitDates.get(contributorId)) {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Test website
🔇 Additional comments (2)
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx (2)
25-31: Well-structured interface definition.The
CombinedContributorinterface provides clear type safety for the contributor data structure.
3-3: 🛠️ Refactor suggestionRemove unused imports.
ToggleGroupandToggleGroupItemare imported but not used in this file. They appear to be used in the client component instead.-import { ToggleGroup, ToggleGroupItem } from '@socialincome/ui';Likely invalid or redundant comment.
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
Outdated
Show resolved
Hide resolved
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Test website
- GitHub Check: Security checks (typescript)
🔇 Additional comments (3)
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx (3)
25-31: Well-structured interface definitionThe
CombinedContributorinterface provides a clear and type-safe structure for the contributor data.
82-83: 🛠️ Refactor suggestionUse camelCase for React props
Props should follow camelCase naming convention in React.
-ContributorsByCommitCount={contributorsByCommitCount} -ContributorsByLatestCommit={contributorsByLatestCommit} +contributorsByCommitCount={contributorsByCommitCount} +contributorsByLatestCommit={contributorsByLatestCommit}Likely invalid or redundant comment.
3-3: Remove unused imports
ToggleGroupandToggleGroupItemare imported but not used in this file.
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
Outdated
Show resolved
Hide resolved
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
Outdated
Show resolved
Hide resolved
activus-d
force-pushed
the
sort-contributors
branch
from
40144e8 to
cb91918
Compare
…yed contributors after sorting
activus-d
force-pushed
the
sort-contributors
branch
from
ee0dd0c to
8f46384
Compare
activus-d
changed the title
|
@activus-d in case you don't have access to the deployment logs. Here the errors that show up: Hope this helps to debug. |
…fined; use map/filter to combine data in 'combinedContributors' to improve readability
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx (1)
58-67: Extract fallback date as a constant.Consider extracting
new Date(0)as a named constant for better readability and maintainability.+const FALLBACK_DATE = new Date(0); const combinedContributors = contributors .filter((contributor) => latestCommitDates.has(contributor.id)) .map((contributor) => ({ id: contributor.id, name: contributor.name, avatarUrl: contributor.avatarUrl, commits: contributor.commits, - latestCommitDate: latestCommitDates.get(contributor.id) || new Date(0), + latestCommitDate: latestCommitDates.get(contributor.id) || FALLBACK_DATE, }));website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx (3)
13-18: Consider moving interface to a shared location.The
Contributorinterface could be moved to a shared types file since it's used across multiple components.
51-52: Add type safety to toggle value.Consider using a union type for the toggle value to prevent typos and ensure type safety.
+type ToggleValue = "commit count" | "latest commit"; -const [selectedToggle, setSelectedToggle] = useState("commit count"); +const [selectedToggle, setSelectedToggle] = useState<ToggleValue>("commit count");
56-63: Simplify toggle handler logic.The conditional logic can be simplified using an object lookup.
+const contributorsMap = { + "latest commit": contributorsByLatestCommit, + "commit count": contributorsByCommitCount, +} as const; const handleToggleChange = (value: string) => { setSelectedToggle(value); - if (value === "latest commit") { - setContributors(contributorsByLatestCommit); - } else { - setContributors(contributorsByCommitCount); - } + setContributors(contributorsMap[value as keyof typeof contributorsMap]); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx(4 hunks)website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Test website
🔇 Additional comments (4)
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx (3)
45-56: LGTM! Well-structured commit date collection.The code properly handles null checks and maintains the latest commit date per contributor.
71-77: LGTM! Clean sorting implementation.The sorting logic is well-implemented with proper type safety.
12-23: 🛠️ Refactor suggestionRemove duplicate interface definition.
The
GitHubCommitinterface is already defined inget-commits.ts. Import it instead of redefining.-interface GitHubCommit { - author: { - id: number; - login: string; - avatar_url: string; - }; - commit: { - author: { - date: string; - }; - }; -} +import { GitHubCommit } from '../(components)/get-commits';Likely invalid or redundant comment.
website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx (1)
73-78: LGTM! Clean toggle group implementation.The toggle group UI is well-structured with proper spacing and component usage.
Thank you @ssandino |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx(2 hunks)
🔇 Additional comments (2)
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx (2)
11-30: LGTM! Well-structured interfaces.The
GitHubCommitandCombinedContributorinterfaces provide good type safety and clear data structure.
70-84: LGTM! Clean sorting implementation.The sorting logic is efficient and the component structure follows React best practices.
website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
Show resolved
Hide resolved
Add a toogle feature to the 'contributors' section to allow visitors sort the list of contributors by the Number of commits or Lastest commits
Summary by CodeRabbit
Release Notes
New Features
Improvements
Technical Updates