Skip to content

Commit ff0cc66

Browse files
Matt-VanceMatt-Vance
authored
Merge pull request #158 from projectunic0rn/style/scorecard/names
Public map has json, city map only
2 parents 6a87da1 + 0813e4f commit ff0cc66

File tree

11 files changed

+481
-362
lines changed

11 files changed

+481
-362
lines changed

‎src/pages/Home/FriendReadonlyMap.js‎

Lines changed: 182 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,74 +3,209 @@ import { NavLink, withRouter } from "react-router-dom";
33
import Swal from "sweetalert2";
44
import { Query } from "react-apollo";
55
import { GET_ALL_CITY_DETAILS } from "../../GraphQL";
6+
import jsonData from "../../geoJsonCountries.json";
7+
68
import FriendReadonlyCity from "./subcomponents/FriendReadonlyCity";
79
import Loader from "../../components/common/Loader/Loader";
810
import PageNotFound from "../../components/common/PageNotFound/PageNotFound";
911

1012
const FriendReadonlyMap = () => {
1113
const [loaded, handleLoaded] = useState(false);
12-
const [cityOrCountry, handleMapTypeChange] = useState(1);
13-
const [clickedCountryArray, addCountry] = useState([]);
14+
const [cityOrCountry, ] = useState(1);
15+
const [countryArray, addCountry] = useState([]);
1416
const [tripData, handleTripData] = useState([]);
17+
const [geoJsonArray, handleGeoJsonArray] = useState([]);
18+
const [filteredCountryJsonData, handleFilteredCountryJsonData] = useState();
19+
1520
const username = window.location.pathname.split("/")[2];
1621

1722
useEffect(() => {
1823
localStorage.removeItem("token");
1924
}, []);
2025

21-
function handleLoadedCountries(data) {
22-
let countryArray = clickedCountryArray;
23-
let userData = data.user;
24-
if (userData != null && userData.Places_visited.length !== 0) {
25-
for (let i = 0; i < userData.Places_visited.length; i++) {
26-
if (
27-
!countryArray.some((country) => {
28-
return country.countryId === userData.Places_visited[i].countryId;
29-
})
30-
) {
31-
countryArray.push({
32-
username: userData.username,
33-
countryId: userData.Places_visited[i].countryId,
26+
function getJsonData(data) {
27+
let newGeoJsonArray = [];
28+
29+
data.Places_visited.forEach((city) => {
30+
let item = {
31+
type: "Feature",
32+
properties: {
33+
city: {
34+
id: city.id,
35+
city: city.city,
36+
cityId: city.cityId,
37+
latitude: city.city_latitude,
38+
longitude: city.city_longitude,
3439
tripTiming: 0,
35-
});
36-
}
37-
}
38-
}
39-
if (userData != null && userData.Places_visiting.length !== 0) {
40-
for (let i = 0; i < userData.Places_visiting.length; i++) {
41-
if (
42-
!countryArray.some((country) => {
43-
return country.countryId === userData.Places_visiting[i].countryId;
44-
})
45-
) {
46-
countryArray.push({
47-
username: userData.username,
48-
countryId: userData.Places_visiting[i].countryId,
40+
},
41+
},
42+
geometry: {
43+
type: "Point",
44+
coordinates: [city.city_longitude, city.city_latitude],
45+
},
46+
};
47+
item.properties.icon = "0";
48+
49+
newGeoJsonArray.push(item);
50+
return;
51+
});
52+
data.Places_visiting.forEach((city) => {
53+
let item = {
54+
type: "Feature",
55+
properties: {
56+
city: {
57+
id: city.id,
58+
city: city.city,
59+
cityId: city.cityId,
60+
latitude: city.city_latitude,
61+
longitude: city.city_longitude,
4962
tripTiming: 1,
50-
});
51-
}
52-
}
63+
},
64+
},
65+
geometry: {
66+
type: "Point",
67+
coordinates: [city.city_longitude, city.city_latitude],
68+
},
69+
};
70+
item.properties.icon = "1";
71+
72+
newGeoJsonArray.push(item);
73+
return;
74+
});
75+
if (data.Place_living !== undefined) {
76+
let item = {
77+
type: "Feature",
78+
properties: {
79+
city: {
80+
id: data.Place_living.id,
81+
city: data.Place_living.city,
82+
cityId: data.Place_living.cityId,
83+
latitude: data.Place_living.city_latitude,
84+
longitude: data.Place_living.city_longitude,
85+
tripTiming: 2,
86+
},
87+
},
88+
geometry: {
89+
type: "Point",
90+
coordinates: [data.Place_living.city_longitude, data.Place_living.city_latitude],
91+
},
92+
};
93+
item.properties.icon = "2";
94+
95+
newGeoJsonArray.push(item);
5396
}
54-
if (userData != null && userData.Place_living !== null) {
97+
handleGeoJsonArray(newGeoJsonArray);
98+
getJsonCountries(data);
99+
}
100+
101+
function getJsonCountries(data) {
102+
let userCities = [];
103+
data.Places_visited.map((city) => {
104+
city.tripTiming = 0;
105+
})
106+
data.Places_visiting.map((city) => {
107+
city.tripTiming = 1;
108+
})
109+
data.Place_living.tripTiming = 2;
110+
userCities = [data.Place_living].concat(data.Places_visited).concat(data.Places_visiting);
111+
let newCountryArray = [];
112+
let newFilteredCountryData = [];
113+
for (let i = 0; i < userCities.length; i++) {
114+
var newGeoJson = {};
55115
if (
56-
!countryArray.some((country) => {
57-
return country.countryId === userData.Place_living.countryId;
116+
!newCountryArray.some((country) => {
117+
return (
118+
country.countryISO === userCities[i].countryISO &&
119+
country.tripTiming === userCities[i].tripTiming
120+
);
58121
})
59122
) {
60-
countryArray.push({
61-
username: userData.username,
62-
countryId: userData.Place_living.countryId,
63-
tripTiming: 2,
123+
newCountryArray.push({
124+
countryId: userCities[i].countryId,
125+
country: userCities[i].country,
126+
tripTiming: userCities[i].tripTiming,
127+
countryISO: userCities[i].countryISO,
64128
});
129+
let geoJson = jsonData.features.find(
130+
(jsonCountry) => userCities[i].countryISO === jsonCountry.properties.ISO2
131+
);
132+
if (geoJson) {
133+
newGeoJson = JSON.parse(JSON.stringify(geoJson));
134+
switch (userCities[i].tripTiming) {
135+
case 0:
136+
newGeoJson.properties.icon = "0";
137+
break;
138+
case 1:
139+
newGeoJson.properties.icon = "1";
140+
break;
141+
case 2:
142+
newGeoJson.properties.icon = "2";
143+
break;
144+
default:
145+
break;
146+
}
147+
newFilteredCountryData.push(newGeoJson);
148+
}
65149
}
66150
}
67-
68-
addCountry(countryArray);
151+
addCountry(newCountryArray);
152+
handleFilteredCountryJsonData(newFilteredCountryData);
153+
handleLoaded(true);
69154
}
70155

156+
// function handleLoadedCountries(data) {
157+
// let countryArray = clickedCountryArray;
158+
// let userData = data.user;
159+
// if (userData != null && userData.Places_visited.length !== 0) {
160+
// for (let i = 0; i < userData.Places_visited.length; i++) {
161+
// if (
162+
// !countryArray.some((country) => {
163+
// return country.countryId === userData.Places_visited[i].countryId;
164+
// })
165+
// ) {
166+
// countryArray.push({
167+
// username: userData.username,
168+
// countryId: userData.Places_visited[i].countryId,
169+
// tripTiming: 0,
170+
// });
171+
// }
172+
// }
173+
// }
174+
// if (userData != null && userData.Places_visiting.length !== 0) {
175+
// for (let i = 0; i < userData.Places_visiting.length; i++) {
176+
// if (
177+
// !countryArray.some((country) => {
178+
// return country.countryId === userData.Places_visiting[i].countryId;
179+
// })
180+
// ) {
181+
// countryArray.push({
182+
// username: userData.username,
183+
// countryId: userData.Places_visiting[i].countryId,
184+
// tripTiming: 1,
185+
// });
186+
// }
187+
// }
188+
// }
189+
// if (userData != null && userData.Place_living !== null) {
190+
// if (
191+
// !countryArray.some((country) => {
192+
// return country.countryId === userData.Place_living.countryId;
193+
// })
194+
// ) {
195+
// countryArray.push({
196+
// username: userData.username,
197+
// countryId: userData.Place_living.countryId,
198+
// tripTiming: 2,
199+
// });
200+
// }
201+
// }
202+
203+
// addCountry(countryArray);
204+
// }
205+
71206
function handleTripDataHelper(data) {
72207
handleTripData(data);
73-
handleLoaded(true);
208+
getJsonData(data);
74209
}
75210
function geoScoreSwal() {
76211
const swalParams = {
@@ -98,20 +233,22 @@ const FriendReadonlyMap = () => {
98233
{({ loading, error, data }) => {
99234
if (loading) return <Loader />;
100235
if (error) return `Error! ${error}`;
101-
handleLoadedCountries(data);
236+
// handleLoadedCountries(data);
102237
if (!loaded) return <Loader />;
103238
return (
104239
<div className="map-container" id="map-readonly">
105240
<span className="user-map-name">{username + "'s Map"}</span>
106241
{cityOrCountry ? (
107-
<NavLink to={`/new`}>
242+
<NavLink to={`/`}>
108243
<button className="create-map">CREATE MY MAP</button>
109244
</NavLink>
110245
) : null}
111246
<div className={cityOrCountry ? "map city-map" : "map country-map"}>
112247
<FriendReadonlyCity
113248
tripData={tripData}
114-
handleMapTypeChange={handleMapTypeChange}
249+
geoJsonArray={geoJsonArray}
250+
filteredCountryJsonData={filteredCountryJsonData}
251+
countryArray={countryArray}
115252
/>
116253
</div>
117254
<span className="georney-score" onClick={() => geoScoreSwal()}>

‎src/pages/Home/subcomponents/CityMap.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -853,7 +853,7 @@ function CityMap(props) {
853853
cityTooltip && (
854854
<Popup
855855
className="city-map-tooltip"
856-
anchor="bottom-left"
856+
anchor="bottom"
857857
longitude={cityTooltip.longitude}
858858
latitude={cityTooltip.latitude}
859859
closeOnClick={false}
@@ -936,7 +936,7 @@ function CityMap(props) {
936936
<div className="city-map-container">
937937
<div
938938
className="city-new-side-menu"
939-
style={showSideMenu ? { width: "250px" } : { width: "40px" }}
939+
style={showSideMenu ? { width: "300px" } : { width: "40px" }}
940940
>
941941
{!showSideMenu ? (
942942
<nav className="opennav" onClick={handleSideMenuHelper}>

‎src/pages/Home/subcomponents/FriendCityMap.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,6 @@ function FriendCityMap(props) {
243243

244244
function handleLoadedMarkers() {
245245
handleLoaded(false);
246-
// handleActiveTimings([1, 1, 1]);
247246
}
248247

249248
function handleOnResult(event) {
@@ -446,7 +445,7 @@ function FriendCityMap(props) {
446445
cityTooltip && (
447446
<Popup
448447
className="city-friends-map-tooltip"
449-
anchor="bottom-left"
448+
anchor="bottom"
450449
longitude={cityTooltip.longitude}
451450
latitude={cityTooltip.latitude}
452451
closeOnClick={false}
@@ -509,7 +508,7 @@ function FriendCityMap(props) {
509508
<div className="city-map-container" id="friend-city-map-container">
510509
<div
511510
className="city-new-side-menu"
512-
style={showSideMenu ? { width: "250px" } : { width: "40px" }}
511+
style={showSideMenu ? { width: "300px" } : { width: "40px" }}
513512
>
514513
{!showSideMenu ? (
515514
<nav className="opennav" onClick={() => handleSideMenu(true)}>

0 commit comments

Comments
 (0)