Skip to content

Commit

Permalink
without endless request
Browse files Browse the repository at this point in the history
  • Loading branch information
@BelousSofiya
BelousSofiya committed Oct 20, 2023
1 parent 72c3028 commit d678197
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 72 deletions.
111 changes: 64 additions & 47 deletions FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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(
Expand All @@ -58,73 +97,51 @@ 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 (
<div className={styles['product-card']}>
<div className={styles['product-card__block']}>
<div className={styles['product-card__image-frame']}>
<div className={styles['company-card']}>
<div className={styles['company-card__block']}>
<div className={styles['company-card__image-frame']}>
<img
className={styles['product-card__image']}
className={styles['company-card__image']}
// src={companyData.banner_image}
src={`${process.env.PUBLIC_URL}/companies-logos/defaultcompanybanner.png`}
alt={companyData.name}
/>
</div>
<div className={styles['product-card__text-block']}>
<div className={styles['product-card__text-block__header']}>
<div className={styles['product-card__category-text']}>
<div className={styles['company-card__text-block']}>
<div className={styles['company-card__text-block__header']}>
<div className={styles['company-card__category-text']}>
{companyData.categories &&
companyData.categories
.map((category) => category.name)
.join(' ')}
</div>
<div className={styles['product-card__name-text']}>
<div className={styles['company-card__name-text']}>
<Link
className={styles['product-card__name-text_link']}
className={styles['company-card__name-text_link']}
to={`/profile/${companyData.id}`}
>
{companyData.name}
</Link>
<br />
</div>
</div>
<div className={styles['product-card__address-text']}>
<div className={styles['company-card__address-text']}>
{companyData.address}
</div>
<div className={styles['product-card__badges-block']}>
<div className={styles['product-card__badges']}>
<div className={styles['product-card__badge']}>
<div className={styles['product-card__badge-text']}>
<div className={styles['company-card__badges-block']}>
<div className={styles['company-card__badges']}>
<div className={styles['company-card__badge']}>
<div className={styles['company-card__badge-text']}>
{yearsOfExperiense} років досвіду
</div>
</div>
Expand All @@ -135,10 +152,10 @@ const CompanyCard = ({ companyData, isAuthorized }) => {
</div>
</div>
</div>
<div className={styles['product-card__logo']}>
<div className={styles['product-card__logo-ellipse']}>
<div className={styles['company-card__logo']}>
<div className={styles['company-card__logo-ellipse']}>
<img
className={styles['product-card__logo-image']}
className={styles['company-card__logo-image']}
src={`${process.env.PUBLIC_URL}/companies-logos/1.png`}
alt=""
/>
Expand Down
42 changes: 21 additions & 21 deletions FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import 'variables.css';

.product-card {
.company-card {
width: 360px;
display: block;
align-items: center;
Expand All @@ -9,27 +9,27 @@
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;
border-radius: 11px;
object-fit: cover;
opacity: 0.7;
}
.product-card__text-block {
.company-card__text-block {
display: flex;
padding: 20px 16.02px;
flex-direction: column;
Expand All @@ -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;
Expand All @@ -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);
Expand All @@ -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;
Expand All @@ -88,29 +88,29 @@
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;
align-items: center;
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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}

Expand Down
4 changes: 0 additions & 4 deletions FrontEnd/src/components/SearchPage/search_page.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,6 @@
font: Inter;
}

/* .search_result_error_search_value {
color: var(--main-style-signs-color);
}
*/
.frame-img-right {
position: absolute;
top: 30px;
Expand Down

0 comments on commit d678197

Please sign in to comment.