#305 Active tab highlighting

FrontEnd/src/components/ProfileDetail/MainInfo/MainInfoSection.jsx

@@ -7,7 +7,7 @@ function MainInfoSection({ isAuthorized, data, containsNotRequiredData }) {
   return (
     <div className={classes['basic-info-content']}>
       <TitleInfo isAuthorized={isAuthorized} data={data} />
-      {containsNotRequiredData ? <ProfileDetailNavBar /> : null}
+      {containsNotRequiredData ? <ProfileDetailNavBar data={data}/> : null}
     </div>
   );
 }
@@ -35,6 +35,8 @@ MainInfoSection.propTypes = {
       ),
       common_info: PropTypes.string,
       is_saved: PropTypes.bool.isRequired,
+      is_registered: PropTypes.bool.isRequired,
+      is_startup: PropTypes.bool.isRequired,
     }).isRequired,
     containsNotRequiredData: PropTypes.bool.isRequired,
   };

FrontEnd/src/components/ProfileDetail/MainInfo/ProfileDetailNavBar.jsx

@@ -1,5 +1,7 @@
 import { HashLink } from 'react-router-hash-link';
-import { useLocation  } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { PropTypes } from 'prop-types';
 import classes from './ProfileDetailNavBar.module.css';
 
 const MENU_LINKS = {
@@ -10,38 +12,65 @@ const MENU_LINKS = {
     'cooperation': 'Формат співпраці',
 };
 
-function ProfileDetailNavBar() {
-
+function ProfileDetailNavBar({ data }) {
   const { hash } = useLocation ();
+  const navigate = useNavigate ();
+  const [activeLink, setActiveLink] = useState('');
+
+  useEffect(() => {
+    if (hash) {
+      setActiveLink(hash.substring(1));
+    } else {
+      setActiveLink(
+        data.is_registered && document.getElementById('about-company') ? 'about-company' :
+        data.is_startup && document.getElementById('startup') ? 'startup' : ''
+      );
+    }
+  }, [hash, data.is_registered, data.is_startup]);
+
+  useEffect(() => {
+    navigate(hash.pathname, {replace: true});
+  }, [navigate, hash.pathname]);
 
-  return  (
-    <div className={classes['navbar-menu']}>
-      {Object.entries(MENU_LINKS).map(([link, label]) => (
-        <div key={link} className={classes['navbar-menu__block']}>
-          <div className={classes['navbar-menu__item']}>
-            <HashLink
-              smooth
-              to={`#${link}`}
-              className={
-                `#${link}` === hash
-                  ? `${classes['active-link']}`
-                  : `${classes['inactive-link']}`
-              }
-            >
-              {label}
-            </HashLink>
-          </div>
-          <div
-            className={
-              `#${link}` === hash
-                ? `${classes['active-devider']}`
-                : `${classes['inactive-devider']}`
-            }
-          />
-        </div>
-      ))}
+  return (
+    <div>
+      <div className={classes['navbar-menu']}>
+        {Object.entries(MENU_LINKS).map(
+          ([link, label]) =>
+            document.getElementById(link) && (
+              <div key={link} className={classes['navbar-menu__block']}>
+                <div className={classes['navbar-menu__item']}>
+                  <HashLink
+                    smooth
+                    to={`#${link}`}
+                    className={
+                      link === activeLink
+                        ? `${classes['active-link']}`
+                        : `${classes['inactive-link']}`
+                    }
+                  >
+                    {label}
+                  </HashLink>
+                </div>
+                <div
+                  className={
+                    link === activeLink ? `${classes['active-devider']}` : null
+                  }
+                />
+              </div>
+            )
+        )}
+      </div>
+      <div className={classes['devider']}></div>
     </div>
   );
 }
 
 export default ProfileDetailNavBar;
+
+ProfileDetailNavBar.propTypes = {
+  data: PropTypes.shape({
+    is_registered: PropTypes.bool.isRequired,
+    is_startup: PropTypes.bool.isRequired,
+  }).isRequired,
+};

FrontEnd/src/components/ProfileDetail/MainInfo/ProfileDetailNavBar.module.css

@@ -44,6 +44,12 @@
     letter-spacing: -0.16px;
 }
 
+.devider {
+    width: 795px;
+    height: 1px;
+    background: var(--main-grey-20, #DEE1E8);
+}
+
 .inactive-devider {
     height: 1px;
     align-self: stretch;

FrontEnd/src/components/profileList/ProfileCard.jsx

@@ -7,17 +7,20 @@ import { PropTypes } from 'prop-types';
 import { useSWRConfig } from 'swr';
 import useSWRMutation from 'swr/mutation';
 
+import { useUser } from '../../hooks';
 import css from './ProfileCard.module.css';
 
 const { Paragraph } = Typography;
 
 
 export default function ProfileCard({ isAuthorized, data }) {
   const { mutate } = useSWRConfig();
+  const { user } = useUser();
   const [isSaved, setIsSaved] = useState(data.is_saved);
   const profile = useMemo(() => {
     return {
       id: data.id,
+      personId: data.person,
       name: data.name,
       activities: !data.activities.length
         ? null
@@ -34,6 +37,8 @@ export default function ProfileCard({ isAuthorized, data }) {
     };
   }, [data]);
 
+  const ownProfile = user && user.id === profile.personId;
+
   async function sendRequest(url, { arg: data }) {
     const authToken = localStorage.getItem('Token');
     return fetch(url, {
@@ -133,7 +138,7 @@ export default function ProfileCard({ isAuthorized, data }) {
           </div>
         </div>
       </Link>
-      {isAuthorized ? (isSaved ? filledStar : outlinedStar) : null}
+      {isAuthorized && !ownProfile ? (isSaved ? filledStar : outlinedStar) : null}
     </div>
   );
 }
@@ -142,6 +147,7 @@ ProfileCard.propTypes = {
   isAuthorized: PropTypes.bool,
   data: PropTypes.shape({
     id: PropTypes.number.isRequired,
+    person: PropTypes.number.isRequired,
     name: PropTypes.string.isRequired,
     address: PropTypes.string,
     region_display: PropTypes.string,

FrontEnd/src/components/profileList/ProfileCard.module.css

@@ -1,5 +1,6 @@
 .company-card {
   display: flex;
+  width: 100%;
   padding: 8px;
   align-items: flex-start;
   gap: 16px;
@@ -34,7 +35,7 @@
   flex-direction: column;
   align-items: flex-end;
   border-radius: 100px;
-  border: 3px solid var(--secondary-white, #e2e5eb) ;
+  border: 3px solid var(--secondary-white, #e2e5eb);
   background: var(--main-white, #fff);
 }
 
@@ -65,7 +66,7 @@
   display: flex;
   align-items: center;
   color: var(--main-grey-20, #767f86);
-  font-feature-settings: "calt"off;
+  font-feature-settings: "calt" off;
 
   font-family: Inter, sans-serif;
   font-size: 16px;
@@ -95,7 +96,7 @@
   align-items: flex-start;
   gap: 4px;
   color: var(--main-grey-80, #292e32);
-  font-feature-settings: "calt"off;
+  font-feature-settings: "calt" off;
 
   font-family: Inter, sans-serif;
   font-size: 10px;
@@ -107,7 +108,7 @@
 .content__common-info {
   width: 1169px;
   color: var(--main-grey-90, #25292c);
-  font-feature-settings: "calt"off;
+  font-feature-settings: "calt" off;
 
   font-family: Inter;
   font-size: 14px;