Search, Filters and Favorites

src/components/CharacterCardSmall.css

@@ -87,6 +87,10 @@
     cursor: pointer;
 }
 
+.star-favorite {
+    filter: brightness(0) saturate(100%) invert(84%) sepia(85%) saturate(829%) hue-rotate(359deg) brightness(105%) contrast(104%);
+}
+
 .details-button{
     background-color: white;
     color: black;

src/components/CharacterCardSmall.tsx

@@ -5,23 +5,25 @@ import StarShape from '../assets/star.svg'
 type CharacterCardSmallProps = {
     name: string;
     image: string;
+    isFavorite: boolean;
+    onToggleFavorite: () => void;
     onDetails: () => void;
 };
 
-export default function CharacterCardSmall({name, image, onDetails}: CharacterCardSmallProps){
-    return(
+export default function CharacterCardSmall({ name, image, isFavorite, onToggleFavorite, onDetails }: CharacterCardSmallProps) {
+    return (
             <article className='card-content'>
                 <img src={CardShape} alt="" className='card-shape'/>
                 <div className='character-info'>
                     <img src={image} alt="character image" className='character-image'/>
                     <p className='character-name'>{name}</p>
                     <div className='card-buttons'>
                         <button type='button' className='details-button' onClick={onDetails}>Details</button>
-                        <button type='button' className='favorite-button'>
-                            <img src={StarShape} alt="" className='star' aria-label={`Add ${name} to favorites`}/>
+                        <button type='button' className='favorite-button' onClick={onToggleFavorite} aria-label={isFavorite ? `Remove ${name} from favorites` : `Add ${name} to favorites`}>
+                            <img src={StarShape} alt="" className={`star ${isFavorite ? 'star-favorite' : ''}`}/>
                         </button>
                     </div>
                 </div>
             </article>
     )
-}
+}

src/pages/CharactersPage.tsx

@@ -7,104 +7,151 @@ import SearchIcon from "../assets/search.svg"
 
 import type { Character } from "../types/Character";
 
-const filters = [
-    {title: 'Gender', options: ['Female', 'Male', 'Unknown'] },
-    {title: 'Species', options: ['Human', 'Aileen', 'Unknown']},
-    {title: 'Status', options: ['Alive', 'Dead', 'Unknown']}
+type FilterCategory = "gender" | "species" | "status";
+
+const filters: { title: string, key: FilterCategory, options: string[] }[] = [
+    { title: 'Gender', key: 'gender', options: ['Female', 'Male', 'Unknown'] },
+    { title: 'Species', key: 'species', options: ['Human', 'Alien', 'Unknown'] },
+    { title: 'Status', key: 'status', options: ['Alive', 'Dead', 'Unknown'] }
 ];
 
-export default function CharactersPage(){
+export default function CharactersPage() {
 
     const [characters, setCharacters] = useState<Character[]>([]);
     const [selectedCharacter, setSelectedCharacter] = useState<Character | null>(null);
-
+    const [searchQuery, setsearchQuery] = useState("");
+    const [selectedFilters, setSelectedFilters] = useState<Record<FilterCategory, string[]>>({
+        gender: [],
+        species: [],
+        status: []
+    });
+    const [favoriteCharacterIds, setFavoriteCharacterIds] = useState<number[]>([]);
+
     useEffect(() => {
-        async function fetchCharacters(){
-            try{
+        async function fetchCharacters() {
+            try {
                 const response = await fetch("https://rickandmortyapi.com/api/character");
-    
+
                 if (!response.ok) {
                     throw new Error(`Could not fetch characters: ${response.status}`)
                 }
-    
+
                 const data = await response.json();
                 setCharacters(data.results);
-            } 
-            catch(error) {
+            }
+            catch (error) {
                 console.error(error);
             }
         }
         fetchCharacters()
     }, [])
 
-    function showPreviousCharacter(){
+    const filteredCharacters = characters.filter((character) => {
+        const matchesSearch = character.name.toLowerCase().includes(searchQuery.toLowerCase());
+        const matchesFilters = filters.every((filter) => {
+            const selectedOptions = selectedFilters[filter.key];
+
+            if (selectedOptions.length === 0) {
+                return true;
+            }
+
+            return selectedOptions.includes(character[filter.key].toLowerCase());
+        });
+
+        return matchesSearch && matchesFilters;
+    });
+
+    function handleFilterChange(category: FilterCategory, value: string, checked: boolean) {
+        setSelectedFilters((previousFilters) => ({
+            ...previousFilters,
+            [category]: checked
+                ? [...previousFilters[category], value]
+                : previousFilters[category].filter((selectedValue) => selectedValue !== value)
+        }));
+    }
+
+    function handleToggleFavorite(characterId: number) {
+        setFavoriteCharacterIds((previousFavorites) =>
+            previousFavorites.includes(characterId)
+                ? previousFavorites.filter((id) => id !== characterId)
+                : [...previousFavorites, characterId]
+        );
+    }
+
+    function showPreviousCharacter() {
         if (!selectedCharacter) return;
 
-        const currentIndex = characters.findIndex(
+        const currentIndex = filteredCharacters.findIndex(
             (character) => character.id === selectedCharacter.id
         );
 
+        if (currentIndex === -1) return;
+
         const previousIndex =
-            currentIndex === 0 ? characters.length - 1 : currentIndex - 1;
- 
-        setSelectedCharacter(characters[previousIndex]);
+            currentIndex === 0 ? filteredCharacters.length - 1 : currentIndex - 1;
+
+        setSelectedCharacter(filteredCharacters[previousIndex]);
     }
 
-    function showNextCharacter(){
+    function showNextCharacter() {
         if (!selectedCharacter) return;
 
-        const currentIndex = characters.findIndex(
+        const currentIndex = filteredCharacters.findIndex(
             (character) => character.id === selectedCharacter.id
         );
 
+        if (currentIndex === -1) return;
+
         const nextIndex =
-            currentIndex === characters.length - 1 ? 0 : currentIndex + 1;
+            currentIndex === filteredCharacters.length - 1 ? 0 : currentIndex + 1;
 
-        setSelectedCharacter(characters[nextIndex]);
+        setSelectedCharacter(filteredCharacters[nextIndex]);
     }
 
-    return(
-            <main className="content">
-                <section className='search-area' aria-label='Characters'>
-                    <form className="searchbar">
-                        <input type="search" id='character-search' name='search' className="searchfield" placeholder="Enter character name..."/>
-                        <button type="submit" className="search-button">
-                            <img src={SearchIcon} alt="" className='search-icon'/>
-                        </button>
-                    </form>
-                    <section className='character-cards'>
-                        {characters.map((character) => (
-                            <CharacterCardSmall
-                                key={character.id}
-                                name={character.name}
-                                image={character.image}
-                                onDetails={() => setSelectedCharacter(character)}
-                            />
-                        ))}
-                    </section>
+    return (
+        <main className="content">
+            <section className='search-area' aria-label='Characters'>
+                <form className="searchbar" onSubmit={(event) => event.preventDefault()}>
+                    <input type="search" id='character-search' name='search' className="searchfield" placeholder="Enter character name..." value={searchQuery} onChange={(event) => setsearchQuery(event.target.value)} />
+                    <button type="submit" className="search-button">
+                        <img src={SearchIcon} alt="" className='search-icon' />
+                    </button>
+                </form>
+                <section className='character-cards'>
+                    {filteredCharacters.map((character) => (
+                        <CharacterCardSmall
+                            key={character.id}
+                            name={character.name}
+                            image={character.image}
+                            isFavorite={favoriteCharacterIds.includes(character.id)}
+                            onToggleFavorite={() => handleToggleFavorite(character.id)}
+                            onDetails={() => setSelectedCharacter(character)}
+                        />
+                    ))}
                 </section>
-                <div className='filter-area' aria-label='Filters'>
-                    <aside className='filter-group'>
-                        {filters.map((filter) => (
-                            <fieldset key={filter.title} className='filter-group'>
-                                <legend>{filter.title}</legend>
-                                {filter.options.map((option) => (
-                                    <label key={option} className='checkbox-option'>
-                                        <input type="checkbox" name={filter.title.toLowerCase()} value={option.toLowerCase()}/> {option}
-                                    </label>
-                                ))}
-                            </fieldset>
-                        ))}
-                    </aside>
-                </div>
-                {selectedCharacter && (
-                    <CharacterDetailCard
-                        character={selectedCharacter}
-                        onClose={() => setSelectedCharacter(null)}
-                        onPrevious={showPreviousCharacter}
-                        onNext={showNextCharacter}
-                    />
-                )}
-            </main>
+            </section>
+            <div className='filter-area' aria-label='Filters'>
+                <aside className='filter-group'>
+                    {filters.map((filter) => (
+                        <fieldset key={filter.title} className='filter-group'>
+                            <legend>{filter.title}</legend>
+                            {filter.options.map((option) => (
+                                <label key={option} className='checkbox-option'>
+                                    <input type="checkbox" name={filter.key} value={option.toLowerCase()} checked={selectedFilters[filter.key].includes(option.toLowerCase())} onChange={(event) => handleFilterChange(filter.key, event.target.value, event.target.checked)} /> {option}
+                                </label>
+                            ))}
+                        </fieldset>
+                    ))}
+                </aside>
+            </div>
+            {selectedCharacter && (
+                <CharacterDetailCard
+                    character={selectedCharacter}
+                    onClose={() => setSelectedCharacter(null)}
+                    onPrevious={showPreviousCharacter}
+                    onNext={showNextCharacter}
+                />
+            )}
+        </main>
     )
-}
+}