From e050050d83cff74a00916c7f0ac36d8953a15eac Mon Sep 17 00:00:00 2001 From: MatteoFra Date: Tue, 26 Apr 2022 21:22:49 +0200 Subject: [PATCH] ticket #33 et #41 --- Submissions/LuigiVampa21.json | 2 +- Submissions/MatteoFra.json | 2 +- Submissions/el-Sultan.json | 2 +- src/assets/cities.json | 57 +++++++++++++++++++++++++++++++++++ src/components/Map.tsx | 46 ++++++++++++++++++++++++++-- src/interfaces/city.ts | 5 +++ src/util/CitiesDataFilter.tsx | 18 +++++++++++ src/util/UsersDataCleanup.tsx | 21 +++++++++++-- 8 files changed, 145 insertions(+), 8 deletions(-) create mode 100644 src/assets/cities.json create mode 100644 src/interfaces/city.ts create mode 100644 src/util/CitiesDataFilter.tsx diff --git a/Submissions/LuigiVampa21.json b/Submissions/LuigiVampa21.json index b4828e7..c081467 100644 --- a/Submissions/LuigiVampa21.json +++ b/Submissions/LuigiVampa21.json @@ -9,7 +9,7 @@ }, "jobTitle" : "Web Developper", "location" : { - "city" : "Vetraz-Monthoux", + "city" : "Vetraz Monthoux", "state" : "Auvergne Rhône-Aples", "country" : "France" } diff --git a/Submissions/MatteoFra.json b/Submissions/MatteoFra.json index 5018797..0f79653 100644 --- a/Submissions/MatteoFra.json +++ b/Submissions/MatteoFra.json @@ -9,7 +9,7 @@ }, "jobTitle" : "Full-stack Developper", "location" : { - "city" : "Thonon", + "city" : "Thonon les bains", "state" : "Haute-Savoie", "country" : "FRANCE" } diff --git a/Submissions/el-Sultan.json b/Submissions/el-Sultan.json index 3f52d4e..cf0618f 100644 --- a/Submissions/el-Sultan.json +++ b/Submissions/el-Sultan.json @@ -9,7 +9,7 @@ }, "jobTitle" : "Développeur data", "location" : { - "city" : "Ville la grand", + "city" : "Ville la Grand", "state" : "haute-savoie", "country" : "France" } diff --git a/src/assets/cities.json b/src/assets/cities.json new file mode 100644 index 0000000..f639a2b --- /dev/null +++ b/src/assets/cities.json @@ -0,0 +1,57 @@ +[ + { + "longitude": "6.477635", + "latitude": "46.373565", + "CITY": "Thonon les bains" + }, + { + "longitude": "6.575", + "latitude": "46.0625", + "CITY": "Cluses" + }, + { + "longitude": "6.2069", + "latitude": "46.1853", + "CITY": "Gaillard" + }, + { + "longitude": "0.107929", + "latitude": "49.49437", + "CITY": "Le Havre" + }, + { + "longitude": "6.234158", + "latitude": "46.193253", + "CITY": "Annemasse" + }, + { + "longitude": "6.26667", + "latitude": "46.166672", + "CITY": "Vetraz Monthoux" + }, + { + "longitude": "6.33333", + "latitude": "46.299999", + "CITY": "Ballaison" + }, + { + "longitude": "6.1673232", + "latitude": "45.8615248", + "CITY": "Annecy" + }, + { + "longitude": "6.409053", + "latitude": "46.078025", + "CITY": "Bonneville" + }, + { + "longitude": "6.25000", + "latitude": "46.200001", + "CITY": "Ville la Grand" + }, + { + "longitude": "6.3062", + "latitude": "46.1546", + "CITY": "Nangy" + } +] diff --git a/src/components/Map.tsx b/src/components/Map.tsx index ecc6735..ba92d64 100644 --- a/src/components/Map.tsx +++ b/src/components/Map.tsx @@ -7,14 +7,19 @@ import { Tooltip, } from "react-leaflet" -import { countriesWithNumOfDevsObj } from "../util/UsersDataCleanup" +import { + countriesWithNumOfDevsObj, + citiesWithNumOfDevsObj, +} from "../util/UsersDataCleanup" import { countriesWithLatLng } from "../util/CountriesDataFilter" +import { citiesWithLatLng } from "../util/CitiesDataFilter" // Tableau des noms de pays et du nombre de développeurs dans ces pays. /* Nécessaire de faire correspondre les noms de pays de countriesWithNumOfDevsObj avec noms de pays récupérés dans l'API pour obtenir leur latitude et leur longitude pour les marqueurs */ const countryNamesAndNumOfDevsArr = Object.entries(countriesWithNumOfDevsObj) +const cityNamesAndNumOfDevsArr = Object.entries(citiesWithNumOfDevsObj) let centerLatLngArr: any = [] @@ -23,13 +28,39 @@ function SimpleMap({ zoom = 3 }) { useEffect(() => { setAllCountriesLatLang(countriesWithLatLng) }, []) + const [allCitiesLatLang, setAllCitiesLatLang] = useState([]) + useEffect(() => { + setAllCitiesLatLang(citiesWithLatLng) + }, []) let countriesLatLngArr: any = allCountriesLatLang.map(({ name, latlng }) => ({ name, latlng, })) + let citiesLatLngArr: any = allCitiesLatLang.map(({ name, latlng }) => ({ + name, + latlng, + })) - // Deux boucles for imbriquées sont correctes car les éléments du tableau seront toujours < 250 dans les deux tableaux. + let finalArrayWithCityAndLatLng: any = [] + function finalCityAndLocationArray() { + for (let i = 0; i < cityNamesAndNumOfDevsArr.length; i++) { + for (let j = 0; j < citiesLatLngArr.length; j++) { + if ( + cityNamesAndNumOfDevsArr[i][0].toLowerCase() === + citiesLatLngArr[j].name.toLowerCase() + ) { + finalArrayWithCityAndLatLng.push({ + city: citiesLatLngArr[j].name, + latlng: citiesLatLngArr[j].latlng, + numberOfDevs: cityNamesAndNumOfDevsArr[i][1], + }) + } + } + } + + return finalArrayWithCityAndLatLng + } let finalArrayWithCountryAndLatLng: any = [] function finalCountryAndLocationArray() { for (let i = 0; i < countryNamesAndNumOfDevsArr.length; i++) { @@ -50,6 +81,7 @@ function SimpleMap({ zoom = 3 }) { return finalArrayWithCountryAndLatLng } finalCountryAndLocationArray() + finalCityAndLocationArray() // NE PAS SUPPRIMER CE CODE COMMENTÉ CI-DESSOUS // On peut en avoir besoin pour vérifier les entrées répétées inattendues, ce qui est plus facile avec les pays triés. @@ -69,6 +101,15 @@ function SimpleMap({ zoom = 3 }) { console.log(sorterFunction); */ + const markersArrayCities = finalArrayWithCityAndLatLng.map( + ({ city, latlng }: any) => { + return ( + + {city} + + ) + } + ) const markersArray = finalArrayWithCountryAndLatLng.map( ({ country, latlng, numberOfDevs }: any) => { let numberOfDevsText = @@ -109,6 +150,7 @@ function SimpleMap({ zoom = 3 }) { url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> {markersArray} + {markersArrayCities} ) diff --git a/src/interfaces/city.ts b/src/interfaces/city.ts new file mode 100644 index 0000000..45cea4b --- /dev/null +++ b/src/interfaces/city.ts @@ -0,0 +1,5 @@ +export default interface City { + longitude: string + latitude: string + CITY: string +} diff --git a/src/util/CitiesDataFilter.tsx b/src/util/CitiesDataFilter.tsx new file mode 100644 index 0000000..fbf1f09 --- /dev/null +++ b/src/util/CitiesDataFilter.tsx @@ -0,0 +1,18 @@ +import citiesData from "../assets/cities.json" + +import City from "../interfaces/city" + +const cities: any = citiesData + +// Filtrer les données de la ville pour ne retourner que le nom et les valeurs [lat,lng]. +const filteredCityData = cities.map((city: City) => { + return { + name: city.CITY, + latlng: [ + parseFloat(city.latitude).toFixed(1), + parseFloat(city.longitude).toFixed(1), + ], + } +}) + +export const citiesWithLatLng = filteredCityData diff --git a/src/util/UsersDataCleanup.tsx b/src/util/UsersDataCleanup.tsx index a31bda8..2e911da 100644 --- a/src/util/UsersDataCleanup.tsx +++ b/src/util/UsersDataCleanup.tsx @@ -28,7 +28,7 @@ const allCountryNamesCleaned = people.map((person: Person) => { // remplace 2 ou plusieurs espaces par un seul. .replace(/ +/g, " ") .trim() - // .toLowerCase() + .toLowerCase() ) }) @@ -78,7 +78,7 @@ const allCountryNamesFixedToMatchAPINames = allCountryNamesCleaned.map( // Cette fonction renvoie un objet contenant le nom du pays et le nombre de développeurs de ce pays. // Elle ajoute le nombre de développeurs lorsqu'elle rencontre des noms de pays en double. -function removeDuplicateCountryNames(countryArrayWithDuplicateValues: any) { +function removeDuplicateNames(countryArrayWithDuplicateValues: any) { let deduplicatedCountries = countryArrayWithDuplicateValues.reduce( (prev: any, curr: any) => { // console.log("prev", prev, "current", curr); @@ -90,6 +90,21 @@ function removeDuplicateCountryNames(countryArrayWithDuplicateValues: any) { return deduplicatedCountries } -export const countriesWithNumOfDevsObj = removeDuplicateCountryNames( +export const countriesWithNumOfDevsObj = removeDuplicateNames( allCountryNamesFixedToMatchAPINames ) +const cities = people.map((person: Person) => { + return ( + person.location.city + //supprime les parenthèses et tout ce qui se trouve à l'intérieur des parenthèses. + // si des personnes ont ajouté entre parenthèses (Disponible pour le travail à distance) ou similaire. + ?.replace(/ *\([^)]*\) */g, "") + // supprime tout ce qui n'est pas alphabet et lettres latines/autres éáíúçèk + .replace(/[^A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff\s]+/g, "") + // remplace 2 ou plusieurs espaces par un seul. + .replace(/ +/g, " ") + .trim() + .toLowerCase() + ) +}) +export const citiesWithNumOfDevsObj = removeDuplicateNames(cities)