search fixes

src/App.tsx

@@ -18,14 +18,6 @@ import { Cart } from './pages/CartPage/Cart';
 import { useLocalStorage } from './helpers/useLocalStorage';
 import { useAppSelector } from './app/hooks';
 
-const visiblePhones = (query: string, phones: Phone[]) => {
-  const formattedQuery = query.trim().toLowerCase();
-
-  return phones.filter(
-    phone => phone.name.toLowerCase().includes(formattedQuery),
-  );
-};
-
 const visibleLikedPhones = (query: string, phones: Phone[]) => {
   const formattedQuery = query.trim().toLowerCase();
 
@@ -64,7 +56,6 @@ const App = () => {
     localStorage.setItem('cartItems', JSON.stringify(cartProducts));
   }, [cartProducts]);
 
-  const visiblePhonesItems = visiblePhones(searchQuery, phones);
   const visibleLikedItems = visibleLikedPhones(searchQuery, likedProducts);
 
   return (
@@ -102,7 +93,7 @@ const App = () => {
                   index
                   element={(
                     <PhonesPage
-                      phones={visiblePhonesItems}
+                      phones={phones}
                       setPhones={setPhones}
                       likedProducts={likedProducts}
                       setLikedProducts={setLikedProducts}

src/components/Search/Search.tsx

@@ -33,7 +33,7 @@ export const Search: React.FC = () => {
   }
 
   const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const query = event.target.value.trim().toLowerCase();
+    const query = event.target.value.toLowerCase();
 
     dispatch(setQuery(query));
   };

src/pages/PhonesPage/PhonesPage.tsx

@@ -7,6 +7,7 @@ import { Phone } from '../../types/Phone';
 import { CartItem } from '../../types/CartItem';
 import './PhonesPage.scss';
 import { NoResults } from '../NoResultsPage/NoResults';
+import { useAppSelector } from '../../app/hooks';
 
 type Props = {
   phones: Phone[],
@@ -17,14 +18,25 @@ type Props = {
   setCartProducts: React.Dispatch<React.SetStateAction<CartItem[]>>,
 };
 
-const getSortedPhones = (
+const getSortedAndFilteredPhones = (
   phones: Phone[],
   sortOption: string,
   currentPage: number,
   itemsPerPage: string,
+  searchQuery: string
 ) => {
   let visiblePhones = [...phones];
 
+  if (searchQuery) {
+    const formattedQuery = searchQuery.trim().toLowerCase();
+    const searchWords = formattedQuery.split(/\s+/);
+
+    return phones.filter(phone => {
+      const phoneName = phone.name.toLowerCase();
+      return searchWords.every(word => phoneName.includes(word));
+    });
+  }
+
   visiblePhones.sort((a: Phone, b: Phone) => {
     if (sortOption === 'name') {
       return a.name.localeCompare(b.name);
@@ -62,15 +74,20 @@ export const PhonesPage: React.FC<Props> = ({
   const [itemsPerPage, setItemsPerPage] = useState('all');
   const [sortOption, setSortOption] = useState('name');
   const [currentPage, setCurrentPage] = useState(1);
-
-  const visiblePhones = getSortedPhones(
-    phones, sortOption, currentPage, itemsPerPage,
+  const searchQuery = useAppSelector((state) => state.search.query).trim();
+
+  const visiblePhones = getSortedAndFilteredPhones(
+    phones,
+    sortOption,
+    currentPage,
+    itemsPerPage,
+    searchQuery
   );
 
   return (
     <>
       <div className="phones-page">
-        {!phones.length ? <NoResults />
+        {!visiblePhones.length ? <NoResults />
           : (
             <>
               <MainNavigation />
@@ -81,7 +98,7 @@ export const PhonesPage: React.FC<Props> = ({
                 </h1>
 
                 <p className="phones-page__subtitle">
-                  {`${phones.length} models`}
+                  {`${visiblePhones.length} models`}
                 </p>
 
                 <Selection