feat: improve search station field

src/front.js

@@ -5,6 +5,7 @@ import linesData from "../assets/lines.geojson"
 import { ParisMap } from './map.js';
 import { getSeededRandomStations, pickStations } from './pick-stations.js';
 import { verifyIfConnected} from './graph.js';
+import { filterStationsForList } from './utils.front.js';
 
 const stations = stationsData.features.filter((s) => {
   return s.properties.adjacentStations && s.properties.name;
@@ -47,17 +48,15 @@ function showDropdown(input, dropdown, value) {
   input.classList.add('show');
   dropdown.classList.add('show');
   dropdown.setAttribute('aria-expanded', 'true');
+  console.log({value})
   const filteredStations = filterStationsForList(value, sortedStations);
   dropdown.innerHTML = '';
+  console.log({filteredStations})
   filteredStations.forEach((name) => {
     dropdown.appendChild(createDropdownStation(name));
   })
 }
 
-function filterStationsForList(search, stations) {
-  return stations.filter((name) => name.toLowerCase().includes(search.toLowerCase()));
-}
-
 function createDropdownStation(stationName) {
   const button = document.createElement('button');
   button.innerText = stationName;

src/utils.front.js

@@ -0,0 +1,31 @@
+function filterStationsForList(search, stations) {
+  const normalizedSearch = search
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[ -]/g, "[ -]")
+    .toLowerCase();
+  const searchRegex = new RegExp(normalizedSearch, 'i');
+  const startRegex = new RegExp(`^${normalizedSearch}`);
+  return stations
+    .sort((a, b) => a.localeCompare(b))
+    .filter((name) => {
+      const normalizedName = name.normalize('NFD').replace(/[\u0300-\u036f]/g, "");
+      return normalizedName.match(searchRegex);
+    })
+    .sort((a, b) => {
+      const aLower = a.toLowerCase();
+      const bLower = b.toLowerCase();
+      if (aLower.match(startRegex) && !bLower.match(startRegex)) {
+        return -1;
+      }
+      if (!aLower.match(startRegex) && bLower.match(startRegex)) {
+        return 1;
+      }
+      return 0;
+    })
+}
+
+
+export {
+  filterStationsForList,
+}

tests/utils.front.spec.js

@@ -0,0 +1,71 @@
+import { describe, test, expect } from 'vitest';
+import { filterStationsForList } from '../src/utils.front.js';
+
+describe('utils.front', () => {
+  describe('#filterStationsForList', () => {
+    test('should return stations with current search case insensitive', () => {
+      const stations = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
+
+      const filteredStations = filterStationsForList('a', stations);
+
+      expect(filteredStations).to.deep.equal(['A']);
+    })
+
+    test('should return stations beginning with current search before', () => {
+      const stations = ['AB', 'B', 'CB', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
+
+      const filteredStations = filterStationsForList('b', stations);
+
+      expect(filteredStations).to.deep.equal(['B', 'AB', 'CB']);
+    });
+
+    test('should return stations beginning with current search before case insensitive', () => {
+      const stations = ['Abbesses', 'Alésia', 'Saint-Lazare', 'Saint-Michel'];
+
+      const filteredStations = filterStationsForList('S', stations);
+
+      expect(filteredStations).to.deep.equal([
+        'Saint-Lazare',
+        'Saint-Michel',
+        'Abbesses',
+        'Alésia'
+      ]);
+    });
+
+    test('should return stations beginning with current search with space instead of -', () => {
+      const stations = ['Basilique de Saint-Denis', 'Saint-Lazare', 'Saint-Michel'];
+
+      const filteredStations = filterStationsForList('Saint ', stations);
+
+      expect(filteredStations).to.deep.equal([
+        'Saint-Lazare',
+        'Saint-Michel',
+        'Basilique de Saint-Denis'
+      ]);
+    });
+
+    test('should search without accents', () => {
+      const stations = ['E', 'É'];
+
+      const filteredStations = filterStationsForList('E', stations);
+
+      expect(filteredStations).to.deep.equal(['E', 'É']);
+    });
+
+    test('should normalize search wit accents', () => {
+      const stations = ['E', 'É'];
+
+      const filteredStations = filterStationsForList('é', stations);
+
+      expect(filteredStations).to.deep.equal(['E', 'É']);
+    });
+
+    test('should return station without - in search', () => {
+      const stations = ['Saint-Lazare'];
+
+      const filteredStations = filterStationsForList('Saint Lazare', stations);
+
+      expect(filteredStations).to.deep.equal(['Saint-Lazare']);
+    });
+  })
+})