diff --git a/FrontEnd/src/constants/constants.js b/FrontEnd/src/constants/constants.js index 01bd45b12..cf55d6aef 100644 --- a/FrontEnd/src/constants/constants.js +++ b/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, +}; diff --git a/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx b/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx index a94ed20b5..a02362d11 100644 --- a/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx +++ b/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 (
diff --git a/FrontEnd/src/pages/ProfileList/ProfileListPage.jsx b/FrontEnd/src/pages/ProfileList/ProfileListPage.jsx index 032a247f4..409a53a1d 100644 --- a/FrontEnd/src/pages/ProfileList/ProfileListPage.jsx +++ b/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( diff --git a/FrontEnd/src/pages/ProfileList/ProfileListPage.module.css b/FrontEnd/src/pages/ProfileList/ProfileListPage.module.css index bacee63c6..1b266d718 100644 --- a/FrontEnd/src/pages/ProfileList/ProfileListPage.module.css +++ b/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; } diff --git a/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx b/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx index e36aff560..f4a7093dc 100644 --- a/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx +++ b/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 ( diff --git a/FrontEnd/src/pages/SearchPage/Search.jsx b/FrontEnd/src/pages/SearchPage/Search.jsx index 055583d47..69992c4e4 100644 --- a/FrontEnd/src/pages/SearchPage/Search.jsx +++ b/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) => { diff --git a/FrontEnd/src/utils/definePageSize.js b/FrontEnd/src/utils/definePageSize.js new file mode 100644 index 000000000..9e397b46f --- /dev/null +++ b/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); + }