From 05af78278f1cd57e65be31d95397b33ceef5a1ad Mon Sep 17 00:00:00 2001 From: Shaurya Gupta Date: Sun, 12 Jan 2025 00:10:58 +0530 Subject: [PATCH 1/6] Add user navigation from message items and enhance loading indicator in EncounterNotesTab --- .../Encounters/tabs/EncounterNotesTab.tsx | 80 +++++++++++++------ 1 file changed, 56 insertions(+), 24 deletions(-) diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx index d8a93b592c5..0c136d4b719 100644 --- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx +++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx @@ -13,6 +13,7 @@ import { Send, Users, } from "lucide-react"; +import { navigate } from "raviger"; import { useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { useInView } from "react-intersection-observer"; @@ -47,6 +48,7 @@ import { Avatar } from "@/components/Common/Avatar"; import Loading from "@/components/Common/Loading"; import useAuthUser from "@/hooks/useAuthUser"; +import useSlug from "@/hooks/useSlug"; import routes from "@/Utils/request/api"; import mutate from "@/Utils/request/mutate"; @@ -110,32 +112,42 @@ const ThreadItem = ({ isSelected: boolean; onClick: () => void; }) => ( - + onClick={onClick} + > +
+
+

{thread.title}

+ {/* Todo: Replace with thread.created */} +

{thread.created}

+
+ {isSelected && ( +
+ )} +
+ + ) ); // Message item component const MessageItem = ({ message }: { message: Message }) => { const authUser = useAuthUser(); const isCurrentUser = authUser?.external_id === message.created_by.id; + const facilityId = useSlug("facility"); + + const navigateToUser = () => { + navigate(`/facility/${facilityId}/users/${message.created_by.username}`); + }; return (
{ -
+
{ isCurrentUser ? "items-end" : "items-start", )} > - + {message.created_by.username}
{ // Scroll to bottom on initial load and thread change useEffect(() => { - if (messagesData && !messagesLoading && !isFetchingNextPage) { + if ( + messagesData && + !messagesLoading && + !isFetchingNextPage && + messagesData.pages.length === 1 + ) { messagesEndRef.current?.scrollIntoView(); } }, [selectedThread, messagesData, messagesLoading, isFetchingNextPage]); @@ -592,8 +615,16 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { )) )} {isFetchingNextPage && ( -
- +
+
+
+
{t("loading")}
+ +
+
)}
@@ -616,6 +647,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { } } }} + className="max-h-[150px]" /> - ) + {isSelected && ( +
+ )} +
+ ); // Message item component @@ -346,6 +341,12 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { }), }); + useEffect(() => { + const pagesElement = document.getElementById("pages"); + if (pagesElement) { + pagesElement.scrollIntoView({ behavior: "smooth" }); + } + }, []); // Auto-select first thread useEffect(() => { if (threadsData?.results.length && !selectedThread) { From a91e0580d0e729a0f82dc9ed1967fc23e8418873 Mon Sep 17 00:00:00 2001 From: Shaurya Gupta Date: Sun, 12 Jan 2025 00:51:35 +0530 Subject: [PATCH 3/6] revert date --- src/pages/Encounters/tabs/EncounterNotesTab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx index c55d3aa0d63..999eb530487 100644 --- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx +++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx @@ -125,7 +125,7 @@ const ThreadItem = ({

{thread.title}

{/* Todo: Replace with thread.created */} -

12/12/24

+

12/12/2024

{isSelected && (
From 21200d250c05ae389e38b4b225987862eb7e69e7 Mon Sep 17 00:00:00 2001 From: Shaurya Gupta Date: Sun, 12 Jan 2025 21:18:14 +0530 Subject: [PATCH 4/6] Add scroll-to-bottom functionality for new messages in EncounterNotesTab --- src/pages/Encounters/tabs/EncounterNotesTab.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx index 999eb530487..3f96bdc6076 100644 --- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx +++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx @@ -329,6 +329,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { const [isThreadsExpanded, setIsThreadsExpanded] = useState(false); const [showNewThreadDialog, setShowNewThreadDialog] = useState(false); const [newMessage, setNewMessage] = useState(""); + const [scrollToBottom, setScrollToBottom] = useState(false); const messagesEndRef = useRef(null); const { ref, inView } = useInView(); @@ -413,6 +414,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { setNewMessage(""); setTimeout(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); + setScrollToBottom(true); }, 100); }, onError: () => { @@ -433,9 +435,10 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { messagesData && !messagesLoading && !isFetchingNextPage && - messagesData.pages.length === 1 + (messagesData.pages.length === 1 || scrollToBottom) ) { messagesEndRef.current?.scrollIntoView(); + setScrollToBottom(false); } }, [selectedThread, messagesData, messagesLoading, isFetchingNextPage]); From a78bf53dac4bccf187bf7b1f2e8dd1eab268f38a Mon Sep 17 00:00:00 2001 From: Shaurya Gupta Date: Sun, 12 Jan 2025 22:10:28 +0530 Subject: [PATCH 5/6] Remove unused smooth scroll effect for pages element in EncounterNotesTab --- src/pages/Encounters/tabs/EncounterNotesTab.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx index 3f96bdc6076..8ee50c6683d 100644 --- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx +++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx @@ -342,12 +342,6 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => { }), }); - useEffect(() => { - const pagesElement = document.getElementById("pages"); - if (pagesElement) { - pagesElement.scrollIntoView({ behavior: "smooth" }); - } - }, []); // Auto-select first thread useEffect(() => { if (threadsData?.results.length && !selectedThread) { From 766d77a54e6d9e30cf69182c1ae465db984f2458 Mon Sep 17 00:00:00 2001 From: Shaurya Gupta Date: Sun, 19 Jan 2025 01:15:35 +0530 Subject: [PATCH 6/6] Update EncounterNotesTab.tsx --- src/pages/Encounters/tabs/EncounterNotesTab.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx index 8839eba617e..a5b2047d72d 100644 --- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx +++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx @@ -160,10 +160,7 @@ const MessageItem = ({ message }: { message: Message }) => { -
+
{ isCurrentUser ? "items-end" : "items-start", )} > - + {message.created_by.username}