Merge pull request #350 from ita-social-projects/#331-ProfileViewRedi…

…rectToEditMyProfile #331[Profile View] Redirect to edit profile
ita-social-projects · Dec 10, 2023 · d5609ec · d5609ec
2 parents a25d9a9 + a4e4b93
commit d5609ec
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 13 deletions.
diff --git a/FrontEnd/src/components/ProfileDetail/MainInfo/TitleInfo.jsx b/FrontEnd/src/components/ProfileDetail/MainInfo/TitleInfo.jsx
@@ -1,7 +1,9 @@
 import { useState, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Badge } from 'antd';
 import { StarOutlined, StarFilled } from '@ant-design/icons';
 import { PropTypes } from 'prop-types';
+import classNames from 'classnames';
 import useSWRMutation from 'swr/mutation';
 
 import { useUser } from '../../../hooks';
@@ -10,6 +12,7 @@ import classes from './TitleInfo.module.css';
 
 function TitleInfo({ isAuthorized, data }) {
   const { user } = useUser();
+  const navigate = useNavigate();
   const [isSaved, setIsSaved] = useState(data.is_saved);
   const profile = useMemo(() => {
     return {
@@ -72,6 +75,10 @@ function TitleInfo({ isAuthorized, data }) {
     }
   };
 
+  const navigateToEditProfile = () => {
+    navigate('/profile/user-info');
+  };
+
   const filledStar = (
     <StarFilled
       style={{ color: '#FFD800', fontSize: '24px' }}
@@ -85,6 +92,12 @@ function TitleInfo({ isAuthorized, data }) {
     />
   );
 
+  const getStarVisibility = () => {
+    if (isAuthorized) {
+        return isSaved ? filledStar : outlinedStar;
+      }
+  };
+
   const CategoryBadges = ({ categories }) => {
     return (
       <>
@@ -133,15 +146,30 @@ function TitleInfo({ isAuthorized, data }) {
         </div>
         <div className={classes['title-block__company_region']}>{profile.region}</div>
       </div>
-      {isAuthorized && !ownProfile ? (
-        <button
-          onClick={handleClick}
-          type="button"
-          className={`${classes['title-block__button']} ${isSaved && classes['added_to_saved__button']}`}
-        >
-            <span className={`${classes['title-block__button--text']} ${isSaved && classes['added_to_saved__button--text']}`}>{!isSaved ? 'Додати в збережені' : 'Додано в збережені'}</span>
-          {isAuthorized ? (isSaved ? filledStar : outlinedStar) : null}
-        </button>
+      {isAuthorized ? (
+        <>
+          {!ownProfile && (
+            <button
+              onClick={handleClick}
+              type="button"
+              className={classNames(classes['title-block__button'], {[classes['added_to_saved__button']]: isSaved})}
+            >
+              <span className={classNames(classes['title-block__button--text'], {[classes['added_to_saved__button--text']]: isSaved})}>
+                {!isSaved ? 'Додати в збережені' : 'Додано в збережені'}
+              </span>
+              {getStarVisibility()}
+            </button>
+          )}
+          {ownProfile && (
+            <a
+              role="link"
+              className={`${classes['title-block__button']} ${classes['title-block__link']}`}
+              onClick={navigateToEditProfile}
+            >
+              <span className={`${classes['title-block__button--text']}`}>Редагувати профіль</span>
+            </a>
+          )}
+        </>
       ) : null}
     </div>
   );

diff --git a/FrontEnd/src/components/ProfileDetail/MainInfo/TitleInfo.module.css b/FrontEnd/src/components/ProfileDetail/MainInfo/TitleInfo.module.css
@@ -1,6 +1,6 @@
 .title-block {
     display: flex;
-    width: 1304px;
+    width: 1280px;
     padding: 16px 12px 8px 12px;
     align-items: flex-start;
     gap: 12px;
@@ -26,10 +26,9 @@
 
 .title-block__about {
     display: flex;
-    width: 1010px;
     flex-direction: column;
     align-items: flex-start;
-    flex-shrink: 0;
+    flex: 1 0 0;
 }
 
 .title-block__activity {
@@ -77,7 +76,7 @@
 
 .title-block__button {
     display: flex;
-    height: 34px;
+    height: 32px;
     padding: 5px 15px;
     justify-content: center;
     align-items: center;
@@ -88,6 +87,10 @@
     cursor: pointer;
 }
 
+.title-block__link {
+    height: 22px;
+}
+
 .added_to_saved__button {
     background: var(--primary-green-80, #1F9A7C);
 }