diff --git a/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.js b/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.js index a2d57a383..28b1f1e0d 100644 --- a/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.js +++ b/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.js @@ -1,8 +1,10 @@ import { Link } from 'react-router-dom'; import { StarOutlined, StarFilled } from '@ant-design/icons'; import { useState, useEffect } from 'react'; +// import { useState } from 'react'; import { useSWRConfig } from 'swr'; import useSWRMutation from 'swr/mutation'; +// import useSWRImmutable from 'swr/immutable' // import useSWR from 'swr'; import axios from 'axios'; import styles from './CompanyCard.module.css'; @@ -30,11 +32,48 @@ const CompanyCard = ({ companyData, isAuthorized }) => { }).then(); } + async function getRequest(url) { + // if (isAuthorized.isAuth) { + const data = await axios + .get(url, { + withCredentials: true, + headers: { + Authorization: 'Token ' + authToken, + }, + }) + .then((response) => { + return response.data; + }); + const NewList = []; + for (let item of data.results) { + NewList.push(item['id']); + } + + setUsersSavedList(NewList); + if (usersSavedList.includes(companyData.id)) { + console.log( + companyData.id, + usersSavedList, + usersSavedList.includes(companyData.id) + ); + setStar(filledStar); + setIsSaved(true); + } else { + setIsSaved(false); + setStar(outlinedStar); + } + } + const { trigger } = useSWRMutation( `${process.env.REACT_APP_BASE_API_URL}/api/saved-list/`, sendRequest ); + const { trigger: triggerget } = useSWRMutation( + `${process.env.REACT_APP_BASE_API_URL}/api/profiles/?is_saved=True`, + getRequest + ); + const handleClick = async () => { try { await trigger( @@ -58,59 +97,37 @@ const CompanyCard = ({ companyData, isAuthorized }) => { ); useEffect(() => { - if (isAuthorized) - axios - .get( - `${process.env.REACT_APP_BASE_API_URL}/api/profiles/?is_saved=True`, - { - withCredentials: true, - headers: { - Authorization: 'Token ' + authToken, - }, - } - ) - .then((response) => { - const NewList = []; - for (let item of response.data.results) { - NewList.push(item['id']); - } - - setUsersSavedList(NewList); - if (usersSavedList.includes(companyData.id)) { - setStar(filledStar); - setIsSaved(true); - } else { - setIsSaved(false); - setStar(outlinedStar); - } - }) - .catch((error) => { - console.error('Error fetching search results:', error); - }); - }, [usersSavedList]); + if (isAuthorized.isAuth) { + try { + triggerget(); + } catch (error) { + console.error(error); + } + } + }, [companyData, isAuthorized, isSaved]); return ( -
-
-
+
+
+
{companyData.name}
-
-
-
+
+
+
{companyData.categories && companyData.categories .map((category) => category.name) .join(' ')}
-
+
{companyData.name} @@ -118,13 +135,13 @@ const CompanyCard = ({ companyData, isAuthorized }) => {
-
+
{companyData.address}
-
-
-
-
+
+
+
+
{yearsOfExperiense} років досвіду
@@ -135,10 +152,10 @@ const CompanyCard = ({ companyData, isAuthorized }) => {
-
-
+
+
diff --git a/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.module.css b/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.module.css index a98db543c..cc342f8fb 100644 --- a/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.module.css +++ b/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.module.css @@ -1,6 +1,6 @@ @import 'variables.css'; -.product-card { +.company-card { width: 360px; display: block; align-items: center; @@ -9,19 +9,19 @@ transition: transform 0.2s ease; position: relative; } -.product-card:hover { +.company-card:hover { transform: scale(1.1); } -.product-card__block { +.company-card__block { display: flex; flex-direction: column; align-items: flex-start; } -.product-card__image-frame { +.company-card__image-frame { width: 360px; height: 220px; } -.product-card__image { +.company-card__image { width: 360px; height: 290px; flex-shrink: 0; @@ -29,7 +29,7 @@ object-fit: cover; opacity: 0.7; } -.product-card__text-block { +.company-card__text-block { display: flex; padding: 20px 16.02px; flex-direction: column; @@ -38,13 +38,13 @@ border-radius: 0 0 12px 12px; background: var(--main_light-color); } -.product-card__text-block__header { +.company-card__text-block__header { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } -.product-card__category-text { +.company-card__category-text { color: var(--companies-card-lover-text); text-align: center; font-family: Inter, sans-serif; @@ -54,7 +54,7 @@ line-height: 120%; /* 19.2px */ text-align: left; } -.product-card__name-text { +.company-card__name-text { width: 328px; height: 48px; color: var(--text-color); @@ -67,16 +67,16 @@ text-align: left; } -.product-card__name-text_link { +.company-card__name-text_link { text-decoration: none; /* delete underline */ color: var(--text-color); } -.product-card__name-text_link:visited { +.company-card__name-text_link:visited { color: var(--text-color); } -.product-card__address-text { +.company-card__address-text { width: 328px; color: var(--companies-card-address); font-feature-settings: 'calt' off; @@ -88,21 +88,21 @@ letter-spacing: -0.14px; text-align: left; } -.product-card__badges-block { +.company-card__badges-block { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } -.product-card__badges { +.company-card__badges { display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--main_light-color); } -.product-card__badge { +.company-card__badge { display: flex; padding: 2px 8px; justify-content: center; @@ -110,7 +110,7 @@ border-radius: 100px; background: var(--pagination-style-color); } -.product-card__badge-text { +.company-card__badge-text { color: var(--main_light-color); text-align: center; font-feature-settings: 'calt' off; @@ -121,14 +121,14 @@ line-height: 16px; /* 160% */ text-transform: uppercase; } -.product-card__logo { +.company-card__logo { width: 64px; height: 64px; position: absolute; right: 16px; bottom: 159.5px; } -.product-card__logo-ellipse { +.company-card__logo-ellipse { width: 64px; height: 64px; flex-shrink: 0; @@ -138,7 +138,7 @@ border-radius: 9999px; box-shadow: 0 0 2px rgba(65, 64, 69, 0.2); } -.product-card__logo-image { +.company-card__logo-image { width: 54px; height: 54px; flex-shrink: 0; @@ -149,13 +149,13 @@ position: absolute; } -.product-card__buttons { +.company-card__buttons { color: var(--companies-card-button); border: none; background-color: var(--main_light-color); } -.product-card__buttons:hover { +.company-card__buttons:hover { cursor: pointer; } diff --git a/FrontEnd/src/components/SearchPage/search_page.module.css b/FrontEnd/src/components/SearchPage/search_page.module.css index 67dd1f2c4..a7f55246c 100644 --- a/FrontEnd/src/components/SearchPage/search_page.module.css +++ b/FrontEnd/src/components/SearchPage/search_page.module.css @@ -37,10 +37,6 @@ font: Inter; } -/* .search_result_error_search_value { - color: var(--main-style-signs-color); -} - */ .frame-img-right { position: absolute; top: 30px;