Merge pull request #322 from ita-social-projects/#321SearchPageBug

#321 search page bug
ita-social-projects · Nov 29, 2023 · 0d656b0 · 0d656b0
2 parents 848e534 + f90bff9
commit 0d656b0
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 30 deletions.
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,7 +5,6 @@ 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,8 +15,7 @@ function App() {
         <div className="App">
           <Routes>
             <Route path="/*" element={<BasicPage />} />
-            <Route path="/admin/*" element={<AdminPage />} />
-            <Route path="/search" element={<Search isAuthorized={auth} />} />
+            <Route path="/customadmin/*" element={<AdminPage />} />
           </Routes>
         </div>
       </BrowserRouter>

diff --git a/FrontEnd/src/components/SearchPage/Search.js → ...tEnd/src/components/SearchPage/Search.jsx b/FrontEnd/src/components/SearchPage/Search.js → ...tEnd/src/components/SearchPage/Search.jsx
@@ -13,9 +13,10 @@ import PropTypes from 'prop-types';
 
 const ITEMS_PER_PAGE = 6;
 
-export function Search({ isAuthorized }) {
+export function Search({ isAuthorized, userData }) {
   Search.propTypes = {
     isAuthorized: PropTypes.any.isRequired,
+    userData: PropTypes.any.isRequired,
   };
 
   const [searchResults, setSearchResults] = useState([]);
@@ -94,6 +95,7 @@ export function Search({ isAuthorized }) {
                 searchPerformed={searchPerformed}
                 displayedResults={displayedResults}
                 isAuthorized={isAuthorized}
+                userData={userData}
               />
               <br />
             </>

diff --git a/.../SearchPage/search_field/SearchResults.js → ...SearchPage/search_field/SearchResults.jsx b/.../SearchPage/search_field/SearchResults.js → ...SearchPage/search_field/SearchResults.jsx
@@ -2,11 +2,12 @@ import CompanyCard from './companies/CompanyCard';
 import styles from './Text.module.css';
 import PropTypes from 'prop-types';
 
-const SearchResults = ({ results, displayedResults, isAuthorized }) => {
+const SearchResults = ({ results, displayedResults, isAuthorized, userData }) => {
   SearchResults.propTypes = {
     results: PropTypes.array,
     displayedResults: PropTypes.array,
     isAuthorized: PropTypes.object,
+    userData: PropTypes.any.isRequired,
   };
 
   let error = null;
@@ -22,7 +23,7 @@ const SearchResults = ({ results, displayedResults, isAuthorized }) => {
           <div className={styles['row']}>
             {displayedResults.map((result, resultIndex) => (
               <div key={resultIndex} className={styles['col-md-4']}>
-                <CompanyCard companyData={result} isAuthorized={isAuthorized} />
+                <CompanyCard companyData={result} isAuthorized={isAuthorized} userData={userData} />
               </div>
             ))}
           </div>

diff --git a/...age/search_field/companies/CompanyCard.js → ...ge/search_field/companies/CompanyCard.jsx b/...age/search_field/companies/CompanyCard.js → ...ge/search_field/companies/CompanyCard.jsx
@@ -7,10 +7,11 @@ import axios from 'axios';
 import styles from './CompanyCard.module.css';
 import PropTypes from 'prop-types';
 
-const CompanyCard = ({ companyData, isAuthorized }) => {
+const CompanyCard = ({ companyData, isAuthorized, userData }) => {
   CompanyCard.propTypes = {
     companyData: PropTypes.object,
     isAuthorized: PropTypes.object,
+    userData: PropTypes.any.isRequired,
   };
 
   const { mutate } = useSWRConfig();
@@ -56,6 +57,11 @@ const CompanyCard = ({ companyData, isAuthorized }) => {
     }
 
     setUsersSavedList(NewList);
+    if (companyData.id == userData.id) {
+    setStar(false);
+    setIsSaved(false);
+    setSearchPerformed(true);
+    } else {
     if (usersSavedList.includes(companyData.id)) {
       setStar(filledStar);
       setIsSaved(true);
@@ -64,7 +70,7 @@ const CompanyCard = ({ companyData, isAuthorized }) => {
       setStar(outlinedStar);
     }
     setSearchPerformed(true);
-  }
+  }}
 
   const { trigger } = useSWRMutation(
     `${process.env.REACT_APP_BASE_API_URL}/api/saved-list/`,
@@ -120,11 +126,15 @@ const CompanyCard = ({ companyData, isAuthorized }) => {
     <div className={styles['company-card']}>
       <div className={styles['company-card__block']}>
         <div className={styles['company-card__image-frame']}>
-          <img
+        {companyData.banner_image ? (
+                    <img src={companyData.banner_image} alt="Company Banner" />
+                    ) : (
+                <img
             className={styles['company-card__image']}
-            src={`${process.env.REACT_APP_PUBLIC_URL}/companies-logos/defaultcompanybanner.png`}
+            src={`${process.env.REACT_APP_PUBLIC_URL}/svg/profile-view-image-empty.svg`}
             alt={companyData.name}
           />
+                )}
         </div>
         <div className={styles['company-card__text-block']}>
           <div className={styles['company-card__text-block__header']}>
@@ -137,7 +147,7 @@ const CompanyCard = ({ companyData, isAuthorized }) => {
             <div className={styles['company-card__name-text']}>
               <Link
                 className={styles['company-card__name-text_link']}
-                to={`/profile/${companyData.id}`}
+                to={`/profile-detail/${companyData.id}`}
               >
                 {companyData.name}
               </Link>

diff --git a/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.module.css b/FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.module.css
@@ -22,10 +22,11 @@
   height: 220px;
 }
 .company-card__image {
-  width: 360px;
-  height: 290px;
+  width: 103px;
+  height: 80px;
   flex-shrink: 0;
-  border-radius: 11px;
+  margin-top: 80px;
+  margin-left: 125px;
   object-fit: cover;
   opacity: 0.7;
 }

diff --git a/FrontEnd/src/components/adminPage/header/Header.jsx b/FrontEnd/src/components/adminPage/header/Header.jsx
@@ -5,7 +5,7 @@ function Header () {
     return (
         <header>
             <div className={css['header-content']}>
-                <Link className={css['header-logo__text']} to="/admin/">admin panel</Link>
+                <Link className={css['header-logo__text']} to="/customadmin/">admin panel</Link>
                 <Link className={css['header-view__button']} to="/">Переглянути сайт</Link>
             </div>
             <div className={css['header-divider']}></div>

diff --git a/FrontEnd/src/components/adminPage/menu/Menu.jsx b/FrontEnd/src/components/adminPage/menu/Menu.jsx
@@ -5,12 +5,12 @@ const MENU = [
     {
         id: 'am1',
         title: 'Користувачі',
-        link: '/admin/users/'
+        link: '/customadmin/users/'
     },
     {
         id: 'am2',
         title: 'Компанії',
-        link: '/admin/companies/'
+        link: '/customadmin/companies/'
     },
 ];
 

diff --git a/FrontEnd/src/components/basicPage/BasicPage.jsx b/FrontEnd/src/components/basicPage/BasicPage.jsx
@@ -23,10 +23,13 @@ import { RestorePasswordFailedPage } from '../RestorePassword/pages/RestorePassw
 import ScrollToTopButton from '../PrivacyPolicyPage/privacy/ScrollToTopButton';
 import TermsAndConditions from '../terms-and-conditions-app/terms_conditions/TermsAndConditionsComponent';
 import { useAuth } from '../../hooks';
+import { useUser } from '../../hooks';
 import { Search } from '../SearchPage/Search';
 
 function BasicPage() {
   const auth = useAuth();
+  const user = useUser();
+  const userData = user.user;
   return (
     <ConfigProvider
       theme={{
@@ -63,32 +66,62 @@ function BasicPage() {
     >
       <Header isAuthorized={auth.isAuth} />
       <Routes>
-        <Route path="/" element={<MainPage isAuthorized={auth.isAuth}/>} />
+        <Route path="/" element={<MainPage isAuthorized={auth.isAuth} />} />
         <Route path="/profile/*" element={<ProfilePage />} />
-        <Route path="/profile-detail/:id" element={<ProfileDetailPage isAuthorized={auth.isAuth}/>}/>
-        <Route path="/profiles/:filter" element={<ProfileListPage isAuthorized={auth.isAuth} />}/>
+        <Route
+          path="/profile-detail/:id"
+          element={<ProfileDetailPage isAuthorized={auth.isAuth} />}
+        />
+        <Route
+          path="/profiles/:filter"
+          element={<ProfileListPage isAuthorized={auth.isAuth} />}
+        />
         {auth.isAuth ? (
           <Route path="/login" element={<Navigate to="/profile/user-info" />} />
         ) : (
           <Route path="/login" element={<AuthorizationPage />} />
         )}
         {auth.isAuth ? (
-          <Route path="/sign-up" element={<Navigate to="/profile/user-info" />} />
+          <Route
+            path="/sign-up"
+            element={<Navigate to="/profile/user-info" />}
+          />
         ) : (
           <Route path="/sign-up" element={<SignUpPage />} />
         )}
         <Route path="/sign-up/modal" element={<SignUpModalPage />} />
-        <Route path="/sign-up/resend-activation" element={<ResendActivationPage />} />
-        <Route path="/activate/:uid/:token" element={<ActivationProfilePage />} />
-        <Route path="/reset-password" element={<SendEmailRestorePasswordPage />} />
-        <Route path="/reset-password/modal" element={<RestorePasswordModalPage />} />
-        <Route path="/password/reset/confirm/:uid/:token" element={<RestorePasswordPage />} />
-        <Route path="/reset-password/successfully" element={<RestorePasswordSuccessPage />} />
-        <Route path="/reset-password/failed" element={<RestorePasswordFailedPage />} />
+        <Route
+          path="/sign-up/resend-activation"
+          element={<ResendActivationPage />}
+        />
+        <Route
+          path="/activate/:uid/:token"
+          element={<ActivationProfilePage />}
+        />
+        <Route
+          path="/reset-password"
+          element={<SendEmailRestorePasswordPage />}
+        />
+        <Route
+          path="/reset-password/modal"
+          element={<RestorePasswordModalPage />}
+        />
+        <Route
+          path="/password/reset/confirm/:uid/:token"
+          element={<RestorePasswordPage />}
+        />
+        <Route
+          path="/reset-password/successfully"
+          element={<RestorePasswordSuccessPage />}
+        />
+        <Route
+          path="/reset-password/failed"
+          element={<RestorePasswordFailedPage />}
+        />
         <Route path="/privacy-policy" element={<PrivacyPolicy />} />
         <Route path="/terms-and-conditions" element={<TermsAndConditions />} />
         <Route path="/cookies-policy" element={<CookiesPolicyComponent />} />
-        <Route path="/search" element={<Search isAuthorized={auth.isAuth} />} />
+        <Route path="/search" element={<Search isAuthorized={auth} userData={userData} />} />
       </Routes>
       <Footer />
       <ScrollToTopButton />

diff --git a/FrontEnd/src/hooks/useProvideAuth.js b/FrontEnd/src/hooks/useProvideAuth.js
@@ -62,6 +62,5 @@ export default function useProvideAuth() {
       }
     });
   });
-
   return { login, logout, isAuth, isLoading };
 }