Skip to content

Commit 4ae954c

Browse files
Matt-VanceMatt-Vance
authored
Merge pull request #159 from projectunic0rn/style/scorecardc
Public map is now viewable even when logged in
2 parents ff0cc66 + 45bf029 commit 4ae954c

File tree

7 files changed

+103
-132
lines changed

7 files changed

+103
-132
lines changed

‎src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,8 @@ function App({ userAuthenticated }) {
157157
/>
158158
<Route path="/beta/" component={Beta} />
159159
<Route path="/faq/" component={FAQ} />
160+
<Route path="/public/" component={FriendReadonlyMap} />
161+
160162
<Route component={PageNotFound} />
161163
</Switch>
162164
</Fragment>

‎src/_App.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,7 @@ margin-top: 60px;
160160
}
161161

162162
.map-container {
163+
position: relative;
163164
display: flex;
164165
flex-direction: column;
165166
align-items: center;

‎src/components/common/PageNotFound/_PageNotFound.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.page-not-found.container {
22
color: $light-blue;
33
font-size: 1.4em;
4+
transform: translateY(60px);
45
p {
56
a {
67
color: white;
@@ -9,8 +10,6 @@
910
h2 {
1011
color: $grey;
1112
}
12-
ul {
13-
}
1413

1514
@media (max-width: 600px) {
1615
margin: 10px;

‎src/pages/Home/FriendReadonlyMap.js‎

Lines changed: 46 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect } from "react";
1+
import React, { useState } from "react";
22
import { NavLink, withRouter } from "react-router-dom";
33
import Swal from "sweetalert2";
44
import { Query } from "react-apollo";
@@ -11,18 +11,14 @@ import PageNotFound from "../../components/common/PageNotFound/PageNotFound";
1111

1212
const FriendReadonlyMap = () => {
1313
const [loaded, handleLoaded] = useState(false);
14-
const [cityOrCountry, ] = useState(1);
14+
const [cityOrCountry] = useState(1);
1515
const [countryArray, addCountry] = useState([]);
1616
const [tripData, handleTripData] = useState([]);
1717
const [geoJsonArray, handleGeoJsonArray] = useState([]);
1818
const [filteredCountryJsonData, handleFilteredCountryJsonData] = useState();
1919

2020
const username = window.location.pathname.split("/")[2];
2121

22-
useEffect(() => {
23-
localStorage.removeItem("token");
24-
}, []);
25-
2622
function getJsonData(data) {
2723
let newGeoJsonArray = [];
2824

@@ -72,7 +68,7 @@ const FriendReadonlyMap = () => {
7268
newGeoJsonArray.push(item);
7369
return;
7470
});
75-
if (data.Place_living !== undefined) {
71+
if (data.Place_living !== undefined && data.Place_living !== null) {
7672
let item = {
7773
type: "Feature",
7874
properties: {
@@ -87,7 +83,10 @@ const FriendReadonlyMap = () => {
8783
},
8884
geometry: {
8985
type: "Point",
90-
coordinates: [data.Place_living.city_longitude, data.Place_living.city_latitude],
86+
coordinates: [
87+
data.Place_living.city_longitude,
88+
data.Place_living.city_latitude,
89+
],
9190
},
9291
};
9392
item.properties.icon = "2";
@@ -102,12 +101,19 @@ const FriendReadonlyMap = () => {
102101
let userCities = [];
103102
data.Places_visited.map((city) => {
104103
city.tripTiming = 0;
105-
})
104+
});
106105
data.Places_visiting.map((city) => {
107106
city.tripTiming = 1;
108-
})
109-
data.Place_living.tripTiming = 2;
110-
userCities = [data.Place_living].concat(data.Places_visited).concat(data.Places_visiting);
107+
});
108+
if (data.Place_living !== null) {
109+
data.Place_living.tripTiming = 2;
110+
userCities = [data.Place_living]
111+
.concat(data.Places_visited)
112+
.concat(data.Places_visiting);
113+
} else {
114+
userCities = data.Places_visited.concat(data.Places_visiting);
115+
}
116+
111117
let newCountryArray = [];
112118
let newFilteredCountryData = [];
113119
for (let i = 0; i < userCities.length; i++) {
@@ -127,7 +133,8 @@ const FriendReadonlyMap = () => {
127133
countryISO: userCities[i].countryISO,
128134
});
129135
let geoJson = jsonData.features.find(
130-
(jsonCountry) => userCities[i].countryISO === jsonCountry.properties.ISO2
136+
(jsonCountry) =>
137+
userCities[i].countryISO === jsonCountry.properties.ISO2
131138
);
132139
if (geoJson) {
133140
newGeoJson = JSON.parse(JSON.stringify(geoJson));
@@ -153,56 +160,6 @@ const FriendReadonlyMap = () => {
153160
handleLoaded(true);
154161
}
155162

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-
206163
function handleTripDataHelper(data) {
207164
handleTripData(data);
208165
getJsonData(data);
@@ -236,28 +193,33 @@ const FriendReadonlyMap = () => {
236193
// handleLoadedCountries(data);
237194
if (!loaded) return <Loader />;
238195
return (
239-
<div className="map-container" id="map-readonly">
240-
<span className="user-map-name">{username + "'s Map"}</span>
241-
{cityOrCountry ? (
242-
<NavLink to={`/`}>
243-
<button className="create-map">CREATE MY MAP</button>
244-
</NavLink>
245-
) : null}
246-
<div className={cityOrCountry ? "map city-map" : "map country-map"}>
247-
<FriendReadonlyCity
248-
tripData={tripData}
249-
geoJsonArray={geoJsonArray}
250-
filteredCountryJsonData={filteredCountryJsonData}
251-
countryArray={countryArray}
252-
/>
253-
</div>
254-
<span className="georney-score" onClick={() => geoScoreSwal()}>
255-
<span className="gs-title">{"GeorneyScore"}</span>
256-
<span className="gs-score">
257-
{Math.ceil(data.user.georneyScore)}
196+
<>
197+
{localStorage.token !== undefined ? <div style={{height: "60px"}}></div> : null}
198+
<div className="map-container" id="map-readonly">
199+
<span className="user-map-name">{username + "'s Map"}</span>
200+
{cityOrCountry ? (
201+
<NavLink to={`/`}>
202+
<button className="create-map">CREATE MY MAP</button>
203+
</NavLink>
204+
) : null}
205+
<div
206+
className={cityOrCountry ? "map city-map" : "map country-map"}
207+
>
208+
<FriendReadonlyCity
209+
tripData={tripData}
210+
geoJsonArray={geoJsonArray}
211+
filteredCountryJsonData={filteredCountryJsonData}
212+
countryArray={countryArray}
213+
/>
214+
</div>
215+
<span className="georney-score" onClick={() => geoScoreSwal()}>
216+
<span className="gs-title">{"GeorneyScore"}</span>
217+
<span className="gs-score">
218+
{Math.ceil(data.user.georneyScore)}
219+
</span>
258220
</span>
259-
</span>
260-
</div>
221+
</div>
222+
</>
261223
);
262224
}}
263225
</Query>

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

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import MapGL, {
88
Popup,
99
FeatureState,
1010
} from "@urbica/react-map-gl";
11-
import Geocoder from "react-map-gl-geocoder";
11+
// import Geocoder from "react-map-gl-geocoder";
1212
import MapScorecard from "./MapScorecard";
1313
import PopupPrompt from "../../../components/Prompts/PopupPrompt";
1414
import ReadonlySignupPrompt from "../../../components/Prompts/ReadonlySignupPrompt";
@@ -28,10 +28,10 @@ const pastLayer = {
2828
id: "past",
2929
type: "circle",
3030
paint: {
31-
"circle-radius": 5,
31+
"circle-radius": 4,
3232
"circle-color": "rgba(203, 118, 120, 0.75)",
3333
"circle-stroke-color": "rgba(203, 118, 120, 0.25)",
34-
"circle-stroke-width": 6,
34+
"circle-stroke-width": 4,
3535
},
3636
filter: ["==", "icon", "0"],
3737
};
@@ -46,24 +46,34 @@ const pastCountryLayer = {
4646
filter: ["==", "icon", "0"],
4747
};
4848

49-
const futureLayer = {
50-
id: "future",
51-
type: "circle",
49+
const futureCountryLayer = {
50+
id: "futureCountries",
51+
type: "fill",
5252
paint: {
53-
"circle-radius": 5,
54-
"circle-color": "rgba(115, 167, 195, 0.75)",
55-
"circle-stroke-color": "rgba(115, 167, 195, 0.25)",
56-
"circle-stroke-width": 6,
53+
"fill-color": "rgba(100, 100, 220, 0.25)",
54+
"fill-outline-color": "rgba(0, 0, 255, 0.25)",
5755
},
5856
filter: ["==", "icon", "1"],
5957
};
6058

61-
const futureCountryLayer = {
62-
id: "futureCountries",
59+
const liveCountryLayer = {
60+
id: "liveCountries",
6361
type: "fill",
6462
paint: {
65-
"fill-color": "rgba(100, 100, 200, 0.25)",
66-
"fill-outline-color": "rgba(0, 0, 255, 0.25)",
63+
"fill-color": "rgba(100, 200, 100, 0.25)",
64+
"fill-outline-color": "rgba(0, 255, 0, 0.25)",
65+
},
66+
filter: ["==", "icon", "2"],
67+
};
68+
69+
const futureLayer = {
70+
id: "future",
71+
type: "circle",
72+
paint: {
73+
"circle-radius": 4,
74+
"circle-color": "rgba(115, 167, 195, 0.75)",
75+
"circle-stroke-color": "rgba(115, 167, 195, 0.25)",
76+
"circle-stroke-width": 4,
6777
},
6878
filter: ["==", "icon", "1"],
6979
};
@@ -72,23 +82,14 @@ const liveLayer = {
7282
id: "live",
7383
type: "circle",
7484
paint: {
75-
"circle-radius": 5,
85+
"circle-radius": 4,
7686
"circle-color": "rgba(150, 177, 168, 0.75)",
7787
"circle-stroke-color": "rgba(150, 177, 168, 0.25)",
78-
"circle-stroke-width": 6,
88+
"circle-stroke-width": 4,
7989
},
8090
filter: ["==", "icon", "2"],
8191
};
8292

83-
const liveCountryLayer = {
84-
id: "liveCountries",
85-
type: "fill",
86-
paint: {
87-
"fill-color": "rgba(100, 200, 100, 0.25)",
88-
"fill-outline-color": "rgba(0, 255, 0, 0.25)",
89-
},
90-
filter: ["==", "icon", "2"],
91-
};
9293

9394
function FriendReadonlyCity(props) {
9495
const [viewport, handleViewport] = useState({
@@ -195,23 +196,23 @@ function FriendReadonlyCity(props) {
195196
handleViewport({ ...viewport, ...newViewport });
196197
}
197198

198-
function handleOnResult(typedCity) {
199-
let newHoveredCityArray = [];
200-
if (typedCity.result.properties.wikidata !== undefined) {
201-
newHoveredCityArray = clickedCityArray.filter(
202-
(city) =>
203-
city.cityId ===
204-
parseFloat(typedCity.result.properties.wikidata.slice(1), 10)
205-
);
206-
} else {
207-
newHoveredCityArray = clickedCityArray.filter(
208-
(city) =>
209-
city.cityId === parseFloat(typedCity.result.id.slice(10, 16), 10)
210-
);
211-
}
212-
handleActivePopup(true);
213-
handleHoveredCityArray(newHoveredCityArray);
214-
}
199+
// function handleOnResult(typedCity) {
200+
// let newHoveredCityArray = [];
201+
// if (typedCity.result.properties.wikidata !== undefined) {
202+
// newHoveredCityArray = clickedCityArray.filter(
203+
// (city) =>
204+
// city.cityId ===
205+
// parseFloat(typedCity.result.properties.wikidata.slice(1), 10)
206+
// );
207+
// } else {
208+
// newHoveredCityArray = clickedCityArray.filter(
209+
// (city) =>
210+
// city.cityId === parseFloat(typedCity.result.id.slice(10, 16), 10)
211+
// );
212+
// }
213+
// handleActivePopup(true);
214+
// handleHoveredCityArray(newHoveredCityArray);
215+
// }
215216

216217
function handleLoadedCities(data) {
217218
let pastCount = tripTimingCounts[0];
@@ -468,7 +469,7 @@ function FriendReadonlyCity(props) {
468469
"liveCountries",
469470
]}
470471
>
471-
<Geocoder
472+
{/* <Geocoder
472473
mapRef={mapRef}
473474
onResult={handleOnResult}
474475
mapboxApiAccessToken={
@@ -477,7 +478,7 @@ function FriendReadonlyCity(props) {
477478
position="top-left"
478479
types={"place"}
479480
placeholder={"Type a city..."}
480-
/>
481+
/> */}
481482
<Source type="geojson" id="route2" data={countryJson}></Source>
482483
<FeatureState id="route2" source="route2" />
483484
<Source type="geojson" id="route" data={geojson}></Source>

‎src/pages/Home/subcomponents/_FriendCityMap.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@
196196
z-index: 1;
197197
font-weight: 700;
198198
cursor: pointer;
199-
top: 75px;
199+
top: 20px;
200200
color: rgb(248, 248, 252);
201201
background: #73a7c3;
202202
box-shadow: 0 0 14px 2px rgba(167, 225, 255, 0.75);
@@ -364,3 +364,9 @@
364364
}
365365
}
366366
}
367+
368+
#map-readonly {
369+
.city-map-scorecard {
370+
top: 180px;
371+
}
372+
}

0 commit comments

Comments
 (0)