#1002 [Redesign] Add1200 responsive breakpoint to Search Page

FrontEnd/src/components/Loader/Loader.module.css

@@ -1,4 +1,5 @@
 .loader__container {
   padding-top: 30%;
   min-height: var(--min-height-block-main);
+  width: 100%;
 }

FrontEnd/src/pages/CustomThemes/customTheme.js

@@ -50,6 +50,7 @@ const customTheme = {
       },
       List: {
         fontFamily: 'Geologica',
+        emptyTextPadding: 0,
       }
     },
     token: {

FrontEnd/src/pages/ProfileList/ProfileList.jsx

@@ -5,6 +5,7 @@ import CompanyCard from '../../components/CompanyCard/CompanyCard';
 
 export default function ProfileList({
   isAuthorized,
+  emptyText,
   current,
   items,
   profiles,
@@ -34,7 +35,7 @@ export default function ProfileList({
       grid={{
         justify: 'center',
         align: 'stretch',
-        gutter: [32, 24],
+        gutter: [24, 24],
         xs: 1,
         md: 2,
         xl: 3,
@@ -53,9 +54,13 @@ export default function ProfileList({
       }}
       dataSource={profiles}
       split={false}
-      locale={{emptyText: 'Жодна компанія не відповідає обраному фільтру.'}}
+      locale={{emptyText: emptyText}}
       renderItem={(item) => (
-        <List.Item key={item.id}>
+        <List.Item key={item.id}
+          style={{
+            marginBlockEnd: '0',
+          }}
+        >
           <CompanyCard
               isAuthorized={isAuthorized}
               profile={item}

FrontEnd/src/pages/ProfileList/ProfileListPage.jsx

@@ -222,7 +222,7 @@ export default function ProfileListPage({ isAuthorized, isSaved }) {
               <div className={css['company-list__content--items']}>
                 <ProfileList
                   isAuthorized={isAuthorized}
-                  isLoading={isLoading}
+                  emptyText={'Жодна компанія не відповідає обраному фільтру.'}
                   profiles={profiles}
                   items={fetchedProfiles?.total_items}
                   paginationFunc={handlePageChange}

FrontEnd/src/pages/ProfileList/ProfileListPage.module.css

@@ -76,7 +76,7 @@
   display: flex;
   align-self: center;
   flex-direction: column;
-  padding: 24px 16px 40px;
+  padding: 24px 27px 40px;
   gap: 20px;
 }
 
@@ -136,7 +136,7 @@
   }
 
   .company-list__content {
-    padding: 24px 32px 32px;
+    padding: 24px 35px 32px;
     gap: 32px;
   }
 
@@ -166,7 +166,7 @@
   }
 
   .company-list__content {
-    padding: 24px 104px 40px;
+    padding: 24px 107px 40px;
     gap: 32px;
   }
 

FrontEnd/src/pages/SearchPage/Search.jsx

@@ -1,35 +1,33 @@
-import axios from 'axios';
 import { useState, useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import SearchResults from './SearchField/SearchResults';
-import link_to_left from './img/link_to_left.svg';
-import link_to_right from './img/link_to_right.svg';
-import styles from './search.module.scss';
+import { useSearchParams } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import axios from 'axios';
 import useSWR from 'swr';
 
-const ITEMS_PER_PAGE = 100;
+import useWindowWidth from '../../hooks/useWindowWidth';
+import Loader from '../../components/Loader/Loader';
+import ProfileList from '../ProfileList/ProfileList';
+import styles from './Search.module.scss';
 
 export function Search({ isAuthorized }) {
   const [searchResults, setSearchResults] = useState([]);
-  const [searchPerformed, setSearchPerformed] = useState(false);
-
-  const location = useLocation();
-  const navigate = useNavigate();
-  const searchParams = new URLSearchParams(location.search);
+  const [searchParams, setSearchParams] = useSearchParams();
   const searchTerm = searchParams.get('name');
   const pageNumber = Number(searchParams.get('page')) || 1;
+  const [currentPage, setCurrentPage] = useState(pageNumber);
+  const [pageSize, setPageSize] = useState(16);
   const servedAddress = process.env.REACT_APP_BASE_API_URL;
-  const searchUrl = 'search';
 
-  const fetcher = async (url) => {
-    const response = await axios.get(url);
-    setSearchResults(response.data);
-  };
+  async function fetcher(url) {
+    return axios.get(url)
+    .then(res => res.data);
+  }
 
-  const { data: companylist, error } = useSWR(
-    `${servedAddress}/api/search/?name=${searchTerm}&ordering=name`,
-    fetcher
+  const { data: companylist, isLoading } = useSWR(
+    `${servedAddress}/api/search/?name=${searchTerm}&ordering=name&page_size=${pageSize}&page=${currentPage}`,
+    fetcher,
+    {onSuccess: (data) => setSearchResults(data.results)}
   );
 
   const changeCompanies = (id, isSaved) => {
@@ -42,116 +40,90 @@ export function Search({ isAuthorized }) {
     setSearchResults(newCompanies);
   };
 
-  useEffect(() => {
-    if (searchTerm) {
-      setSearchPerformed(true);
-    }
-  }, [searchTerm, servedAddress, searchUrl, companylist]);
+  const windowWidth = useWindowWidth();
 
   useEffect(() => {
-    setCurrentPage(pageNumber);
-  }, [pageNumber]);
-
-  const [currentPage, setCurrentPage] = useState(pageNumber);
-  const totalItems = searchResults.length;
-  const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
-
-  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
-  const endIndex = startIndex + ITEMS_PER_PAGE;
-  const displayedResults = searchResults.slice(startIndex, endIndex);
+    if (windowWidth < 768) {
+      setPageSize(4);
+    } else if (windowWidth >= 768 && windowWidth < 1200) {
+      setPageSize(16);
+    } else if (windowWidth >= 1200 && windowWidth < 1512) {
+      setPageSize(12);
+    } else if (windowWidth >= 1512) {
+      setPageSize(16);
+    }
+  }, [windowWidth]);
 
-  const handlePageChange = (newPage) => {
-    setCurrentPage(newPage);
+  const updateQueryParams = (newPage) => {
     searchParams.set('page', newPage);
-    navigate(`?${searchParams.toString()}`);
+    setSearchParams(searchParams);
   };
 
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+    updateQueryParams(page);
+  };
+
+  useEffect(() => {
+    if (companylist?.total_items === 0) {
+      setCurrentPage(1);
+      searchParams.delete('page');
+      setSearchParams(searchParams);
+    } else {
+      const totalPages = Math.ceil(companylist?.total_items / pageSize);
+      if (currentPage > totalPages) {
+        setCurrentPage(totalPages);
+        updateQueryParams(totalPages);
+      }
+    }
+  }, [companylist?.total_items, pageSize, currentPage]);
+
   return (
-    <div className={styles['main_block_outer']}>
-      <div className={styles['new-companies-main']}>
-        <div className={styles['new-companies-search_count']}>
-          {searchResults && (
-            <div className={styles['search-results']}>
-              <h3 className={styles['search_results_text']}>
-                Результати пошуку
-                <span className={styles['search_field_entered_value']}>
-                  {` “${searchTerm}” `}
-                </span>
-                : {searchResults.length > 0 ? searchResults.length : 0}
-              </h3>
-            </div>
-          )}
-        </div>
-        {!error && searchResults.length > 0 && (
+    <div className={styles['search-page__outer']}>
+      <div
+        className={classNames(
+          styles['search-page'],
+          { [styles['search-page__empty']]: companylist?.total_items === 0}
+        )}
+      >
+        {isLoading ?
+        <Loader/> : (
           <>
-            <SearchResults
-              results={searchResults}
-              searchPerformed={searchPerformed}
-              displayedResults={displayedResults}
-              isAuthorized={isAuthorized}
-              changeCompanies={changeCompanies}
-            />
-            <div className={styles['new-companies-result_pages']}>
-              {totalPages > 1 && (
-                <div className={styles['pagination']}>
-                  {currentPage > 1 && (
-                    <button onClick={() => handlePageChange(currentPage - 1)}>
-                      <img src={link_to_left} alt="Link to Left" />
-                    </button>
-                  )}
-                  {currentPage > 1 && (
-                    <>
-                      <button onClick={() => handlePageChange(1)}>1</button>
-                      {currentPage > 2 && (
-                        <span className={styles['ellipsis']}>...</span>
-                      )}
-                    </>
-                  )}
-                  {Array.from({ length: totalPages }, (_, i) => {
-                    if (
-                      i === 2 ||
-                      i === totalPages ||
-                      (i >= currentPage - 1 && i <= currentPage)
-                    ) {
-                      return (
-                        <button
-                          key={i}
-                          onClick={() => handlePageChange(i + 1)}
-                          className={currentPage === i + 1 ? styles['active'] : ''}
-                        >
-                          {i + 1}
-                        </button>
-                      );
-                    }
-                    return null;
-                  })}
-                  {currentPage < totalPages - 1 && (
-                    <>
-                      {currentPage < totalPages - 1 && (
-                        <span className={styles['ellipsis']}>...</span>
-                      )}
-                      <button onClick={() => handlePageChange(totalPages)}>
-                        {totalPages}
-                      </button>
-                    </>
-                  )}
-                  {currentPage < totalPages && (
-                    <button onClick={() => handlePageChange(currentPage + 1)}>
-                      <img src={link_to_right} alt="Link to Right" />
-                    </button>
-                  )}
+            <div className={styles['search-page__results-count']}>
+              {searchResults && (
+                <div className={styles['search-results']}>
+                  <h3 className={styles['search-results__text']}>
+                    Результати пошуку
+                    <span className={styles['search-field__entered-value']}>
+                      {` “${searchTerm}” `}
+                    </span>
+                    : {companylist?.total_items || 0}
+                  </h3>
                 </div>
               )}
             </div>
+            <div className={styles['search-list__content--items']}>
+              <ProfileList
+                isAuthorized={isAuthorized}
+                emptyText={' '}
+                profiles={searchResults}
+                items={companylist?.total_items}
+                paginationFunc={handlePageChange}
+                current={currentPage}
+                pageSize={pageSize}
+                changeCompanies={changeCompanies}
+              />
+            </div>
           </>
         )}
       </div>
-      {searchResults.length === 0 &&
-        <div className={styles['new-companies-main__error']}>
-          <p className={styles['search_result_error']}>
+      {companylist?.total_items === 0 &&
+        <div className={styles['search-page__error']}>
+          <p className={styles['search-result__error']}>
             Пошук не дав результатів
           </p>
-        </div>}
+        </div>
+      }
     </div>
   );
 }