message notifications working

src/components/main/Notifications/index.tsx

@@ -7,6 +7,7 @@ import pick from 'ramda/es/pick';
 import classNames from 'classnames';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { NotificationBubble } from '../../notifications/NotificationBubble';
+import { INotification, IMessageNotification } from '~/redux/types';
 
 const mapStateToProps = state => ({
   user: pick(['last_seen_messages'], selectAuthUser(state)),
@@ -15,6 +16,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = {
   authSetLastSeenMessages: AUTH_ACTIONS.authSetLastSeenMessages,
+  authOpenProfile: AUTH_ACTIONS.authOpenProfile,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
@@ -23,8 +25,9 @@ const NotificationsUnconnected: FC<IProps> = ({
   updates: { last, notifications },
   user: { last_seen_messages },
   authSetLastSeenMessages,
+  authOpenProfile,
 }) => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const has_new = useMemo(
     () =>
       notifications.length &&
@@ -35,21 +38,42 @@ const NotificationsUnconnected: FC<IProps> = ({
     [last, last_seen_messages, notifications]
   );
 
+  const onNotificationClick = useCallback(
+    (notification: INotification) => {
+      switch (notification.type) {
+        case 'message':
+          return authOpenProfile(
+            (notification as IMessageNotification).content.from.username,
+            'messages'
+          );
+        default:
+          return;
+      }
+    },
+    [authOpenProfile]
+  );
+  const showList = useCallback(() => setVisible(true), [setVisible]);
+  const hideList = useCallback(() => setVisible(false), [setVisible]);
+
   useEffect(() => {
     if (!visible || !has_new) return;
     authSetLastSeenMessages(new Date().toISOString());
   }, [visible]);
 
-  const showList = useCallback(() => setVisible(true), [setVisible]);
-  const hideList = useCallback(() => setVisible(false), [setVisible]);
-
   return (
-    <div className={classNames(styles.wrap, { [styles.is_new]: has_new })}>
+    <div
+      className={classNames(styles.wrap, {
+        [styles.is_new]: has_new,
+        [styles.active]: notifications.length > 0,
+      })}
+    >
       <div className={styles.icon} onFocus={showList} onBlur={hideList} tabIndex={-1}>
         {has_new ? <Icon icon="bell_ring" size={24} /> : <Icon icon="bell" size={24} />}
       </div>
 
-      {visible && <NotificationBubble notifications={notifications} />}
+      {visible && (
+        <NotificationBubble notifications={notifications} onClick={onNotificationClick} />
+      )}
     </div>
   );
 };