notification clicking

src/components/main/Header/index.tsx

@@ -40,9 +40,11 @@ const HeaderUnconnected: FC<IProps> = memo(
 
         <Filler />
 
-        <div className={style.plugs}>
+        {is_user && (
-          <Notifications />
+          <div className={style.plugs}>
-        </div>
+            <Notifications />
+          </div>
+        )}
 
         {is_user && (
           <UserButton user={user} onLogout={authLogout} onProfileClick={onProfileClick} />

src/components/notifications/NotificationBubble/index.tsx

@@ -20,6 +20,7 @@ const NotificationBubble: FC<IProps> = ({ notifications }) => {
           .map(notification =>
             createElement(NOTIFICATION_RENDERERS[notification.type], {
               notification,
+              onClick: console.log,
               key: notification.content.id,
             })
           )}

src/components/notifications/NotificationMessage/index.tsx

@@ -1,19 +1,24 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import styles from '~/components/notifications/NotificationBubble/styles.scss';
 import { Icon } from '~/components/input/Icon';
-import { IMessageNotification } from '~/redux/types';
+import { IMessageNotification, INotification } from '~/redux/types';
 
 interface IProps {
   notification: IMessageNotification;
+  onClick: (notification: INotification) => void;
 }
 
 const NotificationMessage: FC<IProps> = ({
+  notification,
   notification: {
     content: { text, from },
   },
+  onClick,
 }) => {
+  const onMouseDown = useCallback(() => onClick(notification), [onClick, notification]);
+
   return (
-    <div className={styles.item}>
+    <div className={styles.item} onMouseDown={onMouseDown}>
       <div className={styles.item_head}>
         <Icon icon="message" />
         <div className={styles.item_title}>Сообщение от ~{from.username}:</div>

src/redux/types.ts

@@ -171,18 +171,19 @@ export const NOTIFICATION_TYPES = {
 export type IMessageNotification = {
   type: typeof NOTIFICATION_TYPES['message'];
   content: Partial<IMessage>;
+  created_at: string;
 };
 
 export type ICommentNotification = {
   type: typeof NOTIFICATION_TYPES['comment'];
   content: Partial<IComment>;
+  created_at: string;
 };
 
 export type INodeNotification = {
   type: typeof NOTIFICATION_TYPES['node'];
   content: Partial<INode>;
-};
-
-export type INotification = (IMessageNotification | ICommentNotification) & {
   created_at: string;
 };
+
+export type INotification = IMessageNotification | ICommentNotification;