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)))
+        .filter(question => (selectedTag ? question.tags.includes(selectedTag) : true))
-
-    console.log('filteredQuestions', filteredQuestions)
 
     return (
         <>
@@ -72,39 +68,34 @@ export const DomandeEsamiCourse = ({ course }: Props) => {
                 <h1>{database.names[course]}</h1>
             </div>
 
-            <div class="card filter">
+            {courseTags.length > 1 && (
-                <div class="grid-h">
+                <div class="card filter">
-                    <Funnel />
+                    <div class="grid-h">
-                    <strong>Filtra Tag</strong>
+                        <Funnel />
-                </div>
+                        <strong>Filtra Tag</strong>
-                <div class="flex-row-wrap">
+                    </div>
-                    {selectedTags.length === 0
+                    <div class="flex-row-wrap">
-                        ? courseTags.map(tag => (
+                        {!selectedTag
-                              <div class="chip clickable" onClick={() => setSelectedTags([tag])}>
+                            ? courseTags.map(tag => (
-                                  {tag}
+                                  <div class="chip clickable" onClick={() => setSelectedTag(tag)}>
-                              </div>
+                                      {tag}
-                          ))
+                                  </div>
-                        : courseTags.map(tag => (
+                              ))
-                              <div
+                            : courseTags.map(tag => (
-                                  class={selectedTags.includes(tag) ? 'chip clickable' : 'chip clickable disabled'}
+                                  <div
-                                  onClick={() =>
+                                      class={tag === selectedTag ? 'chip clickable' : 'chip clickable disabled'}
-                                      setSelectedTags(
+                                      onClick={() => setSelectedTag(tag === selectedTag ? null : tag)}
-                                          selectedTags.includes(tag)
+                                  >
-                                              ? selectedTags.filter(t => t !== tag)
+                                      {tag}
-                                              : [...selectedTags, tag],
+                                  </div>
-                                      )
+                              ))}
-                                  }
+                    </div>
-                              >
-                                  {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 => (