Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: UI Issues in Data Fetch Scroll, Text Area Overflow, and User Profile Navigation in notes tab #9919

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
+35 −5
Open

Fix: UI Issues in Data Fetch Scroll, Text Area Overflow, and User Profile Navigation in notes tab #9919

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
05af782
Add user navigation from message items and enhance loading indicator …
shauryag2002 Jan 11, 2025
6a8c171
Smooth scroll to pages element on EncounterNotesTab mount
shauryag2002 Jan 11, 2025
a91e058
revert date
shauryag2002 Jan 11, 2025
21200d2
Add scroll-to-bottom functionality for new messages in EncounterNotesTab
shauryag2002 Jan 12, 2025
a78bf53
Remove unused smooth scroll effect for pages element in EncounterNote…
shauryag2002 Jan 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 35 additions & 5 deletions src/pages/Encounters/tabs/EncounterNotesTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -136,6 +138,11 @@ const ThreadItem = ({
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 (
<div
Expand All @@ -153,7 +160,10 @@ const MessageItem = ({ message }: { message: Message }) => {
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex-shrink-0">
<div
className="flex-shrink-0 cursor-pointer"
onClick={navigateToUser}
>
<Avatar
name={message.created_by.username}
imageUrl={message.created_by.profile_picture_url}
Expand All @@ -173,7 +183,10 @@ const MessageItem = ({ message }: { message: Message }) => {
isCurrentUser ? "items-end" : "items-start",
)}
>
<span className="text-xs text-gray-500 mb-1">
<span
className="text-xs text-gray-500 mb-1 cursor-pointer"
onClick={navigateToUser}
>
{message.created_by.username}
</span>
<div
Expand Down Expand Up @@ -316,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<HTMLDivElement>(null);
const { ref, inView } = useInView();

Expand Down Expand Up @@ -394,6 +408,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
setNewMessage("");
setTimeout(() => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
setScrollToBottom(true);
}, 100);
},
onError: () => {
Expand All @@ -410,8 +425,14 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {

// Scroll to bottom on initial load and thread change
useEffect(() => {
if (messagesData && !messagesLoading && !isFetchingNextPage) {
if (
messagesData &&
!messagesLoading &&
!isFetchingNextPage &&
(messagesData.pages.length === 1 || scrollToBottom)
) {
messagesEndRef.current?.scrollIntoView();
setScrollToBottom(false);
}
}, [selectedThread, messagesData, messagesLoading, isFetchingNextPage]);

Expand Down Expand Up @@ -592,8 +613,16 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
))
)}
{isFetchingNextPage && (
<div className="py-2">
<MessageSkeleton />
<div className="flex justify-center absolute top-2 inset-x-0">
<div className="flex items-center space-x-2">
<div className="w-26 flex gap-2 px-2 py-1 bg-primary-200 rounded-md">
<div>{t("loading")}</div>
<Loader2
className="h-5 w-5 animate-spin top-0.5 relative"
size={8}
/>
</div>
</div>
</div>
)}
<div ref={ref} />
Expand All @@ -616,6 +645,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
}
}
}}
className="max-h-[150px]"
/>
<Button
type="submit"
Expand Down
Loading