From a8741faf789e3e95493ff8076117dc862550d757 Mon Sep 17 00:00:00 2001 From: Matt Vance Date: Fri, 21 Feb 2020 00:06:32 -0800 Subject: [PATCH 1/7] Added trips page, trip cards, add trip card --- src/pages/Profile/Profile.js | 40 +++- src/pages/Profile/ProfileNav.js | 9 +- src/pages/Profile/_Profile.scss | 1 + .../subpages/UserTrips/ProfileTrips.js | 182 ++++++++++++++++ .../subpages/UserTrips/ProfileTrips.scss | 191 ++++++++++++++++ .../Profile/subpages/UserTrips/TripCard.js | 204 ++++++++++++++++++ 6 files changed, 621 insertions(+), 6 deletions(-) create mode 100644 src/pages/Profile/subpages/UserTrips/ProfileTrips.js create mode 100644 src/pages/Profile/subpages/UserTrips/ProfileTrips.scss create mode 100644 src/pages/Profile/subpages/UserTrips/TripCard.js diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index 6f96093..d240b2a 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -7,6 +7,7 @@ import { GET_ALL_CITY_DETAILS } from "../../GraphQL"; import Sidebar from "./Sidebar"; import ProfileNav from "./ProfileNav"; import ProfileCities from "./subpages/Cities/ProfileCities"; +import ProfileTrips from './subpages/UserTrips/ProfileTrips'; import Settings from "./subpages/Settings"; import Friends from "./subpages/Friends"; import ProfileIndividualCity from "./subpages/Cities/ProfileIndividualCity"; @@ -151,7 +152,7 @@ export default function Profile({ user, urlUsername, refetch }) { handleLoaded(true); } }, [cityData]); - console.log(cityReviews) + console.log(cityReviews); return ( + ( + + )} + /> + ( + + )} + />
- {/* - Trips - */} + trips + { + if (location.state !== null) { + handleOriginalSearch(location.state.searchText); + } else { + handleOriginalSearch(""); + } + }, [location, handleOriginalSearch]); + useEffect(() => { + let combinedResults = []; + for (let i in cityData.Places_visited) { + if (cityData.Places_visited[i].city !== "") { + cityData.Places_visited[i].timing = "past"; + combinedResults.push(cityData.Places_visited[i]); + } + } + for (let i in cityData.Places_visiting) { + if (cityData.Places_visiting[i].city !== "") { + cityData.Places_visiting[i].timing = "future"; + combinedResults.push(cityData.Places_visiting[i]); + } + } + if (cityData.Place_living !== null && cityData.Place_living.city !== "") { + cityData.Place_living.timing = "live"; + combinedResults.push(cityData.Place_living); + } + setResults(combinedResults); + let filteredArray = combinedResults.filter( + city => + (city.city.toLowerCase().indexOf(searchText.toLowerCase()) > -1 || + city.country.toLowerCase().indexOf(searchText.toLowerCase()) > -1) && + city.timing.indexOf(timing) > -1 + ); + setResults(filteredArray); + handleLoaded(true); + }, [searchText, timing, cityData]); + + if (!loaded) return ; + return ( +
+
+ handleToggle(!expanded)}> + {expanded ?
: null} + + + + + + +
+
+ {results.length < 1 ? ( + No cities recorded yet! + ) : null} +
+ + + + + + +
+ {fakeTrips.map((trip, index) => ( + + ))} +
+
+ ); +} + +ProfileTrips.propTypes = { + searchText: PropTypes.string, + handleSelectedCity: PropTypes.func, + user: PropTypes.object, + cityData: PropTypes.object, + urlUsername: PropTypes.string, + location: PropTypes.object, + handleOriginalSearch: PropTypes.func, + refetch: PropTypes.func +}; diff --git a/src/pages/Profile/subpages/UserTrips/ProfileTrips.scss b/src/pages/Profile/subpages/UserTrips/ProfileTrips.scss new file mode 100644 index 0000000..a5679e7 --- /dev/null +++ b/src/pages/Profile/subpages/UserTrips/ProfileTrips.scss @@ -0,0 +1,191 @@ +.add-trip-container { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 300px; + height: 120px; + background: rgb(248, 248, 252); + box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.15); + border-radius: 4px; + padding: 4px 12px; + margin: 0 40px 20px 0; + span { + font-size: 60px; + transform: translateY(-8px); + color: $primary-blue; + z-index: 10; + transition: all 0.3s ease; + } + .circle-icon { + position: absolute; + left: calc(50% - 40px); + top: calc(50% - 40px); + height: 80px; + width: 80px; + z-index: 5; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15); + border-radius: 50%; + fill: #a7e1ff; + transition: all 0.3s ease; + } + &:hover { + span { + font-size: 80px; + } + .circle-icon { + left: calc(50% - 50px); + top: calc(50% - 50px); + height: 100px; + width: 100px; + } + } +} + +.ptc-card-container { + display: flex; + position: relative; + .delete-prompt { + opacity: 1; + z-index: 2002; + } + .delete-prompt-hide { + opacity: 0; + z-index: -10; + } + .delete-prompt, + .delete-prompt-hide { + position: absolute; + border-radius: 4px; + box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.5); + right: 40px; + top: 0px; + background: rgb(248, 248, 252); + height: 120px; + width: 300px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + padding: 4px 0 16px 0; + transition: all 0.2s ease-in-out; + font-size: 18px; + span { + display: flex; + justify-content: center; + padding: 4px; + text-align: center; + } + .confirm { + background: rgb(248, 248, 252); + color: $primary-green; + &:hover { + background: $primary-green; + color: white; + } + } + .deny { + background: $primary-red; + } + } + .trash { + position: absolute; + border: none; + right: 40px; + top: -4px; + background: none; + max-height: 30px; + svg { + fill: rgb(180, 180, 180); + } + &:hover { + background: none; + border: none; + svg { + fill: #cb7678; + transform: scale(1.1) translateX(4px) translateY(2px); + } + } + } + .profile-trip-card { + position: relative; + display: flex; + flex-direction: column; + width: 300px; + height: 120px; + background: rgb(248, 248, 252); + box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.15); + border-radius: 4px; + padding: 4px 12px; + margin: 0 40px 20px 0; + .ptc-trip-info { + display: flex; + flex-direction: column; + min-height: 74px; + border-bottom: 0.5px solid #e1e3e5; + font-family: "Segoe UI", sans-serif; + .ptc-trip { + font-size: 28px; + color: rgb(44, 48, 53); + text-transform: lowercase; + } + .ptc-timing { + font-size: 16px; + font-weight: 550; + color: rgb(148, 148, 148); + text-transform: uppercase; + letter-spacing: 2px; + } + } + .ptc-trip-stats { + display: flex; + align-items: center; + width: 270px; + height: 100%; + .ptc-stat { + margin-right: 24px; + span { + margin-left: 8px; + font-size: 18px; + font-weight: 550; + color: #4f545a; + } + svg { + transform: translateY(2px); + } + } + #ptc-days { + svg { + fill: #cb7678; + } + } + #ptc-countries { + svg { + fill: #73a7c3; + } + } + #ptc-cities { + svg { + fill: #96b1a8; + } + } + } + .circle-icon { + position: absolute; + right: -30px; + top: calc(50% - 30px); + height: 60px; + width: 60px; + z-index: 5; + } + } + + .add-button-container { + width: 680px; + display: flex; + justify-content: flex-end; + #add-review { + background: #a7e1ff; + } + } +} diff --git a/src/pages/Profile/subpages/UserTrips/TripCard.js b/src/pages/Profile/subpages/UserTrips/TripCard.js new file mode 100644 index 0000000..9c5bf30 --- /dev/null +++ b/src/pages/Profile/subpages/UserTrips/TripCard.js @@ -0,0 +1,204 @@ +import React, { useState, useEffect } from "react"; +import PropTypes from "prop-types"; +import { NavLink, withRouter } from "react-router-dom"; + +import { Mutation } from "react-apollo"; +import { + REMOVE_PLACE_VISITING, + REMOVE_PLACE_VISITED, + REMOVE_PLACE_LIVING +} from "../../../../GraphQL"; + +import TrashIcon from "../../../../icons/TrashIcon"; +import CalendarIcon from "../../../../icons/CalendarIcon"; +import LocationIcon from "../../../../icons/LocationIcon"; +import CountryIcon from "../../../../icons/CountryIcon"; +import CircleIcon from "../../../../icons/CircleIcon"; +import CityIcon from "../../../../icons/CityIcon"; +import SimpleLoader from "../../../../components/common/SimpleLoader/SimpleLoader"; + +function TripCard({ + tripData, + color, + refetch, + handleSelectedCity, + urlUsername +}) { + const [loaded, handleLoaded] = useState(true); + const [localCityData] = useState(tripData); + const [placeCount, handlePlaceCount] = useState(0); + const [countryCount, handleCountryCount] = useState(tripData.countries); + const [cityCount, handleCityCount] = useState(tripData.cities); + const [placeVisitedId] = useState( + tripData.timing === "past" ? tripData.id : null + ); + const [placeVisitingId] = useState( + tripData.timing === "future" ? tripData.id : null + ); + const [placeLivingId] = useState( + tripData.timing === "live" ? tripData.id : null + ); + const [mutationToUse] = useState( + tripData.timing === "past" + ? REMOVE_PLACE_VISITED + : tripData.timing === "future" + ? REMOVE_PLACE_VISITING + : REMOVE_PLACE_LIVING + ); + console.log(tripData) + const [deletePrompt, handleDelete] = useState(false); +// useEffect(() => { +// let places = 0; +// let activities = 0; +// let meals = 0; +// let logistics = 0; +// for (let i in cityData.CityReviews) { +// switch (cityData.CityReviews[i].attraction_type) { +// case "monument": +// places++; +// break; +// case "nature": +// places++; +// break; +// case "place": +// places++; +// break; +// case "stay": +// places++; +// break; +// case "tour": +// activities++; +// break; +// case "outdoor": +// activities++; +// break; +// case "shopping": +// activities++; +// break; +// case "activity": +// activities++; +// break; +// case "breakfast": +// meals++; +// break; +// case "lunch": +// meals++; +// break; +// case "dinner": +// meals++; +// break; +// case "dessert": +// meals++; +// break; +// case "drink": +// meals++; +// break; +// case "logistics": +// logistics++; +// break; +// } +// handleMealCount(meals); +// handlePlaceCount(places); +// handleActivityCount(activities); +// handleLogisticsCount(logistics); +// } +// handleLoaded(true); +// }, [tripData]); + if (!loaded) return ; + return ( +
+ +
+ handleSelectedCity(localCityData, localCityData.CityReviews) + } + > +
+ 18 ? { fontSize: "24px" } : null} + > + {tripData.tripName} + + + {tripData.season + " " + tripData.year} + +
+
+
+ + + {tripData.days > 99 + ? "99+" + : tripData.days !== null + ? tripData.days + : 0} + +
+
+ + {countryCount > 99 ? "99+" : countryCount} +
+
+ + {cityCount > 99 ? "99+" : cityCount} +
+
+ +
+ + refetch()} + > + {mutation => ( +
+ Are you sure you want to delete {tripData.tripName}? +
+ + +
+
+ )} + + {!urlUsername ? ( + + ) : null} +
+ ); +} + +TripCard.propTypes = { + tripData: PropTypes.object, + color: PropTypes.string, + handleSelectedCity: PropTypes.func, + urlUsername: PropTypes.string, + refetch: PropTypes.func +}; + +export default withRouter(TripCard); From 6ebed8bc4311aa3beb9adaa33d6daece1e244154 Mon Sep 17 00:00:00 2001 From: Matt Vance Date: Sun, 23 Feb 2020 23:47:01 -0800 Subject: [PATCH 2/7] Trip details pages have basics and add cities, adding context --- src/pages/Profile/Profile.js | 5 +- .../subpages/UserTrips/CitySelectContainer.js | 655 ++++++++++++++++++ .../UserTrips/CitySelectContainer.scss | 14 + .../subpages/UserTrips/ProfileTrips.js | 42 +- .../subpages/UserTrips/ProfileTrips.scss | 18 +- .../subpages/UserTrips/TripBasics.scss | 35 + .../subpages/UserTrips/TripBasicsContainer.js | 202 ++++++ .../UserTrips/TripCommentaryContainer.js | 136 ++++ .../subpages/UserTrips/TripDetailContainer.js | 352 ++++++++++ .../UserTrips/TripDetailContainer.scss | 25 + .../subpages/UserTrips/TripDetailsContext.js | 9 + .../UserTrips/TripLogisticsContainer.js | 285 ++++++++ 12 files changed, 1761 insertions(+), 17 deletions(-) create mode 100644 src/pages/Profile/subpages/UserTrips/CitySelectContainer.js create mode 100644 src/pages/Profile/subpages/UserTrips/CitySelectContainer.scss create mode 100644 src/pages/Profile/subpages/UserTrips/TripBasics.scss create mode 100644 src/pages/Profile/subpages/UserTrips/TripBasicsContainer.js create mode 100644 src/pages/Profile/subpages/UserTrips/TripCommentaryContainer.js create mode 100644 src/pages/Profile/subpages/UserTrips/TripDetailContainer.js create mode 100644 src/pages/Profile/subpages/UserTrips/TripDetailContainer.scss create mode 100644 src/pages/Profile/subpages/UserTrips/TripDetailsContext.js create mode 100644 src/pages/Profile/subpages/UserTrips/TripLogisticsContainer.js diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index d240b2a..7e3572a 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -11,6 +11,7 @@ import ProfileTrips from './subpages/UserTrips/ProfileTrips'; import Settings from "./subpages/Settings"; import Friends from "./subpages/Friends"; import ProfileIndividualCity from "./subpages/Cities/ProfileIndividualCity"; +import TripDetailContainer from './subpages/UserTrips/TripDetailContainer'; import Loader from "../../components/common/Loader/Loader"; // if the username props is passed, it means the profile of a user that is not logged in will be shown. @@ -221,10 +222,10 @@ export default function Profile({ user, urlUsername, refetch }) { path={ urlUsername ? `/profiles/${urlUsername}/trips/${selectedCity.city}/` - : `/profile/trips/${selectedCity.city}/` + : `/profile/trips/new/` } render={props => ( - {}, [loading]); + useEffect(() => { + window.addEventListener("resize", resize); + resize(); + handleLoaded(false); + // handleLoadedCities(props.clickedCityArray); + return function cleanup() { + window.removeEventListener("resize", resize); + }; + }, []); + + useEffect(() => { + let oldActiveTimings = [...activeTimings]; + handleActiveTimings([0, 0, 0]); + handleActiveTimings(oldActiveTimings); + }, [ + clickedCityArray, + markerPastDisplay, + markerFutureDisplay, + markerLiveDisplay + ]); + + function resize() { + handleViewportChange({ + width: window.innerWidth, + height: window.innerHeight, + zoom: setInitialZoom() + }); + } + + function handleViewportChange(newViewport) { + handleViewport({ ...viewport, ...newViewport }); + } + + function setInitialZoom() { + let zoom; + if (window.innerWidth >= 2400) { + zoom = 0.9; + } else if (window.innerWidth >= 1750) { + zoom = 0.9; + } else if (window.innerWidth <= 900) { + zoom = 0.5; + } else if (window.innerWidth <= 1200) { + zoom = 0.75; + } else if (window.innerWidth <= 1400) { + zoom = 0.9; + } else if (window.innerWidth < 1750) { + zoom = 0.9; + } + return zoom; + } + + function deleteCity(cityTooltip) { + let cityArrayIndex; + let newClickedCityArray = [...clickedCityArray]; + newClickedCityArray.filter((city, index) => { + if ( + city.cityId === cityTooltip.cityId && + city.tripTiming === cityTooltip.tripTiming + ) { + cityArrayIndex = index; + } + }); + let markerIndex; + let markerDisplay; + let pastCount = tripTimingCounts[0]; + let futureCount = tripTimingCounts[1]; + let liveCount = tripTimingCounts[2]; + switch (cityTooltip.tripTiming) { + case 0: + markerPastDisplay.filter((city, index) => { + if (Number(city.key) === cityTooltip.cityId) { + markerIndex = index; + } + }); + newClickedCityArray.splice(cityArrayIndex, 1); + markerDisplay = [...markerPastDisplay]; + markerDisplay.splice(markerIndex, 1); + pastCount--; + handleClickedCityArray(newClickedCityArray); + handleMarkerPastDisplay(markerDisplay); + handleCityTooltip(null); + updateTripCities(newClickedCityArray) + break; + case 1: + markerFutureDisplay.filter((city, index) => { + if (Number(city.key) === cityTooltip.cityId) { + markerIndex = index; + } + }); + newClickedCityArray.splice(cityArrayIndex, 1); + markerDisplay = [...markerFutureDisplay]; + markerDisplay.splice(markerIndex, 1); + futureCount--; + handleClickedCityArray(newClickedCityArray); + handleMarkerFutureDisplay(markerDisplay); + handleCityTooltip(null); + updateTripCities(newClickedCityArray) + break; + default: + break; + } + handleTripTimingCounts([pastCount, futureCount, liveCount]); + } + + function deleteLoadedCity(cityTooltip) { + let cityArrayIndex; + let newClickedCityArray = [...loadedClickedCityArray]; + newClickedCityArray.filter((city, index) => { + if ( + city.cityId === cityTooltip.cityId && + city.tripTiming === cityTooltip.tripTiming + ) { + cityArrayIndex = index; + } + }); + let markerIndex; + let markerDisplay; + let pastCount = tripTimingCounts[0]; + let futureCount = tripTimingCounts[1]; + let liveCount = tripTimingCounts[2]; + switch (cityTooltip.tripTiming) { + case 0: + markerPastDisplay.filter((city, index) => { + if (Number(city.key) === cityTooltip.cityId) { + markerIndex = index; + } + }); + newClickedCityArray.splice(cityArrayIndex, 1); + markerDisplay = [...markerPastDisplay]; + markerDisplay.splice(markerIndex, 1); + pastCount--; + handleLoadedClickedCityArray(newClickedCityArray); + handleMarkerPastDisplay(markerDisplay); + handleCityTooltip(null); + updateTripCities(newClickedCityArray) + break; + case 1: + markerFutureDisplay.filter((city, index) => { + if (Number(city.key) === cityTooltip.cityId) { + markerIndex = index; + } + }); + newClickedCityArray.splice(cityArrayIndex, 1); + markerDisplay = [...markerFutureDisplay]; + markerDisplay.splice(markerIndex, 1); + futureCount--; + handleClickedCityArray(newClickedCityArray); + handleMarkerFutureDisplay(markerDisplay); + handleCityTooltip(null); + updateTripCities(newClickedCityArray) + break; + default: + break; + } + handleTripTimingCounts([pastCount, futureCount, liveCount]); + } + + function handleLoadedCities(data) { + let pastCount = tripTimingCounts[0]; + let futureCount = tripTimingCounts[1]; + let liveCount = tripTimingCounts[2]; + data.map(city => { + switch (city.tripTiming) { + case 0: + pastCount++; + break; + case 1: + futureCount++; + break; + default: + break; + } + }); + handleTripTimingCounts([pastCount, futureCount, liveCount]); + handleLoadedMarkers(data); + } + + function clusterClick(cluster) { + const { clusterId, longitude, latitude } = cluster; + let supercluster; + switch (cluster.type) { + case 0: + supercluster = clusterPast.current.getCluster(); + break; + case 1: + supercluster = clusterFuture.current.getCluster(); + break; + default: + break; + } + const zoom = supercluster.getClusterExpansionZoom(clusterId); + const newViewport = { + ...viewport, + latitude, + longitude, + zoom + }; + handleViewport(newViewport); + + return { viewport: newViewport }; + } + + function handleLoadedMarkers(markers) { + let markerPastDisplay = []; + let markerFutureDisplay = []; + let markerLiveDisplay = []; + markers.map(city => { + if (city.city !== undefined && city.city !== "") { + let color = "red"; + switch (city.tripTiming) { + case 0: + color = "rgba(203, 118, 120, 0.25)"; + handleActiveTimings([0, 0, 0]); + markerPastDisplay.push( + + + handleCityTooltip(city)} + style={{ fill: color }} + key={"circle" + city.cityId} + cx="50" + cy="50" + r="50" + /> + + + + ); + break; + case 1: + color = "rgba(115, 167, 195, 0.25)"; + handleActiveTimings([0, 0, 0]); + markerFutureDisplay.push( + + + handleCityTooltip(city)} + style={{ fill: color }} + key={"circle" + city.cityId} + cx="50" + cy="50" + r="50" + /> + + + + ); + break; + default: + break; + } + } + return null; + }); + handleMarkerPastDisplay(markerPastDisplay); + handleMarkerFutureDisplay(markerFutureDisplay); + handleMarkerLiveDisplay(markerLiveDisplay); + handleLoaded(false); + handleActiveTimings([1, 1, 1]); + } + + function handleOnResult(event) { + markers.push(event); + let country = ""; + let countryISO = ""; + let context = 0; + let cityId; + for (let i in event.result.context) { + context = 0; + if (event.result.context.length === 1) { + countryISO = event.result.context[0].short_code.toUpperCase(); + country = event.result.context[0]["text_en-US"]; + } + if (event.result.context[i].id.slice(0, 7) === "country") { + context = i; + country = event.result.context[i]["text_en-US"]; + countryISO = event.result.context[i]["short_code"].toUpperCase(); + } + } + if (event.result.properties.wikidata !== undefined) { + cityId = parseFloat(event.result.properties.wikidata.slice(1), 10); + } else { + cityId = parseFloat(event.result.id.slice(10, 16), 10); + } + if ( + loadedClickedCityArray.some( + city => city.cityId === cityId && city.tripTiming === timingState + ) + ) { + return; + } + let newCityEntry = { + country: + event.result.context !== undefined ? country : event.result.place_name, + countryId: + event.result.context !== undefined + ? parseInt(event.result.context[context].id.slice(8, 14)) + : parseInt(event.result.id.slice(7, 13)), + countryISO: + event.result.context !== undefined + ? countryISO + : event.result.properties.short_code.toUpperCase(), + city: event.result.text, + cityId, + city_latitude: event.result.center[1], + city_longitude: event.result.center[0], + tripTiming: timingState + }; + handleMarkers(markers); + if ( + !loadedClickedCityArray.some( + city => + city.cityId === newCityEntry.cityId && city.tripTiming === timingState + ) + ) { + handleTripTimingCityHelper(newCityEntry); + } + } + + function handleTripTimingCityHelper(city) { + + let newClickedCityArray = [...clickedCityArray]; + newClickedCityArray.push({ + country: city.country, + countryISO: city.countryISO, + countryId: city.countryId, + city: city.city, + cityId: city.cityId, + city_latitude: city.city_latitude, + city_longitude: city.city_longitude, + tripTiming: timingState + }); + let pastCount = tripTimingCounts[0]; + let futureCount = tripTimingCounts[1]; + let liveCount = tripTimingCounts[2]; + let newMarkerPastDisplay = [...markerPastDisplay]; + let newMarkerFutureDisplay = [...markerFutureDisplay]; + let newMarkerLiveDisplay = [...markerLiveDisplay]; + let color = ""; + switch (timingState) { + case 0: + pastCount++; + tripTimingCounts[0] = pastCount; + color = "rgba(203, 118, 120, 0.25)"; + newMarkerPastDisplay.push( + +
handleCityTooltip(city)} + style={{ + backgroundColor: color + }} + key={"circle" + city.cityId} + className="dot" + /> +
handleCityTooltip(city)} + style={{ + backgroundColor: "rgba(203, 118, 120, 1)" + }} + key={"circle2" + city.cityId} + className="dot-inner" + /> +
+ + ); + + handleClickedCityArray(newClickedCityArray); + handleTripTimingCounts(tripTimingCounts); + handleMarkerPastDisplay(newMarkerPastDisplay); + updateTripCities(newClickedCityArray) + break; + case 1: + futureCount++; + tripTimingCounts[1] = futureCount; + color = "rgba(115, 167, 195, 0.25)"; + newMarkerFutureDisplay.push( + +
handleCityTooltip(city)} + style={{ + backgroundColor: color + }} + key={"circle" + city.cityId} + className="dot" + /> +
handleCityTooltip(city)} + style={{ backgroundColor: "rgba(115, 167, 195, 1.0)" }} + key={"circle2" + city.cityId} + className="dot-inner" + /> +
+ + ); + handleClickedCityArray(newClickedCityArray); + handleTripTimingCounts(tripTimingCounts); + handleMarkerFutureDisplay(newMarkerFutureDisplay); + updateTripCities(newClickedCityArray) + break; + default: + break; + } + } + + function _renderPopup() { + return ( + cityTooltip && ( + handleCityTooltip(null)} + > + {loadedClickedCityArray.some( + city => city.cityId === cityTooltip.cityId + ) ? ( + + {cityTooltip.city} + + ) : ( +
+ {cityTooltip.city} + (Save map to view) + deleteCity(cityTooltip)}> + + +
+ )} + + ) + ); + } + + + if (loading) return ; + return ( + <> +
+
+
0 + ? "personal-map-save" + : "personal-map-save personal-map-save-noclick" + } + id="city-map-share" + > + SAVE MY MAP + +
+
+ + {activeTimings[0] ? ( + ( + + )} + > + {markerPastDisplay} + + ) : null} + {activeTimings[1] ? ( + ( + + )} + > + {markerFutureDisplay} + + ) : null} + handleOnResult(e)} + limit={10} + mapboxApiAccessToken={ + "pk.eyJ1IjoibXZhbmNlNDM3NzYiLCJhIjoiY2pwZ2wxMnJ5MDQzdzNzanNwOHhua3h6cyJ9.xOK4SCGMDE8C857WpCFjIQ" + } + position="top-left" + types={"place"} + placeholder={"Type a city..."} + inputValue={""} + /> + + {cityTooltip ? _renderPopup() : null} + +
+ Enter the + +
+
+ + ); +} + +CitySelectContainer.propTypes = { + tripData: PropTypes.object, + handleMapTypeChange: PropTypes.func, + deleteCity: PropTypes.func, + refetch: PropTypes.func, + clickedCityArray: PropTypes.array, + initialTravelScore: PropTypes.number +}; + + +export default CitySelectContainer; diff --git a/src/pages/Profile/subpages/UserTrips/CitySelectContainer.scss b/src/pages/Profile/subpages/UserTrips/CitySelectContainer.scss new file mode 100644 index 0000000..96c6188 --- /dev/null +++ b/src/pages/Profile/subpages/UserTrips/CitySelectContainer.scss @@ -0,0 +1,14 @@ +.trip-cs-map-container { + position: absolute; + display: flex; + width: 100%; + margin-top: 40px; + height: calc(100% - 20px); + left: 0; + .user-timing-control { + transform: translateY(-120px); + select { + border: none; + } + } +} diff --git a/src/pages/Profile/subpages/UserTrips/ProfileTrips.js b/src/pages/Profile/subpages/UserTrips/ProfileTrips.js index 0e926e9..9ca3300 100644 --- a/src/pages/Profile/subpages/UserTrips/ProfileTrips.js +++ b/src/pages/Profile/subpages/UserTrips/ProfileTrips.js @@ -1,5 +1,6 @@ import React, { useState, useEffect } from "react"; import PropTypes from "prop-types"; +import { NavLink } from "react-router-dom"; import MenuIcon from "../../../../icons/MenuIcon"; import AllTimingsIcon from "../../../../icons/AllTimingsIcon"; @@ -8,7 +9,6 @@ import FutureIcon from "../../../../icons/FutureIcon"; import LiveIcon from "../../../../icons/LiveIcon"; import TripCard from "./TripCard"; import Loader from "../../../../components/common/Loader/Loader"; -import CircleIcon from "../../../../icons/CircleIcon"; const fakeTrips = [ { @@ -137,18 +137,34 @@ export default function ProfileTrips({ {results.length < 1 ? ( No cities recorded yet! ) : null} -
- + - - - - -
+ +
+ + + + + + +
+ {" "} + +
+ + + + + + +
+ {fakeTrips.map((trip, index) => ( { + if (tripStartDate !== null && tripEndDate !== null) { + let timeDiff = new Date(tripEndDate) - new Date(tripStartDate); + let diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 0.00001); + handleTripDuration(diffDays); + } + }, []); + + useEffect(() => { + handleLoaded(true); + }, []); + + function handleStartDate(e) { + let startDate = new Date(e.target.value).toISOString().slice(0, 10); + console.log(startDate); + if (startDate !== null && tripEndDate !== null) { + let timeDiff = new Date(tripEndDate) - new Date(startDate); + let diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 0.00001); + console.log(diffDays); + handleTripDuration(diffDays); + } + updateTripStartDate(startDate); + } + + function handleEndDate(e) { + let endDate = new Date(e.target.value).toISOString().slice(0, 10); + console.log(endDate); + if (endDate !== null && tripStartDate !== null) { + let timeDiff = new Date(endDate) - new Date(tripStartDate); + let diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) + 0.00001); + console.log(diffDays); + handleTripDuration(diffDays); + } + updateTripEndDate(endDate); + } + + if (!loaded) return "Loading"; + return ( +
+
+ + Start Date + + + + End Date + + +
+
+ This trip will total{" "} + + {tripDuration !== null ? tripDuration : "XX"} + {" "} + days. +
+ {tripTiming === "future" + ? "These trips will mainly be for " + : "These trips were mainly for "} + {edit ? ( + + ) : tripTiming !== "live" ? ( + + {tripType === null ? "blank" : tripType} + + ) : null} +
+ {tripTiming === "future" + ? "For the majority of the trips I'll travel" + : "For the majority of the trips I traveled "} + {edit ? ( + + ) : tripTiming !== "live" ? ( + <> +
+ + {cityBasics.trip_company === null + ? "blank" + : cityBasics.trip_company} + + + ) : null} + {tripTiming !== "live" ? "." : null} +
+ + {urlUsername !== undefined ? null : ( +
+ refetch()} + > + {mutation => + edit ? ( + + Update + + ) : ( + + Edit + + ) + } + +
+ )} +
+ ); +} + +TripBasicsContainer.propTypes = { + trip: PropTypes.object, + refetch: PropTypes.func, + urlUsername: PropTypes.string +}; + +export default TripBasicsContainer; diff --git a/src/pages/Profile/subpages/UserTrips/TripCommentaryContainer.js b/src/pages/Profile/subpages/UserTrips/TripCommentaryContainer.js new file mode 100644 index 0000000..6a66e3d --- /dev/null +++ b/src/pages/Profile/subpages/UserTrips/TripCommentaryContainer.js @@ -0,0 +1,136 @@ +import React, { useState, useEffect } from "react"; +import PropTypes from "prop-types"; +import { Mutation } from "react-apollo"; +import { + UPDATE_VISITED_CITY_COMMENTS, + UPDATE_LIVING_CITY_COMMENTS, + UPDATE_VISITING_CITY_COMMENTS +} from "../../../../GraphQL"; +import CityLivedPopup from "../../../../components/Prompts/ClickedCountry/CityLivedPopup"; + +function TripCommentaryContainer({ city, refetch, urlUsername }) { + const [loaded, handleLoaded] = useState(false); + const [feedbackState, handleFeedbackClick] = useState(false); + const [cityComments, handleCityComments] = useState({ + best_comment: city.best_comment, + hardest_comment: city.hardest_comment + }); + const [id] = useState(city.id); + const [edit, handleEdit] = useState(false); + + function handleBestChange(comment) { + cityComments.best_comment = comment; + handleCityComments(cityComments); + } + + function handleHardestChange(comment) { + cityComments.hardest_comment = comment; + handleCityComments(cityComments); + } + + useEffect(() => { + handleLoaded(true); + }, []); + + if (!loaded) return "Loading"; + return ( +
+ Best Memory + {edit ? ( + + ) : ( + + )} + Biggest Challenge + {edit ? ( + + ) : ( + + )} + {urlUsername !== undefined ? null : ( + refetch()} + > + {mutation => + edit ? ( + + Update + + ) : ( + + Edit + + ) + } + + )} +
+ ); +} + +TripCommentaryContainer.propTypes = { + results: PropTypes.object, + city: PropTypes.object, + refetch: PropTypes.func, + urlUsername: PropTypes.string +}; + +export default TripCommentaryContainer; diff --git a/src/pages/Profile/subpages/UserTrips/TripDetailContainer.js b/src/pages/Profile/subpages/UserTrips/TripDetailContainer.js new file mode 100644 index 0000000..1e1968f --- /dev/null +++ b/src/pages/Profile/subpages/UserTrips/TripDetailContainer.js @@ -0,0 +1,352 @@ +import React, { useState, useEffect } from "react"; +import PropTypes from "prop-types"; +import { TripDetailContext } from "./TripDetailsContext"; + +import MenuIcon from "../../../../icons/MenuIcon"; +import CityReviewsContainer from "../Cities/CityReviewsContainer"; +import CityIcon from '../../../../icons/CityIcon'; +import CalendarIcon from "../../../../icons/CalendarIcon"; +import LocationIcon from "../../../../icons/LocationIcon"; +import AllTypesIcon from "../../../../icons/AllTimingsIcon"; +import ActivitiesIcon from "../../../../icons/InterestIcons/GuidedTouristIcon"; +import FoodieIcon from "../../../../icons/InterestIcons/FoodieIcon"; +import CommentaryIcon from "../../../../icons/CommentaryIcon"; +import LogisticsIcon from "../../../../icons/LogisticsIcon"; +import TripLogisticsContainer from "./TripLogisticsContainer"; +import TripBasicsContainer from "./TripBasicsContainer"; +import TripCommentaryContainer from "./TripCommentaryContainer"; +import CitySelectContainer from "./CitySelectContainer"; + +function TripDetailContainer({ + city, + cityReviews, + refetch, + urlUsername, + userId +}) { + const [loaded, handleLoaded] = useState(false); + const [expanded, handleToggle] = useState(false); + const [localCityReviews, handleLocalCityReviews] = useState(null); + const [friendCityReviews, handleFriendCityReviews] = useState([]); + const [filteredCityReviews, handleFilteredCityReviews] = useState( + cityReviews + ); + const [filteredFriendReviews, handleFilteredFriendReviews] = useState([]); + const [page, handlePage] = useState("basics"); + const [tripTiming, handleTripTiming] = useState(window.location.pathname.split("/")[4]); + const [tripName, handleTripName] = useState("Hawaii July 4th"); + const [tripStartDate, handleTripStartDate] = useState("2020-02-01"); + const [tripEndDate, handleTripEndDate] = useState("2020-02-20"); + const [tripType, handleTripType] = useState("vacation"); + const [tripCompany, handleTripCompany] = useState("with family"); + const [tripCities, handleTripCities] = useState([]); + + useEffect(() => { + handleLocalCityReviews(cityReviews); + }, [cityReviews]); + useEffect(() => { + // handleLoaded(false); + let keyWords = []; + switch (page) { + case "basics": + handleLoaded(true); + return; + case "citySelect": + return; + case "all reviews": + keyWords = [ + "monument", + "nature", + "place", + "stay", + "breakfast", + "lunch", + "dinner", + "dessert", + "drink", + "tour", + "outdoor", + "shopping", + "activity" + ]; + break; + case "places": + keyWords = ["monument", "nature", "place", "stay"]; + break; + case "meals": + keyWords = ["breakfast", "lunch", "dinner", "dessert", "drink"]; + break; + case "activities": + keyWords = ["tour", "outdoor", "shopping", "activity"]; + break; + case "logistics": + keyWords = ["logistics"]; + break; + default: + break; + } + let filteredArray = localCityReviews.filter(city => { + for (let i in keyWords) { + if (city.attraction_type === keyWords[i]) { + return true; + } + } + return false; + }); + let friendArray = []; + if (friendCityReviews.length >= 1) { + for (let i in friendCityReviews) { + for (let j in friendCityReviews[i].CityReviews) { + friendArray.push(friendCityReviews[i].CityReviews[j]); + } + } + } + let filteredFriendArray = friendArray.filter(city => { + for (let i in keyWords) { + if (city.attraction_type === keyWords[i]) { + return true; + } + } + return false; + }); + handleFilteredCityReviews(filteredArray); + handleFilteredFriendReviews(filteredFriendArray); + handleLoaded(true); + }, [page, localCityReviews, friendCityReviews]); + + function handleFriendReviewHandler(data) { + handleFriendCityReviews(data); + } + + function updateLocalReviews(updatedReviews) { + let localReviews = [...localCityReviews]; + localReviews.push(updatedReviews); + handleLocalCityReviews(localReviews); + handleLoaded(true); + } + + function deleteLocalCityReview(index) { + let newLocalCityReviews = [...localCityReviews]; + newLocalCityReviews.splice(index, 1); + handleLocalCityReviews(newLocalCityReviews); + } + + function updateTripName(text) { + handleTripName(text); + } + + function updateTripStartDate(date) { + handleTripStartDate(date); + } + function updateTripEndDate(date) { + handleTripEndDate(date); + } + + function updateTripType(type) { + handleTripType(type); + } + + function updateTripCompany(company) { + handleTripCompany(company); + } + + function updateTripCities(cities) { + handleTripCities(cities); + } + + const cityReviewsContainer = ( + + ); + + if (!loaded) return "Loading"; + return ( + +
+
+ handleToggle(!expanded)}> + {expanded ?
: null} + + + + + + + + + + +
+
+
+
+ + {page === "basics" ? ( + handleTripName(e.target.value)} + defaultValue={tripName} + > + ) : ( + {tripName} + )} + + + {page === "basics" + ? "" + : page === "places" + ? "(where did you go)" + : page === "activities" + ? "(what did you do)" + : page === "meals" + ? "(what did you eat/drink)" + : page === "logistics" + ? "" + : null} + +
+
+ + + {tripStartDate.substr(5, 2)} + | + {tripStartDate.substr(0, 4)} + +
+
+ + { + { + basics: ( + + ), + citySelect: ( + + ), + logistics: ( + + ), + "all reviews": cityReviewsContainer, + places: cityReviewsContainer, + activities: cityReviewsContainer, + meals: cityReviewsContainer, + comments: ( + + ) + }[page] + } +
+
+ + ); +} + +TripDetailContainer.propTypes = { + city: PropTypes.object, + cityReviews: PropTypes.array, + refetch: PropTypes.func, + urlUsername: PropTypes.string, + userId: PropTypes.number +}; + +export default React.memo(TripDetailContainer); diff --git a/src/pages/Profile/subpages/UserTrips/TripDetailContainer.scss b/src/pages/Profile/subpages/UserTrips/TripDetailContainer.scss new file mode 100644 index 0000000..d8dbe58 --- /dev/null +++ b/src/pages/Profile/subpages/UserTrips/TripDetailContainer.scss @@ -0,0 +1,25 @@ +.content-results { + width: 100%; +} +.trip-review-header { + .city-review-subtitle { + span:nth-child(1) { + color: white; + } + } + .trip-review-page { + .trip-title-input { + background: none; + border: none; + color: #d2dcd7; + font-family: "Segoe UI", sans-serif; + font-size: 24px; + font-weight: 550; + line-height: 24px; + min-width: 500px; + &::placeholder { + color: #9c9e9d; + } + } + } +} diff --git a/src/pages/Profile/subpages/UserTrips/TripDetailsContext.js b/src/pages/Profile/subpages/UserTrips/TripDetailsContext.js new file mode 100644 index 0000000..6a54a1c --- /dev/null +++ b/src/pages/Profile/subpages/UserTrips/TripDetailsContext.js @@ -0,0 +1,9 @@ +import React from "react"; + +export const TripDetailContext = React.createContext({ + tripName: "", + tripStartDate: "", + tripEndDate: "", + tripType: "", + tripCompany: "" +}); \ No newline at end of file diff --git a/src/pages/Profile/subpages/UserTrips/TripLogisticsContainer.js b/src/pages/Profile/subpages/UserTrips/TripLogisticsContainer.js new file mode 100644 index 0000000..1c383f8 --- /dev/null +++ b/src/pages/Profile/subpages/UserTrips/TripLogisticsContainer.js @@ -0,0 +1,285 @@ +import React, { useState, useEffect } from "react"; +import PropTypes from "prop-types"; +import { Mutation } from "react-apollo"; +import { + UPDATE_VISITED_CITY_REVIEWS, + UPDATE_VISITING_CITY_REVIEWS, + UPDATE_LIVING_CITY_REVIEWS +} from "../../../../GraphQL"; + +import TransportationIconContainer from "../Cities/TransportationIconContainer"; +import CarIcon from "../../../../icons/TransportationIcons/CarIcon"; +import MotorbikeIcon from "../../../../icons/TransportationIcons/MotorbikeIcon"; +import TrainIcon from "../../../../icons/TransportationIcons/TrainIcon"; +import BoatIcon from "../../../../icons/TransportationIcons/BoatIcon"; +import CruiseIcon from "../../../../icons/TransportationIcons/CruiseIcon"; +import BusIcon from "../../../../icons/TransportationIcons/BusIcon"; +import SubwayIcon from "../../../../icons/TransportationIcons/SubwayIcon"; +import TaxiIcon from "../../../../icons/TransportationIcons/TaxiIcon"; +import AirplaneIcon from "../../../../icons/TransportationIcons/AirplaneIcon"; +import HelicopterIcon from "../../../../icons/TransportationIcons/HelicopterIcon"; +import BikeIcon from "../../../../icons/TransportationIcons/BikeIcon"; +import WalkIcon from "../../../../icons/TransportationIcons/WalkIcon"; + +function TripLogisticsContainer({ reviews, city, urlUsername, refetch }) { + const [loaded, handleLoaded] = useState(false); + const [edit, handleEdit] = useState(false); + const [feedbackState, handleFeedbackClick] = useState( + urlUsername !== undefined ? true : false + ); + const [activeTransportComponents, handleActiveTransportComponents] = useState( + [] + ); + const [localCityReviews, handleLocalCityReviews] = useState(); + const transportTypes = [ + "walk", + "car", + "taxi", + "bus", + "motorbike", + "bike", + "train", + "subway", + "airplane", + "helicopter", + "boat", + "cruise" + ]; + const transportComponents = [ + , + , + , + , + , + , + , + , + , + , + , + + ]; + useEffect(() => { + let activeTransport = [...activeTransportComponents]; + for (let i in reviews) { + delete reviews[i].__typename; + if ( + reviews[i].attraction_type === "logistics" && + activeTransport.indexOf(reviews[i].attraction_name) === -1 + ) { + activeTransport.push(reviews[i].attraction_name); + } + } + if (activeTransport.length > 0) { + handleActiveTransportComponents(activeTransport); + } + handleLocalCityReviews(reviews); + handleLoaded(true); + }, [reviews]); + function handleClickActive(index) { + let activeComponents = [...activeTransportComponents]; + if (activeTransportComponents.indexOf(transportTypes[index]) === -1) { + activeComponents.push(transportTypes[index]); + let newCityReview = { + id: 0, + key: activeComponents.length, + attraction_type: "logistics", + attraction_name: transportTypes[index], + rating: 1, + cost: null, + currency: "USD", + comment: "" + }; + city.timing === "past" + ? (newCityReview.PlaceVisitedId = city.id) + : city.timing === "future" + ? (newCityReview.PlaceVisitingId = city.id) + : (newCityReview.PlaceLivingId = city.id); + localCityReviews.push(newCityReview); + } else { + activeComponents.splice(activeComponents.indexOf(transportTypes[index]), 1); + let deleteIndex = localCityReviews.findIndex( + review => review.attraction_name === transportTypes[index] + ); + localCityReviews.splice(deleteIndex, 1); + } + handleActiveTransportComponents(activeComponents); + handleLocalCityReviews(localCityReviews); + } + function handleRatingChange(id, key, rating) { + let reviewToUpdate = localCityReviews.findIndex( + review => review.id === id && review.key === key + ); + localCityReviews[reviewToUpdate].rating = rating; + handleLocalCityReviews(localCityReviews); + } + function handleCostChange(id, key, cost) { + let reviewToUpdate = localCityReviews.findIndex( + review => review.id === id && review.key === key + ); + if (cost === null || cost === "") { + localCityReviews[reviewToUpdate].cost = null; + } else { + localCityReviews[reviewToUpdate].cost = Number(cost); + } + handleLocalCityReviews(localCityReviews); + } + function handleCurrencyChange(id, key, currency) { + let reviewToUpdate = localCityReviews.findIndex( + review => review.id === id && review.key === key + ); + localCityReviews[reviewToUpdate].currency = currency; + handleLocalCityReviews(localCityReviews); + } + function handleCommentChange(id, key, comment) { + let reviewToUpdate = localCityReviews.findIndex( + review => review.id === id && review.key === key + ); + localCityReviews[reviewToUpdate].comment = comment; + handleLocalCityReviews(localCityReviews); + } + + function mutationPrep(mutation) { + for (let i in localCityReviews) { + delete localCityReviews[i].key; + } + mutation(); + } + + if (!loaded) return "Loading"; + return ( +
+ {!feedbackState ? ( + <> + {transportTypes.map((transportationType, index) => { + return ( + + element.attraction_name === transportationType + ) + : null + } + /> + ); + })} + {edit ? ( +
+ +
+ ) : null} + + ) : ( + <> + {transportTypes.map((transportationType, index) => { + if ( + activeTransportComponents.indexOf(transportTypes[index]) !== -1 + ) { + return ( + + element.attraction_name === transportationType + ) + : null + } + /> + ); + } + })} + {activeTransportComponents.length < 1 ? ( +
+ No transportation methods entered yet +
+ ) : null} + {!urlUsername ? ( +
+ +
+ ) : null} + + )} + {urlUsername !== undefined ? null : ( +
+ refetch()} + > + {mutation => + edit ? ( + mutationPrep(mutation)} + > + Update + + ) : ( + handleEdit(true)}> + Edit + + ) + } + +
+ )} +
+ ); +} + +TripLogisticsContainer.propTypes = { + reviews: PropTypes.array, + city: PropTypes.object, + urlUsername: PropTypes.string, + refetch: PropTypes.func +}; + +export default TripLogisticsContainer; From c2452aa3beba7c90863007a178fac16cfce9f98e Mon Sep 17 00:00:00 2001 From: Matt Vance Date: Tue, 25 Feb 2020 23:59:53 -0800 Subject: [PATCH 3/7] Adding day selector, stylizing city select and map zoom --- .../Profile/subpages/Cities/PlanningMap.js | 26 +- .../subpages/UserTrips/CitySelectContainer.js | 2 +- .../subpages/UserTrips/TripDetailContainer.js | 154 ++++++-- .../UserTrips/TripDetailContainer.scss | 104 +++++- .../UserTrips/TripReviewsContainer.js | 353 ++++++++++++++++++ 5 files changed, 592 insertions(+), 47 deletions(-) create mode 100644 src/pages/Profile/subpages/UserTrips/TripReviewsContainer.js diff --git a/src/pages/Profile/subpages/Cities/PlanningMap.js b/src/pages/Profile/subpages/Cities/PlanningMap.js index ea225c9..59dc4b0 100644 --- a/src/pages/Profile/subpages/Cities/PlanningMap.js +++ b/src/pages/Profile/subpages/Cities/PlanningMap.js @@ -21,7 +21,7 @@ function PlanningMap({ height: window.innerHeight, latitude: latitude, longitude: longitude, - zoom: 7.5 + zoom: 1.0 }); const [bbox, handleBbox] = useState([]); const [loadingReviews, handleLoadingReviews] = useState(false); @@ -37,6 +37,27 @@ function PlanningMap({ }; }, []); + useEffectSkipFirstViewport(() => {}, [latitude, longitude]); + + function useEffectSkipFirstViewport() { + const isFirst = useRef(true); + useEffect(() => { + if (isFirst.current) { + isFirst.current = false; + return; + } + let zoom = 1; + if (latitude !== 0 || longitude !== 0) { + zoom = 7.5; + } + handleViewportChange({ + latitude: latitude, + longitude: longitude, + zoom: zoom + }); + }, [latitude, longitude]); + } + useEffect(() => { if (loaded) { let newBBox = mapRef.current.getMap().getBounds(); @@ -83,7 +104,6 @@ function PlanningMap({ } function handleOnResult(event) { - console.log(event); handleLoadingReviews(true); handleLocalCityReviews(event); } @@ -177,7 +197,7 @@ function PlanningMap({ handleOnResult(e)} - onViewportChange={handleViewportChange} + // onViewportChange={handleViewportChange} limit={10} types={"poi"} mapboxApiAccessToken={ diff --git a/src/pages/Profile/subpages/UserTrips/CitySelectContainer.js b/src/pages/Profile/subpages/UserTrips/CitySelectContainer.js index 8d71176..7370303 100644 --- a/src/pages/Profile/subpages/UserTrips/CitySelectContainer.js +++ b/src/pages/Profile/subpages/UserTrips/CitySelectContainer.js @@ -48,7 +48,7 @@ console.log(clickedCityArray) window.addEventListener("resize", resize); resize(); handleLoaded(false); - // handleLoadedCities(props.clickedCityArray); + handleLoadedCities(loadedClickedCityArray); return function cleanup() { window.removeEventListener("resize", resize); }; diff --git a/src/pages/Profile/subpages/UserTrips/TripDetailContainer.js b/src/pages/Profile/subpages/UserTrips/TripDetailContainer.js index 1e1968f..60cec19 100644 --- a/src/pages/Profile/subpages/UserTrips/TripDetailContainer.js +++ b/src/pages/Profile/subpages/UserTrips/TripDetailContainer.js @@ -3,8 +3,8 @@ import PropTypes from "prop-types"; import { TripDetailContext } from "./TripDetailsContext"; import MenuIcon from "../../../../icons/MenuIcon"; -import CityReviewsContainer from "../Cities/CityReviewsContainer"; -import CityIcon from '../../../../icons/CityIcon'; +import TripReviewsContainer from "./TripReviewsContainer"; +import CityIcon from "../../../../icons/CityIcon"; import CalendarIcon from "../../../../icons/CalendarIcon"; import LocationIcon from "../../../../icons/LocationIcon"; import AllTypesIcon from "../../../../icons/AllTimingsIcon"; @@ -33,13 +33,49 @@ function TripDetailContainer({ ); const [filteredFriendReviews, handleFilteredFriendReviews] = useState([]); const [page, handlePage] = useState("basics"); - const [tripTiming, handleTripTiming] = useState(window.location.pathname.split("/")[4]); - const [tripName, handleTripName] = useState("Hawaii July 4th"); - const [tripStartDate, handleTripStartDate] = useState("2020-02-01"); - const [tripEndDate, handleTripEndDate] = useState("2020-02-20"); + const [tripTiming, handleTripTiming] = useState( + window.location.pathname.split("/")[4] + ); + const [tripName, handleTripName] = useState("Northern Eurotrip"); + const [tripStartDate, handleTripStartDate] = useState("2020-04-01"); + const [tripEndDate, handleTripEndDate] = useState("2020-04-20"); const [tripType, handleTripType] = useState("vacation"); const [tripCompany, handleTripCompany] = useState("with family"); - const [tripCities, handleTripCities] = useState([]); + const [tripCities, handleTripCities] = useState([ + { + country: "United States of America", + countryISO: "US", + countryId: 905300, + city: "San Francisco", + cityId: 62, + city_latitude: 37.7648, + city_longitude: -122.463, + tripTiming: 1 + }, + { + country: "Netherlands", + countryISO: "NL", + countryId: 934951, + city: "Amsterdam", + cityId: 727, + city_latitude: 52.378, + city_longitude: 4.9, + tripTiming: 1 + }, + { + country: "Denmark", + countryISO: "DK", + countryId: 123993, + city: "Copenhagen", + cityId: 1748, + city_latitude: 55.67611, + city_longitude: 12.56889, + tripTiming: 1 + } + ]); + const [selectedCity, handleSelectedCity] = useState([]); + const [day, handleDay] = useState(0); + const [date, handleDate] = useState(""); useEffect(() => { handleLocalCityReviews(cityReviews); @@ -151,15 +187,42 @@ function TripDetailContainer({ } function updateTripCities(cities) { - handleTripCities(cities); + handleTripCities(cities); } - const cityReviewsContainer = ( - handleDateChange(date.toString().substr(0, 15), i + 1)} + > + {i + 1} + + ); + } + const tripReviewsContainer = ( + ); - + console.log(selectedCity); if (!loaded) return "Loading"; return ( -
+
-
+
{page === "basics" ? (
+ {page !== "basics" && page !== "citySelect" ? ( +
+ +
+ ) : null}
- {tripStartDate.substr(5, 2)} + {date === "" ? "day" : date.substr(0, 10)} | - {tripStartDate.substr(0, 4)} + {date === "" ? "year" : date.substr(11, 4)}
@@ -321,10 +411,10 @@ function TripDetailContainer({ urlUsername={urlUsername} /> ), - "all reviews": cityReviewsContainer, - places: cityReviewsContainer, - activities: cityReviewsContainer, - meals: cityReviewsContainer, + "all reviews": tripReviewsContainer, + places: tripReviewsContainer, + activities: tripReviewsContainer, + meals: tripReviewsContainer, comments: ( + {page !== "basics" && page !== "citySelect" ? ( +
+ day +
+ handleDateChange("", 0)} + > + all + + {dayOptions} +
+
+ ) : null}
); diff --git a/src/pages/Profile/subpages/UserTrips/TripDetailContainer.scss b/src/pages/Profile/subpages/UserTrips/TripDetailContainer.scss index d8dbe58..c5f2c41 100644 --- a/src/pages/Profile/subpages/UserTrips/TripDetailContainer.scss +++ b/src/pages/Profile/subpages/UserTrips/TripDetailContainer.scss @@ -1,24 +1,92 @@ -.content-results { - width: 100%; -} -.trip-review-header { - .city-review-subtitle { - span:nth-child(1) { - color: white; +.profile-trips { + .content-results { + width: calc(100% - 160px); + } + .trip-review-header { + .trip-sub-header { + display: flex; + } + .trip-dropdowns { + .trip-city { + background: none; + border: none; + color: rgb(248,248, 252); + font-size: 20px; + height: 28px; + display: flex; + align-items: center; + option { + background: #2D2B2B; + } + } + } + .city-review-subtitle { + span:nth-child(1) { + color: white; + } + } + .trip-review-page { + .trip-title-input { + background: none; + border: none; + color: #d2dcd7; + font-family: "Segoe UI", sans-serif; + font-size: 24px; + font-weight: 550; + line-height: 24px; + min-width: 500px; + &::placeholder { + color: #9c9e9d; + } + } } } - .trip-review-page { - .trip-title-input { - background: none; - border: none; - color: #d2dcd7; - font-family: "Segoe UI", sans-serif; - font-size: 24px; + .trip-right-menu { + width: 60px; + min-width: 60px; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 20px; + border-left: 1px solid rgba(0, 0, 0, 0.2); + transition: all 0.3s; + .trip-right-title { + color: #CFD4DA; + font-weight: 700; + margin-bottom: 8px; + } + .trip-day { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + color: #8792a4; font-weight: 550; - line-height: 24px; - min-width: 500px; - &::placeholder { - color: #9c9e9d; + span { + height: 32px; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); + &:hover { + background: #CFD4DA; + min-width: 68px; + transform: translateX(-4px); + padding-left: 8px; + border-top-left-radius: 12px; + border-bottom-left-radius: 12px; + } + } + .trip-day-active { + background: rgb(248, 248, 252); + min-width: 68px; + transform: translateX(-4px); + padding-left: 8px; + border-top-left-radius: 12px; + border-bottom-left-radius: 12px; + color: #5f91b7; + box-shadow: -2px 1px 8px 0px rgba(white, 0.15); } } } diff --git a/src/pages/Profile/subpages/UserTrips/TripReviewsContainer.js b/src/pages/Profile/subpages/UserTrips/TripReviewsContainer.js new file mode 100644 index 0000000..6d9205d --- /dev/null +++ b/src/pages/Profile/subpages/UserTrips/TripReviewsContainer.js @@ -0,0 +1,353 @@ +import React, { useState, useEffect, useRef } from "react"; +import PropTypes from "prop-types"; +import { Mutation } from "react-apollo"; +import { useQuery } from "@apollo/react-hooks"; +import { + UPDATE_VISITED_CITY_REVIEWS, + UPDATE_VISITING_CITY_REVIEWS, + UPDATE_LIVING_CITY_REVIEWS, + CITY_REVIEWS_ALL_USERS +} from "../../../../GraphQL"; + +import CityReviewCard from "../Cities/CityReviewCard"; +import Loader from "../../../../components/common/Loader/Loader"; +import PlanningMap from "../Cities/PlanningMap"; +import PlaceReviewCard from "../../../Place/PlaceReviewCard"; + +function PlanningMapFriendReviews({ + placeId, + sendFriendReviewsBackwards, + userId +}) { + const { data, error, loading } = useQuery(CITY_REVIEWS_ALL_USERS, { + variables: { placeId } + }); + // const dataLoaded = useRef(true); + + if (data !== undefined && data !== null) { + handleDataReturn(data[Object.keys(data)[0]]); + } + function handleDataReturn(data) { + let newData = data.filter( + (item, index, self) => + index === + self.findIndex(t => t.id === item.id && t.UserId === item.UserId) + ); + let newDataNonBlanks = []; + for (let i in newData) { + if ( + newData[i].CityReviews.length >= 1 && + Number(newData[i].UserId) !== Number(userId) + ) { + newDataNonBlanks.push(newData[i]); + } + } + sendFriendReviewsBackwards(newDataNonBlanks); + } + return null; +} + +export default function TripReviewsContainer({ + page, + reviews, + friendReviews, + updateLocalReviews, + fullFriendCityReviews, + city, + refetch, + urlUsername, + deleteLocalCityReview, + userId, + sendFriendReviewsBackwards +}) { + const [loaded, handleLoaded] = useState(false); + const [edit, handleEdit] = useState(false); + const [localCityReviews, handleLocalCityReviews] = useState([]); + const [localFriendReviews, handleLocalFriendReviews] = useState( + friendReviews.length > 0 ? friendReviews : [] + ); + const [showFriendReviews, handleShowFriendReviews] = useState(false); + const [placeId] = useState(city.cityId); + + useEffect(() => { + console.log("city review container loaded"); + }, []); + console.log("showFriendReviews: ", showFriendReviews); + useEffect(() => { + let reviewHolder = [...reviews]; + for (let i in reviewHolder) { + delete reviewHolder[i].__typename; + } + handleLocalCityReviews(reviewHolder); + handleLoaded(true); + }, [reviews]); + + useEffect(() => { + if (fullFriendCityReviews.length > 0) { + handleShowFriendReviews(false); + } + }, [fullFriendCityReviews]); + + useEffect(() => { + if (friendReviews.length > 0) { + handleLocalFriendReviews(friendReviews); + } + }, [friendReviews]); + + function handleNewCityReview(event) { + let cityReviews = [...localCityReviews]; + let newCityReview = { + reviewPlaceId: event.result.id.substr(4), + review_latitude: event.result.center[1], + review_longitude: event.result.center[0], + attraction_name: event.result.text, + rating: 1, + comment: "", + cost: null, + currency: "USD", + key: cityReviews.length, + id: 0 + }; + city.timing === "past" + ? (newCityReview.PlaceVisitedId = city.id) + : city.timing === "future" + ? (newCityReview.PlaceVisitingId = city.id) + : (newCityReview.PlaceLivingId = city.id); + newCityReview.attraction_type = guessAttractionType( + event.result.properties + ); + cityReviews.push(newCityReview); + handleLocalCityReviews(cityReviews); + updateLocalReviews(newCityReview); + } + + function guessAttractionType(place) { + let type = "place"; + let category = place.category.split(",").map(item => item.trim()); + if (category.indexOf("natural") !== -1) { + type = "nature"; + } else if (category.indexOf("lodging") !== -1) { + type = "stay"; + } else if (category.indexOf("restaurant") !== -1) { + type = "dinner"; + } else if ( + category.indexOf("coffee") !== -1 || + category.indexOf("tea") !== -1 || + category.indexOf("cafe") !== -1 + ) { + type = "breakfast"; + } else if (category.indexOf("bar") !== -1) { + type = "drink"; + } else if (category.indexOf("dessert") !== -1) { + type = "dessert"; + } else if (category.indexOf("shop") !== -1) { + type = "shopping"; + } + return type; + } + + function sendFriendReviewsBackwardsHelper(data) { + handleShowFriendReviews(false); + sendFriendReviewsBackwards(data); + } + + function handleType(id, key, type) { + let reviewToUpdate = localCityReviews.findIndex( + review => review.id === id && review.key === key + ); + localCityReviews[reviewToUpdate].attraction_type = type; + handleLocalCityReviews(localCityReviews); + } + function handleInputChange(id, key, input) { + let reviewToUpdate = localCityReviews.findIndex( + review => review.id === id && review.key === key + ); + localCityReviews[reviewToUpdate].attraction_name = input; + handleLocalCityReviews(localCityReviews); + } + function handleRatingChange(id, key, rating) { + let reviewToUpdate = localCityReviews.findIndex( + review => review.id === id && review.key === key + ); + localCityReviews[reviewToUpdate].rating = rating; + handleLocalCityReviews(localCityReviews); + } + function handleCostChange(id, key, cost) { + let reviewToUpdate = localCityReviews.findIndex( + review => review.id === id && review.key === key + ); + if (cost === null || cost === "") { + localCityReviews[reviewToUpdate].cost = null; + } else { + localCityReviews[reviewToUpdate].cost = Number(cost); + } + handleLocalCityReviews(localCityReviews); + } + function handleCurrencyChange(id, key, currency) { + let reviewToUpdate = localCityReviews.findIndex( + review => review.id === id && review.key === key + ); + if (localCityReviews.length > 0) { + localCityReviews[reviewToUpdate].currency = currency; + handleLocalCityReviews(localCityReviews); + } + } + function handleCommentChange(id, key, comment) { + let reviewToUpdate = localCityReviews.findIndex( + review => review.id === id && review.key === key + ); + localCityReviews[reviewToUpdate].comment = comment; + handleLocalCityReviews(localCityReviews); + } + + function deleteReview(index) { + deleteLocalCityReview(index); + } + + function mutationPrep(mutation) { + for (let i in localCityReviews) { + delete localCityReviews[i].key; + } + mutation(); + } + if (!loaded) return ; + console.log(city) + return ( + <> +
+ +
+
+ {localCityReviews.length < 1 ? ( + + {urlUsername !== undefined + ? "No reviews entered" + : "Enter your first review!"} + + ) : ( + localCityReviews.map(review => ( + + )) + )} + {fullFriendCityReviews.map((user, index) => { + return ( + { + return null; + }} + cityOrCountry={"city"} + /> + ); + })} +
+ {urlUsername !== undefined ? null : ( +
+ refetch()} + > + {mutation => + page === "all reviews" ? ( + edit ? ( + <> + mutationPrep(mutation)} + > + save + + + custom review + + + ) : ( + <> + handleEdit(true)} + > + Edit + + {city.timing === "future" ? ( + handleShowFriendReviews(true)} + > + Friend Reviews + + ) : null} + + ) + ) : null + } + + {showFriendReviews ? ( + + ) : null} +
+ )} + + ); +} + +TripReviewsContainer.propTypes = { + page: PropTypes.string, + reviews: PropTypes.array, + friendReviews: PropTypes.array, + updateLocalReviews: PropTypes.func, + city: PropTypes.object, + refetch: PropTypes.func, + urlUsername: PropTypes.string, + deleteLocalCityReview: PropTypes.func, + userId: PropTypes.number, + sendFriendReviewsBackwards: PropTypes.func, + fullFriendCityReviews: PropTypes.array +}; From d57b400f8f488d82b742377caeac2a141379f426 Mon Sep 17 00:00:00 2001 From: Matt Vance Date: Sun, 1 Mar 2020 00:54:46 -0800 Subject: [PATCH 4/7] Responsiveness for personal city map --- src/icons/SaveIcon.js | 2 - .../Home/subcomponents/CityMapTrialConst.js | 97 ++++++++++++++++--- src/pages/Home/subcomponents/NewUserCity.js | 6 ++ src/pages/Home/subcomponents/_CityMap.scss | 48 +++++++-- .../Home/subcomponents/_MapScorecard.scss | 5 +- .../Home/subcomponents/_NewUserCity.scss | 2 +- .../subpages/Cities/ProfileIndividualCity.js | 5 - .../UserTrips/TripReviewsContainer.js | 1 + 8 files changed, 133 insertions(+), 33 deletions(-) diff --git a/src/icons/SaveIcon.js b/src/icons/SaveIcon.js index b19615d..ed93f77 100644 --- a/src/icons/SaveIcon.js +++ b/src/icons/SaveIcon.js @@ -10,8 +10,6 @@ class SaveIcon extends Component { viewBox="0 0 18 18" x="0px" y="0px" - width="18px" - height="18px" > = 2400) { + // zoom = 2.2; + // } else if (window.innerWidth >= 1750) { + // zoom = 1.75; + // } else if (window.innerWidth <= 900) { + // zoom = 0.75; + // } else if (window.innerWidth <= 1200) { + // zoom = 1.0; + // } else if (window.innerWidth <= 1400) { + // zoom = 1.25; + // } else if (window.innerWidth < 1750) { + // zoom = 1.5; + // } + // return zoom; let zoom; - if (window.innerWidth >= 2400) { - zoom = 2.2; - } else if (window.innerWidth >= 1750) { - zoom = 1.75; - } else if (window.innerWidth <= 900) { - zoom = 0.75; - } else if (window.innerWidth <= 1200) { - zoom = 1.0; - } else if (window.innerWidth <= 1400) { - zoom = 1.25; - } else if (window.innerWidth < 1750) { - zoom = 1.5; + if (window.innerWidth <= 2 * window.innerHeight) { + zoom = window.innerWidth * 0.0009; + } else { + if (window.innerHeight >= 500) { + zoom = window.innerHeight * 0.0017; + } else { + zoom = window.innerHeight * 0.0008; + } } return zoom; } @@ -845,6 +859,7 @@ function CityMapTrialConst(props) { function showSuggest() { handleSuggestedPopup(!suggestPopup); + handleSideMenu(false); } function handleContinents(contArray) { @@ -884,6 +899,56 @@ function CityMapTrialConst(props) { return ( <>
+
+ {!showSideMenu ? ( + handleSideMenu(true)}> + » + + ) : ( + <> + handleSideMenu(false)}> + × + +
+
+ +
+
props.handleMapTypeChange(0)} + > + + Country map + props.handleMapTypeChange(0)}> + + + +
+
+ {timingState !== 2 ? ( + + Tap cities + + + + + ) : null} +
+
+ + )} +
{ - console.log("use effect 1"); handleLocalCityReviews(cityReviews); }, [cityReviews]); useEffect(() => { - console.log(localCityReviews); - console.log(friendCityReviews); // handleLoaded(false); let keyWords = []; switch (page) { @@ -105,12 +102,10 @@ function ProfileIndividualCity({ }, [page, localCityReviews, friendCityReviews]); function handleFriendReviewHandler(data) { - console.log("friend review handler"); handleFriendCityReviews(data); } function updateLocalReviews(updatedReviews) { - console.log("update local"); let localReviews = [...localCityReviews]; localReviews.push(updatedReviews); handleLocalCityReviews(localReviews); diff --git a/src/pages/Profile/subpages/UserTrips/TripReviewsContainer.js b/src/pages/Profile/subpages/UserTrips/TripReviewsContainer.js index 6d9205d..210e258 100644 --- a/src/pages/Profile/subpages/UserTrips/TripReviewsContainer.js +++ b/src/pages/Profile/subpages/UserTrips/TripReviewsContainer.js @@ -96,6 +96,7 @@ export default function TripReviewsContainer({ function handleNewCityReview(event) { let cityReviews = [...localCityReviews]; + console.log(event) let newCityReview = { reviewPlaceId: event.result.id.substr(4), review_latitude: event.result.center[1], From b16fe0a6a36a1f7f15fd66f300cb300757e94d32 Mon Sep 17 00:00:00 2001 From: Matt Vance Date: Mon, 2 Mar 2020 00:21:05 -0800 Subject: [PATCH 5/7] Fixing offset on new city markers, responsiveness for personal map city and country --- src/pages/Home/_MapPage.scss | 59 +++++++--- .../Home/subcomponents/CityMapTrialConst.js | 65 ++++++----- src/pages/Home/subcomponents/CountryMap.js | 85 ++++++++++---- src/pages/Home/subcomponents/NewUserCity.js | 40 ++++--- .../Home/subcomponents/NewUserCountry.js | 43 -------- src/pages/Home/subcomponents/_CityMap.scss | 104 +++++++++++++++++- .../Home/subcomponents/_MapScorecard.scss | 6 +- src/pages/Home/subcomponents/_MapSearch.scss | 9 +- .../Home/subcomponents/_NewUserCity.scss | 11 +- .../subpages/UserTrips/TripDetailContainer.js | 8 ++ 10 files changed, 282 insertions(+), 148 deletions(-) diff --git a/src/pages/Home/_MapPage.scss b/src/pages/Home/_MapPage.scss index 08c1076..87b6a06 100644 --- a/src/pages/Home/_MapPage.scss +++ b/src/pages/Home/_MapPage.scss @@ -11,17 +11,17 @@ display: flex; flex-direction: column; align-items: center; - height: calc(100% - 30px); + height: calc(100% - 60px); width: 100vw; margin: 0 auto; .country-map { margin: 0px; - height: 100%; + height: calc(100% - 60px); position: relative; text-align: center; .rsm-svg { width: calc(100% - 0px); - height: calc(100% - 80px); + height: calc(100% - 100px); transform: translate(0, -0px); .rsm-zoomable-group { @media (max-width: 1000px) { @@ -120,6 +120,10 @@ align-content: center; margin: 8px auto; transform: translateY(8px); + @media (max-width: 500px) { + max-width: 200px; + flex-wrap: wrap; + } button { z-index: 2; background: none; @@ -130,12 +134,12 @@ @media (max-width: 1000px) { font-size: 14px; } - // @media (max-width: 800px) { - // font-size: 12px; - // } - // @media (max-width: 700px) { - // font-size: 10px; - // } + @media (max-width: 800px) { + font-size: 12px; + } + @media (max-width: 600px) { + font-size: 10px; + } &:hover { color: $grey; } @@ -184,19 +188,16 @@ fill: #528fb1; } } + @media (max-width: 700px) { + display: none; + } } .sc-controls-left { left: calc(50% - 334px); @media (max-width: 800px) { left: calc(50% - 294px); } - @media (max-width: 600px) { - left: calc(50% - 264px); - } - @media (max-width: 500px) { - left: calc(50% - 30px); - top: 60px; - } + } .new-map-suggest { @@ -261,3 +262,29 @@ } } } + +.country-map { + .city-side-menu { + height: calc(100% - 60px); + padding: 0; + top: 60px; + } + .side-menu-container { + #new-city-map-button-side-menu { + display: flex; + justify-content: center; + position: relative; + top: 200px; + left: 0px; + width: 60px; + height: 42px; + background: #f8f8fc; + align-items: center; + z-index: 1000; + border-radius: 8px; + box-shadow: 0 1px 2px 0 rgba(19, 18, 18, 0.5); + cursor: pointer; + } + } +} + diff --git a/src/pages/Home/subcomponents/CityMapTrialConst.js b/src/pages/Home/subcomponents/CityMapTrialConst.js index 3ef68d7..bf37699 100644 --- a/src/pages/Home/subcomponents/CityMapTrialConst.js +++ b/src/pages/Home/subcomponents/CityMapTrialConst.js @@ -117,21 +117,6 @@ function CityMapTrialConst(props) { } function setInitialZoom() { - // let zoom; - // if (window.innerWidth >= 2400) { - // zoom = 2.2; - // } else if (window.innerWidth >= 1750) { - // zoom = 1.75; - // } else if (window.innerWidth <= 900) { - // zoom = 0.75; - // } else if (window.innerWidth <= 1200) { - // zoom = 1.0; - // } else if (window.innerWidth <= 1400) { - // zoom = 1.25; - // } else if (window.innerWidth < 1750) { - // zoom = 1.5; - // } - // return zoom; let zoom; if (window.innerWidth <= 2 * window.innerHeight) { zoom = window.innerWidth * 0.0009; @@ -703,13 +688,12 @@ function CityMapTrialConst(props) { key={city.cityId} latitude={city.city_latitude} longitude={city.city_longitude} - offsetLeft={-5} - offsetTop={-10} >
handleCityTooltip(city)} style={{ - backgroundColor: color + backgroundColor: color, + transform: "translate(-5px, -10px)" }} key={"circle" + city.cityId} className="dot" @@ -717,13 +701,16 @@ function CityMapTrialConst(props) {
handleCityTooltip(city)} style={{ - backgroundColor: "rgba(203, 118, 120, 1)" + backgroundColor: "rgba(203, 118, 120, 1)", + transform: "translate(-5px, -10px)" }} key={"circle2" + city.cityId} className="dot-inner" />
@@ -743,20 +730,22 @@ function CityMapTrialConst(props) { key={city.cityId} latitude={city.city_latitude} longitude={city.city_longitude} - offsetLeft={-5} - offsetTop={-10} >
handleCityTooltip(city)} style={{ - backgroundColor: color + backgroundColor: color, + transform: "translate(-5px, -10px)" }} key={"circle" + city.cityId} className="dot" />
handleCityTooltip(city)} - style={{ backgroundColor: "rgba(115, 167, 195, 1.0)" }} + style={{ + backgroundColor: "rgba(115, 167, 195, 1.0)", + transform: "translate(-5px, -10px)" + }} key={"circle2" + city.cityId} className="dot-inner" /> @@ -780,18 +769,22 @@ function CityMapTrialConst(props) { key={city.cityId} latitude={city.city_latitude} longitude={city.city_longitude} - offsetLeft={-5} - offsetTop={-10} >
handleCityTooltip(city)} - style={{ backgroundColor: color }} + style={{ + backgroundColor: color, + transform: "translate(-5px, -10px)" + }} key={"circle" + city.cityId} className="dot" />
handleCityTooltip(city)} - style={{ backgroundColor: "rgba(150, 177, 168, 1.0)" }} + style={{ + backgroundColor: "rgba(150, 177, 168, 1.0)", + transform: "translate(-5px, -10px)" + }} key={"circle2" + city.cityId} className="dot-inner" /> @@ -930,16 +923,19 @@ function CityMapTrialConst(props) { > Country map - props.handleMapTypeChange(0)}> + props.handleMapTypeChange(0)} + >
-
+
{timingState !== 2 ? ( - + Tap cities - + @@ -994,7 +990,10 @@ function CityMapTrialConst(props) {
{timingState !== 2 ? ( -
+
Tap cities diff --git a/src/pages/Home/subcomponents/CountryMap.js b/src/pages/Home/subcomponents/CountryMap.js index a24842b..8335d7d 100644 --- a/src/pages/Home/subcomponents/CountryMap.js +++ b/src/pages/Home/subcomponents/CountryMap.js @@ -13,7 +13,7 @@ import PopupPrompt from "../../../components/Prompts/PopupPrompt"; import ClickedCountryContainer from "../../../components/Prompts/ClickedCountry/ClickedCountryContainer"; import MapScorecard from "./MapScorecard"; import MapInfoContainer from "./MapInfoContainer"; -import MapChangeIcon from '../../../icons/MapChangeIcon'; +import MapChangeIcon from "../../../icons/MapChangeIcon"; const CountryMap = props => { const [center, handleChangeCenter] = useState([0, 20]); @@ -34,6 +34,7 @@ const CountryMap = props => { const [activePopup, showPopup] = useState(false); const [tripTimingCounts, handleTripTiming] = useState([0, 0, 0]); const [activeTimings, handleTimingCheckbox] = useState([1, 1, 1]); + const [showSideMenu, handleSideMenu] = useState(false); useEffect(() => { let pastCount = 0; @@ -62,15 +63,15 @@ const CountryMap = props => { handleChangeCenter([0, 20]); handleChangeZoom(1); } - + function handleWheel(event) { if (event.deltaY > 0) { - let newZoom = zoom/1.1; + let newZoom = zoom / 1.1; handleChangeZoom(newZoom); } if (event.deltaY < 0) { - let newZoom = zoom*1.1; - handleChangeZoom(newZoom) + let newZoom = zoom * 1.1; + handleChangeZoom(newZoom); } } function computedStyles(geography) { @@ -232,12 +233,58 @@ const CountryMap = props => { return ( <> +
+ {!showSideMenu ? ( + handleSideMenu(true)}> + » + + ) : ( + <> + handleSideMenu(false)}> + × + +
+
+ +
+
props.handleMapTypeChange(1)} + > + + City map + props.handleMapTypeChange(1)} + > + + + +
+
+ + )} +
-
props.handleMapTypeChange(1)}> +
props.handleMapTypeChange(1)} + > City map - props.handleMapTypeChange(1)}> + props.handleMapTypeChange(1)} + > @@ -265,13 +312,7 @@ const CountryMap = props => {
@@ -293,14 +334,14 @@ const CountryMap = props => { - - - - +
+ + +
{activePopup ? (
handleCityTooltip(city)} style={{ - backgroundColor: color + backgroundColor: color, + transform: "translate(-5px, -10px)" }} key={"circle" + city.cityId} className="dot" @@ -625,7 +624,8 @@ function NewUserCity(props) {
handleCityTooltip(city)} style={{ - backgroundColor: "rgba(203, 118, 120, 1)" + backgroundColor: "rgba(203, 118, 120, 1)", + transform: "translate(-5px, -10px)" }} key={"circle2" + city.cityId} className="dot-inner" @@ -637,11 +637,11 @@ function NewUserCity(props) { key={city.cityId} latitude={city.city_latitude} longitude={city.city_longitude} - offsetLeft={-5} - offsetTop={-10} >
@@ -661,20 +661,22 @@ function NewUserCity(props) { key={city.cityId} latitude={city.city_latitude} longitude={city.city_longitude} - offsetLeft={-5} - offsetTop={-10} >
handleCityTooltip(city)} style={{ - backgroundColor: color + backgroundColor: color, + transform: "translate(-5px, -10px)" }} key={"circle" + city.cityId} className="dot" />
handleCityTooltip(city)} - style={{ backgroundColor: "rgba(115, 167, 195, 1.0)" }} + style={{ + backgroundColor: "rgba(115, 167, 195, 1.0)", + transform: "translate(-5px, -10px)" + }} key={"circle2" + city.cityId} className="dot-inner" /> @@ -709,18 +711,22 @@ function NewUserCity(props) { key={city.cityId} latitude={city.city_latitude} longitude={city.city_longitude} - offsetLeft={-5} - offsetTop={-10} >
handleCityTooltip(city)} - style={{ backgroundColor: color }} + style={{ + backgroundColor: color, + transform: "translate(-5px, -10px)" + }} key={"circle" + city.cityId} className="dot" />
handleCityTooltip(city)} - style={{ backgroundColor: "rgba(150, 177, 168, 1.0)" }} + style={{ + backgroundColor: "rgba(150, 177, 168, 1.0)", + transform: "translate(-5px, -10px)" + }} key={"circle2" + city.cityId} className="dot-inner" /> @@ -1113,6 +1119,6 @@ function NewUserCity(props) { NewUserCity.propTypes = { sendUserData: PropTypes.func, handleMapTypeChange: PropTypes.func -} +}; export default React.memo(NewUserCity); diff --git a/src/pages/Home/subcomponents/NewUserCountry.js b/src/pages/Home/subcomponents/NewUserCountry.js index ff15a00..9809672 100644 --- a/src/pages/Home/subcomponents/NewUserCountry.js +++ b/src/pages/Home/subcomponents/NewUserCountry.js @@ -9,9 +9,7 @@ import { import jsonData from "../../../world-topo-min.json"; import MapSearch from "./MapSearch"; -import PopupPrompt from "../../../components/Prompts/PopupPrompt"; import MapChangeIcon from "../../../icons/MapChangeIcon"; -import ClickedCountryContainer from "../../../components/Prompts/ClickedCountry/ClickedCountryContainer"; import MapScorecard from "./MapScorecard"; import MapInfoContainer from "./MapInfoContainer"; @@ -191,42 +189,6 @@ const NewUserCountry = props => { handleCapitalName(geography.properties.capital); } - function handleTripTimingHelper(timing) { - let countryArray = clickedCountryArray; - let pastCount = tripTimingCounts[0]; - let futureCount = tripTimingCounts[1]; - let liveCount = tripTimingCounts[2]; - countryArray.push({ - countryId: clickedCountry.id, - tripTiming: timing - }); - switch (timing) { - case 0: - pastCount++; - break; - case 1: - futureCount++; - break; - case 2: - liveCount++; - break; - default: - break; - } - handleTripTiming([pastCount, futureCount, liveCount]); - addCountry(countryArray); - } - - function checkForPreviousTrips(geography) { - let previousTrips = false; - for (let i in clickedCountryArray) { - if (clickedCountryArray[i].countryId === geography.id) { - previousTrips = true; - } - } - return previousTrips; - } - function handleActiveTimings(timings) { handleTimingCheckbox(timings); } @@ -316,11 +278,6 @@ const NewUserCountry = props => { projectionConfig={{ scale: 180 }} - style={ - { - // height: "auto" - } - } > diff --git a/src/pages/Home/subcomponents/_CityMap.scss b/src/pages/Home/subcomponents/_CityMap.scss index 6983d25..649a917 100644 --- a/src/pages/Home/subcomponents/_CityMap.scss +++ b/src/pages/Home/subcomponents/_CityMap.scss @@ -4,6 +4,11 @@ width: 100vw; height: calc(100% - 60px); left: 0; + .city-new-side-menu { + height: calc(100% - 60px); + padding: 0; + top: 60px; + } } .map-container .city-map .map-header-container { @@ -37,6 +42,7 @@ border-radius: 4px; box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.15); background: #3f4b57; + label { text-transform: none; transform: translate(-20px, -4px); @@ -308,6 +314,15 @@ } .sc-controls-left { left: calc(50% - 366px); + @media screen and (max-width: 900px) { + display: none; + } + } + + .sc-controls-right { + @media screen and (max-width: 900px) { + display: none; + } } .new-map-suggest { @@ -356,17 +371,30 @@ min-width: 600px; box-shadow: 0 3px 6px 2px rgba(black, 0.15); background: rgb(248, 248, 252); - @media screen and (max-width: 600px) { + @media screen and (max-width: 720px) { min-width: 500px; } - @media screen and (max-width: 450px) { + @media screen and (max-width: 600px) { + min-width: 450px; + } + @media screen and (max-width: 550px) { min-width: 400px; - top: 80px; + } + @media screen and (max-width: 500px) { + min-width: 350px; + } + @media screen and (max-width: 450px) { + min-width: 300px; + } + @media screen and (max-width: 400px) { + max-width: 280px; + min-width: 280px; } @media screen and (max-width: 320px) { max-width: 300px; min-width: 300px; } + input { color: rgb(74, 89, 90) !important; min-width: 560px; @@ -389,8 +417,7 @@ top: 240px; left: calc(50% - 560px); @media screen and (max-width: 1250px) { - top: calc(100% - 80px); - left: calc(12.5%); + display: none; } @media screen and (max-width: 900px) { top: calc(100% - 120px); @@ -413,6 +440,10 @@ left: calc(50% + 240px); bottom: 20px; } + @media screen and (max-height: 400px) and (max-width: 800px) { + left: calc(50% - 320px); + } + @media screen and (max-height: 300px) { display: none; } @@ -467,8 +498,9 @@ font-family: "Segoe UI", sans-serif; font-size: 30px; color: rgb(248, 248, 252); - @media screen and (max-width: 450px) { + @media screen and (max-width: 700px) { flex-direction: column; + font-size: 24px; } select { background: none; @@ -478,6 +510,10 @@ color: rgb(248, 248, 252); margin-left: 4px; border-bottom: 1px solid rgb(248, 248, 252); + @media screen and (max-width: 700px) { + flex-direction: column; + font-size: 24px; + } option { background: #dee2e6; color: rgb(74, 89, 90); @@ -498,6 +534,15 @@ background: rgb(248, 248, 252); color: #769f93; } + @media screen and (max-width: 800px) { + left: calc(50% - 300px); + } + @media screen and (max-width: 700px) { + left: calc(50% - 210px); + } + @media screen and (max-width: 500px) { + left: calc(50% - 60px); + } } .personal-map-save { @@ -519,6 +564,15 @@ fill: #73a7c3; } } + @media screen and (max-width: 800px) { + left: calc(50% + 240px); + } + @media screen and (max-width: 700px) { + left: calc(50% + 160px); + } + @media screen and (max-width: 500px) { + left: calc(50% + 8px); + } } .personal-map-share, @@ -550,6 +604,15 @@ display: none; } } + @media screen and (max-width: 900px) { + right: calc(50% - 380px); + } + @media screen and (max-width: 800px) { + top: 16px; + } + @media screen and (max-width: 500px) { + top: 120px; + } #myShareLink { opacity: 0; z-index: -100; @@ -587,3 +650,32 @@ margin-top: 4px; } } + +#sc-controls-city-side-menu { + display: flex; + flex-direction: column; + width: 80px; + height: 48px; + left: 85px; + top: 320px; +} + +#new-country-scorecard { + .map-scorecard-container { + bottom: 60px; + left: 60px; + @media screen and (max-width: 1250px) { + display: none; + } + @media screen and (max-height: 500px) { + top: 180px; + } + } + .map-info-container { + bottom: 120px; + left: 60px; + @media (max-height: 900px) { + transform: translate(-40px, 140px); + } + } + } \ No newline at end of file diff --git a/src/pages/Home/subcomponents/_MapScorecard.scss b/src/pages/Home/subcomponents/_MapScorecard.scss index 86d36fe..34dcab9 100644 --- a/src/pages/Home/subcomponents/_MapScorecard.scss +++ b/src/pages/Home/subcomponents/_MapScorecard.scss @@ -41,9 +41,9 @@ @media (max-height: "900px") { // transform: translate(-40px, -20px); } - @media (max-height: "450px") { - transform: translate(0px, -60px); - } + // @media (max-height: "450px") { + // transform: translate(0px, -60px); + // } .scorecard-instructions { position: absolute; top: -24px; diff --git a/src/pages/Home/subcomponents/_MapSearch.scss b/src/pages/Home/subcomponents/_MapSearch.scss index 52b3b07..e0c93fe 100644 --- a/src/pages/Home/subcomponents/_MapSearch.scss +++ b/src/pages/Home/subcomponents/_MapSearch.scss @@ -14,12 +14,15 @@ max-width: 400px; } @media screen and (max-width: 450px) { - max-width: 400px; + max-width: 320px; // top: 80px; } + @media screen and (max-width: 400px) { + max-width: 240px; + } @media screen and (max-width: 320px) { - max-width: 300px; - min-width: 300px; + max-width: 240px; + min-width: 240px; } label { text-transform: none; diff --git a/src/pages/Home/subcomponents/_NewUserCity.scss b/src/pages/Home/subcomponents/_NewUserCity.scss index 1ec02b2..0d8d6a1 100644 --- a/src/pages/Home/subcomponents/_NewUserCity.scss +++ b/src/pages/Home/subcomponents/_NewUserCity.scss @@ -4,10 +4,11 @@ .map-scorecard-container { bottom: 60px; left: 60px; - @media screen and (max-width: 900px) { + @media screen and (max-width: 1250px) { display: none; - top: calc(100% - 120px); - left: calc(50% - 60px); + } + @media screen and (max-height: 500px) { + top: 180px; } } .map-info-container { @@ -427,8 +428,8 @@ position: absolute; height: 50px; width: 50px; - top: -15px; - left: -15px; + top: -25px; + left: -20px; z-index: 500; opacity: 0; background: transparent; diff --git a/src/pages/Profile/subpages/UserTrips/TripDetailContainer.js b/src/pages/Profile/subpages/UserTrips/TripDetailContainer.js index 60cec19..97c5c82 100644 --- a/src/pages/Profile/subpages/UserTrips/TripDetailContainer.js +++ b/src/pages/Profile/subpages/UserTrips/TripDetailContainer.js @@ -17,6 +17,14 @@ import TripBasicsContainer from "./TripBasicsContainer"; import TripCommentaryContainer from "./TripCommentaryContainer"; import CitySelectContainer from "./CitySelectContainer"; +const fakeTrip = { + tripName: "Northern Eurotrip", + tripTiming: "future", + tripStartDate: "2020-04-01", + tripEndDate: "2020-04-20", + +} + function TripDetailContainer({ city, cityReviews, From 0ebe9860e0be60b02e316da1765cf2308d48f1ca Mon Sep 17 00:00:00 2001 From: Matt Vance Date: Wed, 4 Mar 2020 00:05:42 -0800 Subject: [PATCH 6/7] Friend city map responsiveness --- src/pages/Home/subcomponents/FriendCityMap.js | 103 +++++++++++++++--- .../Home/subcomponents/LeaderboardCard.js | 73 +++++++++---- .../Home/subcomponents/_FriendCityMap.scss | 47 ++++---- src/pages/Landing/Landing.js | 6 +- 4 files changed, 169 insertions(+), 60 deletions(-) diff --git a/src/pages/Home/subcomponents/FriendCityMap.js b/src/pages/Home/subcomponents/FriendCityMap.js index db4fa54..f18006c 100644 --- a/src/pages/Home/subcomponents/FriendCityMap.js +++ b/src/pages/Home/subcomponents/FriendCityMap.js @@ -11,11 +11,11 @@ import FilterCityMap from "../../../components/Prompts/FilterCityMap"; import LeaderboardPrompt from "../../../components/Prompts/LeaderboardPrompt"; import MapChangeIcon from "../../../icons/MapChangeIcon"; import FilterIcon from "../../../icons/FilterIcon"; -import LeaderboardIcon from '../../../icons/LeaderboardIcon'; +import LeaderboardIcon from "../../../icons/LeaderboardIcon"; import FriendClickedCityContainer from "../../../components/Prompts/FriendClickedCity/FriendClickedCityContainer"; import FriendClickedCityBlank from "../../../components/Prompts/FriendClickedCity/FriendClickedCityBlank"; import Loader from "../../../components/common/Loader/Loader"; -import ClusterMarker from './ClusterMarker'; +import ClusterMarker from "./ClusterMarker"; function FriendCityMap(props) { const [viewport, handleViewport] = useState({ @@ -43,6 +43,7 @@ function FriendCityMap(props) { const [leaderboard, handleLeaderboard] = useState(false); const [filterSettings, handleFilterSettings] = useState([]); const [clickedCity, handleClickedCity] = useState(null); + const [showSideMenu, handleSideMenu] = useState(false); const mapRef = useRef(); const clusterPast = useRef(); const clusterFuture = useRef(); @@ -71,18 +72,14 @@ function FriendCityMap(props) { function setInitialZoom() { let zoom; - if (window.innerWidth >= 2400) { - zoom = 2.2; - } else if (window.innerWidth >= 1750) { - zoom = 1.75; - } else if (window.innerWidth <= 900) { - zoom = 0.75; - } else if (window.innerWidth <= 1200) { - zoom = 1.0; - } else if (window.innerWidth <= 1400) { - zoom = 1.25; - } else if (window.innerWidth < 1750) { - zoom = 1.5; + if (window.innerWidth <= 2 * window.innerHeight) { + zoom = window.innerWidth * 0.0009; + } else { + if (window.innerHeight >= 500) { + zoom = window.innerHeight * 0.0017; + } else { + zoom = window.innerHeight * 0.0008; + } } return zoom; } @@ -353,6 +350,7 @@ function FriendCityMap(props) { function showFilter() { handleFilter(!filter); handleActivePopup(!activePopup); + handleSideMenu(false); } function showPopup() { @@ -360,6 +358,7 @@ function FriendCityMap(props) { handleFilter(false); } handleActivePopup(!activePopup); + handleSideMenu(false); } function handleHoveredCityArrayHelper(hoveredCityArray) { @@ -520,6 +519,79 @@ function FriendCityMap(props) {
+
+ {!showSideMenu ? ( + handleSideMenu(true)}> + » + + ) : ( + <> + handleSideMenu(false)}> + × + +
+
+ +
+
+
props.handleMapTypeChange(0)} + > + + Country map + props.handleMapTypeChange(0)} + > + + + +
+
+ + Filter + + + + +
+
handleLeaderboard(!leaderboard)} + > + + Leaders + handleLeaderboard(!leaderboard)}> + + + +
+
+
+ + )} +
-
- {rank + 1} -
- +
+ {rank + 1} +
+ +
+
+ + {user.username} + + + {user.Place_living !== null + ? user.Place_living.city + ", " + user.Place_living.countryISO + : " "} + +
+
+ {Math.ceil(user.georneyScore)} +
-
- {user.username} - - {user.Place_living !== null - ? user.Place_living.city + ", " + user.Place_living.countryISO - : " "} - -
-
- {Math.ceil(user.georneyScore)} -
-
- + ); } diff --git a/src/pages/Home/subcomponents/_FriendCityMap.scss b/src/pages/Home/subcomponents/_FriendCityMap.scss index c01267e..2a6f607 100644 --- a/src/pages/Home/subcomponents/_FriendCityMap.scss +++ b/src/pages/Home/subcomponents/_FriendCityMap.scss @@ -107,12 +107,7 @@ left: calc(50% + 134px); } @media screen and (max-width: 900px) { - left: calc(50% + 184px); - top: -28px !important; - } - @media screen and (max-width: 800px) { - left: calc(50% + 404px); - top: 18px !important; + display: none !important; } } .sc-controls-right { @@ -125,12 +120,7 @@ left: calc(50% + 806px); } @media screen and (max-width: 900px) { - left: calc(50% + 756px); - top: -28px !important; - } - @media screen and (max-width: 800px) { - left: calc(50% + 468px); - top: 18px !important; + display: none !important; } } .sc-controls-right-two { @@ -143,12 +133,7 @@ left: calc(50% + 870px); } @media screen and (max-width: 900px) { - left: calc(50% + 820px); - top: -28px !important; - } - @media screen and (max-width: 800px) { - left: calc(50% + 532px); - top: 18px !important; + display: none !important; } } } @@ -227,6 +212,10 @@ height: 406px; max-height: 406px; overflow-y: hidden; + @media screen and (max-width: 1250px) { + top: calc(50% - 140px); + left: calc(50% - 150px); + } data { display: flex; flex-direction: column; @@ -253,9 +242,6 @@ transform: translateX(8px); color: #656f80; } - .utc-username { - font-size: 18px; - } .utc-location { font-size: 14px; color: #adb5bd; @@ -284,3 +270,22 @@ } } } + +.side-menu-container { + .side-menu-buttons-container { + display: flex; + flex-direction: column; + .sc-controls-left-two { + position: relative; + left: 0; + } + #fc-filter, + #fc-filter-active { + top: 186px; + } + #fc-leaderboard, + #fc-leaderboard-active { + top: 212px; + } + } +} diff --git a/src/pages/Landing/Landing.js b/src/pages/Landing/Landing.js index c9cc906..ac012b1 100644 --- a/src/pages/Landing/Landing.js +++ b/src/pages/Landing/Landing.js @@ -109,14 +109,16 @@ function NewMarker(city) { >
Date: Wed, 4 Mar 2020 23:37:22 -0800 Subject: [PATCH 7/7] Friend country map responsiveness --- src/_App.scss | 5 ++ src/pages/FAQ/subcomponents/AccordionFAQ.js | 2 +- .../Home/subcomponents/FriendCountryMap.js | 65 +++++++++++++++---- src/pages/Landing/Landing.js | 17 +---- 4 files changed, 59 insertions(+), 30 deletions(-) diff --git a/src/_App.scss b/src/_App.scss index d6ec7ee..b57383b 100644 --- a/src/_App.scss +++ b/src/_App.scss @@ -41,6 +41,11 @@ body { supported by Chrome and Opera */ } +input { + border-radius: 0; + -webkit-appearance: none; +} + a { text-decoration: none; } diff --git a/src/pages/FAQ/subcomponents/AccordionFAQ.js b/src/pages/FAQ/subcomponents/AccordionFAQ.js index 777c050..fb8e85b 100644 --- a/src/pages/FAQ/subcomponents/AccordionFAQ.js +++ b/src/pages/FAQ/subcomponents/AccordionFAQ.js @@ -19,7 +19,7 @@ function AccordionFAQ({ text, title }) { } AccordionFAQ.propTypes = { - text: PropTypes.string, + text: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), title: PropTypes.string }; diff --git a/src/pages/Home/subcomponents/FriendCountryMap.js b/src/pages/Home/subcomponents/FriendCountryMap.js index c8b4af6..fa86898 100644 --- a/src/pages/Home/subcomponents/FriendCountryMap.js +++ b/src/pages/Home/subcomponents/FriendCountryMap.js @@ -13,7 +13,7 @@ import FriendClickedCountryContainer from "../../../components/Prompts/FriendCli import FriendClickedCountryBlank from "../../../components/Prompts/FriendClickedCountry/FriendClickedCountryBlank"; import MapScorecard from "./MapScorecard"; import MapInfoContainer from "./MapInfoContainer"; -import MapChangeIcon from '../../../icons/MapChangeIcon'; +import MapChangeIcon from "../../../icons/MapChangeIcon"; /* Need to make it so that duplicate country trips do not count as multiple scorecard values */ @@ -37,6 +37,7 @@ const FriendCountryMap = props => { const [activePopup, showPopup] = useState(null); const [tripTimingCounts, handleTripTiming] = useState([0, 0, 0]); const [activeTimings, handleTimingCheckbox] = useState([1, 1, 1]); + const [showSideMenu, handleSideMenu] = useState(false); useEffect(() => { handleLoadedCountries(props.tripData); @@ -279,6 +280,46 @@ const FriendCountryMap = props => { } return ( <> +
+ {!showSideMenu ? ( + handleSideMenu(true)}> + » + + ) : ( + <> + handleSideMenu(false)}> + × + +
+
+ +
+
props.handleMapTypeChange(1)} + > + + City map + props.handleMapTypeChange(1)} + > + + + +
+
+ + )} +
{
@@ -363,12 +398,14 @@ const FriendCountryMap = props => { }} /> ) : null} - - +
+ + +
); }; diff --git a/src/pages/Landing/Landing.js b/src/pages/Landing/Landing.js index ac012b1..b73714f 100644 --- a/src/pages/Landing/Landing.js +++ b/src/pages/Landing/Landing.js @@ -182,8 +182,6 @@ function LoadedMarker(city) { } function Landing() { - const [activeTab, handleActiveTab] = useState("loginTab"); - const [windowWidth, handleWindowWidth] = useState(undefined); const [viewport, handleViewport] = useState({ width: window.innerWidth, height: window.innerHeight + 120, @@ -195,7 +193,6 @@ function Landing() { const mapRef = useRef(); useEffect(() => { - handleWindowWidth(window.innerWidth); window.addEventListener("resize", resize); resize(); if (incomingCities.length > 0) { @@ -212,7 +209,6 @@ function Landing() { }, []); function addMarker() { - let index = Math.floor(Math.random() * incomingCities.length); let newMarkers = [...markers]; markers.push( @@ -221,16 +217,7 @@ function Landing() { incomingCities.splice(0, 1); } - function setActive(event) { - handleActiveTab(event.target.id); - } - - function isActive(tab) { - return tab === activeTab ? "activeTab" : ""; - } - function resize() { - handleWindowWidth(window.innerWidth); handleViewportChange({ width: window.innerWidth, height: window.innerHeight + 120, @@ -352,7 +339,7 @@ function Landing() { value={"Banff, CA"} readOnly /> - ----> + ---->
@@ -388,7 +375,7 @@ function Landing() { value={"Banff, CA"} readOnly /> - ----> + ---->