simplified tagging selection

src/client/DomandeEsamiCourse.tsx

@@ -19,8 +19,6 @@ import type { Database } from '@/data/domande-esami.yaml'
 const useRemoteValue = <T,>(url: string): T | null => {
     const [value, setValue] = useState<T | null>(null)
 
-    console.log('fetching', url, value)
-
     useEffect(() => {
         fetch(url)
             .then(response => response.json())
@@ -55,13 +53,11 @@ export const DomandeEsamiCourse = ({ course }: Props) => {
         ),
     ]
 
-    const [selectedTags, setSelectedTags] = useState<string[]>([])
+    const [selectedTag, setSelectedTag] = useState<string | null>(null)
 
     const filteredQuestions = database.questions
         .filter(question => question.course === course)
-        .filter(question => selectedTags.length === 0 || selectedTags.every(tag => question.tags.includes(tag)))
-
-    console.log('filteredQuestions', filteredQuestions)
+        .filter(question => (selectedTag ? question.tags.includes(selectedTag) : true))
 
     return (
         <>
@@ -72,39 +68,34 @@ export const DomandeEsamiCourse = ({ course }: Props) => {
                 <h1>{database.names[course]}</h1>
             </div>
 
+            {courseTags.length > 1 && (
                 <div class="card filter">
                     <div class="grid-h">
                         <Funnel />
                         <strong>Filtra Tag</strong>
                     </div>
                     <div class="flex-row-wrap">
-                    {selectedTags.length === 0
+                        {!selectedTag
                             ? courseTags.map(tag => (
-                              <div class="chip clickable" onClick={() => setSelectedTags([tag])}>
+                                  <div class="chip clickable" onClick={() => setSelectedTag(tag)}>
                                       {tag}
                                   </div>
                               ))
                             : courseTags.map(tag => (
                                   <div
-                                  class={selectedTags.includes(tag) ? 'chip clickable' : 'chip clickable disabled'}
-                                  onClick={() =>
-                                      setSelectedTags(
-                                          selectedTags.includes(tag)
-                                              ? selectedTags.filter(t => t !== tag)
-                                              : [...selectedTags, tag],
-                                      )
-                                  }
+                                      class={tag === selectedTag ? 'chip clickable' : 'chip clickable disabled'}
+                                      onClick={() => setSelectedTag(tag === selectedTag ? null : tag)}
                                   >
                                       {tag}
                                   </div>
                               ))}
                     </div>
                 </div>
+            )}
             <div class="wide-card-list" id="questions">
                 {filteredQuestions.length === 0 ? (
                     <div class="grid-center">
                         <em>No questions found</em>
-                        <button onClick={() => setSelectedTags([])}>Rimuovi i filtri</button>
                     </div>
                 ) : (
                     filteredQuestions.map(question => (