Merge pull request #42 from MatteoFra/main

ticket #33 et #41

Submissions/LuigiVampa21.json

@@ -9,7 +9,7 @@
     },
     "jobTitle" : "Web Developper",
     "location" : {
-      "city" : "Vetraz-Monthoux",
+      "city" : "Vetraz Monthoux",
       "state" : "Auvergne Rhône-Aples",
       "country" : "France"
     }

Submissions/MatteoFra.json

@@ -9,7 +9,7 @@
     },
     "jobTitle" : "Full-stack Developper",
     "location" : {
-      "city" : "Thonon",
+      "city" : "Thonon les bains",
       "state" : "Haute-Savoie",
       "country" : "FRANCE"
     }

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"
     }

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"
+  }
+]

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 (
+        <Marker key={city} position={[latlng[0], latlng[1]]}>
+          <Popup>{city}</Popup>
+        </Marker>
+      )
+    }
+  )
   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}
       </LeafletMap>
     </div>
   )

src/interfaces/city.ts

@@ -0,0 +1,5 @@
+export default interface City {
+  longitude: string
+  latitude: string
+  CITY: string
+}

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

src/util/UsersDataCleanup.tsx

@@ -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)