Skip to content

fix: prevent crash and handle missing organizationInformation #22

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
swathi2006 wants to merge 2 commits into from
Closed

fix: prevent crash and handle missing organizationInformation #22

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ad2874
fix: prevent crash and handle missing organizationInformation
swathi2006 Mar 20, 2026
8ed381d
cta and org errors resolved
swathi2006 Mar 20, 2026
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
62 changes: 44 additions & 18 deletions src/components/SupportUsButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,9 @@ function getButtonClasses(buttonVariant: ButtonVariant): string {
}

// Main component function that renders the support us button, taking in various props for customization and rendering different sections such as hero, organization information, sponsors, and call-to-action based on the provided data and selected theme and button variant
function SupportUsButton({
function SupportUsButton(

{
Theme = "AOSSIE",
pattern = "AOSSIE",
hero = {
Expand All @@ -70,11 +72,29 @@ function SupportUsButton({
},
buttonVariant = "AOSSIE",
}: supportUsButtonProps): React.JSX.Element {
// Ensure required props are provided to prevent runtime crashes

if (!organizationInformation) {
console.warn(
"SupportUsButton: 'organizationInformation' is required."
);
}

if (!ctaSection) {
console.warn(
"SupportUsButton: 'ctaSection' is required."
);
}
Comment on lines +75 to +87
Copy link

@coderabbitai coderabbitai bot Mar 20, 2026

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Keep the missing-prop warnings out of the render path.

These console.warn calls fire on every re-render while the prop is absent, so parent updates and React StrictMode will spam consumer consoles. Emit them once from a dev-only validator/effect instead of the component body. As per coding guidelines, "The code adheres to best practices associated with React".

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/SupportUsButton.tsx` around lines 75 - 87, The console.warn
calls in the SupportUsButton component body cause repeated warnings on every
render; remove those warnings from the render path and instead add a dev-only
one-time validator using a useEffect inside SupportUsButton (or a small
validateDevProps helper called from that effect) that checks
organizationInformation and ctaSection once (empty dependency array) and logs
warnings only when process.env.NODE_ENV !== 'production'; ensure you delete the
inline console.warn lines and reference the same prop names
(organizationInformation, ctaSection) in the validator so the behavior and
messages remain identical but only emit once during development.


// Defensive fallback to handle unexpected missing props at runtime
const org = organizationInformation ?? null;
const cta = ctaSection ?? null;
return (
// Container for the support us button, with dynamic classes based on the selected theme and custom class names
<div
className={`w-full font-sans justify-center items-center text-center ${Theme == "light" || Theme == "dark" ? classAccordingToTheme(Theme) : "bg-black text-white"} ${classNames.container}`}
>

{/* Hero section with optional background image*/}
<div className="relative w-full h-[50vh] flex justify-center">
{hero.Image && (
Expand Down Expand Up @@ -128,7 +148,9 @@ function SupportUsButton({
</div>

{/* Organization information section */}
<div className="w-full flex justify-center p-10 mb-50">
{/* Avoid rendering empty organization section when data is not provided */}
{org && (
<div className="w-full flex justify-center p-10 mb-50">
<div
className={`${classNames.organizationInformation}
relative w-[90%] p-15 rounded-2xl overflow-visible
Expand Down Expand Up @@ -162,21 +184,21 @@ function SupportUsButton({

{/* Organization logo */}
<div>
{typeof organizationInformation.logo === "string" ? (
{typeof org.logo === "string" ? (
<span
className="block h-fit w-fit p-4 bg-black text-white rounded-2xl"
title={organizationInformation.logo}
title={org.logo}
>
<b className="text-2xl italic">
{organizationInformation.logo}
{org.logo}
</b>
</span>
) : (
<img
className="w-24 h-24 bg-white/80 pointer-none:cursor-none select-none rounded-2xl object-cover object-center"
src={organizationInformation.logo?.src}
alt={organizationInformation.logo?.alt}
title={organizationInformation.logo?.alt}
src={org.logo?.src}
alt={org.logo?.alt}
title={org.logo?.alt}
Comment on lines +187 to +201
Copy link

@coderabbitai coderabbitai bot Mar 20, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

find . -name "index.ts" -path "*/types/*" | head -5

Repository: AOSSIE-Org/SupportUsButton

Length of output: 90

🏁 Script executed:

find . -name "SupportUsButton.tsx" | head -5

Repository: AOSSIE-Org/SupportUsButton

Length of output: 106

🏁 Script executed:

cat -n src/types/index.ts

Repository: AOSSIE-Org/SupportUsButton

Length of output: 4642

🏁 Script executed:

cat -n src/components/SupportUsButton.tsx | head -220 | tail -80

Repository: AOSSIE-Org/SupportUsButton

Length of output: 3781

Handle the optional logo prop before rendering <img>.

organizationInformation.logo is optional (type: Image | string | undefined), but the ternary at lines 187-204 falls through to <img> when org.logo is undefined. This renders a broken image with src={undefined}. Add an explicit guard: render the span for strings, the image only when org.logo is an object, and null when undefined.

Suggested fix 
-              {typeof org.logo === "string" ? (
+              {typeof org.logo === "string" ? (
                 <span
                   className="block h-fit w-fit p-4 bg-black text-white rounded-2xl"
                   title={org.logo}
                 >
                   <b className="text-2xl italic">
                     {org.logo}
                   </b>
                 </span>
-              ) : (
+              ) : org.logo ? (
                 <img
                   className="w-24 h-24 bg-white/80 pointer-none:cursor-none select-none rounded-2xl object-cover object-center"
-                  src={org.logo?.src}
-                  alt={org.logo?.alt}
-                  title={org.logo?.alt}
+                  src={org.logo.src}
+                  alt={org.logo.alt}
+                  title={org.logo.alt}
                   draggable={false}
                 />
-              )}
+              ) : null}
📝 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
{typeof org.logo === "string" ? (
<span
className="block h-fit w-fit p-4 bg-black text-white rounded-2xl"
title={organizationInformation.logo}
title={org.logo}
>
<b className="text-2xl italic">
{organizationInformation.logo}
{org.logo}
</b>
</span>
) : (
<img
className="w-24 h-24 bg-white/80 pointer-none:cursor-none select-none rounded-2xl object-cover object-center"
src={organizationInformation.logo?.src}
alt={organizationInformation.logo?.alt}
title={organizationInformation.logo?.alt}
src={org.logo?.src}
alt={org.logo?.alt}
title={org.logo?.alt}
{typeof org.logo === "string" ? (
<span
className="block h-fit w-fit p-4 bg-black text-white rounded-2xl"
title={org.logo}
>
<b className="text-2xl italic">
{org.logo}
</b>
</span>
) : org.logo ? (
<img
className="w-24 h-24 bg-white/80 pointer-none:cursor-none select-none rounded-2xl object-cover object-center"
src={org.logo.src}
alt={org.logo.alt}
title={org.logo.alt}
draggable={false}
/>
) : null}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/SupportUsButton.tsx` around lines 187 - 201, The rendering
currently falls through to the <img> when org.logo is undefined; update the
SupportUsButton render logic to explicitly guard the optional logo: keep the
string branch for typeof org.logo === "string", render the <img> only when
org.logo is an object (e.g., check org.logo && typeof org.logo !== "string"),
and return null (or nothing) when org.logo is undefined; modify the JSX around
org.logo (the ternary that produces the <span> or <img>) to use this three-way
guard so src and alt are only accessed when org.logo is a defined object.

draggable={false}
/>
)}
Expand All @@ -185,15 +207,15 @@ function SupportUsButton({
{/* Organization name and description */}
<div className="flex flex-col gap-4">
<h2 className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}>
{organizationInformation.name}
{org.name}
</h2>
<p className="font-[650] text-lg">
{organizationInformation.description}
{org.description}
</p>
</div>

{/* Line */}
{organizationInformation.projectInformation && (
{org.projectInformation && (
<div
className={`
border
Expand All @@ -206,7 +228,7 @@ function SupportUsButton({
)}

{/* Project information */}
{organizationInformation.projectInformation && (
{org.projectInformation && (
<div className="flex flex-col gap-2">
<h3
className={`font-bold w-fit uppercase text-sm p-2 rounded-lg
Expand All @@ -217,7 +239,7 @@ function SupportUsButton({
${Theme === "corporate" && "bg-blue-600/50"}`}
>
ABOUT PROJECT:{" "}
{organizationInformation.projectInformation.name}
{org.projectInformation.name}
</h3>
<p
className={`italic font-semibold
Expand All @@ -228,14 +250,16 @@ function SupportUsButton({
${Theme === "corporate" && "text-blue-600/80"}
`}
>
"{organizationInformation.projectInformation.description}"
"{org.projectInformation.description}"
</p>
</div>
)}
</div>
</div>
</div>

)}

{/* Sponsors section */}
<div
className={`w-full flex justify-center mt-10 p-10
Expand Down Expand Up @@ -417,21 +441,23 @@ function SupportUsButton({
</div>

{/* Call-to-action section with title, description, and sponsor links */}
{cta && (

<div
className={`w-full flex justify-center p-10 ${(Theme === "light" || Theme === "dark") && classAccordingToTheme(Theme)} ${classNames.ctaSection}`}
>
<div className="w-4/5 flex flex-col items-center gap-5 py-20 border border-primary rounded-sm mt-20 mb-20">
<h2 className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}>
{ctaSection.title}
{cta.title}
</h2>
<p
className={`font-semibold
${Theme === "light" ? "text-gray-600" : "text-gray-400"}`}
>
{ctaSection.description}
{cta.description}
</p>
<div className="flex flex-wrap justify-center items-center gap-5 mt-8">
{ctaSection.sponsorLink.map((link, index) => (
{cta.sponsorLink.map((link, index) => (
<a
href={link.url}
key={index}
Expand All @@ -449,7 +475,7 @@ function SupportUsButton({
))}
</div>
</div>
</div>
</div>)}
</div>
);
}
Expand Down
Loading