Fix: Create “Become a Host” Placeholder Page #180
Conversation
WalkthroughAdds a new Next.js page at apps/web/src/app/become-host/page.tsx exporting BecomeHostPage. It renders a static, centered “Become a Host” placeholder with a header, a yellow onboarding notice, three “coming soon” cards (identity, payments, listing), and a navigation link. No data fetching or dynamic logic. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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: 2
🧹 Nitpick comments (1)
apps/web/become-host/page.tsx (1)
5-5: Remove unused import.The
useimport is not used anywhere in the component.Apply this diff to remove the unused import:
-import { use, useEffect } from 'react'; +import { useEffect } from 'react';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/become-host/page.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
apps/web/become-host/page.tsx (1)
apps/web/src/hooks/auth/use-auth.tsx (1)
useAuth(251-251)
apps/web/become-host/page.tsx
Outdated
| useEffect(() => { | ||
| if (!isLoading ) { | ||
| router.push('/dashboard/host-dashboard'); | ||
| } | ||
| }, [user, isLoading, router]); |
There was a problem hiding this comment.
Fix critical redirect logic bug.
The condition if (!isLoading) redirects ALL users (authenticated or not) once loading completes, making the main UI (lines 26-86) unreachable. The comment states "Redirect verified hosts" but the code doesn't check for user authentication.
Apply this diff to fix the redirect logic:
- // Redirect verified hosts to host dashboard
useEffect(() => {
- if (!isLoading ) {
+ if (!isLoading && user) {
router.push('/dashboard/host-dashboard');
}
}, [user, isLoading, router]);This ensures only authenticated users are redirected, allowing the placeholder UI to display for unauthenticated users during Phase 1.
📝 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.
| useEffect(() => { | |
| if (!isLoading ) { | |
| router.push('/dashboard/host-dashboard'); | |
| } | |
| }, [user, isLoading, router]); | |
| useEffect(() => { | |
| if (!isLoading && user) { | |
| router.push('/dashboard/host-dashboard'); | |
| } | |
| }, [user, isLoading, router]); |
🤖 Prompt for AI Agents
In apps/web/become-host/page.tsx around lines 12 to 16, the redirect currently
fires whenever loading finishes, redirecting all users; update the condition to
only redirect authenticated users by checking that loading finished and a valid
user exists (e.g., if (!isLoading && user) ) so unauthenticated visitors can see
the placeholder UI; adjust the dependency array if needed and keep
router.push('/dashboard/host-dashboard') only under that combined condition.
| <div className="mt-8"> | ||
| <a | ||
| href="/tenant-dashboard" | ||
| className="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors" | ||
| > | ||
| Back to Dashboard | ||
| </a> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
Verify the dashboard link destination.
The "Back to Dashboard" link points to /tenant-dashboard, but the useEffect redirects authenticated users to /dashboard/host-dashboard. Consider whether this link should point to a consistent location or if the naming reflects different user roles.
Run the following script to check the routing structure:
🏁 Script executed:
#!/bin/bash
# Description: Verify dashboard route structure and naming
# Search for dashboard routes in the codebase
fd -e tsx -e ts "dashboard" apps/web | head -20Length of output: 72
🏁 Script executed:
#!/bin/bash
# List all page.tsx files under the Next.js app directory to locate dashboard routes
fd --relative -e tsx page.tsx apps/web/appLength of output: 199
🏁 Script executed:
#!/bin/bash
# List all Next.js page.tsx files under the app directory
fd page.tsx apps/web/app -e tsxLength of output: 99
🏁 Script executed:
#!/bin/bash
# List top-level entries under apps/web to locate route directories
ls -1 apps/webLength of output: 223
🏁 Script executed:
#!/bin/bash
# 1. View the first 200 lines of become-host/page.tsx to locate useEffect redirect
sed -n '1,200p' apps/web/become-host/page.tsx
# 2. Search for 'tenant-dashboard' occurrences
rg -n "tenant-dashboard" -n apps/web || true
# 3. Search for 'host-dashboard' occurrences
rg -n "host-dashboard" -n apps/web || trueLength of output: 3588
Fix incorrect dashboard link Replace the anchor’s href from “/tenant-dashboard” to “/dashboard/host-dashboard” so it aligns with the useEffect redirect.
🤖 Prompt for AI Agents
In apps/web/become-host/page.tsx around lines 76 to 83, the "Back to Dashboard"
anchor uses the wrong href ("/tenant-dashboard"); change the href to
"/dashboard/host-dashboard" so it matches the useEffect redirect and navigates
to the host dashboard.
respp
left a comment
respp
left a comment
There was a problem hiding this comment.
Remove the auth logic and keep it simple, your implementation adds unnecessary complexity. Also please follow the changes requested by coderabbit and follow the lint guideline. Update your code and ill do the codereview again. Thank you.
There was a problem hiding this comment.
incorrect file location, the page was created in the wrong directory.
the required location is inside apps/web/src/app/become-host/page.ts
apps/web/become-host/page.tsx
Outdated
|
|
||
| import { useAuth } from '@/hooks/auth/use-auth'; | ||
| import { useRouter } from 'next/navigation'; | ||
| import { use, useEffect } from 'react'; |
apps/web/become-host/page.tsx
Outdated
|
|
||
| <div className="mt-8"> | ||
| <a | ||
| href="/tenant-dashboard" |
There was a problem hiding this comment.
should be href="/dashboard/tenant-dashboard"
also please update your commit message to make it more clear
|
|
Alright 👌.
…On Fri, Oct 10, 2025, 20:53 Renzo Espinosa ***@***.***> wrote:
*respp* left a comment (Stellar-Rent/stellar-rent#180)
<#180 (comment)>
Remove the auth logic and keep it simple, your implementation adds
unnecessary complexity. Also please follow the changes requested by
coderabbit and follow the lint guideline. Update your code and ill do the
codereview again. Thank you.
image.png (view on web)
<https://github.com/user-attachments/assets/8127fd50-65b1-4f21-9440-6d9fcf21a2c6>
also please update your commit message to make it more clear
—
Reply to this email directly, view it on GitHub
<#180 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AUN7LOH4U6TWSEWZ5I5QRRL3XAFD3AVCNFSM6AAAAACIJSDUKOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTGOJSGEZTCMZRHE>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/src/app/become-host/page.tsx (1)
54-61: Consider using Next.js Link component and verify the dashboard path.Two suggestions for improvement:
- Replace the
<a>tag with Next.jsLinkcomponent to maintain client-side routing benefits and avoid full page reloads.- Verify that
/tenant-dashboardis the correct path. Based on the PR context about dual-role architecture, this might need to be/dashboardor handle the user's role dynamically in the future.Apply this diff to use the Link component:
+import Link from 'next/link'; + export default function BecomeHostPage() { return ( <div className="min-h-screen flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900"> <div className="max-w-2xl w-full text-center space-y-8"> {/* ... */} <div className="mt-8"> - <a + <Link href="/tenant-dashboard" className="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors" > Back to Dashboard - </a> + </Link> </div> </div> </div> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/app/become-host/page.tsx(1 hunks)
🔇 Additional comments (1)
apps/web/src/app/become-host/page.tsx (1)
2-14: LGTM! Clean placeholder page structure.The component structure is well-organized with proper responsive layout and dark mode support. The header section effectively communicates the page purpose.
|
@respp fix has been done. You can now review the code since there is no conflicts. |
|
@respp fix has been done. You can now review the code since there is no conflicts. |
2 participants
Pull Request | StellarRent
📝 Summary
Provide a brief description of what this PR accomplishes.
🔗 Related Issues
Closes #169
🔄 Changes Made
Provide a general description of the changes. Include any relevant background information or context to help reviewers understand the purpose of this PR.
🖼️ Current Output
Provide visual evidence of the changes:
🧪 Testing
If applicable, describe the tests performed. Include screenshots, test outputs, or any resources that help reviewers understand how the changes were tested.
✅ Testing Checklist
List any possible issues that might arise with this change.
🚀 Next Steps & Improvements
This change lays a solid foundation for further optimizations. Some areas that could benefit from future improvements include:
💬 Comments
Any additional context, questions, or considerations for reviewers.
Summary by CodeRabbit