input working along the house filter

src/components/App.jsx

@@ -1,19 +1,21 @@
 import '../styles/App.scss';
 import '../styles/layout/_header.scss';
 import Header from './layout/Header';
+import Landing from './Landing';
 import CharacterDetail from './pages/CharacterDetail';
 import Footer from './layout/Footer';
-import PropTypes from 'prop-types'
 
 import { useState, useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
-import Landing from './Landing';
+
 
 function App() {
 
   //global variables
   const [characters, setCharacters] = useState([]);
   const [houseFilter, setHouseFilter] = useState('All');
+  const [searchInput, setSearchInput] = useState('');
+
   const imageNotFound = 'https://via.placeholder.com/210x295/ffffff/666666/?text=HarryPotter'
 
   //Code if there is no imagen
@@ -30,7 +32,7 @@ function App() {
       });
   }, []);
 
-  //events and functions
+  //events and functions - House filter
   const handleChangeHouse = (house) => {
     setHouseFilter(house);
     let path = 'characters/house/' + house;
@@ -47,6 +49,12 @@ function App() {
 
   }
 
+  //events and functions - Character filter
+  const handleChangeCharacterFilter = (searchInput) => {
+    setSearchInput(searchInput);
+  }
+
+  //events and functions - Character Detail 
   const findCharacter = (id) => {
 
     const characterToShow = characters.find(
@@ -55,8 +63,10 @@ function App() {
     );
     return characterToShow;
   };
-  console.log(houseFilter);
 
+  const filteredCharacters = characters.filter(character =>
+    character.name.toLowerCase().includes(searchInput.toLowerCase())
+  );
   //HTML code
   return (
     <>
@@ -68,6 +78,10 @@ function App() {
         <Routes>
           <Route path='/' element={<Landing
             characters={characters}
+            searchInput={searchInput}
+            filteredCharacters={filteredCharacters}
+            handleChangeCharacterFilter={handleChangeCharacterFilter}
+
             houseFilter={houseFilter}
             handleChangeHouse={handleChangeHouse} />} />
           <Route path='/detail/:id'
@@ -84,9 +98,4 @@ function App() {
   )
 }
 
-App.propType = {
-  characters: PropTypes.array.isRequired,
-  houseFilter: PropTypes.string.isRequired,
-  handleChangeHouse: PropTypes.func.isRequired,
-};
 export default App;

src/components/Landing.jsx

@@ -4,28 +4,33 @@ import HouseFilter from './filters/HouseFilter';
 import CharacterFilter from './filters/CharacterFilter';
 import CharacterList from './pages/CharacterList';
 
-function Landing({ characters, houseFilter, handleChangeHouse }) {
+function Landing({ filteredCharacters, houseFilter, handleChangeHouse, searchInput, handleChangeCharacterFilter }) {
 
 
     return (
         <>
             <section>
-                <CharacterFilter />
-                <HouseFilter houseFilter={houseFilter}
+                <CharacterFilter
+                    searchInput={searchInput}
+                    handleChangeCharacterFilter={handleChangeCharacterFilter} />
+                <HouseFilter
+                    houseFilter={houseFilter}
                     handleChangeHouse={handleChangeHouse} />
             </section>
             <section className='characters'>
-                <CharacterList characters={characters} />
+                <CharacterList characters={filteredCharacters}
+                />
             </section>
         </>
     )
 }
 Landing.propTypes = {
     characters: PropTypes.array.isRequired,
+    searchInput: PropTypes.string.isRequired,
     houseFilter: PropTypes.string.isRequired,
-    handleChangeHouse: PropTypes.func.isRequired
-}
-
-export default Landing;
-
+    filteredCharacters: PropTypes.array.isRequired,
+    handleChangeHouse: PropTypes.func.isRequired,
+    handleChangeCharacterFilter: PropTypes.func.isRequired
+};
 
+export default Landing;

src/components/filters/CharacterFilter.jsx

@@ -1,34 +1,39 @@
 import '../../styles/layout/_cardsSearch.scss';
+import PropTypes from 'prop-types';
 
-function CharacterFilter() {
+function CharacterFilter({ searchInput, handleChangeCharacterFilter }) {
 
-    //global variables
-
-
-
-    //code when the page load
-
-
-    //Search events and functions
+    //handle the input change
+    const handleInputChange = (ev) => {
+        const newValue = ev.target.value;
 
+        //trigger the search whenever the input changes
+        handleChangeCharacterFilter(newValue);
 
+    };
 
     //HTML code
     return (
         <>
             <section className="search__section">
                 <form className='form'>
                     <div>
-                        <label className='form__label'
-                        >Busca por personaje: </label>
+                        <label className='form__label'>Busca por personaje: </label>
                         <input className='form__input'
-                            type="text" name="search" id="search" />
+                            type="text"
+                            name="search" id="search"
+                            value={searchInput}
+                            onChange={handleInputChange} />
                     </div>
                 </form>
             </section>
         </>
 
     );
 }
+CharacterFilter.propTypes = {
+    handleChangeCharacterFilter: PropTypes.func.isRequired,
+    searchInput: PropTypes.string.isRequired,
+};
 
 export default CharacterFilter;

src/components/filters/HouseFilter.jsx

@@ -33,7 +33,7 @@ function HouseFilter({ houseFilter, handleChangeHouse }) {
     );
 }
 HouseFilter.propType = {
-    houseFilter: PropTypes.string.isRequired,
+    houseFilter: PropTypes.func.isRequired,
     handleChangeHouse: PropTypes.func.isRequired,
 };
 export default HouseFilter;

src/components/pages/CharacterDetail.jsx

@@ -32,9 +32,6 @@ function CharacterDetail({ findCharacter }) {
 }
 
 CharacterDetail.propTypes = {
-    findCharacter: PropTypes.func,
-    translateGender: PropTypes.string,
-    translateSpecie: PropTypes.string,
-    translateStatus: PropTypes.string,
+    findCharacter: PropTypes.func.isRequired,
 }
 export default CharacterDetail;