From 1dcbe1f0ca3a95e32cf79bac889237db29ba31cf Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Sat, 25 Jul 2020 09:33:47 -0500
Subject: [PATCH] feat: unread for friend requests

---
 src/client/chat--center.jsx       | 7 ++++++-
 src/client/chat--left.jsx         | 5 +++--
 src/client/chat--leftFriends.jsx  | 6 +++++-
 src/client/chat--leftFriends.scss | 6 ++++++
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/client/chat--center.jsx b/src/client/chat--center.jsx
index e54f77b..0cfe5f4 100644
--- a/src/client/chat--center.jsx
+++ b/src/client/chat--center.jsx
@@ -5,6 +5,8 @@ import React from 'react';
 import {useSelector} from 'react-redux';
 
 import {
+  idSelector,
+  pendingFriendshipSelector,
   unreadChannelSelector,
   unreadUserSelector,
 } from '~/common/state/user';
@@ -16,9 +18,12 @@ import ChatMessages from './chat--messages';
 export default function ChatCenter(props) {
   const {onButton} = props;
   const channel = useChannel();
+  const id = useSelector(idSelector);
+  const pendingFriendship = useSelector(pendingFriendshipSelector)
+    .filter(({addeeId}) => addeeId === id).length;
   const unreadChannel = useSelector(unreadChannelSelector);
   const unreadUser = useSelector(unreadUserSelector);
-  const unread = unreadChannel + unreadUser;
+  const unread = pendingFriendship + unreadChannel + unreadUser;
   return (
     <div
       className="center flexed"
diff --git a/src/client/chat--left.jsx b/src/client/chat--left.jsx
index 581d40b..60d2465 100644
--- a/src/client/chat--left.jsx
+++ b/src/client/chat--left.jsx
@@ -26,7 +26,8 @@ export default function ChatLeft() {
   const active = useSelector(leftActiveIndexSelector);
   const isOpen = useSelector(leftIsOpenSelector);
   const id = useSelector(idSelector);
-  const pendingFriendship = useSelector(pendingFriendshipSelector);
+  const pendingFriendship = useSelector(pendingFriendshipSelector)
+    .filter(({addeeId}) => addeeId === id).length;
   const unreadChannel = useSelector(unreadChannelSelector);
   const unreadUser = useSelector(unreadUserSelector);
   const showsAsOpen = isOpen;
@@ -37,7 +38,7 @@ export default function ChatLeft() {
       label: 'Chat',
     },
     {
-      count: unreadUser + pendingFriendship.filter(({addeeId}) => addeeId === id).length,
+      count: unreadUser + pendingFriendship,
       icon: '😁',
       label: 'Friends',
     },
diff --git a/src/client/chat--leftFriends.jsx b/src/client/chat--leftFriends.jsx
index 3c4d6a4..78cec29 100644
--- a/src/client/chat--leftFriends.jsx
+++ b/src/client/chat--leftFriends.jsx
@@ -71,7 +71,11 @@ export default function ChatLeftFriends() {
       </form>
       {pendingIncomingFriendship.length > 0 && (
         <>
-          <h2 className="friends__chatsTitle">Incoming requests</h2>
+          <h2 className="friends__chatsTitle">
+            <span className="unread friends__requests">{pendingIncomingFriendship.length}</span>
+            {' '}
+            Incoming requests
+          </h2>
           <ul className="friends__chatsList">
             {pendingIncomingFriendship.map((friendship) => {
               const {addeeId, adderId} = friendship;
diff --git a/src/client/chat--leftFriends.scss b/src/client/chat--leftFriends.scss
index 5f34f9f..9d4edbc 100644
--- a/src/client/chat--leftFriends.scss
+++ b/src/client/chat--leftFriends.scss
@@ -40,3 +40,9 @@
   text-transform: uppercase;
   white-space: nowrap;
 }
+
+.friends__requests {
+  color: #ffffff;
+  font-size: 0.9em;
+  padding: 0.5em 0.4em;
+}