pushing place details to backend #25
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…nto frontend-backend-merge
…nto frontend-backend-merge
…nto frontend-backend-merge
const [priceValue, setPriceValue] = useState(1);
const [cuisineType, setCuisineType] = useState('all');
const [restaurants, setRestaurants] = useState([]);
const [cuisines, setCuisines] = useState(['Italian', 'Japanese', 'Mexican', 'Indian', 'American', 'Thai', 'Chinese']);
const [location, setLocation] = useState({ latitude: null, longitude: null });
const [error, setError] = useState(null);
// Fetch the user's location
const getLocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
setLocation({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
});
setError(null);
},
(err) => {
setError('Error retrieving location: ' + err.message);
}
);
} else {
setError('Geolocation is not supported by this browser.');
}
};
const handleSubmit = async (e) => {
e.preventDefault();
if (!location.latitude || !location.longitude) {
alert("Please allow location access to fetch nearby restaurants.");
return;
}
try {
const response = await axios.get('http://localhost:8081/api/restaurants/random', {
params: {
cuisineType: cuisineType === 'all' ? '' : cuisineType,
priceLevel: priceValue,
latitude: location.latitude,
longitude: location.longitude,
},
});
setRestaurants(response.data);
} catch (error) {
console.error('Error fetching restaurants:', error);
}
};
return (
<div className="filter-page">
<h1>Choose Your Preferences</h1>
{/* Location Button */}
<div className="location-section">
<button onClick={getLocation}>Get Current Location</button>
{location.latitude && location.longitude && (
<p>
Latitude: {location.latitude}, Longitude: {location.longitude}
</p>
)}
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
<form onSubmit={handleSubmit} className="filter-form">
<div className="filter-group">
<label>Cuisine Type</label>
<select value={cuisineType} onChange={(e) => setCuisineType(e.target.value)}>
<option value="all">All</option>
{cuisines.map((cuisine) => (
<option key={cuisine} value={cuisine.toLowerCase()}>
{cuisine}
</option>
))}
</select>
</div>
<div className="filter-group">
<label>Price Range</label>
<input
type="range"
min="1"
max="5"
value={priceValue}
onChange={(e) => setPriceValue(e.target.value)}
/>
<div>Price: {"$".repeat(priceValue)}</div>
</div>
<div className="filter-group">
<label>Dietary Preferences</label>
<input type="checkbox" /> Vegetarian
<input type="checkbox" /> Vegan
</div>
<button type="submit">Generate Restaurants</button>
</form>
{/* Display fetched restaurants */}
<div className="restaurant-results">
{restaurants.map((restaurant) => (
<div key={restaurant.place_id} className="restaurant-card">
<h2>{restaurant.name}</h2>
<p>{restaurant.vicinity}</p>
</div>
))}
</div>
</div>
);
}erge branch 'frontend' of https://github.com/CS222-UIUC/Team-5-3-1 into frontend-backend-merge
…to frontend-backend-merge
…play 5 restaurants
…class with fields
…2-UIUC/Team-5-3-1 into frontend-backend-merge
…nto frontend-backend-merge
…C/Team-5-3-1 into frontend-backend-merge
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.