Update the Card Design in Notice Board #9343
Conversation
WalkthroughThe pull request focuses on enhancing the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
src/components/Notifications/NoticeBoard.tsx (1)
26-26: Consider adjusting card margin for consistencyWhile the card styling looks good, the
my-1margin seems inconsistent with thegap-6used in the grid. Consider removing the margin since the grid gap already provides sufficient spacing.-className="overflow-hidden rounded shadow-md my-1" +className="overflow-hidden rounded shadow-md"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/components/Notifications/NoticeBoard.tsx(1 hunks)
🔇 Additional comments (2)
src/components/Notifications/NoticeBoard.tsx (2)
22-22: LGTM! Responsive grid layout with proper spacing
The grid container implementation with responsive columns and consistent gaps provides a clean layout across different screen sizes.
36-44: Consider using a more appropriate icon for user attribution
The Facebook Messenger icon (l-facebook-messenger) seems out of place for representing the user who caused the notification. Consider using a more appropriate icon like l-user or l-user-circle.
<div className="text-md my-1 text-secondary-700 mx-2 px-3">
- <CareIcon icon="l-facebook-messenger" className="mr-2" />
+ <CareIcon icon="l-user" className="mr-2" />
{formatName(item.caused_by)} -{" "}Let's verify that all text strings are properly internationalized:
|
Closing as duplicate of #9342 Please update the original PR instead 👍 |
|
@Jacobjeevan i closed the original PR becuase many unwanted changes got commited into that . Try to open these and get reviewd |
|
But both PRs are using the same branch @AnveshNalimela. So it's equivalent to re-opening your old PR right? |
|
@rithviknishad i just seen the in that PR 5 files got changed which are irrelavent and lot of commits so i closed that and reverted all changes and made the new PR |
|
@Jacobjeevan reopening this as github doesn't allow reopening old PR's if there are force pushes on to the same branch. |
There was a problem hiding this comment.
by avatar in my previous change request, I meant this: https://github.com/ohcnetwork/care_fe/blob/develop/src/components/Common/Avatar.tsx
Not an icon.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/Notifications/NoticeBoard.tsx (1)
1-25: Consider organizing imports by categoryGroup imports into these categories for better maintainability:
- React and core dependencies
- UI components
- Utils and helpers
- Local components and types
import { useQuery } from "@tanstack/react-query"; import { useState } from "react"; import React from "react"; import { useTranslation } from "react-i18next"; + import CareIcon from "@/CAREUI/icons/CareIcon"; - import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTrigger, } from "@/components/ui/dialog"; + import { Avatar } from "@/components/Common/Avatar"; import Loading from "@/components/Common/Loading"; import Page from "@/components/Common/Page"; + import routes from "@/Utils/request/api"; import query from "@/Utils/request/query"; import { formatName, relativeTime } from "@/Utils/utils"; + import { NotificationData } from "./models";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Notifications/NoticeBoard.tsx(1 hunks)
🔇 Additional comments (5)
src/components/Notifications/NoticeBoard.tsx (5)
29-33: Update query configuration as discussed
Based on previous discussions:
- Add a limit parameter since we're only showing one page
- Remove unnecessary complexity from the query configuration
const { data, isLoading } = useQuery({
queryKey: ["notices"],
queryFn: query(routes.getNotifications, {
- queryParams: { event: "MESSAGE", medium_sent: "SYSTEM" },
+ queryParams: { event: "MESSAGE", medium_sent: "SYSTEM", limit: 14 },
}),
});40-60: Improve UserInfo component implementation
The component needs the following improvements:
- Define a proper interface for the props instead of using the entire NotificationData
- Remove redundant username display
- Use proper spacing classes
-const UserInfo: React.FC<NotificationData> = (notice) => (
+interface UserInfoProps {
+ caused_by: NotificationData['caused_by'];
+ created_date: string;
+}
+
+const UserInfo: React.FC<UserInfoProps> = ({ caused_by, created_date }) => (
- <div className="flex items-center bg-gray-100">
+ <div className="flex items-center bg-gray-100 w-full">
<Avatar
- name={formatName(notice.caused_by)}
- imageUrl={notice.caused_by.read_profile_picture_url}
- aria-label={`${formatName(notice.caused_by)}'s avatar`}
+ name={formatName(caused_by)}
+ imageUrl={caused_by.read_profile_picture_url}
+ aria-label={`${formatName(caused_by)}'s avatar`}
className="border-0 border-b border-b-secondary-300 rounded-full h-10 w-10 ml-5"
/>
<div className="text-md my-1 text-secondary-700 px-3">
<div className="flex font-bold items-center text-black">
- {formatName(notice.caused_by)}
- <span className="font-oblique text-gray-500 font-medium ml-2">
- {notice.caused_by.username}
- </span>
+ {formatName(caused_by)}
</div>
<div className="text-xs text-secondary-900 font-medium">
- {relativeTime(notice.created_date)}
+ {relativeTime(created_date)}
</div>
</div>
</div>
);61-77: Fix message truncation in formatMessage
The current implementation drops the first line of the message by using lines.slice(1).
const formatMessage = (message: string): React.ReactNode => {
const lines = message.split("\n");
- return lines.slice(1).map((line, index) => (
+ return lines.map((line, index) => (
<React.Fragment key={index}>
{line}
{index < lines.length - 1 && <br />}
</React.Fragment>
));
};79-104: Enhance dialog implementation and accessibility
The dialog needs several improvements:
- Use shadcn's Dialog components consistently
- Add proper ARIA attributes
- Improve structure and spacing
const NoticeDialog: React.FC<{ notice: NotificationData }> = ({ notice }) => {
return (
- <div className="m-0 w-full h-full rounded-md w-full">
+ <div className="m-0 w-full h-full rounded-md">
<DialogHeader>
+ <DialogTitle>Notice Details</DialogTitle>
<div className="flex justify-between items-center mb-4">
<CareIcon
className="h-10 w-12 text-primary-500 bg-primary-200 rounded-md p-2 m-5"
icon="l-envelope-open"
+ aria-hidden="true"
/>
</div>
</DialogHeader>
<div
className="flex-1 text-justify mx-6 mb-4"
id="notification-message"
+ role="article"
+ aria-labelledby="notice-title notice-content"
>
- <h1 className="font-semibold text-lg text-black mb-1">
+ <h1
+ id="notice-title"
+ className="font-semibold text-lg text-black mb-1"
+ >
{notice.title ? notice.title : notice.message?.split("\n")[0]}
</h1>
- <Message className="" message={notice.message} />
+ <Message
+ id="notice-content"
+ className="mt-2"
+ message={notice.message}
+ />
</div>109-146: Improve semantic structure and accessibility of notice cards
The notice cards structure needs improvements:
- Use semantic HTML elements
- Add proper ARIA attributes
- Improve responsive layout
-<section className="grid grid-cols-1 gap-6 xl:grid-cols-2 mt-4">
+<section
+ className="grid grid-cols-1 gap-6 xl:grid-cols-2 mt-4"
+ aria-label="Notice board"
+>
{data.results.map((item) => (
- <div
+ <article
key={`usr_${item.id}`}
+ aria-labelledby={`notice-${item.id}-title`}
className="my-2 flex-col flex justify-between rounded-lg shadow-md min-h-[30vh]"
>
<div
className="h-auto md:h-3/4 flex-1 text-justify mx-2 py-3 px-5 mb-3"
id="notification-message"
>
<h1
+ id={`notice-${item.id}-title`}
className="font-semibold text-lg text-black mb-1 truncate hover:text-clip"
>
{item.title ? item.title : item.message?.split("\n")[0]}
</h1>
- <Message className="line-clamp-4" message={item.message} />
+ <Message
+ className="line-clamp-4"
+ message={item.message}
+ aria-labelledby={`notice-${item.id}-title`}
+ />
</div>
rithviknishad
added
needs testing
needs review
and removed
changes required
needs review
labels
|
@AnveshNalimela fix the cypress test failure, related to notice board |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/components/Notifications/NoticeBoard.tsx (3)
17-17: Convert relative imports to absolute importsFollowing the project's conventions, convert these relative imports to absolute imports.
-import { Avatar } from "@/components/Common/Avatar"; +import { Avatar } from "components/Common/Avatar"; -import { NotificationData } from "@/components/Notifications/models"; +import { NotificationData } from "components/Notifications/models"; -import query from "@/Utils/request/query"; +import query from "Utils/request/query"; -import { formatName, relativeTime } from "@/Utils/utils"; +import { formatName, relativeTime } from "Utils/utils";Also applies to: 20-20, 23-23, 24-24
28-32: Optimize query configurationBased on previous discussions:
- Add a limit parameter since we're only showing one page
- Remove unnecessary complexity from the query configuration
const { data, isLoading } = useQuery({ queryKey: ["notices"], queryFn: query(routes.getNotifications, { - queryParams: { event: "MESSAGE", medium_sent: "SYSTEM" }, + queryParams: { event: "MESSAGE", medium_sent: "SYSTEM", limit: 14 }, }), });
108-108: Improve notice card structure and text displayThe notice card structure and text display can be enhanced:
- Add aria-label to the section for better accessibility
- Use consistent line clamping for title and message
-<section className="grid grid-cols-1 gap-6 xl:grid-cols-2 mt-4"> +<section className="grid grid-cols-1 gap-6 xl:grid-cols-2 mt-4" aria-label="Notice board"> <div className="h-auto md:h-3/4 flex-1 text-justify mx-2 py-3 px-5 mb-3" id="notification-message" + role="article" > - <h1 className="font-semibold text-lg text-black mb-1 truncate hover:text-clip"> + <h1 className="font-semibold text-lg text-black mb-1 line-clamp-1 hover:line-clamp-none"> {item.title ? item.title : item.message?.split("\n")[0]} </h1> <Message className="line-clamp-4" message={item.message} /> </div>Also applies to: 114-122
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Notifications/NoticeBoard.tsx(1 hunks)
🔇 Additional comments (2)
src/components/Notifications/NoticeBoard.tsx (2)
60-68:
Fix message truncation in formatMessage
The current implementation drops the first line of the message by using lines.slice(1).
const formatMessage = (message: string): React.ReactNode => {
const lines = message.split("\n");
- return lines.slice(1).map((line, index) => (
+ return lines.map((line, index) => (
<React.Fragment key={index}>
{line}
{index < lines.length - 1 && <br />}
</React.Fragment>
));
};Likely invalid or redundant comment.
39-59: 🛠️ Refactor suggestion
Improve UserInfo component structure and props
The component needs better typing and reduced redundancy:
- Use a dedicated props interface instead of the entire NotificationData
- Remove redundant username display
-const UserInfo: React.FC<NotificationData> = (notice) => (
+interface UserInfoProps {
+ caused_by: NotificationData['caused_by'];
+ created_date: string;
+}
+
+const UserInfo: React.FC<UserInfoProps> = ({ caused_by, created_date }) => (
<div className="flex items-center bg-gray-100">
<Avatar
- name={formatName(notice.caused_by)}
- imageUrl={notice.caused_by.read_profile_picture_url}
+ name={formatName(caused_by)}
+ imageUrl={caused_by.read_profile_picture_url}
className="border-0 border-b border-b-secondary-300 rounded-full h-10 w-10 ml-5"
/>
<div className="text-md my-1 text-secondary-700 px-3">
<div className="flex font-bold items-center text-black">
- {formatName(notice.caused_by)}
- <span className="font-oblique text-gray-500 font-medium ml-2">
- {notice.caused_by.username}
- </span>
+ {formatName(caused_by)}
</div>
<div className="text-xs text-secondary-900 font-medium ">
- {relativeTime(notice.created_date)}
+ {relativeTime(created_date)}
</div>
</div>
</div>
);Likely invalid or redundant comment.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/components/Notifications/NoticeBoard.tsx (3)
1-24: Convert relative imports to absolute importsBased on the team's preferences from previous reviews, convert relative imports to absolute imports for better maintainability.
-import query from "@/Utils/request/query"; -import { formatName, relativeTime } from "@/Utils/utils"; +import { query } from "@care/utils/request/query"; +import { formatName, relativeTime } from "@care/utils/utils";
28-32: Simplify query configurationAs discussed in previous reviews:
- Remove the offset parameter since we're only showing one page
- Add a limit parameter to explicitly specify the page size
const { data, isLoading } = useQuery({ queryKey: ["notices"], queryFn: query(routes.getNotifications, { - queryParams: { offset: 0, event: "MESSAGE", medium_sent: "SYSTEM" }, + queryParams: { event: "MESSAGE", medium_sent: "SYSTEM", limit: 14 }, }), });
108-145: Enhance notice board accessibility and responsivenessThe notice board structure is good but could benefit from improved accessibility and responsive design.
-<section className="grid grid-cols-1 gap-6 xl:grid-cols-2 mt-4"> +<section + className="grid grid-cols-1 gap-6 xl:grid-cols-2 mt-4" + aria-label={t("notice_board")} +> {data.results.map((item) => ( <div key={`usr_${item.id}`} + role="article" + aria-labelledby={`notice-${item.id}-title`} className="my-2 flex-col flex justify-between rounded-lg shadow-md min-h-[30vh]" > <div className="h-auto md:h-3/4 flex-1 text-justify mx-2 py-3 px-5 mb-3" id="notification-message" > - <h1 className="font-semibold text-lg text-black mb-1 truncate hover:text-clip"> + <h1 + id={`notice-${item.id}-title`} + className="font-semibold text-lg text-black mb-1 truncate hover:text-clip" + > {item.title ? item.title : item.message?.split("\n")[0]} </h1> <Message className="line-clamp-4" message={item.message} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Notifications/NoticeBoard.tsx(1 hunks)
🔇 Additional comments (3)
src/components/Notifications/NoticeBoard.tsx (3)
60-76:
Fix message formatting and enhance security
The current implementation has two critical issues:
- The
formatMessagefunction drops the first line of the message by usingslice(1) - The component needs proper typing and security measures
-const formatMessage = (message: string): React.ReactNode => {
- const lines = message.split("\n");
- return lines.slice(1).map((line, index) => (
+const formatMessage = (message: string): React.ReactNode => {
+ const lines = message.split("\n");
+ return lines.map((line, index) => (
<React.Fragment key={index}>
{line}
{index < lines.length - 1 && <br />}
</React.Fragment>
));
};
-const Message: React.FC<{ message: string; className: string }> = ({
+interface MessageProps {
+ message: string;
+ className?: string;
+ id?: string;
+}
+
+const Message: React.FC<MessageProps> = ({
message,
className,
+ id,
}) => {
const formattedMessage = formatMessage(message);
- return <p className={className}>{formattedMessage}</p>;
+ return <p id={id} className={className}>{formattedMessage}</p>;
};Likely invalid or redundant comment.
39-59: 🛠️ Refactor suggestion
Enhance UserInfo component type safety and reduce redundancy
The component needs the following improvements:
- Define a proper interface for props instead of using the entire NotificationData
- Remove redundant username display as it's already part of the formatted name
-const UserInfo: React.FC<NotificationData> = (notice) => (
+interface UserInfoProps {
+ caused_by: NotificationData['caused_by'];
+ created_date: string;
+}
+
+const UserInfo: React.FC<UserInfoProps> = ({ caused_by, created_date }) => (
<div className="flex items-center bg-gray-100">
<Avatar
- name={formatName(notice.caused_by)}
- imageUrl={notice.caused_by.read_profile_picture_url}
+ name={formatName(caused_by)}
+ imageUrl={caused_by.read_profile_picture_url}
className="border-0 border-b border-b-secondary-300 rounded-full h-10 w-10 ml-5"
/>
<div className="text-md my-1 text-secondary-700 px-3">
<div className="flex font-bold items-center text-black">
- {formatName(notice.caused_by)}
- <span className="font-oblique text-gray-500 font-medium ml-2">
- {notice.caused_by.username}
- </span>
+ {formatName(caused_by)}
</div>
<div className="text-xs text-secondary-900 font-medium">
- {relativeTime(notice.created_date)}
+ {relativeTime(created_date)}
</div>
</div>
</div>
);Likely invalid or redundant comment.
78-103: 🛠️ Refactor suggestion
Enhance dialog accessibility and fix styling
The dialog needs proper ARIA attributes and styling fixes:
- Add proper dialog title and ARIA attributes
- Remove duplicate width class
- Improve semantic structure
const NoticeDialog: React.FC<{ notice: NotificationData }> = ({ notice }) => {
return (
- <div className="m-0 w-full h-full rounded-md w-full">
+ <div className="m-0 w-full h-full rounded-md">
<DialogHeader>
+ <DialogTitle>Notice Details</DialogTitle>
<div className="flex justify-between items-center mb-4">
<CareIcon
className="h-10 w-12 text-primary-500 bg-primary-200 rounded-md p-2 m-5"
icon="l-envelope-open"
+ aria-hidden="true"
/>
</div>
</DialogHeader>
<div
className="flex-1 text-justify mx-6 mb-4"
id="notification-message"
+ role="article"
+ aria-labelledby="notice-title notice-content"
>
- <h1 className="font-semibold text-lg text-black mb-1">
+ <h1 id="notice-title" className="font-semibold text-lg text-black mb-1">
{notice.title ? notice.title : notice.message?.split("\n")[0]}
</h1>
- <Message className="" message={notice.message} />
+ <Message id="notice-content" className="mt-2" message={notice.message} />
</div>Likely invalid or redundant comment.
|
@nihal467 Now all tests are passing.. |
|
@nihal467 . PR ready for testing |
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (4)
src/components/Notifications/NoticeBoard.tsx (4)
28-32: 🛠️ Refactor suggestionSimplify query configuration and add stale time
The current query configuration can be improved.
const { data, isLoading } = useQuery({ queryKey: ["notices"], queryFn: query(routes.getNotifications, { - queryParams: { offset: 0, event: "MESSAGE", medium_sent: "SYSTEM" }, + queryParams: { event: "MESSAGE", medium_sent: "SYSTEM", limit: 14 }, }), + staleTime: 5 * 60 * 1000, // 5 minutes });
39-59: 🛠️ Refactor suggestionImprove UserInfo component structure and props
The component needs better typing and structure.
-const UserInfo: React.FC<NotificationData> = (notice) => ( +interface UserInfoProps { + caused_by: NotificationData['caused_by']; + created_date: string; +} + +const UserInfo: React.FC<UserInfoProps> = ({ caused_by, created_date }) => ( <div className="flex items-center bg-gray-100"> <Avatar - name={formatName(notice.caused_by)} + name={formatName(caused_by)} imageUrl={notice.caused_by.read_profile_picture_url} - aria-label={`${formatName(notice.caused_by)}'s avatar`} + aria-label={`${formatName(caused_by)}'s avatar`} className="border-0 border-b border-b-secondary-300 rounded-full h-10 w-10 ml-5" /> <div className="text-md my-1 text-secondary-700 px-3"> <div className="flex font-bold items-center text-black"> - {formatName(notice.caused_by)} - <span className="font-oblique text-gray-500 font-medium ml-2"> - {notice.caused_by.username} - </span> + {formatName(caused_by)} </div> <div className="text-xs text-secondary-900 font-medium "> - {relativeTime(notice.created_date)} + {relativeTime(created_date)} </div> </div> </div> );
60-76:⚠️ Potential issueFix message formatting logic and enhance Message component
The current implementation has issues with message formatting and component structure.
const formatMessage = (message: string): React.ReactNode => { const lines = message.split("\n"); - return lines.slice(1).map((line, index) => ( + return lines.map((line, index) => ( <React.Fragment key={index}> {line} {index < lines.length - 1 && <br />} </React.Fragment> )); }; -const Message: React.FC<{ message: string; className: string }> = ({ +interface MessageProps { + message: string; + className?: string; + id?: string; +} + +const Message: React.FC<MessageProps> = ({ message, className, + id, }) => { const formattedMessage = formatMessage(message); - return <p className={className}>{formattedMessage}</p>; + return <p id={id} className={className}>{formattedMessage}</p>; };
78-103: 🛠️ Refactor suggestionEnhance NoticeDialog accessibility and structure
The dialog needs proper ARIA attributes and better structure.
const NoticeDialog: React.FC<{ notice: NotificationData }> = ({ notice }) => { return ( - <div className="w-full h-full rounded-md w-full"> + <div className="m-0 w-full h-full rounded-md"> <DialogHeader> + <DialogTitle>Notice Details</DialogTitle> <div className="flex justify-between items-center mb-4"> <CareIcon className="h-10 w-12 text-primary-500 bg-primary-200 rounded-md p-2 m-5" icon="l-envelope-open" + aria-hidden="true" /> </div> </DialogHeader> <div className="flex-1 text-justify mx-6 mb-4" id="notification-message" + role="article" + aria-labelledby="notice-title notice-content" > - <h1 className="font-semibold text-lg text-black mb-1"> + <h1 id="notice-title" className="font-semibold text-lg text-black mb-1"> {notice.title ? notice.title : notice.message?.split("\n")[0]} </h1> - <Message className="" message={notice.message} /> + <Message id="notice-content" className="mt-2" message={notice.message} /> </div>
🧹 Nitpick comments (3)
src/components/Notifications/NoticeBoard.tsx (3)
1-24: Convert relative imports to absolute importsUse absolute imports consistently throughout the file for better maintainability.
-import { useTranslation } from "react-i18next"; +import { useTranslation } from "@/i18n"; -import CareIcon from "@/CAREUI/icons/CareIcon"; +import { CareIcon } from "@/components/icons"; -import { formatName, relativeTime } from "@/Utils/utils"; +import { formatName, relativeTime } from "@/lib/utils";
108-108: Improve grid layout and spacingThe current layout can be improved for better responsiveness and consistency.
-<section className="grid grid-cols-1 gap-6 xl:grid-cols-2 mt-4"> +<section className="grid grid-cols-1 gap-6 lg:grid-cols-2 mt-4"> <div - className="my-2 flex-col flex justify-between rounded-lg shadow-md min-h-[30vh]" + className="flex flex-col justify-between rounded-lg shadow-md min-h-[30vh]" > <div - className="h-auto md:h-3/4 flex-1 text-justify mx-2 py-3 px-5 mb-3" + className="flex-1 text-justify mx-2 py-3 px-5 overflow-hidden mb-3"Also applies to: 112-112, 115-115
124-125: Simplify button container structureThe button container has unnecessary nesting and styling.
<UserInfo {...item} /> -<div className="flex flex-col text-left border-2 border-gray-400 rounded-md mr-10"> +<div className="flex items-center mr-4">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Notifications/NoticeBoard.tsx(1 hunks)
🔇 Additional comments (2)
src/components/Notifications/NoticeBoard.tsx (2)
160-160: LGTM: Loading state handling
The loading state is handled correctly using the Loading component.
137-139: 🛠️ Refactor suggestion
Optimize dialog content rendering
The current implementation might cause unnecessary re-renders.
-<DialogContent className="sm:max-w-md max-h-[80vh] overflow-y-auto p-0">
- {selectedNotice && <NoticeDialog notice={selectedNotice} />}
+<DialogContent className="sm:max-w-md max-h-[80vh] overflow-y-auto p-0">
+ <NoticeDialog notice={item} />
</DialogContent>Likely invalid or redundant comment.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/Notifications/NoticeBoard.tsx (2)
1-24: Consider grouping related imports together.Group imports in the following order:
- React and related libraries
- UI components
- Local components
- Utils and types
import { useQuery } from "@tanstack/react-query"; import { useState } from "react"; import React from "react"; import { useTranslation } from "react-i18next"; + import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTrigger, } from "@/components/ui/dialog"; import CareIcon from "@/CAREUI/icons/CareIcon"; import { Avatar } from "@/components/Common/Avatar"; + import Loading from "@/components/Common/Loading"; import Page from "@/components/Common/Page"; import { NotificationData } from "@/components/Notifications/models"; + import routes from "@/Utils/request/api"; import query from "@/Utils/request/query"; import { formatName, relativeTime } from "@/Utils/utils";
108-145: Enhance semantic structure and responsive layout.Consider these improvements for better accessibility and responsiveness:
-<section className="grid grid-cols-1 gap-6 xl:grid-cols-2 mt-4"> +<section + className="grid grid-cols-1 gap-6 xl:grid-cols-2 mt-4" + aria-label="Notice board" +> {data.results.map((item) => ( - <div + <article key={`usr_${item.id}`} + aria-labelledby={`notice-${item.id}-title`} className="my-2 flex-col flex justify-between rounded-lg shadow-md min-h-[30vh]" > <div - className="h-auto md:h-3/4 flex-1 text-justify mx-2 py-3 px-5 mb-3" + className="h-auto md:h-3/4 flex-1 text-justify mx-2 py-3 px-5 mb-3 overflow-hidden" id="notification-message" > - <h1 className="font-semibold text-lg text-black mb-1 truncate hover:text-clip"> + <h1 + id={`notice-${item.id}-title`} + className="font-semibold text-lg text-black mb-1 truncate hover:text-clip" + >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Notifications/NoticeBoard.tsx(1 hunks)
🔇 Additional comments (4)
src/components/Notifications/NoticeBoard.tsx (4)
28-32: 🛠️ Refactor suggestion
Optimize query configuration.
Since we're only showing one page of notices:
- Remove the unnecessary
offsetparameter - Add a
limitparameter to explicitly define the page size
const { data, isLoading } = useQuery({
queryKey: ["notices"],
queryFn: query(routes.getNotifications, {
- queryParams: { offset: 0, event: "MESSAGE", medium_sent: "SYSTEM" },
+ queryParams: { event: "MESSAGE", medium_sent: "SYSTEM", limit: 14 },
}),
});Likely invalid or redundant comment.
60-68:
Fix content loss in message formatting.
The formatMessage function is dropping the first line of the message by using lines.slice(1).
const formatMessage = (message: string): React.ReactNode => {
const lines = message.split("\n");
- return lines.slice(1).map((line, index) => (
+ return lines.map((line, index) => (
<React.Fragment key={index}>
{line}
{index < lines.length - 1 && <br />}
</React.Fragment>
));
};Likely invalid or redundant comment.
39-59: 🛠️ Refactor suggestion
Enhance UserInfo component type safety and reduce redundancy.
The component needs the following improvements:
- Define a proper props interface instead of using the entire NotificationData
- Remove redundant username display
- Add proper types for user data
+interface UserInfoProps {
+ caused_by: {
+ username: string;
+ read_profile_picture_url?: string;
+ };
+ created_date: string;
+}
-const UserInfo: React.FC<NotificationData> = (notice) => (
+const UserInfo: React.FC<UserInfoProps> = ({ caused_by, created_date }) => (
<div className="flex items-center bg-gray-100">
<Avatar
- name={formatName(notice.caused_by)}
- imageUrl={notice.caused_by.read_profile_picture_url}
+ name={formatName(caused_by)}
+ imageUrl={caused_by.read_profile_picture_url}
className="border-0 border-b border-b-secondary-300 rounded-full h-10 w-10 ml-5"
/>
<div className="text-md my-1 text-secondary-700 px-3">
<div className="flex font-bold items-center text-black">
- {formatName(notice.caused_by)}
- <span className="font-oblique text-gray-500 font-medium ml-2">
- {notice.caused_by.username}
- </span>
+ {formatName(caused_by)}
</div>
<div className="text-xs text-secondary-900 font-medium ">
- {relativeTime(notice.created_date)}
+ {relativeTime(created_date)}
</div>
</div>
</div>
);Likely invalid or redundant comment.
78-103: 🛠️ Refactor suggestion
Enhance dialog accessibility and structure.
The dialog needs proper ARIA attributes and better structure.
const NoticeDialog: React.FC<{ notice: NotificationData }> = ({ notice }) => {
return (
<div className="w-full h-full rounded-md">
<DialogHeader>
+ <DialogTitle>Notice Details</DialogTitle>
<div className="flex justify-between items-center mb-4">
<CareIcon
className="h-10 w-12 text-primary-500 bg-primary-200 rounded-md p-2 m-5"
icon="l-envelope-open"
+ aria-hidden="true"
/>
</div>
</DialogHeader>
<div
className="flex-1 text-justify mx-6 mb-4"
id="notification-message"
+ role="article"
+ aria-labelledby="notice-title notice-content"
>
- <h1 className="font-semibold text-lg text-black mb-1">
+ <h1 id="notice-title" className="font-semibold text-lg text-black mb-1">
{notice.title ? notice.title : notice.message?.split("\n")[0]}
</h1>
- <Message className="" message={notice.message} />
+ <Message id="notice-content" className="mt-2" message={notice.message} />
</div>Likely invalid or redundant comment.
|
No longer relevant. |
Proposed Changes
Before
After:
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
NoticeBoardcomponent for improved notification management and user experience.UserInfo,Message, andNoticeDialogfor better notification display.Bug Fixes
Refactor