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

@@ -9,10 +9,11 @@ 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 }) {
+export default function ProfileCard({ isAuthorized, data, savedIsUpdated, onClearUpdate }) {
   const { user } = useAuth();
   const [isSaved, setIsSaved] = useState(data.is_saved);
   const profile = useMemo(() => {
@@ -26,6 +27,7 @@ export default function ProfileCard({ isAuthorized, data }) {
       region: data.regions_ukr_display ? data.regions_ukr_display : '',
       categories: data.categories,
       isSaved: data.is_saved,
+      savedIsUpdated: savedIsUpdated,
       commonInfo: data.common_info,
       logo: data.logo,
     };
@@ -51,11 +53,26 @@ export default function ProfileCard({ isAuthorized, data }) {
     }
   };
 
+  const handleProfileViewed = async () => {
+    if (savedIsUpdated) {
+      onClearUpdate(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);
+        onClearUpdate(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 +106,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={savedIsUpdated}
+        ></BellForUpdates>
+      </div>
+        <StarForLike
+          isSaved={isSaved}
+          isAuthorized={isAuthorized}
+          ownProfile={ownProfile}
+          handleClick={isSaved ? handleDeleteSaved : handleSave}
+        ></StarForLike>
     </div>
   );
 }
@@ -126,4 +148,6 @@ ProfileCard.propTypes = {
       uuid: PropTypes.string,
     }),
   }).isRequired,
+  savedIsUpdated: PropTypes.bool.isRequired,
+  onClearUpdate: PropTypes.func.isRequired,
 };

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%;
 }

FrontEnd/src/components/profileList/ProfileList.jsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import { List } from 'antd';
 import ProfileCard from './ProfileCard';
 import css from './ProfileList.module.css';
@@ -27,6 +28,23 @@ export default function ProfileList({
   data,
   paginationFunc,
 }) {
+  const [savedIsUpdatedMap, setSavedIsUpdatedMap] = useState({});
+
+  useEffect(() => {
+    const initialMap = data.results.reduce((acc, item) => {
+      acc[item.id] = item.saved_is_updated;
+      return acc;
+    }, {});
+    setSavedIsUpdatedMap(initialMap);
+  }, [data]);
+
+  const handleClearUpdate = (profileId, isUpdated) => {
+    setSavedIsUpdatedMap((prev) => ({
+      ...prev,
+      [profileId]: isUpdated,
+    }));
+  };
+
   return (
     <List
       pagination={{
@@ -45,7 +63,12 @@ export default function ProfileList({
       split={false}
       renderItem={(item) => (
         <List.Item key={item.id}>
-          <ProfileCard isAuthorized={isAuthorized} data={item} />
+          <ProfileCard
+              isAuthorized={isAuthorized}
+              data={item}
+              savedIsUpdated={savedIsUpdatedMap[item.id]}
+              onClearUpdate={(isUpdated) => handleClearUpdate(item.id, isUpdated)}
+          />
         </List.Item>
       )}
     />