Merge pull request #323 from ita-social-projects/#305-ActiveTabHighli…

…ghting #305 Active tab highlighting
ita-social-projects · Nov 29, 2023 · e39d068 · e39d068
2 parents 0d656b0 + 9f9c074
commit e39d068
Show file tree

Hide file tree

Showing 14 changed files with 170 additions and 46 deletions.
diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/Company.jsx b/FrontEnd/src/components/ProfileDetail/DetailedInfo/Company.jsx
@@ -1,15 +1,28 @@
 import { PropTypes } from 'prop-types';
+import { useEffect } from 'react';
 import classes from './Company.module.css';
 import ReadMore from './ReadMore';
+import { useContext } from 'react';
+import { ActiveLinksContext } from '../../../context/ActiveLinksContext';
 
 function Company ({ data }) {
+    const { setActiveLinks } = useContext(ActiveLinksContext);
 
     // TODO: implement logic for getting data from db when it's added on server side
 
     const competitiveEdge = '';
     const slogan = '';
     const companyData = data.common_info || competitiveEdge || slogan;
 
+    useEffect(() => {
+        if (companyData) {
+            setActiveLinks(prevData => [
+                ...prevData,
+                'about-company',
+               ]);
+            }
+        }, [setActiveLinks, companyData]);
+
     return (
         companyData ? (
             <div id="about-company" className={classes['about-company']}>

diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/Cooperation.jsx b/FrontEnd/src/components/ProfileDetail/DetailedInfo/Cooperation.jsx
@@ -1,9 +1,21 @@
+import { useEffect } from 'react';
+import { useContext } from 'react';
+import { ActiveLinksContext } from '../../../context/ActiveLinksContext';
 import classes from './Cooperation.module.css';
 import ReadMore from './ReadMore';
 
 function Cooperation () {
+    const { setActiveLinks } = useContext(ActiveLinksContext);
     const cooperationData = '';
 
+    useEffect(() => {
+        if (cooperationData) {
+            setActiveLinks(prevData => [
+              ...prevData,
+              'cooperation']);
+          }
+        }, [cooperationData, setActiveLinks]);
+
     // TODO: implement logic for getting data from db when it's added on server side
 
     return (

diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/Cooperation.module.css b/FrontEnd/src/components/ProfileDetail/DetailedInfo/Cooperation.module.css
@@ -48,6 +48,10 @@
 }
 
 .cooperation__content--description {
+    display: flex;
+    padding: 12px;
+    align-items: flex-start;
+    gap: 10px;
     width: 776px;
     color: var(--main-grey-90, #25292C);
     font-feature-settings: 'calt' off;

diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/Logistics.jsx b/FrontEnd/src/components/ProfileDetail/DetailedInfo/Logistics.jsx
@@ -1,9 +1,21 @@
+import { useEffect } from 'react';
+import { useContext } from 'react';
+import { ActiveLinksContext } from '../../../context/ActiveLinksContext';
 import classes from './Logistics.module.css';
 import ReadMore from './ReadMore';
 
 function Logistics () {
+    const { setActiveLinks } = useContext(ActiveLinksContext);
     const logisticsData = '';
 
+    useEffect(() => {
+        if (logisticsData) {
+            setActiveLinks(prevData => [
+              ...prevData,
+              'logistics']);
+          }
+        }, [logisticsData, setActiveLinks]);
+
     // TODO: implement logic for getting data from db when it's added on server side
 
     return (

diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/Logistics.module.css b/FrontEnd/src/components/ProfileDetail/DetailedInfo/Logistics.module.css
@@ -48,6 +48,10 @@
 }
 
 .logistics__content--description {
+    display: flex;
+    padding: 12px;
+    align-items: flex-start;
+    gap: 10px;
     width: 776px;
     color: var(--main-grey-90, #25292C);
     font-feature-settings: 'calt' off;

diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/ProductsServices.jsx b/FrontEnd/src/components/ProfileDetail/DetailedInfo/ProductsServices.jsx
@@ -1,16 +1,28 @@
 import { useMemo } from 'react';
 import { PropTypes } from 'prop-types';
+import { useEffect } from 'react';
+import { useContext } from 'react';
+import { ActiveLinksContext } from '../../../context/ActiveLinksContext';
 import classes from './ProductsServices.module.css';
 import ReadMore from './ReadMore';
 
 function ProductsServices ({ data }) {
+    const { setActiveLinks } = useContext(ActiveLinksContext);
     const profile = useMemo(() => {
         return {
             products: data.product_info,
             services: data.service_info
         };
       }, [data]);
 
+    useEffect(() => {
+    if (profile.products || profile.services) {
+        setActiveLinks(prevData => [
+            ...prevData,
+            'products-services']);
+        }
+    }, [setActiveLinks, profile.products, profile.services]);
+
     return (
         (profile.products || profile.services) ? (
             <div id="products-services" className={classes['products-services']}>

diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/Startup.jsx b/FrontEnd/src/components/ProfileDetail/DetailedInfo/Startup.jsx
@@ -1,9 +1,13 @@
 import { useMemo } from 'react';
 import { PropTypes } from 'prop-types';
+import { useEffect } from 'react';
+import { useContext } from 'react';
+import { ActiveLinksContext } from '../../../context/ActiveLinksContext';
 import classes from './Startup.module.css';
 import ReadMore from './ReadMore';
 
 function Startup ({ data }) {
+    const { setActiveLinks } = useContext(ActiveLinksContext);
     const profile = useMemo(() => {
         return {
           startup_idea: data.startup_idea,
@@ -38,6 +42,14 @@ function Startup ({ data }) {
 
     const hasSections = renderedSections.some((section) => section !== null);
 
+    useEffect(() => {
+      if (hasSections) {
+        setActiveLinks(prevData => [
+              ...prevData,
+              'startup']);
+          }
+      }, [hasSections, setActiveLinks]);
+
     return (
         hasSections ? (
             <div id="startup" className={classes['startup-wrapper']}>

diff --git a/FrontEnd/src/components/ProfileDetail/MainInfo/MainInfoSection.jsx b/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,
   };
diff --git a/FrontEnd/src/components/ProfileDetail/MainInfo/ProfileDetailNavBar.jsx b/FrontEnd/src/components/ProfileDetail/MainInfo/ProfileDetailNavBar.jsx
@@ -1,5 +1,9 @@
 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 { useContext } from 'react';
+import { ActiveLinksContext } from '../../../context/ActiveLinksContext';
 import classes from './ProfileDetailNavBar.module.css';
 
 const MENU_LINKS = {
@@ -10,38 +14,66 @@ const MENU_LINKS = {
     'cooperation': 'Формат співпраці',
 };
 
-function ProfileDetailNavBar() {
-
+function ProfileDetailNavBar({ data }) {
   const { hash } = useLocation ();
+  const navigate = useNavigate ();
+  const { activeLinks } = useContext(ActiveLinksContext);
+  const [activeLink, setActiveLink] = useState('');
+
+  useEffect(() => {
+    if (hash) {
+      setActiveLink(hash.substring(1));
+    } else {
+      setActiveLink(
+        data.is_registered && activeLinks.includes('about-company') ? 'about-company' :
+        data.is_startup && activeLinks.includes('startup') ? 'startup' : ''
+      );
+    }
+  }, [hash, data.is_registered, data.is_startup, activeLinks]);
+
+  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]) =>
+            activeLinks.includes(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,
+};
diff --git a/FrontEnd/src/components/ProfileDetail/MainInfo/ProfileDetailNavBar.module.css b/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;

diff --git a/FrontEnd/src/components/ProfileDetail/ProfileDetailPage.jsx b/FrontEnd/src/components/ProfileDetail/ProfileDetailPage.jsx
@@ -1,4 +1,5 @@
 import useSWR from 'swr';
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { PropTypes } from 'prop-types';
 
@@ -7,9 +8,11 @@ import ErrorPage404 from '../errorPages/ErrorPage404';
 import MainInfoSection from './MainInfo/MainInfoSection';
 import DetailedInfoSection from './DetailedInfo/DetailedInfoSection';
 import BannerImage from './BannerImage';
+import { ActiveLinksContext } from '../../context/ActiveLinksContext';
 import classes from './ProfileDetailPage.module.css';
 
 function ProfileDetailPage({ isAuthorized }) {
+  const [activeLinks, setActiveLinks] = useState([]);
   const authToken = localStorage.getItem('Token');
   const { id } = useParams();
   const urlProfile = `${process.env.REACT_APP_BASE_API_URL}/api/profiles/${id}`;
@@ -42,19 +45,21 @@ function ProfileDetailPage({ isAuthorized }) {
       isLoading ? (
         <Loader />
       ) : ( <>
+      <ActiveLinksContext.Provider value={{ activeLinks, setActiveLinks }}>
         <BannerImage data={fetchedProfile}/>
-        <div className={classes['profile-page']}>
-          <MainInfoSection
-            containsNotRequiredData={containsNotRequiredData}
-            isAuthorized={isAuthorized}
-            data={fetchedProfile}
-          />
-          <DetailedInfoSection
-            containsNotRequiredData ={containsNotRequiredData }
-            isAuthorized={isAuthorized}
-            data={fetchedProfile}
+          <div className={classes['profile-page']}>
+            <MainInfoSection
+              containsNotRequiredData={containsNotRequiredData}
+              isAuthorized={isAuthorized}
+              data={fetchedProfile}
             />
-        </div>
+            <DetailedInfoSection
+              containsNotRequiredData ={containsNotRequiredData }
+              isAuthorized={isAuthorized}
+              data={fetchedProfile}
+              />
+          </div>
+        </ActiveLinksContext.Provider>
         </>
       )
   );

diff --git a/FrontEnd/src/components/profileList/ProfileCard.jsx b/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,