From 83c9900af1ed352ee6009a0adcd854a92e74b2e2 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 13 Nov 2019 12:16:12 +0700
Subject: [PATCH] notification clicking

---
 src/components/main/Header/index.tsx                  |  8 +++++---
 .../notifications/NotificationBubble/index.tsx        |  1 +
 .../notifications/NotificationMessage/index.tsx       | 11 ++++++++---
 src/redux/types.ts                                    |  7 ++++---
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx
index 07e7ae9b..5925d341 100644
--- a/src/components/main/Header/index.tsx
+++ b/src/components/main/Header/index.tsx
@@ -40,9 +40,11 @@ const HeaderUnconnected: FC<IProps> = memo(
 
         <Filler />
 
-        <div className={style.plugs}>
-          <Notifications />
-        </div>
+        {is_user && (
+          <div className={style.plugs}>
+            <Notifications />
+          </div>
+        )}
 
         {is_user && (
           <UserButton user={user} onLogout={authLogout} onProfileClick={onProfileClick} />
diff --git a/src/components/notifications/NotificationBubble/index.tsx b/src/components/notifications/NotificationBubble/index.tsx
index 2db047e1..fb955536 100644
--- a/src/components/notifications/NotificationBubble/index.tsx
+++ b/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,
             })
           )}
diff --git a/src/components/notifications/NotificationMessage/index.tsx b/src/components/notifications/NotificationMessage/index.tsx
index d5fd2054..09bf0165 100644
--- a/src/components/notifications/NotificationMessage/index.tsx
+++ b/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>
diff --git a/src/redux/types.ts b/src/redux/types.ts
index 9f2410d3..9b6d438a 100644
--- a/src/redux/types.ts
+++ b/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;