Updated search bar to remove location. Will get or ask for user's location. Removed Start Earning button. Works on desktop and mobile
This commit is contained in:
jackiettran
170
frontend/src/components/LocationPromptModal.tsx
Normal file
170
frontend/src/components/LocationPromptModal.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
interface LocationPromptModalProps {
|
||||
show: boolean;
|
||||
onClose: () => void;
|
||||
onLocationSelect: (
|
||||
location: { lat: number; lng: number } | { city?: string; zipCode?: string }
|
||||
) => void;
|
||||
}
|
||||
|
||||
const LocationPromptModal: React.FC<LocationPromptModalProps> = ({
|
||||
show,
|
||||
onClose,
|
||||
onLocationSelect,
|
||||
}) => {
|
||||
const [manualLocation, setManualLocation] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
if (!show) return null;
|
||||
|
||||
const handleUseMyLocation = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const position = await new Promise<GeolocationPosition>(
|
||||
(resolve, reject) => {
|
||||
navigator.geolocation.getCurrentPosition(resolve, reject, {
|
||||
enableHighAccuracy: false,
|
||||
timeout: 10000,
|
||||
maximumAge: 300000, // Cache for 5 minutes
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
onLocationSelect({
|
||||
lat: position.coords.latitude,
|
||||
lng: position.coords.longitude,
|
||||
});
|
||||
} catch (err: any) {
|
||||
if (err.code === 1) {
|
||||
setError("Location access denied. Please enter your city or ZIP code.");
|
||||
} else if (err.code === 2) {
|
||||
setError("Location unavailable. Please enter your city or ZIP code.");
|
||||
} else if (err.code === 3) {
|
||||
setError("Location request timed out. Please enter your city or ZIP code.");
|
||||
} else {
|
||||
setError("Could not get location. Please enter manually.");
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleManualSubmit = () => {
|
||||
const trimmed = manualLocation.trim();
|
||||
if (!trimmed) return;
|
||||
|
||||
// Check if it looks like a ZIP code
|
||||
if (/^\d{5}(-\d{4})?$/.test(trimmed)) {
|
||||
onLocationSelect({ zipCode: trimmed });
|
||||
} else {
|
||||
onLocationSelect({ city: trimmed });
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
handleManualSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal d-block"
|
||||
tabIndex={-1}
|
||||
style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
|
||||
>
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">
|
||||
<i className="bi bi-geo-alt me-2"></i>
|
||||
Where are you looking?
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p className="text-muted mb-4">
|
||||
Help us show you items nearby
|
||||
</p>
|
||||
|
||||
<button
|
||||
className="btn btn-outline-primary w-100 mb-3 d-flex align-items-center justify-content-center"
|
||||
onClick={handleUseMyLocation}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<span
|
||||
className="spinner-border spinner-border-sm me-2"
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
Getting location...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="bi bi-crosshair me-2"></i>
|
||||
Use my current location
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{error && (
|
||||
<div className="alert alert-warning py-2 small">
|
||||
<i className="bi bi-exclamation-triangle me-2"></i>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="d-flex align-items-center my-3">
|
||||
<hr className="flex-grow-1" />
|
||||
<span className="px-3 text-muted">or</span>
|
||||
<hr className="flex-grow-1" />
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Enter city or ZIP code"
|
||||
value={manualLocation}
|
||||
onChange={(e) => setManualLocation(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
Skip
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={handleManualSubmit}
|
||||
disabled={loading || !manualLocation.trim()}
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LocationPromptModal;
|
||||
@@ -8,10 +8,7 @@ const Navbar: React.FC = () => {
|
||||
const { user, logout, openAuthModal } = useAuth();
|
||||
const { onNewMessage, onMessageRead } = useSocket();
|
||||
const navigate = useNavigate();
|
||||
const [searchFilters, setSearchFilters] = useState({
|
||||
search: "",
|
||||
location: "",
|
||||
});
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [pendingRequestsCount, setPendingRequestsCount] = useState(0);
|
||||
const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);
|
||||
|
||||
@@ -40,7 +37,10 @@ const Navbar: React.FC = () => {
|
||||
window.addEventListener("rentalStatusChanged", handleRentalStatusChange);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("rentalStatusChanged", handleRentalStatusChange);
|
||||
window.removeEventListener(
|
||||
"rentalStatusChanged",
|
||||
handleRentalStatusChange
|
||||
);
|
||||
};
|
||||
}, [user]);
|
||||
|
||||
@@ -93,31 +93,15 @@ const Navbar: React.FC = () => {
|
||||
e?.preventDefault();
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (searchFilters.search.trim()) {
|
||||
params.append("search", searchFilters.search.trim());
|
||||
}
|
||||
if (searchFilters.location.trim()) {
|
||||
// Check if location looks like a zip code (5 digits) or city name
|
||||
const location = searchFilters.location.trim();
|
||||
if (/^\d{5}(-\d{4})?$/.test(location)) {
|
||||
params.append("zipCode", location);
|
||||
} else {
|
||||
params.append("city", location);
|
||||
}
|
||||
if (searchTerm.trim()) {
|
||||
params.append("search", searchTerm.trim());
|
||||
}
|
||||
|
||||
const queryString = params.toString();
|
||||
navigate(`/items${queryString ? `?${queryString}` : ""}`);
|
||||
// Location is handled in ItemList
|
||||
navigate(`/items${params.toString() ? `?${params.toString()}` : ""}`);
|
||||
|
||||
// Clear search after navigating
|
||||
setSearchFilters({ search: "", location: "" });
|
||||
};
|
||||
|
||||
const handleSearchInputChange = (
|
||||
field: "search" | "location",
|
||||
value: string
|
||||
) => {
|
||||
setSearchFilters((prev) => ({ ...prev, [field]: value }));
|
||||
setSearchTerm("");
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -125,11 +109,37 @@ const Navbar: React.FC = () => {
|
||||
<nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
||||
<div className="container-fluid" style={{ maxWidth: "1800px" }}>
|
||||
<Link className="navbar-brand fw-bold" to="/">
|
||||
<i className="bi bi-box-seam me-2"></i>
|
||||
Village Share
|
||||
</Link>
|
||||
|
||||
{/* Search bar - always visible, centered */}
|
||||
<div className="navbar-search">
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Search items..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
handleSearch(e);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className="btn btn-outline-secondary"
|
||||
type="button"
|
||||
onClick={handleSearch}
|
||||
>
|
||||
<i className="bi bi-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile avatar toggle */}
|
||||
<button
|
||||
className="navbar-toggler"
|
||||
className="navbar-toggler border-0 p-0"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
@@ -137,184 +147,167 @@ const Navbar: React.FC = () => {
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
<span
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{(pendingRequestsCount > 0 || unreadMessagesCount > 0) && (
|
||||
<span
|
||||
className="mobile-notification-badge"
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: "-5px",
|
||||
top: "-5px",
|
||||
backgroundColor: "#dc3545",
|
||||
color: "white",
|
||||
borderRadius: "50%",
|
||||
width: "1.2em",
|
||||
height: "1.2em",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "0.7em",
|
||||
fontWeight: "bold",
|
||||
border: "2px solid white",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{pendingRequestsCount + unreadMessagesCount}
|
||||
</span>
|
||||
)}
|
||||
<i
|
||||
className="bi bi-person-circle"
|
||||
style={{ fontSize: "1.5rem", color: "#333" }}
|
||||
></i>
|
||||
</span>
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" id="navbarNav">
|
||||
<div className="d-flex align-items-center w-100">
|
||||
<div className="position-absolute start-50 translate-middle-x">
|
||||
<div>
|
||||
<div className="input-group" style={{ width: "520px" }}>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Search items..."
|
||||
value={searchFilters.search}
|
||||
onChange={(e) =>
|
||||
handleSearchInputChange("search", e.target.value)
|
||||
}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
handleSearch(e);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
className="input-group-text text-muted"
|
||||
style={{
|
||||
borderLeft: "0",
|
||||
borderRight: "1px solid #dee2e6",
|
||||
backgroundColor: "#f8f9fa",
|
||||
}}
|
||||
>
|
||||
in
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="City or ZIP"
|
||||
value={searchFilters.location}
|
||||
onChange={(e) =>
|
||||
handleSearchInputChange("location", e.target.value)
|
||||
}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
handleSearch(e);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className="btn btn-outline-secondary"
|
||||
type="button"
|
||||
onClick={handleSearch}
|
||||
>
|
||||
<i className="bi bi-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ms-auto d-flex align-items-center">
|
||||
<Link
|
||||
className="btn btn-outline-primary btn-sm me-3 text-nowrap"
|
||||
to="/create-item"
|
||||
>
|
||||
Start Earning
|
||||
</Link>
|
||||
<ul className="navbar-nav flex-row">
|
||||
{user ? (
|
||||
<>
|
||||
<li className="nav-item dropdown">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
id="navbarDropdown"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
<div className="d-flex align-items-center ms-auto">
|
||||
<ul className="navbar-nav flex-row">
|
||||
{user ? (
|
||||
<>
|
||||
<li className="nav-item dropdown">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
id="navbarDropdown"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<span style={{ display: "flex", alignItems: "center", position: "relative" }}>
|
||||
{(pendingRequestsCount > 0 || unreadMessagesCount > 0) && (
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: "-0.9em",
|
||||
top: "50%",
|
||||
transform: "translateY(-50%)",
|
||||
backgroundColor: "#dc3545",
|
||||
color: "white",
|
||||
borderRadius: "50%",
|
||||
width: "1.5em",
|
||||
height: "1.5em",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "0.85em",
|
||||
fontWeight: "bold",
|
||||
border: "2px solid white",
|
||||
opacity: 1,
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{pendingRequestsCount + unreadMessagesCount}
|
||||
{(pendingRequestsCount > 0 ||
|
||||
unreadMessagesCount > 0) && (
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: "-0.9em",
|
||||
top: "50%",
|
||||
transform: "translateY(-50%)",
|
||||
backgroundColor: "#dc3545",
|
||||
color: "white",
|
||||
borderRadius: "50%",
|
||||
width: "1.5em",
|
||||
height: "1.5em",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "0.85em",
|
||||
fontWeight: "bold",
|
||||
border: "2px solid white",
|
||||
opacity: 1,
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{pendingRequestsCount + unreadMessagesCount}
|
||||
</span>
|
||||
)}
|
||||
<i className="bi bi-person-circle me-1"></i>
|
||||
{user.firstName}
|
||||
</span>
|
||||
</a>
|
||||
<ul
|
||||
className="dropdown-menu"
|
||||
aria-labelledby="navbarDropdown"
|
||||
>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/profile">
|
||||
<i className="bi bi-person me-2"></i>Profile
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/renting">
|
||||
<i className="bi bi-calendar-check me-2"></i>
|
||||
Renting
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/owning">
|
||||
<i className="bi bi-list-ul me-2"></i>Owning
|
||||
{pendingRequestsCount > 0 && (
|
||||
<span className="badge bg-danger rounded-pill ms-2">
|
||||
{pendingRequestsCount}
|
||||
</span>
|
||||
)}
|
||||
<i className="bi bi-person-circle me-1"></i>
|
||||
{user.firstName}
|
||||
</span>
|
||||
</a>
|
||||
<ul
|
||||
className="dropdown-menu"
|
||||
aria-labelledby="navbarDropdown"
|
||||
>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/profile">
|
||||
<i className="bi bi-person me-2"></i>Profile
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/renting">
|
||||
<i className="bi bi-calendar-check me-2"></i>
|
||||
Renting
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/owning">
|
||||
<i className="bi bi-list-ul me-2"></i>Owning
|
||||
{pendingRequestsCount > 0 && (
|
||||
<span className="badge bg-danger rounded-pill ms-2">
|
||||
{pendingRequestsCount}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/forum">
|
||||
<i className="bi bi-chat-dots me-2"></i>
|
||||
Forum
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/earnings">
|
||||
<i className="bi bi-cash-coin me-2"></i>
|
||||
Earnings
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/messages">
|
||||
<i className="bi bi-envelope me-2"></i>Messages
|
||||
{unreadMessagesCount > 0 && (
|
||||
<span className="badge bg-danger rounded-pill ms-2">
|
||||
{unreadMessagesCount}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<i className="bi bi-box-arrow-right me-2"></i>
|
||||
Logout
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
<li className="nav-item">
|
||||
<button
|
||||
className="btn btn-primary btn-sm text-nowrap"
|
||||
onClick={() => openAuthModal("login")}
|
||||
>
|
||||
Login or Sign Up
|
||||
</button>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/forum">
|
||||
<i className="bi bi-chat-dots me-2"></i>
|
||||
Forum
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/earnings">
|
||||
<i className="bi bi-cash-coin me-2"></i>
|
||||
Earnings
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/messages">
|
||||
<i className="bi bi-envelope me-2"></i>Messages
|
||||
{unreadMessagesCount > 0 && (
|
||||
<span className="badge bg-danger rounded-pill ms-2">
|
||||
{unreadMessagesCount}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<i className="bi bi-box-arrow-right me-2"></i>
|
||||
Logout
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<li className="nav-item">
|
||||
<button
|
||||
className="btn btn-primary btn-sm text-nowrap"
|
||||
onClick={() => openAuthModal("login")}
|
||||
>
|
||||
Login or Sign Up
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user