Skip to content

feat: complete Travel Advisor app with MUI v5 #1

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

Merged
Nate-valerian merged 1 commit into from
Jan 3, 2026
Merged

feat: complete Travel Advisor app with MUI v5 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions .npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
legacy-peer-deps=true
7 changes: 7 additions & 0 deletions .vercel/project.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"projectId": "your-project-id",
"orgId": "your-org-id",
"settings": {
"nodeVersion": "18.x"
}
}
28,382 changes: 10,154 additions & 18,228 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

35 changes: 23 additions & 12 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,38 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@material-ui/lab": "^4.0.0-alpha.61",
"@react-google-maps/api": "^2.8.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"google-map-react": "^2.1.10",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@mui/icons-material": "^7.3.6",
"@mui/lab": "^7.0.1-beta.20",
"@mui/material": "^7.3.6",
"@mui/styles": "^6.5.0",
"@react-google-maps/api": "^2.20.8",
"axios": "^1.13.2",
"google-map-react": "^2.2.5",
"init": "^0.1.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"web-vitals": "^5.1.0"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.1",
"@testing-library/user-event": "^14.6.1",
"ajv": "^8.17.1",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
"webpack": "^5.104.1",
"webpack-dev-server": "^5.2.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"engines": {
"node": ">=18.0.0"
},
"eslintConfig": {
"extends": [
"react-app",
Expand Down
225 changes: 190 additions & 35 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,119 @@
import React, { useState, useEffect } from 'react';
import { CssBaseline, Grid } from '@material-ui/core';
import { useState, useEffect } from "react";
import { Grid } from "@mui/material";

import { getPlacesData, getWeatherData } from './api/travelAdvisorAPI';
import Header from './components/Header/Header';
import List from './components/List/List';
import Map from './components/Map/Map';
// import { getPlacesData, getWeatherData } from "./api/travelAdvisorAPI";
import Header from "./components/Header/Header";
import List from "./components/List/List";
import Map from "./components/Map/Map";

const App = () => {
const [type, setType] = useState('restaurants');
const [rating, setRating] = useState('');
const [type, setType] = useState("restaurants");
const [rating, setRating] = useState("");

const [coords, setCoords] = useState({});
// FIX: Initialize with default coordinates
const [coords, setCoords] = useState({ lat: 40.7128, lng: -74.006 }); // New York
const [bounds, setBounds] = useState(null);

const [weatherData, setWeatherData] = useState([]);
const [weatherData, setWeatherData] = useState({ list: [] }); // Initialize with empty list
const [filteredPlaces, setFilteredPlaces] = useState([]);
const [places, setPlaces] = useState([]);
const [places, setPlaces] = useState([]); // Initialize as empty array

const [autocomplete, setAutocomplete] = useState(null);
const [childClicked, setChildClicked] = useState(null);
const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
navigator.geolocation.getCurrentPosition(({ coords: { latitude, longitude } }) => {
setCoords({ lat: latitude, lng: longitude });
});
navigator.geolocation.getCurrentPosition(
({ coords: { latitude, longitude } }) => {
setCoords({ lat: latitude, lng: longitude });
},
(error) => {
console.log("Geolocation failed, using default:", error);
// Default coordinates already set
}
);
}, []);

useEffect(() => {
const filtered = places.filter((place) => Number(place.rating) > rating);

setFilteredPlaces(filtered);
}, [rating]);
// FIX: Add null check for places
if (places && Array.isArray(places)) {
const filtered = places.filter((place) => Number(place.rating) > rating);
setFilteredPlaces(filtered);
}
}, [places, rating]);

useEffect(() => {
if (bounds) {
setIsLoading(true);

getWeatherData(coords.lat, coords.lng)
.then((data) => setWeatherData(data));

getPlacesData(type, bounds.sw, bounds.ne)
.then((data) => {
setPlaces(data.filter((place) => place.name && place.num_reviews > 0));
setFilteredPlaces([]);
setRating('');
setIsLoading(false);
// Use sample data instead of API calls
setTimeout(() => {
const samplePlaces = [
{
name: "Pizza Palace",
rating: 4.5,
num_reviews: 150,
price_level: "$$",
ranking: "#1 of 200",
latitude: 40.7128,
longitude: -74.006,
photo: {
images: { large: { url: "https://via.placeholder.com/300" } },
},
cuisine: [{ name: "Italian" }, { name: "Pizza" }],
address: "123 Broadway, NYC",
phone: "+1 555-1234",
},
{
name: "Burger Hub",
rating: 4.2,
num_reviews: 89,
price_level: "$",
ranking: "#5 of 200",
latitude: 40.7145,
longitude: -74.0082,
photo: {
images: { large: { url: "https://via.placeholder.com/300" } },
},
cuisine: [{ name: "American" }, { name: "Burgers" }],
address: "456 Park Ave, NYC",
phone: "+1 555-5678",
},
];

setPlaces(samplePlaces);
setWeatherData({
list: [
{
coord: { lat: 40.7128, lon: -74.006 },
weather: [{ icon: "01d", description: "Sunny" }],
},
],
});
setIsLoading(false);
}, 1000);
}
}, [bounds, type]);

const onLoad = (autoC) => setAutocomplete(autoC);

const onPlaceChanged = () => {
const lat = autocomplete.getPlace().geometry.location.lat();
const lng = autocomplete.getPlace().geometry.location.lng();

setCoords({ lat, lng });
if (autocomplete) {
const place = autocomplete.getPlace();
if (place && place.geometry && place.geometry.location) {
const lat = place.geometry.location.lat();
const lng = place.geometry.location.lng();
setCoords({ lat, lng });
}
}
};

return (
<>
<CssBaseline />
<Header onPlaceChanged={onPlaceChanged} onLoad={onLoad} />
<Grid container spacing={3} style={{ width: '100%' }}>
<Grid item xs={12} md={4}>
{/* FIX: MUI Grid v2 syntax */}
<Grid container spacing={3} style={{ width: "100%", margin: 0 }}>
<Grid size={{ xs: 12, md: 4 }}>
<List
isLoading={isLoading}
childClicked={childClicked}
Expand All @@ -75,7 +124,7 @@ const App = () => {
setRating={setRating}
/>
</Grid>
<Grid item xs={12} md={8} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Grid size={{ xs: 12, md: 8 }} style={{ height: "85vh" }}>
<Map
setChildClicked={setChildClicked}
setBounds={setBounds}
Expand All @@ -91,3 +140,109 @@ const App = () => {
};

export default App;

// import { useState, useEffect } from "react";
// import { Grid } from "@mui/material"; // Only Grid, no ThemeProvider or CssBaseline

// import { getPlacesData, getWeatherData } from "./api/travelAdvisorAPI";
// import Header from "./components/Header/Header";
// import List from "./components/List/List";
// import Map from "./components/Map/Map";

// const App = () => {
// const [type, setType] = useState("restaurants");
// const [rating, setRating] = useState("");

// const [coords, setCoords] = useState({});
// const [bounds, setBounds] = useState(null);

// const [weatherData, setWeatherData] = useState([]);
// const [filteredPlaces, setFilteredPlaces] = useState([]);
// const [places, setPlaces] = useState([]);

// const [autocomplete, setAutocomplete] = useState(null);
// const [childClicked, setChildClicked] = useState(null);
// const [isLoading, setIsLoading] = useState(false);

// useEffect(() => {
// navigator.geolocation.getCurrentPosition(
// ({ coords: { latitude, longitude } }) => {
// setCoords({ lat: latitude, lng: longitude });
// },
// (error) => {
// console.log("Geolocation failed, using default:", error);
// }
// );
// navigator.geolocation.getCurrentPosition(
// ({ coords: { latitude, longitude } }) => {
// setCoords({ lat: latitude, lng: longitude });
// },
// // Add error callback with fallback coordinates
// () => {
// console.log("Geolocation failed, using default coordinates");
// setCoords({ lat: 40.7128, lng: -74.006 }); // New York
// }
// );
// }, []);

// useEffect(() => {
// const filtered = places.filter((place) => Number(place.rating) > rating);
// setFilteredPlaces(filtered);
// }, [places, rating]);

// useEffect(() => {
// if (bounds) {
// setIsLoading(true);

// getWeatherData(coords.lat, coords.lng).then((data) =>
// setWeatherData(data)
// );

// getPlacesData(type, bounds.sw, bounds.ne).then((data) => {
// setPlaces(data.filter((place) => place.name && place.num_reviews > 0));
// setFilteredPlaces([]);
// setRating("");
// setIsLoading(false);
// });
// }
// }, [bounds, coords.lat, coords.lng, type]);

// const onLoad = (autoC) => setAutocomplete(autoC);

// const onPlaceChanged = () => {
// const lat = autocomplete.getPlace().geometry.location.lat();
// const lng = autocomplete.getPlace().geometry.location.lng();
// setCoords({ lat, lng });
// };

// return (
// <>
// <Header onPlaceChanged={onPlaceChanged} onLoad={onLoad} />
// <Grid container spacing={3} style={{ width: "100%", margin: 0 }}>
// <Grid item xs={12} md={4}>
// <List
// isLoading={isLoading}
// childClicked={childClicked}
// places={filteredPlaces.length ? filteredPlaces : places}
// type={type}
// setType={setType}
// rating={rating}
// setRating={setRating}
// />
// </Grid>
// <Grid item xs={12} md={8} style={{ height: "85vh" }}>
// <Map
// setChildClicked={setChildClicked}
// setBounds={setBounds}
// setCoords={setCoords}
// coords={coords}
// places={filteredPlaces.length ? filteredPlaces : places}
// weatherData={weatherData}
// />
// </Grid>
// </Grid>
// </>
// );
// };

// export default App;
33 changes: 33 additions & 0 deletions src/api/travelAdvisorAPI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,36 @@
// // Change URLs to use your proxy:
// import axios from "axios";
// export const getPlacesData = async (type, sw, ne) => {
// try {
// const {
// data: { data },
// } = await axios.get(`/api/travel-advisor/${type}/list-in-boundary`, {
// params: {
// bl_latitude: sw.lat,
// bl_longitude: sw.lng,
// tr_longitude: ne.lng,
// tr_latitude: ne.lat,
// },
// });
// return data;
// } catch (error) {
// console.log("API Error:", error.message);
// return []; // Return empty array instead of undefined
// }
// };

// export const getWeatherData = async (lat, lng) => {
// try {
// const { data } = await axios.get("/api/weather/find", {
// params: { lat, lon: lng },
// });
// return data;
// } catch (error) {
// console.log("Weather API Error:", error.message);
// return { list: [] }; // Return empty object instead of undefined
// }
// };

/* eslint-disable consistent-return */

import axios from 'axios';
Expand Down
Loading
Loading