Skip to content

Commit

Permalink
fix: notification card (#1583)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaryan610
aaryan610 committed Jul 20, 2023
1 parent 26b18b4 commit 6eb7250
Show file tree
Hide file tree
Showing 7 changed files with 139 additions and 485 deletions.
163 changes: 82 additions & 81 deletions apps/app/components/notifications/notification-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import useToast from "hooks/use-toast";
import { CustomMenu, Icon, Tooltip } from "components/ui";

// helper
import { stripHTML, replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
import { stripHTML, replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
import {
formatDateDistance,
render12HourFormatTime,
Expand All @@ -32,7 +32,7 @@ type NotificationCardProps = {

const snoozeOptions = [
{
label: "1 days",
label: "1 day",
value: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
},
{
Expand Down Expand Up @@ -79,99 +79,100 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
`/${workspaceSlug}/projects/${notification.project}/issues/${notification.data.issue.id}`
);
}}
className={`group relative py-3 px-6 cursor-pointer ${
className={`group w-full flex items-center gap-4 p-3 pl-6 relative cursor-pointer ${
notification.read_at === null ? "bg-custom-primary-70/5" : "hover:bg-custom-background-200"
}`}
>
{notification.read_at === null && (
<span className="absolute top-1/2 left-2 -translate-y-1/2 w-1.5 h-1.5 bg-custom-primary-100 rounded-full" />
)}
<div className="flex items-center gap-4 w-full">
<div className="relative w-12 h-12 rounded-full">
{notification.triggered_by_details.avatar &&
notification.triggered_by_details.avatar !== "" ? (
<div className="h-12 w-12 rounded-full">
<Image
src={notification.triggered_by_details.avatar}
alt="Profile Image"
layout="fill"
objectFit="cover"
className="rounded-full"
/>
</div>
) : (
<div className="w-12 h-12 bg-custom-background-100 rounded-full flex justify-center items-center">
<span className="text-custom-text-100 font-medium text-lg">
{notification.triggered_by_details.first_name[0].toUpperCase()}
</span>
</div>
)}
</div>
<div className="w-full space-y-2.5">
<div className="text-sm">
<span className="font-semibold">
{notification.triggered_by_details.first_name}{" "}
{notification.triggered_by_details.last_name}{" "}
<div className="relative w-12 h-12 rounded-full">
{notification.triggered_by_details.avatar &&
notification.triggered_by_details.avatar !== "" ? (
<div className="h-12 w-12 rounded-full">
<Image
src={notification.triggered_by_details.avatar}
alt="Profile Image"
layout="fill"
objectFit="cover"
className="rounded-full"
/>
</div>
) : (
<div className="w-12 h-12 bg-custom-background-80 rounded-full flex justify-center items-center">
<span className="text-custom-text-100 font-medium text-lg">
{notification.triggered_by_details.first_name[0].toUpperCase()}
</span>
{notification.data.issue_activity.field !== "comment" &&
notification.data.issue_activity.verb}{" "}
{notification.data.issue_activity.field === "comment"
? "commented"
: notification.data.issue_activity.field === "None"
? null
: replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "}
{notification.data.issue_activity.field !== "comment" &&
notification.data.issue_activity.field !== "None"
? "to"
: ""}
<span className="font-semibold">
{" "}
{notification.data.issue_activity.field !== "None" ? (
notification.data.issue_activity.field !== "comment" ? (
notification.data.issue_activity.field === "target_date" ? (
renderShortDateWithYearFormat(notification.data.issue_activity.new_value)
) : notification.data.issue_activity.field === "attachment" ? (
"the issue"
) : stripHTML(notification.data.issue_activity.new_value).length > 55 ? (
stripHTML(notification.data.issue_activity.new_value).slice(0, 50) + "..."
) : (
stripHTML(notification.data.issue_activity.new_value)
)
</div>
)}
</div>
<div className="space-y-2.5 w-full overflow-hidden">
<div className="text-sm w-full break-words">
<span className="font-semibold">
{notification.triggered_by_details.first_name}{" "}
{notification.triggered_by_details.last_name}{" "}
</span>
{notification.data.issue_activity.field !== "comment" &&
notification.data.issue_activity.verb}{" "}
{notification.data.issue_activity.field === "comment"
? "commented"
: notification.data.issue_activity.field === "None"
? null
: replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "}
{notification.data.issue_activity.field !== "comment" &&
notification.data.issue_activity.field !== "None"
? "to"
: ""}
<span className="font-semibold">
{" "}
{notification.data.issue_activity.field !== "None" ? (
notification.data.issue_activity.field !== "comment" ? (
notification.data.issue_activity.field === "target_date" ? (
renderShortDateWithYearFormat(notification.data.issue_activity.new_value)
) : notification.data.issue_activity.field === "attachment" ? (
"the issue"
) : stripHTML(notification.data.issue_activity.new_value).length > 55 ? (
stripHTML(notification.data.issue_activity.new_value).slice(0, 50) + "..."
) : (
<span>
{`"`}
{notification.data.issue_activity.new_value.length > 55
? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..."
: notification.data.issue_activity.issue_comment}
{`"`}
</span>
stripHTML(notification.data.issue_activity.new_value)
)
) : (
"the issue and assigned it to you."
)}
</span>
</div>

<div className="w-full flex justify-between text-xs">
<p className="truncate inline max-w-lg text-custom-text-300 mr-3">
{notification.data.issue.identifier}-{notification.data.issue.sequence_id}{" "}
{notification.data.issue.name}
</p>
{notification.snoozed_till ? (
<p className="text-custom-text-300 flex items-center gap-x-1">
<Icon iconName="schedule" />
<span>
Till {renderShortDate(notification.snoozed_till)},{" "}
{render12HourFormatTime(notification.snoozed_till)}
{`"`}
{notification.data.issue_activity.new_value.length > 55
? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..."
: notification.data.issue_activity.issue_comment}
{`"`}
</span>
</p>
)
) : (
<p className="text-custom-text-300">{formatDateDistance(notification.created_at)}</p>
"the issue and assigned it to you."
)}
</div>
</span>
</div>
</div>

<div className="flex justify-between gap-2 text-xs">
<p className="text-custom-text-300">
{truncateText(
`${notification.data.issue.identifier}-${notification.data.issue.sequence_id} ${notification.data.issue.name}`,
50
)}
</p>
{notification.snoozed_till ? (
<p className="text-custom-text-300 flex items-center justify-end gap-x-1 flex-shrink-0">
<Icon iconName="schedule" className="!text-base -my-0.5" />
<span>
Till {renderShortDate(notification.snoozed_till)},{" "}
{render12HourFormatTime(notification.snoozed_till)}
</span>
</p>
) : (
<p className="text-custom-text-300 flex-shrink-0">
{formatDateDistance(notification.created_at)}
</p>
)}
</div>
</div>
<div className="absolute py-1 gap-x-3 right-3 top-3 hidden group-hover:flex">
{[
{
Expand All @@ -192,7 +193,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
{
id: 2,
name: notification.archived_at ? "Unarchive" : "Archive",
icon: "archive",
icon: notification.archived_at ? "unarchive" : "archive",
onClick: () => {
markNotificationArchivedStatus(notification.id).then(() => {
setToastAlert({
Expand All @@ -213,7 +214,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
item.onClick();
}}
key={item.id}
className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded"
className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded outline-none"
>
<Icon iconName={item.icon} className="h-5 w-5 text-custom-text-300" />
</button>
Expand Down
4 changes: 2 additions & 2 deletions apps/app/components/notifications/notification-popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const NotificationPopover = () => {
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
isActive
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
} ${sidebarCollapse ? "justify-center" : ""}`}
>
<Icon iconName="notifications" />
Expand Down Expand Up @@ -282,7 +282,7 @@ export const NotificationPopover = () => {
</div>
)
) : (
<Loader className="p-5 space-y-4">
<Loader className="p-5 space-y-4 overflow-y-auto">
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
Expand Down
Loading

1 comment on commit 6eb7250

@vercel
Copy link

@vercel vercel bot commented on 6eb7250 Jul 20, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

plane-dev – ./apps/app

plane-dev-git-develop-plane.vercel.app
plane-dev.vercel.app
plane-dev-plane.vercel.app

Please sign in to comment.