From add747fbfc6f3c61f5ca5e7e792d8f1eefcf126a Mon Sep 17 00:00:00 2001 From: superolegatron Date: Mon, 19 Aug 2024 17:02:01 +0300 Subject: [PATCH 01/11] Added bell component --- FrontEnd/public/svg/bell-icon.svg | 7 +++++++ .../MiniComponents/BellForUpdates.jsx | 18 ++++++++++++++++++ .../MiniComponents/BellForUpdates.module.css | 9 +++++++++ 3 files changed, 34 insertions(+) create mode 100644 FrontEnd/public/svg/bell-icon.svg create mode 100644 FrontEnd/src/components/MiniComponents/BellForUpdates.jsx create mode 100644 FrontEnd/src/components/MiniComponents/BellForUpdates.module.css diff --git a/FrontEnd/public/svg/bell-icon.svg b/FrontEnd/public/svg/bell-icon.svg new file mode 100644 index 000000000..d9dac42a7 --- /dev/null +++ b/FrontEnd/public/svg/bell-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/FrontEnd/src/components/MiniComponents/BellForUpdates.jsx b/FrontEnd/src/components/MiniComponents/BellForUpdates.jsx new file mode 100644 index 000000000..4702a6f99 --- /dev/null +++ b/FrontEnd/src/components/MiniComponents/BellForUpdates.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './BellForUpdates.module.css'; + +export default function BellForUpdates({ savedIsUpdated }){ + return ( + Bell Icon + + ); +} + +BellForUpdates.propTypes={ + savedIsUpdated: PropTypes.bool.isRequired, +}; \ No newline at end of file diff --git a/FrontEnd/src/components/MiniComponents/BellForUpdates.module.css b/FrontEnd/src/components/MiniComponents/BellForUpdates.module.css new file mode 100644 index 000000000..70928c00e --- /dev/null +++ b/FrontEnd/src/components/MiniComponents/BellForUpdates.module.css @@ -0,0 +1,9 @@ +.bell { + color: #ffd800; + font-size: 24px; + margin-right: 5px; +} + +.bell.hidden { + visibility: hidden; +} \ No newline at end of file From ad9e02d4311ebce51b3fd0d6962479dba8163911 Mon Sep 17 00:00:00 2001 From: superolegatron Date: Mon, 19 Aug 2024 17:03:52 +0300 Subject: [PATCH 02/11] updated profile card for correct bell notification display --- .../components/profileList/ProfileCard.jsx | 41 +++++++++++++++---- .../profileList/ProfileCard.module.css | 10 ++++- 2 files changed, 43 insertions(+), 8 deletions(-) diff --git a/FrontEnd/src/components/profileList/ProfileCard.jsx b/FrontEnd/src/components/profileList/ProfileCard.jsx index 89ddaa24b..442152ccc 100644 --- a/FrontEnd/src/components/profileList/ProfileCard.jsx +++ b/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, setIsUpdated] = useState(data.saved_is_updated); + + useEffect(() => { + setIsUpdated(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,23 @@ export default function ProfileCard({ isAuthorized, data }) { } }; + const handleProfileViewed = async () => { + if (profile.savedIsUpdated) { + profile.savedIsUpdated = false; + try { + await axios.patch(`${process.env.REACT_APP_BASE_API_URL}/api/saved-list/${profile.id}/`, { company_pk: profile.id, is_updated: profile.savedIsUpdated }); + } catch (error) { + console.error(error); + } + } + }; + return (
- +
+ + +
); } @@ -121,6 +147,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, diff --git a/FrontEnd/src/components/profileList/ProfileCard.module.css b/FrontEnd/src/components/profileList/ProfileCard.module.css index fe3925fa5..333d69e69 100644 --- a/FrontEnd/src/components/profileList/ProfileCard.module.css +++ b/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; +} + +.icon-container { + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 100%; } \ No newline at end of file From a85adbe786a9217f437e38789c26faaabaea3ef0 Mon Sep 17 00:00:00 2001 From: superolegatron Date: Tue, 20 Aug 2024 14:21:39 +0300 Subject: [PATCH 03/11] deleted redundant code --- FrontEnd/src/components/MiniComponents/BellForUpdates.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/FrontEnd/src/components/MiniComponents/BellForUpdates.jsx b/FrontEnd/src/components/MiniComponents/BellForUpdates.jsx index 4702a6f99..b53aefc62 100644 --- a/FrontEnd/src/components/MiniComponents/BellForUpdates.jsx +++ b/FrontEnd/src/components/MiniComponents/BellForUpdates.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import styles from './BellForUpdates.module.css'; From 7ed970fc26423b569cc4ef42f50367fdc7913b52 Mon Sep 17 00:00:00 2001 From: superolegatron Date: Tue, 20 Aug 2024 23:47:35 +0300 Subject: [PATCH 04/11] minor changes --- .../src/components/profileList/ProfileCard.jsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/FrontEnd/src/components/profileList/ProfileCard.jsx b/FrontEnd/src/components/profileList/ProfileCard.jsx index 442152ccc..ae1df1a6a 100644 --- a/FrontEnd/src/components/profileList/ProfileCard.jsx +++ b/FrontEnd/src/components/profileList/ProfileCard.jsx @@ -16,10 +16,10 @@ const { Paragraph } = Typography; export default function ProfileCard({ isAuthorized, data }) { const { user } = useAuth(); const [isSaved, setIsSaved] = useState(data.is_saved); - const [savedIsUpdated, setIsUpdated] = useState(data.saved_is_updated); + const [savedIsUpdated, setSavedIsUpdated] = useState(data.saved_is_updated); useEffect(() => { - setIsUpdated(data.saved_is_updated); + setSavedIsUpdated(data.saved_is_updated); }, [data.saved_is_updated]); const profile = useMemo(() => { @@ -60,12 +60,14 @@ export default function ProfileCard({ isAuthorized, data }) { }; const handleProfileViewed = async () => { - if (profile.savedIsUpdated) { - profile.savedIsUpdated = false; + if (savedIsUpdated) { try { - await axios.patch(`${process.env.REACT_APP_BASE_API_URL}/api/saved-list/${profile.id}/`, { company_pk: profile.id, is_updated: profile.savedIsUpdated }); + await axios.patch(`${process.env.REACT_APP_BASE_API_URL}/api/saved-list/${profile.id}/`, { + is_updated: false + }); + setSavedIsUpdated(false); } catch (error) { - console.error(error); + console.error(error); } } }; From 8c72e897211faf880f4dd40f715c1fca63bffad0 Mon Sep 17 00:00:00 2001 From: superolegatron Date: Wed, 21 Aug 2024 00:18:10 +0300 Subject: [PATCH 05/11] minor changes --- FrontEnd/src/components/profileList/ProfileCard.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/FrontEnd/src/components/profileList/ProfileCard.jsx b/FrontEnd/src/components/profileList/ProfileCard.jsx index ae1df1a6a..c270dbb37 100644 --- a/FrontEnd/src/components/profileList/ProfileCard.jsx +++ b/FrontEnd/src/components/profileList/ProfileCard.jsx @@ -61,13 +61,14 @@ 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 }); - setSavedIsUpdated(false); } catch (error) { console.error(error); + setSavedIsUpdated(true); } } }; From 0eeb851e73a559001062c4b8f9c69effe043599d Mon Sep 17 00:00:00 2001 From: superolegatron Date: Wed, 21 Aug 2024 16:43:33 +0300 Subject: [PATCH 06/11] fix "jumping" star issue on some devices --- FrontEnd/src/components/profileList/ProfileCard.jsx | 4 ++-- FrontEnd/src/components/profileList/ProfileCard.module.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/FrontEnd/src/components/profileList/ProfileCard.jsx b/FrontEnd/src/components/profileList/ProfileCard.jsx index c270dbb37..436866edf 100644 --- a/FrontEnd/src/components/profileList/ProfileCard.jsx +++ b/FrontEnd/src/components/profileList/ProfileCard.jsx @@ -112,18 +112,18 @@ export default function ProfileCard({ isAuthorized, data }) { -
+
+
-
); } diff --git a/FrontEnd/src/components/profileList/ProfileCard.module.css b/FrontEnd/src/components/profileList/ProfileCard.module.css index 333d69e69..76de337c2 100644 --- a/FrontEnd/src/components/profileList/ProfileCard.module.css +++ b/FrontEnd/src/components/profileList/ProfileCard.module.css @@ -128,10 +128,10 @@ gap: 8px; } -.icon-container { +.bell-container { display: flex; justify-content: center; align-items: center; - width: 50px; + width: 30px; height: 100%; } \ No newline at end of file From 067b43cead33d4b8a3055f96f5bb02323c60f55c Mon Sep 17 00:00:00 2001 From: superolegatron Date: Wed, 21 Aug 2024 16:53:39 +0300 Subject: [PATCH 07/11] minor fixes --- FrontEnd/src/components/profileList/ProfileCard.jsx | 10 ++++------ .../src/components/profileList/ProfileCard.module.css | 8 -------- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/FrontEnd/src/components/profileList/ProfileCard.jsx b/FrontEnd/src/components/profileList/ProfileCard.jsx index 436866edf..5b93c4468 100644 --- a/FrontEnd/src/components/profileList/ProfileCard.jsx +++ b/FrontEnd/src/components/profileList/ProfileCard.jsx @@ -112,18 +112,16 @@ export default function ProfileCard({ isAuthorized, data }) { -
- -
- + + > ); } diff --git a/FrontEnd/src/components/profileList/ProfileCard.module.css b/FrontEnd/src/components/profileList/ProfileCard.module.css index 76de337c2..732220c79 100644 --- a/FrontEnd/src/components/profileList/ProfileCard.module.css +++ b/FrontEnd/src/components/profileList/ProfileCard.module.css @@ -126,12 +126,4 @@ align-self: stretch; max-width: 100%; gap: 8px; -} - -.bell-container { - display: flex; - justify-content: center; - align-items: center; - width: 30px; - height: 100%; } \ No newline at end of file From 0d5858be4bc32f6cd3e788e17365eacbd80bcb91 Mon Sep 17 00:00:00 2001 From: superolegatron Date: Wed, 21 Aug 2024 17:53:14 +0300 Subject: [PATCH 08/11] reverted previous commit (had some issues on different devices) --- FrontEnd/src/components/profileList/ProfileCard.jsx | 10 ++++++---- .../src/components/profileList/ProfileCard.module.css | 8 ++++++++ 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/FrontEnd/src/components/profileList/ProfileCard.jsx b/FrontEnd/src/components/profileList/ProfileCard.jsx index 5b93c4468..436866edf 100644 --- a/FrontEnd/src/components/profileList/ProfileCard.jsx +++ b/FrontEnd/src/components/profileList/ProfileCard.jsx @@ -112,16 +112,18 @@ export default function ProfileCard({ isAuthorized, data }) { - + - + + + > ); } diff --git a/FrontEnd/src/components/profileList/ProfileCard.module.css b/FrontEnd/src/components/profileList/ProfileCard.module.css index 732220c79..76de337c2 100644 --- a/FrontEnd/src/components/profileList/ProfileCard.module.css +++ b/FrontEnd/src/components/profileList/ProfileCard.module.css @@ -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%; } \ No newline at end of file From 040f6f08576db32a2ce961d2f989ade654248183 Mon Sep 17 00:00:00 2001 From: superolegatron Date: Fri, 23 Aug 2024 17:18:42 +0300 Subject: [PATCH 09/11] minor fixes --- FrontEnd/src/components/profileList/ProfileCard.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/FrontEnd/src/components/profileList/ProfileCard.jsx b/FrontEnd/src/components/profileList/ProfileCard.jsx index 436866edf..1499fba33 100644 --- a/FrontEnd/src/components/profileList/ProfileCard.jsx +++ b/FrontEnd/src/components/profileList/ProfileCard.jsx @@ -19,7 +19,7 @@ export default function ProfileCard({ isAuthorized, data }) { const [savedIsUpdated, setSavedIsUpdated] = useState(data.saved_is_updated); useEffect(() => { - setSavedIsUpdated(data.saved_is_updated); + setSavedIsUpdated(data.saved_is_updated); }, [data.saved_is_updated]); const profile = useMemo(() => { @@ -114,8 +114,7 @@ export default function ProfileCard({ isAuthorized, data }) {
Date: Mon, 26 Aug 2024 18:00:01 +0300 Subject: [PATCH 10/11] updated working logic, for now the callback is sent instead of cleaning a state --- .../components/profileList/ProfileCard.jsx | 18 +++++-------- .../components/profileList/ProfileList.jsx | 25 ++++++++++++++++++- 2 files changed, 30 insertions(+), 13 deletions(-) diff --git a/FrontEnd/src/components/profileList/ProfileCard.jsx b/FrontEnd/src/components/profileList/ProfileCard.jsx index 1499fba33..35c80757d 100644 --- a/FrontEnd/src/components/profileList/ProfileCard.jsx +++ b/FrontEnd/src/components/profileList/ProfileCard.jsx @@ -1,4 +1,4 @@ -import { useState, useMemo, useEffect } from 'react'; +import { useState, useMemo } from 'react'; import { Link } from 'react-router-dom'; import { Typography } from 'antd'; @@ -13,15 +13,9 @@ 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 [savedIsUpdated, setSavedIsUpdated] = useState(data.saved_is_updated); - - useEffect(() => { - setSavedIsUpdated(data.saved_is_updated); - }, [data.saved_is_updated]); - const profile = useMemo(() => { return { id: data.id, @@ -33,7 +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: data.saved_is_updated, + savedIsUpdated: savedIsUpdated, commonInfo: data.common_info, logo: data.logo, }; @@ -61,14 +55,14 @@ export default function ProfileCard({ isAuthorized, data }) { const handleProfileViewed = async () => { if (savedIsUpdated) { - setSavedIsUpdated(false); + 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); - setSavedIsUpdated(true); + onClearUpdate(true); } } }; @@ -114,7 +108,7 @@ export default function ProfileCard({ isAuthorized, data }) {
{ + 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 ( ( - + handleClearUpdate(item.id, isUpdated)} + /> )} /> From 08d377b279f86f66e28c7647211ee9ab61e35c39 Mon Sep 17 00:00:00 2001 From: superolegatron Date: Mon, 26 Aug 2024 18:26:45 +0300 Subject: [PATCH 11/11] minor changes --- FrontEnd/src/components/profileList/ProfileCard.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/FrontEnd/src/components/profileList/ProfileCard.jsx b/FrontEnd/src/components/profileList/ProfileCard.jsx index 35c80757d..a0574dbe6 100644 --- a/FrontEnd/src/components/profileList/ProfileCard.jsx +++ b/FrontEnd/src/components/profileList/ProfileCard.jsx @@ -143,10 +143,11 @@ 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, }), }).isRequired, + savedIsUpdated: PropTypes.bool.isRequired, + onClearUpdate: PropTypes.func.isRequired, };