From 985be8507b6d304f46350b53b15a52728945a41f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20L=C3=B3pez?= Date: Fri, 21 Mar 2025 11:21:33 -0600 Subject: [PATCH 1/4] Adding read:false to get message duck --- src/Nav/MessageMenu.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/Nav/MessageMenu.js b/src/Nav/MessageMenu.js index f27afc12a..8766486ae 100644 --- a/src/Nav/MessageMenu.js +++ b/src/Nav/MessageMenu.js @@ -37,15 +37,21 @@ const MessageMenu = () => { [state.results.length, subjects] ); - const fetchMenuMessages = useCallback(() => { - fetchAllMessages({ page_size: 100 }) - .then((results = []) => dispatch(fetchMessagesSuccess({ results }))) + const fetchMenuMessages = useCallback((getUnreadMessagesOnly = false) => { + const page_size = 100; + const params = !getUnreadMessagesOnly ? { page_size } : { page_size, read: false }; + fetchAllMessages(params) + .then((results = []) => { + dispatch(fetchMessagesSuccess({ results })); + }) .catch((error) => console.warn('error fetching messages', { error })); }, [dispatch]); useEffect(() => { - fetchMenuMessages(); - }, [dispatch, fetchMenuMessages]); + if (subjects.length > 0){ + fetchMenuMessages(true); + } + }, [dispatch, fetchMenuMessages, subjects]); return canShowMessageMenu ? Date: Mon, 24 Mar 2025 13:05:39 -0600 Subject: [PATCH 2/4] Adding new duck to handle fetch of unread message count --- src/MessageList/ParamFedMessageList.js | 9 +++--- src/MessagesModal/index.js | 4 +-- src/Nav/MessageMenu.js | 42 ++++++++++++++++++-------- src/ducks/messaging.js | 26 ++++++++++++++++ 4 files changed, 62 insertions(+), 19 deletions(-) diff --git a/src/MessageList/ParamFedMessageList.js b/src/MessageList/ParamFedMessageList.js index 13e81c051..2f07e8f46 100644 --- a/src/MessageList/ParamFedMessageList.js +++ b/src/MessageList/ParamFedMessageList.js @@ -9,7 +9,7 @@ import { fetchMessagesSuccess, INITIAL_MESSAGE_LIST_STATE, messageListReducer, - updateMessageFromRealtime, + updateMessageFromRealtime } from '../ducks/messaging'; import { extractSubjectFromMessage } from '../utils/messaging'; import { SocketContext } from '../withSocketConnection'; @@ -19,7 +19,7 @@ import MessageList from './'; import styles from './styles.module.scss'; -const ParamFedMessageList = ({ isReverse, params, ...restProps }) => { +const ParamFedMessageList = ({ isReverse, params, onMessageRead, ...restProps }) => { const { t } = useTranslation('components', { keyPrefix: 'messageList.paramFedMessageList' }); const socket = useContext(SocketContext); @@ -84,9 +84,10 @@ const ParamFedMessageList = ({ isReverse, params, ...restProps }) => { useEffect(() => { if (!!unreads.length) { - bulkReadMessages(unreads.map(({ id }) => id)); + bulkReadMessages(unreads.map(({ id }) => id)) + .then(() => onMessageRead?.()); } - }, [unreads]); + }, [unreads, dispatch, onMessageRead]); return
{ +const MessagesModal = ({ onSelectSubject, selectedSubject, onMessagesRead }) => { const { t } = useTranslation('top-bar', { keyPrefix: 'messagesModal' }); const subjectStore = useSelector((state) => state.data.subjectStore); @@ -73,7 +73,7 @@ const MessagesModal = ({ onSelectSubject, selectedSubject }) => { {selectedSubject && - + } {!selectingRecipient && <> diff --git a/src/Nav/MessageMenu.js b/src/Nav/MessageMenu.js index 8766486ae..84505ff1e 100644 --- a/src/Nav/MessageMenu.js +++ b/src/Nav/MessageMenu.js @@ -6,7 +6,13 @@ import { useTranslation } from 'react-i18next'; import { ReactComponent as ChatIcon } from '../common/images/icons/chat-icon.svg'; import { allSubjects } from '../selectors/subjects'; -import { fetchAllMessages, fetchMessagesSuccess, updateMessageFromRealtime } from '../ducks/messaging'; +import { + fetchAllMessages, + fetchMessagesSuccess, + getUnreadMessagesCount, + updateMessageFromRealtime, + updateUnreadMessagesCount +} from '../ducks/messaging'; import MessageContext from '../InReach/context'; import Badge from '../Badge'; @@ -19,6 +25,7 @@ import styles from './styles.module.scss'; const RADIO_MESSAGE_REALTIME = 'radio_message'; const SLEEP_DETECTION_INTERVAL = 60000; +const MENU_MESSAGES_PAGE_SIZE = 100; const MessageMenu = () => { const { t } = useTranslation('top-bar', { keyPrefix: 'nav.messageMenu' }); @@ -29,18 +36,27 @@ const MessageMenu = () => { const [selectedSubject, setSelectedSubject] = useState(null); - const unreads = state.results.filter((message) => !message.read); - const badgeCount = unreads.length > 9 ? '9+' : unreads.length; + const { unreadMessagesCount } = state; + const badgeCount = unreadMessagesCount > 9 ? '9+' : unreadMessagesCount; const canShowMessageMenu = useMemo( () => !!state.results.length || !!subjects.filter((subject) => !!subject?.messaging?.length).length, [state.results.length, subjects] ); - const fetchMenuMessages = useCallback((getUnreadMessagesOnly = false) => { - const page_size = 100; - const params = !getUnreadMessagesOnly ? { page_size } : { page_size, read: false }; - fetchAllMessages(params) + const onMessagesRead = useCallback(() => dispatch(updateUnreadMessagesCount(0)), [dispatch]); + + const checkForUnreadMessages = useCallback(() => { + getUnreadMessagesCount() + .then((response) => { + const { data: { data } } = response; + dispatch(updateUnreadMessagesCount(data.count)); + }) + .catch((error) => console.warn('error checking for unread messages', { error })); + }, [dispatch]); + + const fetchMenuMessages = useCallback(() => { + fetchAllMessages({ page_size: MENU_MESSAGES_PAGE_SIZE }) .then((results = []) => { dispatch(fetchMessagesSuccess({ results })); }) @@ -48,10 +64,8 @@ const MessageMenu = () => { }, [dispatch]); useEffect(() => { - if (subjects.length > 0){ - fetchMenuMessages(true); - } - }, [dispatch, fetchMenuMessages, subjects]); + checkForUnreadMessages(); + }, [checkForUnreadMessages]); return canShowMessageMenu ? { - {!!unreads.length && } + {!!unreadMessagesCount && } - setSelectedSubject(subject)} selectedSubject={selectedSubject} /> + setSelectedSubject(subject)} + selectedSubject={selectedSubject} + onMessagesRead={onMessagesRead} /> ({ refresh, }); +export const updateUnreadMessagesCount = (payload) => ({ + type: UPDATE_UNREAD_MESSAGES_COUNT, + payload, +}); + export const updateMessageFromRealtime = payload => ({ type: SOCKET_MESSAGE_UPDATE, @@ -35,6 +41,18 @@ export const removeMessageById = id => ({ const { get, post } = axios; +export const getUnreadMessagesCount = () => { + const paramString = objectToParamString( + { + include_additional_data: false, + page_size: 0, + read: false + }, + ); + + return get(`${MESSAGING_API_URL}?${paramString}`); +}; + export const fetchMessages = (params = {}) => { const paramString = objectToParamString( { include_additional_data: false, page_size: 25, ...params }, @@ -67,6 +85,7 @@ export const INITIAL_MESSAGE_LIST_STATE = { next: null, previous: null, count: 0, + unreadMessagesCount: 0, }; export const messageListReducer = (state = INITIAL_MESSAGE_LIST_STATE, action) => { const { refresh, type, payload } = action; @@ -95,6 +114,13 @@ export const messageListReducer = (state = INITIAL_MESSAGE_LIST_STATE, action) = }; } + if (type === UPDATE_UNREAD_MESSAGES_COUNT) { + return { + ...state, + unreadMessagesCount: payload, + }; + } + if (type === REMOVE_MESSAGE) { return { ...state, From 26066efa5080229a63e1f34d89fe9067a4e346f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20L=C3=B3pez?= Date: Wed, 26 Mar 2025 13:09:54 -0600 Subject: [PATCH 3/4] Adding feedback PR --- src/MessageList/ParamFedMessageList.js | 7 +++--- src/MessagesModal/index.js | 4 ++-- src/Nav/MessageMenu.js | 19 ++++++---------- src/ducks/messaging.js | 30 ++++++++++++-------------- 4 files changed, 25 insertions(+), 35 deletions(-) diff --git a/src/MessageList/ParamFedMessageList.js b/src/MessageList/ParamFedMessageList.js index 2f07e8f46..3bfd23417 100644 --- a/src/MessageList/ParamFedMessageList.js +++ b/src/MessageList/ParamFedMessageList.js @@ -19,7 +19,7 @@ import MessageList from './'; import styles from './styles.module.scss'; -const ParamFedMessageList = ({ isReverse, params, onMessageRead, ...restProps }) => { +const ParamFedMessageList = ({ isReverse, params, ...restProps }) => { const { t } = useTranslation('components', { keyPrefix: 'messageList.paramFedMessageList' }); const socket = useContext(SocketContext); @@ -84,10 +84,9 @@ const ParamFedMessageList = ({ isReverse, params, onMessageRead, ...restProps }) useEffect(() => { if (!!unreads.length) { - bulkReadMessages(unreads.map(({ id }) => id)) - .then(() => onMessageRead?.()); + bulkReadMessages(unreads.map(({ id }) => id)); } - }, [unreads, dispatch, onMessageRead]); + }, [unreads, dispatch]); return
{ +const MessagesModal = ({ onSelectSubject, selectedSubject }) => { const { t } = useTranslation('top-bar', { keyPrefix: 'messagesModal' }); const subjectStore = useSelector((state) => state.data.subjectStore); @@ -73,7 +73,7 @@ const MessagesModal = ({ onSelectSubject, selectedSubject, onMessagesRead }) => {selectedSubject && - + } {!selectingRecipient && <> diff --git a/src/Nav/MessageMenu.js b/src/Nav/MessageMenu.js index 84505ff1e..a72e042d6 100644 --- a/src/Nav/MessageMenu.js +++ b/src/Nav/MessageMenu.js @@ -9,9 +9,8 @@ import { allSubjects } from '../selectors/subjects'; import { fetchAllMessages, fetchMessagesSuccess, - getUnreadMessagesCount, - updateMessageFromRealtime, - updateUnreadMessagesCount + fetchUnreadMessagesCount, + updateMessageFromRealtime, updateUnreadMessagesCount } from '../ducks/messaging'; import MessageContext from '../InReach/context'; @@ -44,14 +43,9 @@ const MessageMenu = () => { [state.results.length, subjects] ); - const onMessagesRead = useCallback(() => dispatch(updateUnreadMessagesCount(0)), [dispatch]); - const checkForUnreadMessages = useCallback(() => { - getUnreadMessagesCount() - .then((response) => { - const { data: { data } } = response; - dispatch(updateUnreadMessagesCount(data.count)); - }) + fetchUnreadMessagesCount() + .then(({ data: { data: { count } } }) => dispatch(updateUnreadMessagesCount(count))) .catch((error) => console.warn('error checking for unread messages', { error })); }, [dispatch]); @@ -65,7 +59,7 @@ const MessageMenu = () => { useEffect(() => { checkForUnreadMessages(); - }, [checkForUnreadMessages]); + }, [checkForUnreadMessages, state.results]); return canShowMessageMenu ? { setSelectedSubject(subject)} - selectedSubject={selectedSubject} - onMessagesRead={onMessagesRead} /> + selectedSubject={selectedSubject} /> ({ refresh, }); -export const updateUnreadMessagesCount = (payload) => ({ - type: UPDATE_UNREAD_MESSAGES_COUNT, - payload, -}); - - export const updateMessageFromRealtime = payload => ({ type: SOCKET_MESSAGE_UPDATE, payload, @@ -39,19 +33,23 @@ export const removeMessageById = id => ({ payload: id, }); +export const updateUnreadMessagesCount = (payload) => ({ + type: UPDATE_UNREAD_MESSAGES_COUNT, + payload, +}); + const { get, post } = axios; -export const getUnreadMessagesCount = () => { - const paramString = objectToParamString( - { - include_additional_data: false, - page_size: 0, - read: false - }, - ); +export const fetchUnreadMessagesCount = () => axios.get(`${MESSAGING_API_URL}?include_additional_data=false&page_size=0&read=false`); - return get(`${MESSAGING_API_URL}?${paramString}`); -}; +/*export const fetchUnreadMessagesCount = async () => { + try { + const response = await ; + dispatch({ payload: response.data.data.count, type: UPDATE_UNREAD_MESSAGES_COUNT }); + } catch (error){ + ; + } +};*/ export const fetchMessages = (params = {}) => { const paramString = objectToParamString( From 18408f8ea7ce12608a63a450d7e6653f34956fc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20L=C3=B3pez?= Date: Wed, 26 Mar 2025 13:11:44 -0600 Subject: [PATCH 4/4] Reset files --- src/MessageList/ParamFedMessageList.js | 4 ++-- src/ducks/messaging.js | 9 --------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/MessageList/ParamFedMessageList.js b/src/MessageList/ParamFedMessageList.js index 3bfd23417..13e81c051 100644 --- a/src/MessageList/ParamFedMessageList.js +++ b/src/MessageList/ParamFedMessageList.js @@ -9,7 +9,7 @@ import { fetchMessagesSuccess, INITIAL_MESSAGE_LIST_STATE, messageListReducer, - updateMessageFromRealtime + updateMessageFromRealtime, } from '../ducks/messaging'; import { extractSubjectFromMessage } from '../utils/messaging'; import { SocketContext } from '../withSocketConnection'; @@ -86,7 +86,7 @@ const ParamFedMessageList = ({ isReverse, params, ...restProps }) => { if (!!unreads.length) { bulkReadMessages(unreads.map(({ id }) => id)); } - }, [unreads, dispatch]); + }, [unreads]); return
axios.get(`${MESSAGING_API_URL}?include_additional_data=false&page_size=0&read=false`); -/*export const fetchUnreadMessagesCount = async () => { - try { - const response = await ; - dispatch({ payload: response.data.data.count, type: UPDATE_UNREAD_MESSAGES_COUNT }); - } catch (error){ - ; - } -};*/ - export const fetchMessages = (params = {}) => { const paramString = objectToParamString( { include_additional_data: false, page_size: 25, ...params },