Skip to content

Fix: Create “Become a Host” Placeholder Page #180

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

Open
AABams-Dev wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Fix: Create “Become a Host” Placeholder Page #180

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bd9a397
Create page.tsx
AABams-Dev Oct 4, 2025
fe83c9a
Create page.tsx
AABams-Dev Oct 14, 2025
418c7a4
Delete apps/web/become-host/page.tsx
AABams-Dev Oct 14, 2025
eb0c028
Update page.tsx
AABams-Dev Oct 14, 2025
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
87 changes: 87 additions & 0 deletions apps/web/become-host/page.tsx
View file
Open in desktop
Copy link
Contributor

@respp respp Oct 10, 2025

Choose a reason for hiding this comment

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

incorrect file location, the page was created in the wrong directory.

the required location is inside apps/web/src/app/become-host/page.ts

Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
"use client"

import { useAuth } from '@/hooks/auth/use-auth';
import { useRouter } from 'next/navigation';
import { use, useEffect } from 'react';
Copy link
Contributor

@respp respp Oct 10, 2025

Choose a reason for hiding this comment

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

please remove use


export default function BecomeHostPage() {
const { user, isLoading } = useAuth();
const router = useRouter();

// Redirect verified hosts to host dashboard
useEffect(() => {
if (!isLoading ) {
router.push('/dashboard/host-dashboard');
}
}, [user, isLoading, router]);
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 4, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

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.

Suggested change
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.


if (isLoading || !user) {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
);
}

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>
<h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">
Become a Host
</h1>
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
Share your property on StellarRent and start earning today
</p>
</div>

<div className="bg-yellow-50 dark:bg-yellow-900/20 border-2 border-yellow-200 dark:border-yellow-700 rounded-lg p-6">
<p className="text-yellow-800 dark:text-yellow-200 font-medium">
🚧 Host Onboarding in Progress
</p>
<p className="text-sm text-yellow-700 dark:text-yellow-300 mt-2">
Our team is building a seamless host onboarding experience. The full verification and property listing process will launch soon in Phase 2.
</p>
</div>

<div className="space-y-6">
<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">
✓ Verify Your Identity
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
Complete a secure identity verification process (coming soon)
</p>
</div>

<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">
✓ Set Up Payments
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
Configure your payment method to receive earnings (coming soon)
</p>
</div>

<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">
✓ List Your Property
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
Add your property details and start hosting (coming soon)
</p>
</div>
</div>

<div className="mt-8">
<a
href="/tenant-dashboard"
Copy link
Contributor

@respp respp Oct 10, 2025

Choose a reason for hiding this comment

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

should be href="/dashboard/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>
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 4, 2025

Choose a reason for hiding this comment

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

🛠️ 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 -20

Length 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/app

Length 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 tsx

Length of output: 99

🏁 Script executed:

#!/bin/bash
# List top-level entries under apps/web to locate route directories
ls -1 apps/web

Length 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 || true

Length 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.

</div>
</div>
);
}
65 changes: 65 additions & 0 deletions apps/web/src/app/become-host/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@

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>
<h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">
Become a Host
</h1>
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
Share your property on StellarRent and start earning today
</p>
</div>

<div className="bg-yellow-50 dark:bg-yellow-900/20 border-2 border-yellow-200 dark:border-yellow-700 rounded-lg p-6">
<p className="text-yellow-800 dark:text-yellow-200 font-medium">
🚧 Host Onboarding in Progress
</p>
<p className="text-sm text-yellow-700 dark:text-yellow-300 mt-2">
Our team is building a seamless host onboarding experience. The full verification and property listing process will launch soon in Phase 2.
</p>
</div>

<div className="space-y-6">
<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">
✓ Verify Your Identity
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
Complete a secure identity verification process (coming soon)
</p>
</div>

<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">
✓ Set Up Payments
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
Configure your payment method to receive earnings (coming soon)
</p>
</div>

<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">
✓ List Your Property
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
Add your property details and start hosting (coming soon)
</p>
</div>
</div>

<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>
</div>
</div>
);
}