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

Closed
wants to merge 7 commits into from
Closed

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

Changes from 6 commits
Commits
Show all changes
7 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
4f57530
Merge branch 'develop' of https://github.com/shauryag2002/care_fe int…
shauryag2002 Jan 18, 2025
766d77a
Update EncounterNotesTab.tsx
shauryag2002 Jan 18, 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 @@
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 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 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 @@
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex">
<div

Check failure on line 163 in src/pages/Encounters/tabs/EncounterNotesTab.tsx

View workflow job for this annotation

GitHub Actions / lint 

Replace `⏎················className="flex·cursor-pointer"⏎················onClick={navigateToUser}⏎··············` with `·className="flex·cursor-pointer"·onClick={navigateToUser}`

Check failure on line 163 in src/pages/Encounters/tabs/EncounterNotesTab.tsx

View workflow job for this annotation

GitHub Actions / cypress-run (1) 

Replace `⏎················className="flex·cursor-pointer"⏎················onClick={navigateToUser}⏎··············` with `·className="flex·cursor-pointer"·onClick={navigateToUser}`
className="flex cursor-pointer"
onClick={navigateToUser}
>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix formatting issues in click handlers.

The pipeline is failing due to formatting issues. Please fix the line breaks in the JSX attributes.

Apply this diff to fix the formatting:

-              <div
-                className="flex cursor-pointer"
-                onClick={navigateToUser}
-              >
+              <div className="flex cursor-pointer" onClick={navigateToUser}>
-          <span
-            className="text-xs text-gray-500 mb-1 cursor-pointer"
-            onClick={navigateToUser}
-          >
+          <span className="text-xs text-gray-500 mb-1 cursor-pointer" onClick={navigateToUser}>

Also applies to: 186-189

🧰 Tools
🪛 eslint

[error] 163-166: Replace ⏎················className="flex·cursor-pointer"⏎················onClick={navigateToUser}⏎·············· with ·className="flex·cursor-pointer"·onClick={navigateToUser}

(prettier/prettier)

🪛 GitHub Check: cypress-run (1)

[failure] 163-163:
Replace ⏎················className="flex·cursor-pointer"⏎················onClick={navigateToUser}⏎·············· with ·className="flex·cursor-pointer"·onClick={navigateToUser}

🪛 GitHub Check: lint

[failure] 163-163:
Replace ⏎················className="flex·cursor-pointer"⏎················onClick={navigateToUser}⏎·············· with ·className="flex·cursor-pointer"·onClick={navigateToUser}

🪛 GitHub Actions: Lint Code Base

[error] 163-163: Prettier formatting error: Incorrect line breaks in JSX attributes. The className and onClick attributes should be on the same line.

🪛 GitHub Actions: Cypress Tests

[error] 163-163: Code formatting error: Improper indentation and line breaks

🪛 GitHub Actions: Deploy Care Fe

[error] 163-163: Replace multiline className and onClick props with single line format

<Avatar
name={message.created_by.username}
imageUrl={message.created_by.profile_picture_url}
Expand All @@ -173,7 +183,10 @@
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 @@
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 @@
setNewMessage("");
setTimeout(() => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
setScrollToBottom(true);
}, 100);
},
onError: () => {
Expand All @@ -410,8 +425,14 @@

// 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 @@
))
)}
{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 @@
}
}
}}
className="max-h-[150px]"
/>
<Button
type="submit"
Expand Down
Loading