#1034 [Redesign] Update page size to10 for tablet screens

FrontEnd/src/constants/constants.js

@@ -3,3 +3,14 @@ export const PASSWORD_PATTERN = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8
 export const NAME_SURNAME_PATTERN = /^(?=.{2,50}$)[a-zA-Zа-щюяьА-ЩЮЯЬїЇіІєЄґҐ']+(\s[a-zA-Zа-щюяьА-ЩЮЯЬїЇіІєЄґҐ']+)*$/;
 export const COMPANY_NAME_PATTERN = /^.{2,100}$/;
 export const MESSAGE_PATTERN = /^.{10,}$/;
+export const SCREEN_WIDTH = {
+    tablet: 768,
+    smallDesktop: 1200,
+    desktop: 1512,
+};
+export const PAGE_SIZE = {
+    mobile: 4,
+    tablet: 10,
+    smallDesktop: 12,
+    desktop: 16,
+};

FrontEnd/src/pages/LandingPage/Companies/Companies.jsx

@@ -1,13 +1,16 @@
-import axios from 'axios';
 import { useState } from 'react';
-import useWindowWidth from '../../../hooks/useWindowWidth';
 import { Link } from 'react-router-dom';
-import styles from './Companies.module.css';
-import Loader from '../../../components/Loader/Loader';
-import CompanyCard from '../../../components/CompanyCard/CompanyCard';
 import PropTypes from 'prop-types';
-import useSWR from 'swr';
 import { Col, Row } from 'antd';
+import useSWR from 'swr';
+import axios from 'axios';
+
+import useWindowWidth from '../../../hooks/useWindowWidth';
+import { SCREEN_WIDTH } from '../../../constants/constants';
+import Loader from '../../../components/Loader/Loader';
+import CompanyCard from '../../../components/CompanyCard/CompanyCard';
+
+import styles from './Companies.module.css';
 
 const MainCompanies = ({ isAuthorized }) => {
   const baseUrl = process.env.REACT_APP_BASE_API_URL;
@@ -35,9 +38,9 @@ const MainCompanies = ({ isAuthorized }) => {
     setSearchResults(newCompanies);
   };
 
-  const linkText = windowWidth >= 768 ? 'Всі підприємства' : 'Всі';
-  const antdGutter = windowWidth >= 1200 ? [24, 24] : [0, 24];
-  const antdWrap = windowWidth < 1200;
+  const linkText = windowWidth >= SCREEN_WIDTH.tablet ? 'Всі підприємства' : 'Всі';
+  const antdGutter = windowWidth >= SCREEN_WIDTH.smallDesktop ? [24, 24] : [0, 24];
+  const antdWrap = windowWidth < SCREEN_WIDTH.smallDesktop;
 
   return (
     <div className={styles['new-companies-main']}>

FrontEnd/src/pages/ProfileList/ProfileListPage.jsx

@@ -3,6 +3,9 @@ import { useSearchParams } from 'react-router-dom';
 import axios from 'axios';
 import useSWR from 'swr';
 import useWindowWidth from '../../hooks/useWindowWidth';
+import { definPageSize } from '../../utils/definePageSize';
+import { PAGE_SIZE } from '../../constants/constants';
+import { SCREEN_WIDTH } from '../../constants/constants';
 
 import ErrorPage404 from '../ErrorPages/ErrorPage404';
 import Loader from '../../components/Loader/Loader';
@@ -34,23 +37,15 @@ export default function ProfileListPage({ isAuthorized, isSaved }) {
   const [profiles, setProfiles] = useState([]);
   const [filters, setFilters] = useState([]);
   const [currentPage, setCurrentPage] = useState(pageNumber);
-  const [pageSize, setPageSize] = useState(16);
+  const [pageSize, setPageSize] = useState(PAGE_SIZE.mobile);
   const [activeTab, setActiveTab] = useState(searchParams.get('companyType') || 'all');
   const [activeBtn, setActiveBtn] = useState(searchParams.get('activity') || 'all');
 
   const windowWidth = useWindowWidth();
-  const linkText = windowWidth >= 768 ? 'Усі підприємства' : 'Усі';
+  const linkText = windowWidth >= SCREEN_WIDTH.tablet ? 'Усі підприємства' : 'Усі';
 
   useEffect(() => {
-    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);
-    }
+    definPageSize(windowWidth, setPageSize);
   }, [windowWidth]);
 
   const [url, setUrl] = useState(

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

@@ -9,7 +9,7 @@
   width: 100vw;
   display: flex;
   flex-direction: column;
-
+  align-self: center;
 }
 
 .company-list__header--wrapper {
@@ -30,11 +30,10 @@
 }
 
 .company-list__title {
-  font-family: Geologica;
+  font-family: var(--font-main);
   font-weight: 700;
   line-height: 28.8px;
   letter-spacing: 0.01em;
-
 }
 
 .company-list__tabs {
@@ -76,8 +75,8 @@
   display: flex;
   align-self: center;
   flex-direction: column;
-  padding: 24px 27px 40px;
-  gap: 20px;
+  padding: 40px 15px;
+  gap: 16px;
 }
 
 .company-list__content--btns-wrapper {
@@ -123,6 +122,10 @@
   .company-list__content {
     width: 768px;
   }
+
+  .company-list__content {
+    padding: 24px 24px 48px;
+  }
 }
 
 @media only screen and (min-width: 1200px) {
@@ -136,7 +139,7 @@
   }
 
   .company-list__content {
-    padding: 24px 35px 32px;
+    padding: 24px 32px 64px;
     gap: 32px;
   }
 

FrontEnd/src/pages/ProfilePage/ProfilePage.jsx

@@ -1,12 +1,13 @@
-import css from './ProfilePage.module.css';
-import Description from './ProfilePageComponents/Description';
-import ProfileContent from './ProfilePageComponents/ProfileContent';
 import { useState, useEffect } from 'react';
 import { DirtyFormContext } from '../../context/DirtyFormContext';
-import Loader from '../../components/Loader/Loader';
 import { useAuth, useProfile } from '../../hooks';
 import useWindowWidth from '../../hooks/useWindowWidth';
+import { SCREEN_WIDTH } from '../../constants/constants';
+import Loader from '../../components/Loader/Loader';
+import Description from './ProfilePageComponents/Description';
+import ProfileContent from './ProfilePageComponents/ProfileContent';
 import EditProfileMobile from './Mobile/EditProfileMobile';
+import css from './ProfilePage.module.css';
 
 const ProfilePage = () => {
   const [formIsDirty, setFormIsDirty] = useState(false);
@@ -28,7 +29,7 @@ const ProfilePage = () => {
   }, [formIsDirty]);
 
 
-  if (windowWidth < 768) {
+  if (windowWidth < SCREEN_WIDTH.tablet) {
     return (
       <DirtyFormContext.Provider value={{ formIsDirty, setFormIsDirty }}>
         <EditProfileMobile/>

FrontEnd/src/pages/SearchPage/Search.jsx

@@ -6,6 +6,9 @@ import axios from 'axios';
 import useSWR from 'swr';
 
 import useWindowWidth from '../../hooks/useWindowWidth';
+import { definPageSize } from '../../utils/definePageSize';
+import { PAGE_SIZE } from '../../constants/constants';
+
 import Loader from '../../components/Loader/Loader';
 import ProfileList from '../ProfileList/ProfileList';
 import styles from './Search.module.scss';
@@ -16,7 +19,7 @@ export function Search({ isAuthorized }) {
   const searchTerm = searchParams.get('name');
   const pageNumber = Number(searchParams.get('page')) || 1;
   const [currentPage, setCurrentPage] = useState(pageNumber);
-  const [pageSize, setPageSize] = useState(16);
+  const [pageSize, setPageSize] = useState(PAGE_SIZE.mobile);
   const servedAddress = process.env.REACT_APP_BASE_API_URL;
 
   async function fetcher(url) {
@@ -43,15 +46,7 @@ export function Search({ isAuthorized }) {
   const windowWidth = useWindowWidth();
 
   useEffect(() => {
-    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);
-    }
+    definPageSize(windowWidth, setPageSize);
   }, [windowWidth]);
 
   const updateQueryParams = (newPage) => {

FrontEnd/src/utils/definePageSize.js

@@ -0,0 +1,15 @@
+import { SCREEN_WIDTH } from '../constants/constants';
+import { PAGE_SIZE } from '../constants/constants';
+
+export function definPageSize (windowWidth, setPageSize) {
+    if (windowWidth < SCREEN_WIDTH.tablet) {
+      return setPageSize(PAGE_SIZE.mobile);
+    }
+    if (windowWidth < SCREEN_WIDTH.smallDesktop) {
+      return setPageSize(PAGE_SIZE.tablet);
+    }
+    if (windowWidth < SCREEN_WIDTH.desktop) {
+      return setPageSize(PAGE_SIZE.smallDesktop);
+    }
+    return setPageSize(PAGE_SIZE.desktop);
+  }