From ae264dc19cd089981398c2575d555472d9f0f30a Mon Sep 17 00:00:00 2001
From: Pranshu Aggarwal <pranshu1902@gmail.com>
Date: Wed, 27 Sep 2023 14:07:37 +0530
Subject: [PATCH 1/2] add show unread filter button

---
 .../Notifications/NotificationsList.tsx       | 73 +++++++++++++------
 src/Locale/en/Notifications.json              |  2 +
 2 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/src/Components/Notifications/NotificationsList.tsx b/src/Components/Notifications/NotificationsList.tsx
index f6afa6cccd8..fa4ae75e32f 100644
--- a/src/Components/Notifications/NotificationsList.tsx
+++ b/src/Components/Notifications/NotificationsList.tsx
@@ -165,6 +165,7 @@ export default function NotificationsList({
   const [isMarkingAllAsRead, setIsMarkingAllAsRead] = useState(false);
   const [isSubscribed, setIsSubscribed] = useState("");
   const [isSubscribing, setIsSubscribing] = useState(false);
+  const [showUnread, setShowUnread] = useState(false);
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -351,33 +352,46 @@ export default function NotificationsList({
   } else if (data?.length) {
     manageResults = (
       <>
-        {data.map((result: any) => (
-          <NotificationTile
-            key={result.id}
-            notification={result}
-            onClickCB={onClickCB}
-            setShowNotifications={setOpen}
-          />
-        ))}
+        {showUnread
+          ? data
+              .filter((notification: any) => notification.read_at === null)
+              .map((result: any) => (
+                <NotificationTile
+                  key={result.id}
+                  notification={result}
+                  onClickCB={onClickCB}
+                  setShowNotifications={setOpen}
+                />
+              ))
+          : data.map((result: any) => (
+              <NotificationTile
+                key={result.id}
+                notification={result}
+                onClickCB={onClickCB}
+                setShowNotifications={setOpen}
+              />
+            ))}
         {isLoading && (
           <div className="flex items-center justify-center">
             <CircularProgress />
           </div>
         )}
-        {totalCount > RESULT_LIMIT && offset < totalCount - RESULT_LIMIT && (
-          <div className="mt-4 flex w-full justify-center px-4 py-5 lg:px-8">
-            <ButtonV2
-              className="w-full"
-              disabled={isLoading}
-              variant="secondary"
-              shadow
-              border
-              onClick={() => setOffset((prev) => prev + RESULT_LIMIT)}
-            >
-              {isLoading ? t("loading") : t("load_more")}
-            </ButtonV2>
-          </div>
-        )}
+        {!showUnread &&
+          totalCount > RESULT_LIMIT &&
+          offset < totalCount - RESULT_LIMIT && (
+            <div className="mt-4 flex w-full justify-center px-4 py-5 lg:px-8">
+              <ButtonV2
+                className="w-full"
+                disabled={isLoading}
+                variant="secondary"
+                shadow
+                border
+                onClick={() => setOffset((prev) => prev + RESULT_LIMIT)}
+              >
+                {isLoading ? t("loading") : t("load_more")}
+              </ButtonV2>
+            </div>
+          )}
       </>
     );
   } else if (data && data.length === 0) {
@@ -448,6 +462,21 @@ export default function NotificationsList({
               />
               <span className="text-xs">{t("mark_all_as_read")}</span>
             </ButtonV2>
+            <ButtonV2
+              ghost
+              variant="secondary"
+              onClick={() => setShowUnread(!showUnread)}
+            >
+              <CareIcon
+                className={showUnread ? "care-l-filter-slash" : "care-l-filter"}
+              />
+
+              <span className="text-xs">
+                {showUnread
+                  ? t("show_all_notifications")
+                  : t("show_unread_notifications")}
+              </span>
+            </ButtonV2>
           </div>
 
           <SelectMenuV2
diff --git a/src/Locale/en/Notifications.json b/src/Locale/en/Notifications.json
index a4770af5618..8c6255ca850 100644
--- a/src/Locale/en/Notifications.json
+++ b/src/Locale/en/Notifications.json
@@ -3,6 +3,8 @@
   "mark_as_read": "Mark as Read",
   "subscribe": "Subscribe",
   "subscribe_on_this_device": "Subscribe on this device",
+  "show_unread_notifications": "Show Unread",
+  "show_all_notifications": "Show All",
   "filter_by_category": "Filter by category",
   "mark_all_as_read": "Mark all as Read",
   "reload": "Reload",

From e9c0a6da47387e79136065314ae304603045342a Mon Sep 17 00:00:00 2001
From: Pranshu Aggarwal <70687348+Pranshu1902@users.noreply.github.com>
Date: Wed, 4 Oct 2023 19:29:00 +0530
Subject: [PATCH 2/2] refactor

Co-authored-by: Khavin Shankar <khavinshankar@gmail.com>
---
 .../Notifications/NotificationsList.tsx           | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/Components/Notifications/NotificationsList.tsx b/src/Components/Notifications/NotificationsList.tsx
index fa4ae75e32f..5e3aa65b3ec 100644
--- a/src/Components/Notifications/NotificationsList.tsx
+++ b/src/Components/Notifications/NotificationsList.tsx
@@ -352,9 +352,8 @@ export default function NotificationsList({
   } else if (data?.length) {
     manageResults = (
       <>
-        {showUnread
-          ? data
-              .filter((notification: any) => notification.read_at === null)
+        {data
+              .filter((notification: any) => showUnread ? notification.read_at === null : true)
               .map((result: any) => (
                 <NotificationTile
                   key={result.id}
@@ -362,15 +361,7 @@ export default function NotificationsList({
                   onClickCB={onClickCB}
                   setShowNotifications={setOpen}
                 />
-              ))
-          : data.map((result: any) => (
-              <NotificationTile
-                key={result.id}
-                notification={result}
-                onClickCB={onClickCB}
-                setShowNotifications={setOpen}
-              />
-            ))}
+              ))}
         {isLoading && (
           <div className="flex items-center justify-center">
             <CircularProgress />