From 82e70bf8b3bd3555948a291c2f0826b0aa94f338 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 26 May 2025 08:45:19 +0000
Subject: [PATCH] fix: Prevent empty values in PublicHome select filters

This commit addresses an error where `Select.Item` components in the
PublicHome page could receive an empty string as a value if a snippet's
language or tag data contained an empty string.

The `PublicHome.tsx` component has been updated to filter out any empty
or whitespace-only strings from `snippet.language` or items in
`snippet.tags` before adding them to the sets of available filter options.
This ensures all `Select.Item` components receive valid, non-empty values,
resolving the "A <Select.Item /> must have a value prop that is not an
empty string" error.

The `ALL_ITEMS_VALUE` constant (`_ALL_`) for the "All Languages" / "All Tags"
options remains in place and functions as intended.
---
 client/src/pages/PublicHome.tsx | 32 ++++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/client/src/pages/PublicHome.tsx b/client/src/pages/PublicHome.tsx
index 7010dc2..658b5c9 100644
--- a/client/src/pages/PublicHome.tsx
+++ b/client/src/pages/PublicHome.tsx
@@ -8,6 +8,8 @@ import { Button } from '@/components/ui/button'; // Adjust path
 import { type Snippet } from '@shared/schema'; // Adjust path
 import Layout from '@/components/Layout'; // Adjust path for Layout component
 
+const ALL_ITEMS_VALUE = "_ALL_"; // Define placeholder for "All" options
+
 const PublicHome: React.FC = () => {
   const [snippets, setSnippets] = useState<Snippet[]>([]);
   const [allSnippets, setAllSnippets] = useState<Snippet[]>([]); // Store all fetched snippets for client-side filtering
@@ -52,11 +54,15 @@ const PublicHome: React.FC = () => {
         const languages = new Set<string>();
         const tags = new Set<string>();
         data.forEach(snippet => {
-          if (snippet.language) languages.add(snippet.language);
-          snippet.tags?.forEach(tag => tags.add(tag));
+          if (snippet.language && snippet.language.trim() !== '') { languages.add(snippet.language); }
+          snippet.tags?.forEach(tag => {
+            if (tag && tag.trim() !== '') {
+              tags.add(tag);
+            }
+          });
         });
-        setAvailableLanguages(['', ...Array.from(languages)]); // Add empty option for "All"
-        setAvailableTags(['', ...Array.from(tags)]); // Add empty option for "All"
+        setAvailableLanguages([ALL_ITEMS_VALUE, ...Array.from(languages)]);
+        setAvailableTags([ALL_ITEMS_VALUE, ...Array.from(tags)]);
 
       } catch (err) {
         setError(err instanceof Error ? err.message : 'An unknown error occurred.');
@@ -80,11 +86,11 @@ const PublicHome: React.FC = () => {
       );
     }
 
-    if (selectedLanguage) {
+    if (selectedLanguage && selectedLanguage !== ALL_ITEMS_VALUE) {
       filtered = filtered.filter(snippet => snippet.language === selectedLanguage);
     }
 
-    if (selectedTag) {
+    if (selectedTag && selectedTag !== ALL_ITEMS_VALUE) {
       filtered = filtered.filter(snippet => snippet.tags?.includes(selectedTag));
     }
 
@@ -145,8 +151,11 @@ const PublicHome: React.FC = () => {
                 </SelectTrigger>
                 <SelectContent>
                   {availableLanguages.map(lang => (
-                    <SelectItem key={lang || 'all-langs'} value={lang}>
-                      {lang || 'All Languages'}
+                    <SelectItem 
+                      key={lang === ALL_ITEMS_VALUE ? 'all-langs-key' : lang} 
+                      value={lang}
+                    >
+                      {lang === ALL_ITEMS_VALUE ? 'All Languages' : lang}
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -163,8 +172,11 @@ const PublicHome: React.FC = () => {
                 </SelectTrigger>
                 <SelectContent>
                   {availableTags.map(tag => (
-                    <SelectItem key={tag || 'all-tags'} value={tag}>
-                      {tag || 'All Tags'}
+                    <SelectItem 
+                      key={tag === ALL_ITEMS_VALUE ? 'all-tags-key' : tag} 
+                      value={tag}
+                    >
+                      {tag === ALL_ITEMS_VALUE ? 'All Tags' : tag}
                     </SelectItem>
                   ))}
                 </SelectContent>