From 5aaf9e63575a006c76076bdb8e5e3808014d4388 Mon Sep 17 00:00:00 2001
From: Alexander Rivera <xanverapr@gmail.com>
Date: Wed, 26 Jul 2023 13:15:41 -0400
Subject: [PATCH] Adding source filtering functionality.

---
 .../DrawerPanelContent.tsx                    | 63 +++++++++++--------
 1 file changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/components/NotificationsDrawer/DrawerPanelContent.tsx b/src/components/NotificationsDrawer/DrawerPanelContent.tsx
index 2f1f6c09c3..758a529820 100644
--- a/src/components/NotificationsDrawer/DrawerPanelContent.tsx
+++ b/src/components/NotificationsDrawer/DrawerPanelContent.tsx
@@ -20,16 +20,13 @@ import {
 import { useDispatch, useSelector } from 'react-redux';
 import { 
   toggleNotificationsDrawer,
-  markAllNotificationsAsRead,
-  markAllNotificationsAsUnread,
 } from '../../redux/actions';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BellSlashIcon from '@patternfly/react-icons/dist/esm/icons/bell-slash-icon';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
-import { ReduxState } from '../../redux/store';
+import { ReduxState, NotificationData } from '../../redux/store';
 import NotificationItem from './NotificationItem';
-import { MARK_ALL_NOTIFICATION_AS_READ } from '../../redux/action-types';
+import { MARK_ALL_NOTIFICATION_AS_READ, MARK_ALL_NOTIFICATION_AS_UNREAD } from '../../redux/action-types';
 
 export type DrawerPanelProps = {
   innerRef: React.Ref<unknown>;
@@ -60,9 +57,15 @@ const EmptyNotifications = () => (
 const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false);
+  const [filteredNotifications, setFilteredNotifications] = useState<NotificationData[]>([]);
   const dispatch = useDispatch();
   const notifications = useSelector(({ chrome: { notifications } }: ReduxState) => notifications?.data || []);
 
+  const onNotificationsDrawerClose = () => {
+    setFilteredNotifications([]);
+    dispatch(toggleNotificationsDrawer());
+  }
+
   const onDropdownToggle = (isOpen: boolean) => {
     setIsDropdownOpen(isOpen);
   };
@@ -71,27 +74,19 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
     setIsFilterDropdownOpen(isOpen);
   };
 
-  // const onMarkAllAsRead = () => {
-  //   console.log('MARKING ALL AS READ');
-
-  //   notifications.map((notification, index) => {
-  //     if(!notification.read){
-  //       notification.read = true; // TODO: Switch to redux state changes
-  //     }
-  //   });
-  // }
-
   const onMarkAllAsRead = () => {
-    console.log('MARKING ALL AS READ');
     dispatch({ type: MARK_ALL_NOTIFICATION_AS_READ });
+    onDropdownToggle(false);
   };
 
   const onMarkAllAsUnread = () => {
-    notifications.map((notification, index) => {
-      if(notification.read){
-        notification.read = false;
-      }
-    });
+    dispatch({ type: MARK_ALL_NOTIFICATION_AS_UNREAD });
+    onDropdownToggle(false);
+  }
+
+  const onFilterSelect = (chosenFilter: string) => {
+    setFilteredNotifications(notifications.filter(notification => notification.source === chosenFilter));
+    onFilterDropdownToggle(false);
   }
 
   const dropdownItems = [
@@ -106,13 +101,31 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
   const filterDropdownItems = () => {
     const uniqueSources = new Set(notifications.map(notification => notification.source));
     return Array.from(uniqueSources).map((source, index) => (
-      <DropdownItem key={index}>{source}</DropdownItem>
+      <DropdownItem key={index} onClick={() => onFilterSelect(source)}>{source}</DropdownItem>
     ));     
   };
+
+  const renderNotifications = () => {
+    if (notifications.length === 0) {
+      return <EmptyNotifications />;
+    }
+
+    if (filteredNotifications?.length > 0) {
+      return filteredNotifications?.map((notification, index) => (
+        <NotificationItem key={index} notification={notification} />
+      ));
+    }
+
+    else {
+      return notifications.map((notification, index) => (
+        <NotificationItem key={index} notification={notification}/>
+      ));
+    }
+  }
  
   return (
     <NotificationDrawer ref={innerRef}>
-      <NotificationDrawerHeader onClose={() => dispatch(toggleNotificationsDrawer())}>
+      <NotificationDrawerHeader onClose={() => onNotificationsDrawerClose()}>
         <Dropdown 
           toggle={
             <DropdownToggle toggleIndicator={null} onToggle={onFilterDropdownToggle} id='filter-toggle'>
@@ -136,9 +149,7 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
       </NotificationDrawerHeader>
         <NotificationDrawerBody>
           <NotificationDrawerList>
-            {notifications.length === 0 ? <EmptyNotifications /> : notifications.map((notification, index) => (
-              <NotificationItem key={index} notification={notification} />
-            ))}
+            {renderNotifications()}
           </NotificationDrawerList>
       </NotificationDrawerBody>
     </NotificationDrawer>