click on in app notification to redirect to channel.

Nerimity · Sep 20, 2024 · 0d16502 · 0d16502
1 parent 16e70fa
commit 0d16502
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 16 deletions.
diff --git a/src/components/in-app-notification-previews/InAppNotificationPreviews.tsx b/src/components/in-app-notification-previews/InAppNotificationPreviews.tsx
@@ -4,6 +4,9 @@ import style from "./InAppNotificationPreviews.module.scss";
 import { useInAppNotificationPreviews } from "./useInAppNotificationPreviews";
 import { Markup } from "../Markup";
 import Avatar from "../ui/Avatar";
+import RouterEndpoints from "@/common/RouterEndpoints";
+import { Dynamic } from "solid-js/web";
+import { CustomLink } from "../ui/CustomLink";
 
 export default function InAppNotificationPreviews() {
   const { notifications, removeNotification } = useInAppNotificationPreviews();
@@ -25,14 +28,38 @@ export default function InAppNotificationPreviews() {
       );
       anim.onfinish = () => {
         anim.cancel();
-        // removeNotification(notification()!);
+        removeNotification(notification()!);
       };
     })
   );
 
+  const href = () => {
+    const message = notification()?.message;
+    const channel = notification()?.channel;
+    const serverId = channel?.serverId;
+
+    if (!message) return;
+    if (serverId) {
+      return RouterEndpoints.SERVER_MESSAGES(serverId, message.channelId);
+    }
+    const inboxChannelId = channel?.recipient()?.inboxChannelId;
+    if (inboxChannelId) {
+      return RouterEndpoints.INBOX_MESSAGES(inboxChannelId);
+    }
+  };
+  const onClick = () => {
+    notification()?.onClick();
+    removeNotification(notification()!);
+  };
+
   return (
     <Show when={notification()}>
-      <div class={style.backgroundContainer}>
+      <Dynamic
+        onClick={onClick}
+        component={href() ? CustomLink : "div"}
+        href={href()}
+        class={style.backgroundContainer}
+      >
         <div class={style.container}>
           <div class={style.infoContainer}>
             <Switch>
@@ -80,7 +107,7 @@ export default function InAppNotificationPreviews() {
             ></div>
           </div>
         </div>
-      </div>
+      </Dynamic>
     </Show>
   );
 }
diff --git a/src/components/in-app-notification-previews/useInAppNotificationPreviews.tsx b/src/components/in-app-notification-previews/useInAppNotificationPreviews.tsx
@@ -20,6 +20,8 @@ interface InAppPreviewNotification {
   icon?: string;
   color?: string;
   message?: Message;
+  channel?: Channel;
+  onClick?: () => void;
 }
 
 const [notifications, setNotifications] = createStore<
@@ -35,22 +37,27 @@ const removeNotification = (notification: InAppPreviewNotification) => {
 
 const buildMessageNotification = (
   message: Message,
-  channel: Channel,
-  mentioned: boolean
+  mentioned: boolean,
+  channel?: Channel
 ) => {
-  const { servers, serverMembers } = useStore();
-  const server = servers.get(channel.serverId!);
-  const member = serverMembers.get(channel.serverId!, message.createdBy.id);
+  const { servers, serverMembers, users } = useStore();
+  const server = servers.get(channel?.serverId!);
+  const member = serverMembers.get(channel?.serverId!, message.createdBy.id);
   const nickname = member?.nickname;
   const displayName = nickname || message.createdBy.username;
 
   pushNotification({
     title: `${displayName} ${
-      server ? `(#${channel.name} ${server?.name})` : ""
+      server ? `(#${channel?.name} ${server?.name})` : ""
     }`,
     body: message.content || "Attachment",
     color: mentioned ? "var(--alert-color)" : undefined,
+    channel,
     message,
+    onClick: () => {
+      if (channel?.recipient()?.inboxChannelId) return;
+      users.openDM(message.createdBy.id);
+    },
   });
 };
 const inAppNotificationPreviewsEnabled = isExperimentEnabled(
@@ -67,17 +74,16 @@ export const pushMessageNotification = (message: Message) => {
 
   const { channels, account } = useStore();
   const channel = channels.get(message.channelId);
-  if (!channel) return;
-  const serverId = channel.serverId;
-  const channelId = channel.id;
+  const serverId = channel?.serverId;
+  const channelId = channel?.id;
   const mentioned = !!isMentioned(message, serverId);
 
   if (mode === "ALL") {
-    return buildMessageNotification(message, channel, mentioned);
+    return buildMessageNotification(message, mentioned, channel);
   }
 
   if (mode === "INHERIT") {
-    if (!serverId) return buildMessageNotification(message, channel, mentioned);
+    if (!serverId) return buildMessageNotification(message, mentioned, channel);
     const pingMode = account.getCombinedNotificationSettings(
       serverId,
       channelId
@@ -91,11 +97,11 @@ export const pushMessageNotification = (message: Message) => {
 
   if (mode === "MENTIONS_ONLY") {
     if (mentioned) {
-      return buildMessageNotification(message, channel, mentioned);
+      return buildMessageNotification(message, mentioned, channel);
     }
     return;
   }
-  return buildMessageNotification(message, channel, mentioned);
+  return buildMessageNotification(message, mentioned, channel);
 };
 
 const obj = {