fix(#132) : prevent modal click-through and ensure correct stacking for ViewProfileModal #175
Conversation
WalkthroughUpdates the backend environment template with explicit placeholder values for API keys, fixes a modal z-index issue in the collaboration modal by closing it before opening a creator profile, and applies formatting refinements to the HomePage component. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Modal as NewCollaborationModal
participant ProfileView
User->>Modal: Click "View Profile" button
rect rgb(220, 240, 220)
Note over Modal: NEW: Close modal first
Modal->>Modal: setOpen(false)
end
Modal->>ProfileView: Navigate to creator profile
Modal->>User: Modal closes, Profile displays in front
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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 (3)
Backend/.env-example(1 hunks)Frontend/src/components/collaboration-hub/NewCollaborationModal.tsx(1 hunks)Frontend/src/pages/HomePage.tsx(34 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: Saahi30
Repo: AOSSIE-Org/InPactAI PR: 98
File: Frontend/src/pages/CollaborationDetails.tsx:519-521
Timestamp: 2025-07-12T20:28:05.017Z
Learning: In frontend-only commits that use mock data, hardcoded progress values and similar placeholder data are acceptable and intentional. These values serve as placeholders for UI development and will be replaced with dynamic calculations once backend integration occurs.
🔇 Additional comments (2)
Backend/.env-example (1)
1-14: LGTM! Environment template improvements.The explicit placeholder values make it clearer for developers what configuration is required. The standard PostgreSQL port (5432) and clear placeholder patterns (e.g.,
your_db_password_here,your_project.supabase.co) improve developer experience.Frontend/src/pages/HomePage.tsx (1)
113-1095: LGTM! Non-functional formatting improvements.All changes in this file are formatting and whitespace refinements that improve code readability without altering behavior. The modifications include:
- String literal line breaks for better readability
- JSX prop formatting and indentation
- Type annotation formatting
- Array and object formatting across multiple lines
No functional changes detected.
| size="sm" | ||
| variant="outline" | ||
| onClick={() => { setSelectedCreator(creator); setShowProfile(true); }} | ||
| onClick={() => { setOpen(false); setSelectedCreator(creator); setShowProfile(true); }} |
There was a problem hiding this comment.
🧩 Analysis chain
Critical: setOpen is not defined in this component.
The setOpen function does not exist in this component's scope. The component receives open as a read-only prop and should use the onClose callback to close the modal.
Apply this diff to fix the runtime error:
- onClick={() => { setOpen(false); setSelectedCreator(creator); setShowProfile(true); }}
+ onClick={() => { onClose(); setSelectedCreator(creator); setShowProfile(true); }}Note: This will close the collaboration modal before opening the profile modal. Verify this is the intended behavior for resolving the z-index stacking issue described in #132.
🏁 Script executed:
#!/bin/bash
# Locate and examine the NewCollaborationModal.tsx file
find . -name "NewCollaborationModal.tsx" -type f 2>/dev/null | head -20Length of output: 69
🏁 Script executed:
#!/bin/bash
# Get file content to verify state declarations and component structure
fd "NewCollaborationModal.tsx" --type f | xargs catLength of output: 12202
🏁 Script executed:
#!/bin/bash
# Examine the exact context around line 124 with state declarations visible
fd "NewCollaborationModal.tsx" --type f | xargs grep -n "useState\|setOpen\|setSelectedCreator\|setShowProfile\|onClose" | head -50Length of output: 1130
🏁 Script executed:
#!/bin/bash
# Get the full component structure including props and state
fd "NewCollaborationModal.tsx" --type f | xargs head -150Length of output: 5816
Critical: setOpen is not defined in this component.
The setOpen function does not exist in this component's scope. The component receives open as a read-only prop and should use the onClose callback to close the modal.
Apply this diff to fix the runtime error:
- onClick={() => { setOpen(false); setSelectedCreator(creator); setShowProfile(true); }}
+ onClick={() => { onClose(); setSelectedCreator(creator); setShowProfile(true); }}📝 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.
| onClick={() => { setOpen(false); setSelectedCreator(creator); setShowProfile(true); }} | |
| onClick={() => { onClose(); setSelectedCreator(creator); setShowProfile(true); }} |
🤖 Prompt for AI Agents
In Frontend/src/components/collaboration-hub/NewCollaborationModal.tsx around
line 124, the click handler calls setOpen(false) which is not defined; replace
that call with the component's onClose() callback (passed in via props) to close
the modal, i.e., invoke onClose() before setting selectedCreator and
showProfile; ensure the component's props include an onClose function type if
not already and use that instead of setOpen to avoid the runtime error.
1 participant
###Related Issue
Fixes #132
Summary
This PR fully resolves the bug where the creator profile opened behind the New Collaboration modal and clicking outside caused unexpected redirects.
The root cause was missing click-handling on the Profile modal overlay.
###Fixes Implemented
Added onClick={onClose} to the backdrop so clicking outside closes the profile modal.
Added onClick={(e) => e.stopPropagation()} on the modal container to prevent click-through.
###Testing Steps
Open Dashboard → Collaborations
Open New Collaboration Request
Search a creator → click View Profile
Confirm profile modal appears on top
Click inside → modal stays open
Click outside → modal closes cleanly
No redirect or stuck state occurs
###Result
Issue #132 is fully fixed, with proper modal stacking and clean user interaction.
Summary by CodeRabbit
Bug Fixes
Chores
Style