+ // Only add parameters for non-empty filters
+ if (selectedLibraries.size > 0) {
+ selectedLibraries.forEach(lib => {
+ newParams.append("lib", lib.toString());
+ });
+ }
+
+ if (selectedDevelopers.size > 0) {
+ selectedDevelopers.forEach(dev => {
+ newParams.append("dev", dev);
+ });
+ }
+
+ if (selectedGenres.size > 0) {
+ selectedGenres.forEach(genre => {
+ newParams.append("genre", genre);
+ });
+ }
+
+ if (selectedThemes.size > 0) {
+ selectedThemes.forEach(theme => {
+ newParams.append("theme", theme);
+ });
+ }
+
+ if (selectedFeatures.size > 0) {
+ selectedFeatures.forEach(feature => {
+ newParams.append("feature", feature);
+ });
+ }
+
+ if (selectedPerspectives.size > 0) {
+ selectedPerspectives.forEach(perspective => {
+ newParams.append("perspective", perspective);
+ });
+ }
+
+ setSearchParams(newParams);
+ }, [searchTerm, selectedLibraries, selectedDevelopers, selectedGenres,
+ selectedThemes, selectedFeatures, selectedPerspectives]);
+
+ const filteredGames = useMemo(() => filterGames(), [
+ games, searchTerm,
+ selectedLibraries, selectedDevelopers,
+ selectedGenres, selectedThemes,
+ selectedFeatures, selectedPerspectives
+ ]);
+
+ function filterGames(): GameDto[] {
+ let filtered = games;
+
+ // Apply text search filter if term exists
+ if (searchTerm !== "") {
+ const fzf = new Fzf(filtered, {
+ selector: (game: GameDto) => game.title
+ });
+ filtered = fzf.find(searchTerm).map(result => result.item);
+ }
+
+ // Apply library filter
+ if (selectedLibraries.size > 0) {
+ filtered = filtered.filter(game => selectedLibraries.has(game.libraryId.toString()));
+ }
+
+ // Apply developer filter
+ if (selectedDevelopers.size > 0) {
+ filtered = filtered.filter(game =>
+ game.developers?.some(developer => selectedDevelopers.has(developer))
+ );
+ }
+
+ // Apply genre filter
+ if (selectedGenres.size > 0) {
+ filtered = filtered.filter(game =>
+ game.genres?.some(genre => selectedGenres.has(genre))
+ );
+ }
+
+ // Apply theme filter
+ if (selectedThemes.size > 0) {
+ filtered = filtered.filter(game =>
+ game.themes?.some(theme => selectedThemes.has(theme))
+ );
+ }
+
+ // Apply feature filter
+ if (selectedFeatures.size > 0) {
+ filtered = filtered.filter(game =>
+ game.features?.some(feature => selectedFeatures.has(feature))
+ );
+ }
+
+ // Apply perspective filter
+ if (selectedPerspectives.size > 0) {
+ filtered = filtered.filter(game =>
+ game.perspectives?.some(perspective => selectedPerspectives.has(perspective))
+ );
+ }
+
+ return filtered;
+ }
+
+ return
}
type="search"
- value={term}
- onChange={updateSearchParam}
+ value={searchTerm}
+ isClearable
+ onChange={(event) => setSearchTerm(event.target.value)}
+ onClear={() => setSearchTerm("")}
/>
+
+
+
+
+
+
+
+
+
+
+ {filteredGames.length === 0 && (
+
+ No games found matching your filters
+
+ )}
+
}
\ No newline at end of file