Skip to content

feat: automatically sort sponsors based on tier priority #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
madhavansingh wants to merge 1 commit into from
Closed

feat: automatically sort sponsors based on tier priority #12

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions src/components/SupportUsButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import type { supportUsButtonProps } from "../types/index";
import type { Theme } from "../types/index";
import type { ButtonVariant } from "../types/index";
import type { Tier } from "../types/index";

// Function to get the appropriate classes based on the selected theme, used for styling different sections of the component according to the chosen theme
function classAccordingToTheme(Theme: Theme): string {
Expand Down Expand Up @@ -70,6 +71,18 @@ function SupportUsButton({
},
buttonVariant = "AOSSIE",
}: supportUsButtonProps): React.JSX.Element {
const sortedSponsors = sponsors ? [...sponsors].sort((a, b) => {
const tierPriority: Record<Tier, number> = {
Platinum: 1,
Gold: 2,
Silver: 3,
Bronze: 4,
};
const aTier = a.sponsorshipTier || 'Bronze';
const bTier = b.sponsorshipTier || 'Bronze';
return tierPriority[aTier] - tierPriority[bTier];
}) : [];
Comment thread
coderabbitai[bot] marked this conversation as resolved.

return (
// Container for the support us button, with dynamic classes based on the selected theme and custom class names
<div
Expand Down Expand Up @@ -240,7 +253,7 @@ function SupportUsButton({
${Theme === "minimal" && "bg-gray-800/50"}
${Theme === "corporate" && "bg-blue-600/50"}`}
>
{sponsors && sponsors.length > 0 && (
{sortedSponsors && sortedSponsors.length > 0 && (
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Simplify redundant truthy check.

Since sortedSponsors is always an array (either sorted sponsors or []), the truthy check sortedSponsors && is redundant. An empty array is truthy in JavaScript.

♻️ Proposed simplification 
-        {sortedSponsors && sortedSponsors.length > 0 && (
+        {sortedSponsors.length > 0 && (
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{sortedSponsors && sortedSponsors.length > 0 && (
{sortedSponsors.length > 0 && (
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/SupportUsButton.tsx` at line 256, The conditional rendering
uses a redundant truthy check; update the JSX conditional in SupportUsButton so
it only checks the array length (replace "{sortedSponsors &&
sortedSponsors.length > 0 && (" with "{sortedSponsors.length > 0 && ("),
referring to the sortedSponsors variable to remove the unnecessary
"sortedSponsors &&" guard since sortedSponsors is always an array.

// List of sponsors with their logos and links, styled according to the selected theme and custom class names
<div
className={`${classNames.sponsors} ${classAccordingToTheme(Theme)}
Expand Down Expand Up @@ -275,7 +288,7 @@ function SupportUsButton({

{/* Sponsor logos */}
<div className="flex flex-row flex-wrap justify-center items-center gap-10 z-10">
{sponsors.map((sponsor, index) => (
{sortedSponsors.map((sponsor, index) => (
<a
href={sponsor.link}
key={index}
Comment on lines +291 to 294
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider using a stable unique key instead of array index.

Using index as a key can cause rendering issues when the list order changes (which happens with sorting). If sponsor.name is unique, or a combination of sponsor.name and sponsor.link, consider using that as the key for more predictable React reconciliation.

♻️ Proposed fix using sponsor name as key 
-              {sortedSponsors.map((sponsor, index) => (
+              {sortedSponsors.map((sponsor) => (
                 <a
                   href={sponsor.link}
-                  key={index}
+                  key={`${sponsor.name}-${sponsor.link ?? ''}`}
                   target="_blank"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{sortedSponsors.map((sponsor, index) => (
<a
href={sponsor.link}
key={index}
{sortedSponsors.map((sponsor) => (
<a
href={sponsor.link}
key={`${sponsor.name}-${sponsor.link ?? ''}`}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/SupportUsButton.tsx` around lines 291 - 294, The map is using
the array index as the React key (sortedSponsors.map(... key={index})), which is
unstable when the list is sorted; change the key to a stable unique identifier
such as sponsor.name or a combination like `${sponsor.name}-${sponsor.link}`
(use the sponsor variable inside the sortedSponsors.map callback) so React
reconciliation remains predictable.

Expand Down
Loading