feat: implement dynamic searchbar with location, date, and guests filters [#198]#208
Conversation
📝 WalkthroughWalkthroughThe pull request updates the web app with image format conversion to .webp, refactors PropertyGrid to use default export and accept dynamic properties, significantly enhances SearchBar with location autocomplete, date picker, and granular guest controls, and converts useUserRole hook from storage-based to API-driven role resolution. Changes
Sequence DiagramssequenceDiagram
participant User
participant SearchBar
participant Router
participant SearchPage as /search
User->>SearchBar: Enters location
SearchBar->>SearchBar: Filter location suggestions
SearchBar->>SearchBar: Display suggestions
User->>SearchBar: Select location
SearchBar->>SearchBar: Update location field
User->>SearchBar: Click date input
SearchBar->>SearchBar: Show Calendar popover
User->>SearchBar: Select date
SearchBar->>SearchBar: Update selectedDate
User->>SearchBar: Increment/decrement adults/kids
SearchBar->>SearchBar: Validate limits (1-16 adults, 0-10 kids)
SearchBar->>SearchBar: Update guestsLabel
User->>SearchBar: Click Done
SearchBar->>SearchBar: Close guests popover
User->>SearchBar: Click Search button
SearchBar->>SearchBar: Validate location length
SearchBar->>SearchBar: Build query params
SearchBar->>Router: router.push(/search?...)
Router->>SearchPage: Navigate with params
sequenceDiagram
participant Component
participant useUserRole
participant profileAPI
participant localStorage
Component->>useUserRole: Call useUserRole()
useUserRole->>useUserRole: Check user authentication
alt User authenticated
useUserRole->>profileAPI: getUserProfile(user.id)
alt API success
profileAPI-->>useUserRole: Return profile
useUserRole->>useUserRole: Extract hostStatus, hasProperties
useUserRole->>localStorage: Store hostStatus, hasProperties
useUserRole-->>Component: Return roleInfo + isLoading=false
else API failure
useUserRole->>localStorage: Retrieve cached hostStatus, hasProperties
useUserRole->>useUserRole: Compute role/permissions from fallback
useUserRole-->>Component: Return roleInfo + isLoading=false
end
else User not authenticated
useUserRole-->>Component: Return guest role + isLoading=false
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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 |
|
Closes #[198] Transforms the static SearchBar component into a fully interactive search experience, allowing users to filter properties by location, date, and guest count. Changes Made
Form validation with Zod schema
|
![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
🤖 Fix all issues with AI agents
In `@apps/web/src/components/features/search/SearchBar.tsx`:
- Around line 4-5: The import for date formatting in the SearchBar component is
using a named import from the subpath (`import { format } from
'date-fns/format'`) which is incorrect; change it to import the named export
from the main package (e.g., `import { format } from 'date-fns'`) so the
SearchBar.tsx component (and any usage of format inside that component) uses the
correct date-fns import and avoids build errors.
- Around line 92-96: handleDateSelect currently stores date using
date.toISOString() and doesn't clear formData.date when deselected; update it to
setSelectedDate(date) then if date is defined call setFormData(prev => ({
...prev, date: format(date, 'yyyy-MM-dd') })) (import format from 'date-fns'),
and when date is undefined call setFormData(prev => ({ ...prev, date: '' })) to
clear the value; reference the handleDateSelect, setSelectedDate, setFormData
and formData.date symbols when making the change.
| import { format } from 'date-fns/format'; | ||
| import { Loader2, Minus, Plus, Search } from 'lucide-react'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find package.json and check date-fns version
find . -name "package.json" -type f | head -5Repository: Stellar-Rent/stellar-rent
Length of output: 194
🏁 Script executed:
# Check if package-lock.json exists
ls -la package*.json 2>/dev/null || echo "No package files in root"Repository: Stellar-Rent/stellar-rent
Length of output: 201
🏁 Script executed:
# Search for date-fns in package files
rg "date-fns" --type jsonRepository: Stellar-Rent/stellar-rent
Length of output: 777
🏁 Script executed:
# Check the SearchBar.tsx file to see the context
cat -n apps/web/src/components/features/search/SearchBar.tsx | head -20Repository: Stellar-Rent/stellar-rent
Length of output: 937
🌐 Web query:
date-fns 4.1.0 import format subpath date-fns/format vs date-fns named import
💡 Result:
Short answer
- Both work in date-fns v4.1.0: you can import the function via the subpath (import format from "date-fns/format") or as a named export (import { format } from "date-fns"). [1][2]
When to use which (brief)
- Use named imports (import { format } from "date-fns") when your bundler supports ESM tree-shaking — it's simplest and idiomatic. date-fns provides ESM and tree-shaking support. [1][8]
- Use the subpath (import format from "date-fns/format") if you need to force importing a single file (older bundlers/Node setups, CDNs, or to be explicit about a single-module import). Historically that was recommended for smaller bundles and some CommonJS setups. [1][4]
Notes about v4.1.0
- v4.1.0 added time‑zone support to format and other fixes; import semantics remain the same as in v2+ (ESM, per-function modules with sideEffects=false). [5][1]
Sources
- date-fns blog: ECMAScript Modules / tree-shaking explanation. [1]
- date-fns docs / format usage examples (shows both subpath and named imports). [4]
- date-fns v4.1.0 release notes (adds timezone support; confirms v4 series). [5]
Fix date-fns import syntax to prevent build errors.
Line 4 uses import { format } from 'date-fns/format', treating the subpath export as a named export. In date-fns v4.1.0 (and all v2+), date-fns/format is a default export, not a named export, which will fail at build time. Use a named import from the main package instead.
🛠️ Proposed fix
-import { format } from 'date-fns/format';
+import { format } from 'date-fns';📝 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.
| import { format } from 'date-fns/format'; | |
| import { Loader2, Minus, Plus, Search } from 'lucide-react'; | |
| import { format } from 'date-fns'; | |
| import { Loader2, Minus, Plus, Search } from 'lucide-react'; |
🤖 Prompt for AI Agents
In `@apps/web/src/components/features/search/SearchBar.tsx` around lines 4 - 5,
The import for date formatting in the SearchBar component is using a named
import from the subpath (`import { format } from 'date-fns/format'`) which is
incorrect; change it to import the named export from the main package (e.g.,
`import { format } from 'date-fns'`) so the SearchBar.tsx component (and any
usage of format inside that component) uses the correct date-fns import and
avoids build errors.
| const handleDateSelect = useCallback((date: Date | undefined) => { | ||
| setSelectedDate(date); | ||
| if (date) { | ||
| setFormData((prev) => ({ ...prev, date: date.toISOString() })); | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check how the `date` query param is consumed elsewhere
rg -n "searchParams.*date|date.*searchParams" -g "*.tsx" apps/web/srcRepository: Stellar-Rent/stellar-rent
Length of output: 51
🏁 Script executed:
# Also search for date handling in general to understand the pattern
rg -n "\.date|date:" -g "*.tsx" apps/web/src/components/features/search --max-count=20Repository: Stellar-Rent/stellar-rent
Length of output: 600
🏁 Script executed:
# Check the imports in SearchBar.tsx to see what date library is available
head -50 apps/web/src/components/features/search/SearchBar.tsxRepository: Stellar-Rent/stellar-rent
Length of output: 1518
🏁 Script executed:
# Search for the full handleDateSelect implementation and surrounding context
sed -n '85,110p' apps/web/src/components/features/search/SearchBar.tsxRepository: Stellar-Rent/stellar-rent
Length of output: 903
🏁 Script executed:
# Search for where the date search param is used/parsed
rg -n "searchParams.*get.*date|date.*searchParams" -g "*.tsx" apps/web/srcRepository: Stellar-Rent/stellar-rent
Length of output: 51
🏁 Script executed:
# Search for API calls that might use the date parameter
rg -n "date.*param|param.*date" -g "*.ts" -g "*.tsx" apps/web/src --max-count=30Repository: Stellar-Rent/stellar-rent
Length of output: 759
🏁 Script executed:
# Check if there's any server-side handling of the date parameter
rg -n "\.date|date:" -g "*.ts" apps/web/src --max-count=20Repository: Stellar-Rent/stellar-rent
Length of output: 2433
🏁 Script executed:
# Look at the full handleDateSelect and see if there's any date deselection logic
sed -n '92,102p' apps/web/src/components/features/search/SearchBar.tsxRepository: Stellar-Rent/stellar-rent
Length of output: 448
Store date as YYYY-MM-DD format and clear on deselect.
Line 95 uses toISOString() which stores ISO 8601 format with time component, but the rest of the codebase expects YYYY-MM-DD format (as seen in mock data and type definitions). Additionally, when the date selection is removed (undefined), formData.date is not cleared—the old value persists. Use format(date, 'yyyy-MM-dd') and reset to an empty string on undefined.
Suggested fix
const handleDateSelect = useCallback((date: Date | undefined) => {
setSelectedDate(date);
- if (date) {
- setFormData((prev) => ({ ...prev, date: date.toISOString() }));
- }
+ setFormData((prev) => ({
+ ...prev,
+ date: date ? format(date, 'yyyy-MM-dd') : '',
+ }));
}, []);📝 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.
| const handleDateSelect = useCallback((date: Date | undefined) => { | |
| setSelectedDate(date); | |
| if (date) { | |
| setFormData((prev) => ({ ...prev, date: date.toISOString() })); | |
| } | |
| const handleDateSelect = useCallback((date: Date | undefined) => { | |
| setSelectedDate(date); | |
| setFormData((prev) => ({ | |
| ...prev, | |
| date: date ? format(date, 'yyyy-MM-dd') : '', | |
| })); | |
| }, []); |
🤖 Prompt for AI Agents
In `@apps/web/src/components/features/search/SearchBar.tsx` around lines 92 - 96,
handleDateSelect currently stores date using date.toISOString() and doesn't
clear formData.date when deselected; update it to setSelectedDate(date) then if
date is defined call setFormData(prev => ({ ...prev, date: format(date,
'yyyy-MM-dd') })) (import format from 'date-fns'), and when date is undefined
call setFormData(prev => ({ ...prev, date: '' })) to clear the value; reference
the handleDateSelect, setSelectedDate, setFormData and formData.date symbols
when making the change.
|
This issue is not showing closed on the drips dashboard and I didn't see no point for it too. |
|
@respp Please kindly close this issue, so I can get my point for this |
2 participants
Summary by CodeRabbit
Release Notes
New Features
Performance
✏️ Tip: You can customize this high-level summary in your review settings.