Add show unread notifications filter button (#6356)

* add show unread filter button * refactor Co-authored-by: Khavin Shankar <[email protected]> --------- Co-authored-by: Khavin Shankar <[email protected]>
ohcnetwork · Oct 4, 2023 · 7df0f13 · 7df0f13
1 parent 4f02469
commit 7df0f13
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 22 deletions.
diff --git 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,37 @@ export default function NotificationsList({
   } else if (data?.length) {
     manageResults = (
       <>
-        {data.map((result: any) => (
-          <NotificationTile
-            key={result.id}
-            notification={result}
-            onClickCB={onClickCB}
-            setShowNotifications={setOpen}
-          />
-        ))}
+        {data
+              .filter((notification: any) => showUnread ? notification.read_at === null : true)
+              .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 +453,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
@@ -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",