- 
-
- );
+ const handleSearch = (searchTerm, searchPage) => {
+ if (searchTerm.trim() !== '') {
+ navigate(`/${searchPage}/?name=${searchTerm}`);
+ }
+ };
+ return (
+
-
-
-
+
+ );
}
export default SearchBox;
diff --git a/FrontEnd/src/components/HeaderFooter/header/navbar/SearchBox.module.css b/FrontEnd/src/components/HeaderFooter/header/navbar/SearchBox.module.css
index e3e4f4c7..e289630f 100644
--- a/FrontEnd/src/components/HeaderFooter/header/navbar/SearchBox.module.css
+++ b/FrontEnd/src/components/HeaderFooter/header/navbar/SearchBox.module.css
@@ -1,56 +1,55 @@
.header-search-box {
- display: flex;
- align-items: center;
- flex-shrink: 0;
- width: 264px;
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ width: 264px;
- border-radius: 2px;
- border: 1px solid #D9D9D9;
- background: #FFF;
+ border-radius: 2px;
+ border: 1px solid #d9d9d9;
+ background: #fff;
}
.header-search-form {
- display: flex;
- padding: 4px 12px;
- align-items: flex-start;
- gap: 10px;
- flex: 1 0 0;
+ display: flex;
+ padding: 4px 12px;
+ align-items: flex-start;
+ gap: 10px;
+ flex: 1 0 0;
}
.header-search-form__input {
- display: flex;
- padding: 1px 0px;
- align-items: flex-start;
- gap: 10px;
- flex: 1 0 0;
- border: none;
+ display: flex;
+ padding: 1px 0px;
+ align-items: flex-start;
+ gap: 10px;
+ flex: 1 0 0;
+ border: none;
}
.header-search-form__addon {
- display: flex;
- padding: 9px;
- width: 14px;
- height: 14px;
- justify-content: center;
- align-items: center;
- gap: 8px;
- align-self: stretch;
- border-left: 1px solid #D9D9D9;;
+ background-color: transparent;
+ cursor: pointer;
+ border: 1px solid rgba(0, 0, 0, 0.25);
}
-.header-search-form__input::placeholder {
- color: rgba(0, 0, 0, 0.25);
- font-feature-settings: 'calt' off;
+.header-search-form__addon img {
+ width: 20px;
+ height: 20px;
+}
- font-family: Inter;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 20px;
- letter-spacing: -0.14px;
+.header-search-form__input::placeholder {
+ color: rgba(0, 0, 0, 0.25);
+ font-feature-settings: 'calt' off;
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: -0.14px;
}
-textarea:focus, .header-search-form__input:focus{
- border: none;
- outline: none;
+textarea:focus,
+.header-search-form__input:focus {
+ border: none;
+ outline: none;
}
diff --git a/FrontEnd/src/components/SearchPage/Search.js b/FrontEnd/src/components/SearchPage/Search.js
new file mode 100644
index 00000000..312a8053
--- /dev/null
+++ b/FrontEnd/src/components/SearchPage/Search.js
@@ -0,0 +1,165 @@
+import axios from 'axios';
+import { useSWRConfig } from 'swr';
+import useSWRMutation from 'swr/mutation';
+import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import BreadCrumbs from '../BreadCrumbs/BreadCrumbs';
+import SearchResults from './search_field/SearchResults';
+import frame42 from './img/frame42.png';
+import link_to_left from './img/link_to_left.svg';
+import link_to_right from './img/link_to_right.svg';
+import styles from './search_page.module.css';
+import PropTypes from 'prop-types';
+
+const ITEMS_PER_PAGE = 6;
+
+export function Search({ isAuthorized }) {
+ Search.propTypes = {
+ isAuthorized: PropTypes.any.isRequired,
+ };
+
+ const [searchResults, setSearchResults] = useState([]);
+ const [searchPerformed, setSearchPerformed] = useState(false);
+ const [error, setError] = useState(null);
+
+ const location = useLocation();
+ const searchParams = new URLSearchParams(location.search);
+ const searchTerm = searchParams.get('name');
+ const servedAddress = process.env.REACT_APP_BASE_API_URL;
+ const searchUrl = 'search';
+ const { mutate } = useSWRConfig();
+
+ const fetcher = (url) => axios.get(url).then((res) => res.data);
+
+ async function getRequest(url) {
+ const data = await fetcher(url);
+ setSearchResults(data);
+ setSearchPerformed(true);
+ setError(null);
+ }
+
+ const { trigger } = useSWRMutation(
+ `${servedAddress}/api/search/?name=${searchTerm}`,
+ getRequest
+ );
+
+ mutate((key) => typeof key === 'string' && key.startsWith('/api/search/'), {
+ revalidate: true,
+ });
+
+ useEffect(() => {
+ if (searchTerm) {
+ try {
+ trigger();
+ } catch (error) {
+ console.error(error);
+ }
+ }
+ }, [searchTerm, servedAddress, searchUrl]);
+
+ const [currentPage, setCurrentPage] = useState(1);
+ 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);
+
+ const handlePageChange = (newPage) => {
+ setCurrentPage(newPage);
+ };
+
+ return (
+
+ setSearchTerm(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ handleSearch(searchTerm, searchPage);
+ }
+ }}
+ />
+
+
+
+
+ );
+}
diff --git a/FrontEnd/src/components/SearchPage/img/frame42.png b/FrontEnd/src/components/SearchPage/img/frame42.png
new file mode 100644
index 00000000..e197f19d
Binary files /dev/null and b/FrontEnd/src/components/SearchPage/img/frame42.png differ
diff --git a/FrontEnd/src/components/SearchPage/img/link_to_left.svg b/FrontEnd/src/components/SearchPage/img/link_to_left.svg
new file mode 100644
index 00000000..84937931
--- /dev/null
+++ b/FrontEnd/src/components/SearchPage/img/link_to_left.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/FrontEnd/src/components/SearchPage/img/link_to_right.svg b/FrontEnd/src/components/SearchPage/img/link_to_right.svg
new file mode 100644
index 00000000..450b2ecd
--- /dev/null
+++ b/FrontEnd/src/components/SearchPage/img/link_to_right.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/FrontEnd/src/components/SearchPage/search_field/SearchResults.js b/FrontEnd/src/components/SearchPage/search_field/SearchResults.js
new file mode 100644
index 00000000..36e4dde4
--- /dev/null
+++ b/FrontEnd/src/components/SearchPage/search_field/SearchResults.js
@@ -0,0 +1,35 @@
+import CompanyCard from './companies/CompanyCard';
+import styles from './Text.module.css';
+import PropTypes from 'prop-types';
+
+const SearchResults = ({ results, displayedResults, isAuthorized }) => {
+ SearchResults.propTypes = {
+ results: PropTypes.array,
+ displayedResults: PropTypes.array,
+ isAuthorized: PropTypes.object,
+ };
+
+ let error = null;
+
+ if (results && results.error) {
+ error = results.error;
+ }
+
+ return (
+
+ 
+
+
+ {searchResults && (
+
+
+ + РЕЗУЛЬТАТІВ ЗА ПОШУКОМ{' '} + + {searchTerm} + {' '} + : {searchResults.length > 0 ? searchResults.length : 0} +
+ )} ++
+ {!error && searchResults.length > 0 ? (
+ <>
+
+ + ) : ( +
+ + + ) : ( +
+ Пошук не дав результатів: компанії з іменем{' '} + + {searchTerm} + {' '} + не було виявлено на даний момент +
+ )} +
+ {totalPages > 1 && (
+
+
+ {currentPage > 1 && (
+
+ )}
+ {currentPage > 1 && (
+ <>
+
+ {currentPage > 2 && (
+ ...
+ )}
+
+ )}
+ {Array.from({ length: totalPages }, (_, i) => {
+ if (
+ i === 2 ||
+ i === totalPages ||
+ (i >= currentPage - 1 && i <= currentPage)
+ ) {
+ return (
+
+ );
+ }
+ return null;
+ })}
+ {currentPage < totalPages - 1 && (
+ <>
+ {currentPage < totalPages - 1 && (
+ ...
+ )}
+
+
+ )}
+ {currentPage < totalPages && (
+
+ )}
+
+ )}
+
+ {!error && (
+
+ );
+};
+
+export default SearchResults;
diff --git a/FrontEnd/src/components/SearchPage/search_field/Text.module.css b/FrontEnd/src/components/SearchPage/search_field/Text.module.css
new file mode 100644
index 00000000..691c8182
--- /dev/null
+++ b/FrontEnd/src/components/SearchPage/search_field/Text.module.css
@@ -0,0 +1,22 @@
+@import './companies/variables.css';
+
+.new-companies-block {
+ display: flex;
+ width: 1412px;
+ padding: 16px 8px;
+ flex-direction: column;
+ align-items: center;
+ gap: 26px;
+}
+
+.row {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ justify-content: space-between;
+ margin: -10px; /* spacess beetwen ecompanies */
+}
+
+.col-md-4 {
+ flex-basis: calc(33, 3% - 80px); /* 3 companies per row */
+ margin: 10px; /* spacess beetwen ecompanies */
+}
diff --git a/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.js b/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.js
new file mode 100644
index 00000000..5c1bed9d
--- /dev/null
+++ b/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.js
@@ -0,0 +1,169 @@
+import { Link } from 'react-router-dom';
+import { StarOutlined, StarFilled } from '@ant-design/icons';
+import { useState, useEffect } from 'react';
+import { useSWRConfig } from 'swr';
+import useSWRMutation from 'swr/mutation';
+import axios from 'axios';
+import styles from './CompanyCard.module.css';
+// import PropTypes from 'prop-types';
+
+const CompanyCard = ({ companyData, isAuthorized }) => {
+ // CompanyCard.propTypes = {
+ // companyData: PropTypes.object,
+ // isAythorized: PropTypes.object,
+ // };
+ // console.log(companyData['id']);
+
+ const { mutate } = useSWRConfig();
+ const authToken = localStorage.getItem('Token');
+ const currentDate = new Date();
+ const currentYear = currentDate.getFullYear();
+ const yearsOfExperiense = companyData.founded
+ ? currentYear - companyData.founded
+ : 0;
+ const [usersSavedList, setUsersSavedList] = useState([]);
+ const [star, setStar] = useState(false);
+ const [isSaved, setIsSaved] = useState(false);
+ const [searchPerformed, setSearchPerformed] = useState(false);
+
+ async function sendRequest(url, { arg: data }) {
+ return await axios.post(
+ url,
+ { company_pk: data['company_pk'] },
+ {
+ withCredentials: true,
+ headers: {
+ Authorization: `Token ${authToken}`,
+ },
+ }
+ );
+ }
+
+ async function getRequest(url) {
+ 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)) {
+ setStar(filledStar);
+ setIsSaved(true);
+ } else {
+ setIsSaved(false);
+ setStar(outlinedStar);
+ }
+ setSearchPerformed(true);
+ }
+
+ 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(
+ { company_pk: companyData.id },
+ { optimisticData: () => setIsSaved(!isSaved) }
+ );
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ mutate((key) => typeof key === 'string' && key.startsWith('/api/profiles/'), {
+ revalidate: true,
+ });
+
+ const filledStar = (
+
+
+ )}
+
+ {displayedResults.map((result, resultIndex) => (
+
+
+
+ ))}
+
+
+ );
+};
+
+export default CompanyCard;
diff --git a/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.module.css b/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.module.css
new file mode 100644
index 00000000..cc342f8f
--- /dev/null
+++ b/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.module.css
@@ -0,0 +1,165 @@
+@import 'variables.css';
+
+.company-card {
+ width: 360px;
+ display: block;
+ align-items: center;
+ box-shadow: 0 4px 8px 0 var(--companies-card-box-shadow);
+ border-radius: 11px;
+ transition: transform 0.2s ease;
+ position: relative;
+}
+.company-card:hover {
+ transform: scale(1.1);
+}
+.company-card__block {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+.company-card__image-frame {
+ width: 360px;
+ height: 220px;
+}
+.company-card__image {
+ width: 360px;
+ height: 290px;
+ flex-shrink: 0;
+ border-radius: 11px;
+ object-fit: cover;
+ opacity: 0.7;
+}
+.company-card__text-block {
+ display: flex;
+ padding: 20px 16.02px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 16px;
+ border-radius: 0 0 12px 12px;
+ background: var(--main_light-color);
+}
+.company-card__text-block__header {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+}
+.company-card__category-text {
+ color: var(--companies-card-lover-text);
+ text-align: center;
+ font-family: Inter, sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 120%; /* 19.2px */
+ text-align: left;
+}
+.company-card__name-text {
+ width: 328px;
+ height: 48px;
+ color: var(--text-color);
+ font-family: Inter, sans-serif;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 120%; /* 24px */
+ text-transform: uppercase;
+ text-align: left;
+}
+
+.company-card__name-text_link {
+ text-decoration: none; /* delete underline */
+ color: var(--text-color);
+}
+
+.company-card__name-text_link:visited {
+ color: var(--text-color);
+}
+
+.company-card__address-text {
+ width: 328px;
+ color: var(--companies-card-address);
+ font-feature-settings: 'calt' off;
+ font-family: Inter, sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.14px;
+ text-align: left;
+}
+.company-card__badges-block {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 8px;
+}
+.company-card__badges {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: var(--main_light-color);
+}
+.company-card__badge {
+ display: flex;
+ padding: 2px 8px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 100px;
+ background: var(--pagination-style-color);
+}
+.company-card__badge-text {
+ color: var(--main_light-color);
+ text-align: center;
+ font-feature-settings: 'calt' off;
+ font-family: Inter, sans-serif;
+ font-size: 10px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 16px; /* 160% */
+ text-transform: uppercase;
+}
+.company-card__logo {
+ width: 64px;
+ height: 64px;
+ position: absolute;
+ right: 16px;
+ bottom: 159.5px;
+}
+.company-card__logo-ellipse {
+ width: 64px;
+ height: 64px;
+ flex-shrink: 0;
+ background: var(--main_light-color);
+ left: 0;
+ top: 0;
+ border-radius: 9999px;
+ box-shadow: 0 0 2px rgba(65, 64, 69, 0.2);
+}
+.company-card__logo-image {
+ width: 54px;
+ height: 54px;
+ flex-shrink: 0;
+ border-radius: 26px;
+ background: var(--main_light-color);
+ left: 5px;
+ top: 5px;
+ position: absolute;
+}
+
+.company-card__buttons {
+ color: var(--companies-card-button);
+ border: none;
+ background-color: var(--main_light-color);
+}
+
+.company-card__buttons:hover {
+ cursor: pointer;
+}
+
+.star {
+ color: #ffd800;
+ font-size: 24px;
+}
diff --git a/FrontEnd/src/components/SearchPage/search_field/companies/img/wish_list_checklist.svg b/FrontEnd/src/components/SearchPage/search_field/companies/img/wish_list_checklist.svg
new file mode 100644
index 00000000..15a3a9bd
--- /dev/null
+++ b/FrontEnd/src/components/SearchPage/search_field/companies/img/wish_list_checklist.svg
@@ -0,0 +1,3 @@
+
diff --git a/FrontEnd/src/components/SearchPage/search_field/companies/img/wish_list_checklist_added.svg b/FrontEnd/src/components/SearchPage/search_field/companies/img/wish_list_checklist_added.svg
new file mode 100644
index 00000000..6a988c08
--- /dev/null
+++ b/FrontEnd/src/components/SearchPage/search_field/companies/img/wish_list_checklist_added.svg
@@ -0,0 +1,3 @@
+
diff --git a/FrontEnd/src/components/SearchPage/search_field/companies/variables.css b/FrontEnd/src/components/SearchPage/search_field/companies/variables.css
new file mode 100644
index 00000000..5ea0350b
--- /dev/null
+++ b/FrontEnd/src/components/SearchPage/search_field/companies/variables.css
@@ -0,0 +1,12 @@
+:root {
+ --text-color: #292e32;
+ --main-style-signs-color: #0b6c61;
+ --main_light-color: white;
+ --pagination-style-color: #1f9a7c;
+ --link-color: #61dafb;
+ --companies-card-box-shadow: rgba(65, 64, 69, 0.2);
+ --companies-card-lover-text: #767f86;
+ --companies-card-address: #59636a;
+ --companies-card-button: green;
+ --new-companies-main: #f1fff7;
+}
diff --git a/FrontEnd/src/components/SearchPage/search_page.module.css b/FrontEnd/src/components/SearchPage/search_page.module.css
new file mode 100644
index 00000000..a7f55246
--- /dev/null
+++ b/FrontEnd/src/components/SearchPage/search_page.module.css
@@ -0,0 +1,75 @@
+@import './search_field/companies/variables.css';
+
+.main_block_outer {
+ padding-top: 10px;
+ width: 1512px;
+}
+
+.new-companies-main {
+ background-color: var(--new-companies-main);
+}
+
+.main_block {
+ position: relative;
+}
+
+.new-companies-search_count {
+ display: flex;
+ margin: auto;
+ padding-left: 10%;
+}
+
+.search_field_entered_value {
+ color: var(----main-style-signs-color);
+ font: Inter;
+ font-weight: 600;
+ font-style: italic;
+}
+
+.search_results_text {
+ font: Inter;
+ font-weight: 700;
+}
+
+.search_result_error {
+ font-weight: 600;
+ color: var(--text-color);
+ font: Inter;
+}
+
+.frame-img-right {
+ position: absolute;
+ top: 30px;
+ right: 0;
+ transform: translateY(-50%);
+}
+
+.new-companies-result_pages {
+ padding: 40px;
+}
+
+.pagination {
+ background-color: var(--main_light-color);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 20px;
+}
+
+.pagination button {
+ all: unset;
+ border: none;
+ font-size: 16px;
+ font-weight: 500;
+ padding: 8px 16px;
+ margin: 0 4px;
+ cursor: pointer;
+}
+
+.pagination button.active {
+ background-color: none;
+ color: var(--pagination-style-color);
+ border: 1px solid var(--pagination-style-color);
+ border-radius: 5px;
+ transition: background-color 0.3s, color 0.3s;
+}
diff --git a/FrontEnd/src/components/basicPage/BasicPage.jsx b/FrontEnd/src/components/basicPage/BasicPage.jsx
index 71f9d1a0..195d5e7d 100644
--- a/FrontEnd/src/components/basicPage/BasicPage.jsx
+++ b/FrontEnd/src/components/basicPage/BasicPage.jsx
@@ -14,7 +14,7 @@ import { SignUpPage } from '../SignUp/pages/SignUpPage';
import ScrollToTopButton from '../PrivacyPolicyPage/privacy/ScrollToTopButton';
import TermsAndConditions from '../terms-and-conditions-app/terms_conditions/TermsAndConditionsComponent';
import { useAuth } from '../../hooks';
-
+import { Search } from '../SearchPage/Search';
function BasicPage() {
const auth = useAuth();
@@ -56,7 +56,10 @@ function BasicPage() {
+
+
+ 
+
+
+
+
+
+
+
+ {companyData.categories &&
+ companyData.categories
+ .map((category) => category.name)
+ .join(' ')}
+
+
+
+ {companyData.name}
+
+
+
+ +
+ {companyData.address}
+
+
+
+
+
+ {/* {isAuthorized ? (isSaved ? filledStar : outlinedStar) : null} */}
+ {star}
+ {/*
+
+
+ {yearsOfExperiense} років досвіду
+
+ {}
*/}
+
+
+
+ 
+
+
+