Merge branch 'develop' into #269-ImplementFunctionalityOfProfileDetails

ita-social-projects · Oct 30, 2023 · 23e10a6 · 23e10a6
2 parents 6edd775 + 801fd0a
commit 23e10a6
Show file tree

Hide file tree

Showing 37 changed files with 1,631 additions and 149 deletions.
diff --git a/FrontEnd/package-lock.json b/FrontEnd/package-lock.json
diff --git a/FrontEnd/package.json b/FrontEnd/package.json
@@ -20,6 +20,7 @@
     "react-router-dom": "^6.4.1",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.1.3",
     "swr": "^2.2.2",
     "validator": "^13.11.0",
     "web-vitals": "^2.1.4"

diff --git a/FrontEnd/public/companies-logos/defaultcompanybanner.png b/FrontEnd/public/companies-logos/defaultcompanybanner.png
diff --git a/FrontEnd/src/App.js b/FrontEnd/src/App.js
@@ -5,6 +5,7 @@ import AdminPage from './components/adminPage/AdminPage';
 import BasicPage from './components/basicPage/BasicPage';
 import { AuthContext } from './context';
 import { useProvideAuth } from './hooks';
+import { Search } from './components/SearchPage/Search';
 
 function App() {
   const auth = useProvideAuth();
@@ -16,6 +17,7 @@ function App() {
           <Routes>
             <Route path="/*" element={<BasicPage />} />
             <Route path="/admin/*" element={<AdminPage />} />
+            <Route path="/search" element={<Search isAuthorized={auth} />} />
           </Routes>
         </div>
       </BrowserRouter>

diff --git a/FrontEnd/src/components/BreadCrumbs/BreadCrumbs.module.css b/FrontEnd/src/components/BreadCrumbs/BreadCrumbs.module.css
@@ -1,70 +1,70 @@
 .content {
-    padding-left: 192px;
-    display: flex;
-    align-items: center;
-    margin-bottom: 32px;
+  padding-left: 10%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 32px;
 }
 
 .main-page__button {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 20px;
-    letter-spacing: -0.01em;
-    text-align: left;
-    color: #8D959C;
-    text-decoration: none;    
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: -0.01em;
+  text-align: left;
+  color: #8d959c;
+  text-decoration: none;
 }
 
 .current-page__button {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 20px;
-    letter-spacing: -0.01em;
-    text-align: left;
-    color: #25292C;
-    text-decoration: none;    
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: -0.01em;
+  text-align: left;
+  color: #25292c;
+  text-decoration: none;
 }
 
-.goback__button {    
-    display: flex;
-    padding: 5px 15px;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    border-radius: 4px;
-    border: 1px solid var(--primary-green-80, #1f9a7c);
-    background: var(--main-white, #fff);
-    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
-    color: var(--primary-green-80, #1f9a7c);
-    text-align: center;
-    font-feature-settings: "calt" off;
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 20px;
-    letter-spacing: -0.16px;
-    cursor: pointer;
-    margin-right: 32px;
-  }
+.goback__button {
+  display: flex;
+  padding: 5px 15px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 4px;
+  border: 1px solid var(--primary-green-80, #1f9a7c);
+  background: var(--main-white, #fff);
+  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
+  color: var(--primary-green-80, #1f9a7c);
+  text-align: center;
+  font-feature-settings: 'calt' off;
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: -0.16px;
+  cursor: pointer;
+  margin-right: 32px;
+}
 
 .right {
-    transform: rotate(-45deg);
-    -webkit-transform: rotate(-45deg);
-    border: solid #25292C;
-    border-width: 0 2px 2px 0;
-    display: inline-block;
-    padding: 4px;
-    margin: 0px 15px;    
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  border: solid #25292c;
+  border-width: 0 2px 2px 0;
+  display: inline-block;
+  padding: 4px;
+  margin: 0px 15px;
 }
 
 .left {
-    transform: rotate(135deg);
-    -webkit-transform: rotate(135deg);
-    border: solid #1f9a7c;
-    border-width: 0 2px 2px 0;
-    display: inline-block;
-    padding: 4px;     
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+  border: solid #1f9a7c;
+  border-width: 0 2px 2px 0;
+  display: inline-block;
+  padding: 4px;
 }
diff --git a/FrontEnd/src/components/HeaderFooter/header/Header.jsx b/FrontEnd/src/components/HeaderFooter/header/Header.jsx
@@ -2,17 +2,19 @@ import css from './Header.module.css';
 import HeaderMenu from './menu/HeaderMenu';
 import Navbar from './navbar/Navbar';
 
-function Header (props) {
-    return (
-        <header>
-            <div className={css['header-content']}>
-                <Navbar isAuthorized={props.isAuthorized} page={props.page}></Navbar>
-                <div className={css['header-divider']}></div>
-                {props.page === 'login' || props.page === 'registration' ? (null): (<HeaderMenu/>)}
-                <div className={css['header-divider']}></div>
-            </div>
-        </header>
-    );
+function Header(props) {
+  return (
+    <header>
+      <div className={css['header-content']}>
+        <Navbar isAuthorized={props.isAuthorized} page={props.page}></Navbar>
+        <div className={css['header-divider']}></div>
+        {props.page === 'login' || props.page === 'registration' ? null : (
+          <HeaderMenu />
+        )}
+        <div className={css['header-divider']}></div>
+      </div>
+    </header>
+  );
 }
 
 export default Header;
diff --git a/FrontEnd/src/components/HeaderFooter/header/navbar/Menu.jsx b/FrontEnd/src/components/HeaderFooter/header/navbar/Menu.jsx
@@ -3,27 +3,26 @@ import css from './Menu.module.css';
 import { HashLink } from 'react-router-hash-link';
 
 const MENU_LINKS = [
-    {
-        id: 'm0',
-        title: 'Головна',
-        link: '/'
-    },
-    {
-        title: 'Компанії',
-        link: '/profiles/companies'
-    },
-    {
-        title: 'Стартапи',
-        link: '/profiles/startups'
-    },
-    {
-        title: 'Про нас',
-        link: '/#about-us'
-    },
+  {
+    id: 'm0',
+    title: 'Головна',
+    link: '/',
+  },
+  {
+    title: 'Компанії',
+    link: '/profiles/companies',
+  },
+  {
+    title: 'Стартапи',
+    link: '/profiles/startups',
+  },
+  {
+    title: 'Про нас',
+    link: '/#about-us',
+  },
 ];
 
 function Menu() {
-  console.log(MENU_LINKS.map((element) => (element.title.startsWith('/#'))));
   return (
     <div className={css['header-menu-section']}>
       {MENU_LINKS.map((element) => (

diff --git a/FrontEnd/src/components/HeaderFooter/header/navbar/SearchBox.jsx b/FrontEnd/src/components/HeaderFooter/header/navbar/SearchBox.jsx
@@ -1,15 +1,44 @@
-import css from './SearchBox.module.css';
+import { useState } from 'react';
 import icon_search from './search-icon.svg';
+import { useNavigate } from 'react-router-dom';
+import css from './SearchBox.module.css';
+
+function SearchBox() {
+  const navigate = useNavigate();
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const searchPage = 'search';
 
-function SearchBox () {
-    return (
-        <div className={css['header-search-box']}>
-            <div className={css['header-search-form']}>
-                <input className={css['header-search-form__input']} placeholder="Пошук"></input>
-            </div>
-            <span className={css['header-search-form__addon']}><img src={icon_search} alt=""/></span>
-        </div>
-    );
+  const handleSearch = (searchTerm, searchPage) => {
+    if (searchTerm.trim() !== '') {
+      navigate(`/${searchPage}/?name=${searchTerm}`);
+    }
+  };
+  return (
+    <div className={css['header-search-box']}>
+      <div className={css['header-search-form']}>
+        <input
+          className={css['header-search-form__input']}
+          value={searchTerm}
+          type="text"
+          placeholder="Пошук"
+          onChange={(e) => setSearchTerm(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              handleSearch(searchTerm, searchPage);
+            }
+          }}
+        />
+      </div>
+      <button
+        onClick={() => handleSearch(searchTerm, searchPage)}
+        className={css['header-search-form__addon']}
+        disabled={!searchTerm.trim()}
+      >
+        <img src={icon_search} alt="" />
+      </button>
+    </div>
+  );
 }
 
 export default SearchBox;