731 saved comapnies updates UI

FrontEnd/src/components/MiniComponents/BellForUpdates.jsx

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import styles from './BellForUpdates.module.css';
+
+export default function BellForUpdates({ savedIsUpdated }){
+    return (
+        <img
+            src={`${process.env.PUBLIC_URL}/svg/bell-icon.svg`}
+            className={`${styles['bell']} ${!savedIsUpdated ? styles['hidden'] : ''}`}
+            alt="Bell Icon"
+        />
+
+    );
+}
+
+BellForUpdates.propTypes={
+    savedIsUpdated: PropTypes.bool.isRequired,
+};

FrontEnd/src/components/MiniComponents/BellForUpdates.module.css

@@ -0,0 +1,9 @@
+.bell {
+  color: #ffd800;
+  font-size: 24px;
+  margin-right: 5px;
+}
+
+.bell.hidden {
+  visibility: hidden;
+}

FrontEnd/src/components/profileList/ProfileCard.jsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 import { Typography } from 'antd';
@@ -9,12 +9,19 @@ import css from './ProfileCard.module.css';
 import axios from 'axios';
 import CategoryBadges from '../MiniComponents/CategoryBadges';
 import StarForLike from '../MiniComponents/StarForLike';
+import BellForUpdates from '../MiniComponents/BellForUpdates';
 
 const { Paragraph } = Typography;
 
 export default function ProfileCard({ isAuthorized, data }) {
   const { user } = useAuth();
   const [isSaved, setIsSaved] = useState(data.is_saved);
+  const [savedIsUpdated, setSavedIsUpdated] = useState(data.saved_is_updated);
+
+  useEffect(() => {
+    setSavedIsUpdated(data.saved_is_updated);
+  }, [data.saved_is_updated]);
+
   const profile = useMemo(() => {
     return {
       id: data.id,
@@ -26,6 +33,7 @@ export default function ProfileCard({ isAuthorized, data }) {
       region: data.regions_ukr_display ? data.regions_ukr_display : '',
       categories: data.categories,
       isSaved: data.is_saved,
+      savedIsUpdated: data.saved_is_updated,
       commonInfo: data.common_info,
       logo: data.logo,
     };
@@ -51,11 +59,26 @@ export default function ProfileCard({ isAuthorized, data }) {
     }
   };
 
+  const handleProfileViewed = async () => {
+    if (savedIsUpdated) {
+      setSavedIsUpdated(false);
+      try {
+        await axios.patch(`${process.env.REACT_APP_BASE_API_URL}/api/saved-list/${profile.id}/`, {
+          is_updated: false
+        });
+      } catch (error) {
+        console.error(error);
+        setSavedIsUpdated(true);
+      }
+    }
+  };
+
   return (
     <div className={css['company-card']}>
       <Link
         className={css['company-card__link']}
         to={`/profile-detail/${profile.id}`}
+        onClick={handleProfileViewed}
       >
         <div className={css['logo-box']}>
           <img
@@ -89,12 +112,17 @@ export default function ProfileCard({ isAuthorized, data }) {
           </div>
         </div>
       </Link>
-      <StarForLike
-        isSaved={isSaved}
-        isAuthorized={isAuthorized}
-        ownProfile={ownProfile}
-        handleClick={isSaved ? handleDeleteSaved : handleSave}
-      ></StarForLike>
+      <div className={css['bell-container']}>
+        <BellForUpdates
+          savedIsUpdated={data.saved_is_updated}
+        ></BellForUpdates>
+      </div>
+        <StarForLike
+          isSaved={isSaved}
+          isAuthorized={isAuthorized}
+          ownProfile={ownProfile}
+          handleClick={isSaved ? handleDeleteSaved : handleSave}
+        ></StarForLike>
     </div>
   );
 }
@@ -121,6 +149,7 @@ ProfileCard.propTypes = {
     ),
     common_info: PropTypes.string,
     is_saved: PropTypes.bool.isRequired,
+    saved_is_updated: PropTypes.bool.isRequired,
     logo: PropTypes.shape({
       path: PropTypes.string,
       uuid: PropTypes.string,

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

@@ -107,7 +107,7 @@
 }
 
 .content__common-info {
-  width: 1169px;
+  width: 1150px;
   color: var(--main-grey-90, #25292c);
   font-feature-settings: "calt" off;
 
@@ -126,4 +126,12 @@
   align-self: stretch;
   max-width: 100%;
   gap: 8px;
+}
+
+.bell-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 100%;
 }