filter by age without researching again

public/index.html

@@ -123,13 +123,23 @@
     badge.textContent = val + '+';
     badge.style.background = getAgeColor(val);
   }
-  async function search() {
+  let lastQuery = '';
+  let lastResults = [];
+
+  async function search(force = false) {
     const query = document.getElementById('q').value.trim();
     if (!query) return;
     const maxAge = parseInt(document.getElementById('maxAge').value, 10);
     window.history.replaceState({}, '', '?q=' + encodeURIComponent(query) + (maxAge < 21 ? `&maxAge=${maxAge}` : ''));
     const filmsDiv = document.getElementById('films');
     filmsDiv.innerHTML = '<p class="loader">Searching...</p>';
+
+    // Si on a déjà cherché ce terme, et pas force, on ne refait pas le fetch
+    if (!force && lastQuery === query && lastResults.length) {
+      renderFilms(filterFilmsByMaxAge(lastResults, maxAge));
+      return;
+    }
+
     try {
       const base = window.location.origin;
       const response = await fetch(`${base}/search?q=${encodeURIComponent(query)}`);
@@ -138,16 +148,8 @@
         return;
       }
       let films = await response.json();
-      if (!Array.isArray(films) || !films.length) {
-        filmsDiv.innerHTML = '<p class="no-results">No results. Try another query.</p>';
-        return;
-      }
-      // Filtres sources inutiles (pas de description et/ou pas d'âge)
       films = films.map(film => {
         film.results = film.results.filter(r => {
-          // On considère valide si :
-          //   - summary ou parentsNeedToKnow ou details.summary >= 8 chars
-          //   - ET un âge existe (age, normalizedMarks, marks, details.ageLegal, etc)
           let hasDescription =
             (r.summary && r.summary.length >= 8) ||
             (r.parentsNeedToKnow && r.parentsNeedToKnow.length >= 8) ||
@@ -159,118 +161,133 @@
         return film;
       }).filter(film => film.results.length > 0);
 
-      if (isFinite(maxAge)) {
+      lastQuery = query;
-        films = films.filter(film => {
+      lastResults = films;
-          const uniqueResults = [];
+      renderFilms(filterFilmsByMaxAge(films, maxAge));
-          const seenSources = new Set();
-          film.results.forEach(r => {
-            if (!seenSources.has(r.source)) {
-              uniqueResults.push(r);
-              seenSources.add(r.source);
-            }
-          });
-          const ages = getAllAges(uniqueResults);
-          if (ages.length === 0) return true;
-          return Math.max(...ages) <= maxAge;
-        });
-      }
-      if (!films.length) {
-        filmsDiv.innerHTML = '<p class="no-results">No results for this max age.</p>';
-        return;
-      }
-      let html = `<table class="results-table">
-        <thead>
-          <tr>
-            <th>Title</th>
-            <th>Year</th>
-            <th>Information sources</th>
-          </tr>
-        </thead>
-        <tbody>`;
-      films.forEach(film => {
-        const allImgs = film.results.map(r => r.img).filter(Boolean);
-        const mainImg = allImgs.length ? allImgs[0] : null;
-        html += `<tr>
-          <td style="vertical-align:top;">
-            <div style="text-align:center;">
-              <div style="font-weight:bold;margin-bottom:0.7em;">${film.title || 'Unknown title'}</div>
-              ${mainImg ? `<img src="${mainImg}" alt="Poster for ${film.title}" style="display:block;margin:auto;max-width:100px;max-height:150px;border-radius:5px;box-shadow:0 2px 8px #0003;margin-bottom:10px;">` : ''}
-            </div>
-          </td>
-          <td class="year" style="vertical-align:top;">${film.year || 'N/A'}</td>
-          <td>`;
-        const uniqueResults = [];
-        const seenSources = new Set();
-        film.results.forEach(r => {
-          if (!seenSources.has(r.source)) {
-            uniqueResults.push(r);
-            seenSources.add(r.source);
-          }
-        });
-        uniqueResults.forEach(r => {
-          html += `<div class="source-block">`;
-          html += `<p class="source-name">${r.source.charAt(0).toUpperCase() + r.source.slice(1)}</p>`;
-          if (r.link) {
-            html += `<p><a href="${r.link}" target="_blank">View details</a></p>`;
-          }
-          if (r.source === 'commonsense') {
-            html += `<p><b>Recommended age:</b> ${ageBadge(r.age)}</p>`;
-            html += `<p><b>Summary (CSM):</b> ${shortSummary(r.summary || r.parentsNeedToKnow)}</p>`;
-            if (r.details && r.details.length) {
-              html += `<p><b>Details (CSM):</b></p><ul>`;
-              r.details.forEach(d => {
-                html += `<li>${d.type}: ${d.score}/5 - ${shortSummary(d.description, 80)}</li>`;
-              });
-              html += `</ul>`;
-            }
-          }
-          else if (r.source === 'cinecheck') {
-            let numericAges = Array.isArray(r.normalizedMarks) && r.normalizedMarks.length
-              ? r.normalizedMarks
-              : (r.marks || []).map(x => {
-                  let n = parseInt((x + '').replace(/\d+/, ''), 10);
-                  return isNaN(n) ? null : n;
-                }).filter(n => n !== null && !isNaN(n));
-            let minAge = numericAges.length ? Math.min(...numericAges) : '';
-            html += `<p><b>Age(s) (Cinecheck):</b> ${minAge ? ageBadge(minAge) : ''}${r.marks && r.marks.length ? r.marks.join(', ') : '-'}</p>`;
-            html += `<p><b>Summary (Cinecheck):</b> ${shortSummary(r.summary)}</p>`;
-            if (r.details && r.details.length) {
-              html += `<p><b>Pictograms (Cinecheck):</b> ${r.details.map(d => d.type).join(', ') || '-'}</p>`;
-            }
-          }
-          else if (r.source === 'filmages') {
-            html += `<p><b>Original title (Filmages):</b> ${r.details.titleOriginalPage || r.details.titleOriginal || '-'}</p>`;
-            html += `<p><b>Legal age (Filmages):</b> ${ageBadge(r.details.ageLegal)}</p>`;
-            html += `<p><b>Suggested age (Filmages):</b> ${ageBadge(r.details.ageSuggested)}</p>`;
-            html += `<p><b>Summary (Filmages):</b> ${shortSummary(r.details.summary)}</p>`;
-            html += `<p><b>Synthesis (Filmages):</b> ${shortSummary(r.details.synthesis, 100)}</p>`;
-            if (r.details.indications && r.details.indications.length) {
-              html += `<p><b>Indications:</b> ${shortSummary(r.details.indications.join(', '), 100)}</p>`;
-            }
-            if (r.details.counterIndications && r.details.counterIndications.length) {
-              html += `<p><b>Contra-indications:</b> ${shortSummary(r.details.counterIndications.join(', '), 100)}</p>`;
-            }
-          }
-          else {
-            html += `<p><b>Summary:</b> ${shortSummary(r.summary)}</p>`;
-            html += `<p><b>Age:</b> ${ageBadge(r.age)}</p>`;
-          }
-          html += `</div>`;
-        });
-        html += `</td></tr>`;
-      });
-      html += '</tbody></table>';
-      filmsDiv.innerHTML = html;
     } catch (error) {
       console.error('Search function error:', error);
       filmsDiv.innerHTML = `<p class="no-results">Search failed. Check the console.</p>`;
     }
   }
 
+  function filterFilmsByMaxAge(films, maxAge) {
+    if (!isFinite(maxAge)) return films;
+    return films.filter(film => {
+      const uniqueResults = [];
+      const seenSources = new Set();
+      film.results.forEach(r => {
+        if (!seenSources.has(r.source)) {
+          uniqueResults.push(r);
+          seenSources.add(r.source);
+        }
+      });
+      const ages = getAllAges(uniqueResults);
+      if (ages.length === 0) return true;
+      return Math.max(...ages) <= maxAge;
+    });
+  }
+
+  // Extraction de la partie rendering pour pouvoir la réutiliser
+  function renderFilms(films) {
+    const filmsDiv = document.getElementById('films');
+    if (!films.length) {
+      filmsDiv.innerHTML = '<p class="no-results">No results for this max age.</p>';
+      return;
+    }
+    let html = `<table class="results-table">
+      <thead>
+        <tr>
+          <th>Title</th>
+          <th>Year</th>
+          <th>Information sources</th>
+        </tr>
+      </thead>
+      <tbody>`;
+    films.forEach(film => {
+      const allImgs = film.results.map(r => r.img).filter(Boolean);
+      const mainImg = allImgs.length ? allImgs[0] : null;
+      html += `<tr>
+        <td style="vertical-align:top;">
+          <div style="text-align:center;">
+            <div style="font-weight:bold;margin-bottom:0.7em;">${film.title || 'Unknown title'}</div>
+            ${mainImg ? `<img src="${mainImg}" alt="Poster for ${film.title}" style="display:block;margin:auto;max-width:100px;max-height:150px;border-radius:5px;box-shadow:0 2px 8px #0003;margin-bottom:10px;">` : ''}
+          </div>
+        </td>
+        <td class="year" style="vertical-align:top;">${film.year || 'N/A'}</td>
+        <td>`;
+      const uniqueResults = [];
+      const seenSources = new Set();
+      film.results.forEach(r => {
+        if (!seenSources.has(r.source)) {
+          uniqueResults.push(r);
+          seenSources.add(r.source);
+        }
+      });
+      uniqueResults.forEach(r => {
+        html += `<div class="source-block">`;
+        html += `<p class="source-name">${r.source.charAt(0).toUpperCase() + r.source.slice(1)}</p>`;
+        if (r.link) {
+          html += `<p><a href="${r.link}" target="_blank">View details</a></p>`;
+        }
+        if (r.source === 'commonsense') {
+          html += `<p><b>Recommended age:</b> ${ageBadge(r.age)}</p>`;
+          html += `<p><b>Summary (CSM):</b> ${shortSummary(r.summary || r.parentsNeedToKnow)}</p>`;
+          if (r.details && r.details.length) {
+            html += `<p><b>Details (CSM):</b></p><ul>`;
+            r.details.forEach(d => {
+              html += `<li>${d.type}: ${d.score}/5 - ${shortSummary(d.description, 80)}</li>`;
+            });
+            html += `</ul>`;
+          }
+        }
+        else if (r.source === 'cinecheck') {
+          let numericAges = Array.isArray(r.normalizedMarks) && r.normalizedMarks.length
+            ? r.normalizedMarks
+            : (r.marks || []).map(x => {
+                let n = parseInt((x + '').replace(/\d+/, ''), 10);
+                return isNaN(n) ? null : n;
+              }).filter(n => n !== null && !isNaN(n));
+          let minAge = numericAges.length ? Math.min(...numericAges) : '';
+          html += `<p><b>Age(s) (Cinecheck):</b> ${minAge ? ageBadge(minAge) : ''}${r.marks && r.marks.length ? r.marks.join(', ') : '-'}</p>`;
+          html += `<p><b>Summary (Cinecheck):</b> ${shortSummary(r.summary)}</p>`;
+          if (r.details && r.details.length) {
+            html += `<p><b>Pictograms (Cinecheck):</b> ${r.details.map(d => d.type).join(', ') || '-'}</p>`;
+          }
+        }
+        else if (r.source === 'filmages') {
+          html += `<p><b>Original title (Filmages):</b> ${r.details.titleOriginalPage || r.details.titleOriginal || '-'}</p>`;
+          html += `<p><b>Legal age (Filmages):</b> ${ageBadge(r.details.ageLegal)}</p>`;
+          html += `<p><b>Suggested age (Filmages):</b> ${ageBadge(r.details.ageSuggested)}</p>`;
+          html += `<p><b>Summary (Filmages):</b> ${shortSummary(r.details.summary)}</p>`;
+          html += `<p><b>Synthesis (Filmages):</b> ${shortSummary(r.details.synthesis, 100)}</p>`;
+          if (r.details.indications && r.details.indications.length) {
+            html += `<p><b>Indications:</b> ${shortSummary(r.details.indications.join(', '), 100)}</p>`;
+          }
+          if (r.details.counterIndications && r.details.counterIndications.length) {
+            html += `<p><b>Contra-indications:</b> ${shortSummary(r.details.counterIndications.join(', '), 100)}</p>`;
+          }
+        }
+        else {
+          html += `<p><b>Summary:</b> ${shortSummary(r.summary)}</p>`;
+          html += `<p><b>Age:</b> ${ageBadge(r.age)}</p>`;
+        }
+        html += `</div>`;
+      });
+      html += `</td></tr>`;
+    });
+    html += '</tbody></table>';
+    filmsDiv.innerHTML = html;
+  }
+
   document.getElementById('maxAge').addEventListener('input', function() {
     updateMaxAgeDisplay();
-    search();
+    // Pas de fetch, juste filtre en front
+    const query = document.getElementById('q').value.trim();
+    if (!query || !lastResults.length) return;
+    const maxAge = parseInt(document.getElementById('maxAge').value, 10);
+    renderFilms(filterFilmsByMaxAge(lastResults, maxAge));
   });
+
   window.addEventListener('DOMContentLoaded', () => {
     const params = new URLSearchParams(window.location.search);
     const q = params.get('q');
@@ -281,10 +298,11 @@
     }
     if (q) {
       document.getElementById('q').value = q;
-      search();
+      search(true); // force fetch initiale
     }
   });
-  document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') search(); });
+  document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') search(true); });
+
 </script>
 </body>
 </html>