Add option to mark notification as unread

src/Components/Notifications/NotificationsList.tsx

@@ -46,6 +46,16 @@ const NotificationTile = ({
     setIsMarkingAsRead(false);
   };
 
+  const handleMarkAsUnRead = async () => {
+    setIsMarkingAsRead(true);
+    await request(routes.markNotificationAsUnRead, {
+      pathParams: { id: result.id },
+      body: { read_at: null },
+    });
+    setResult({ ...result, read_at: null });
+    setIsMarkingAsRead(false);
+  };
+
   const resultUrl = (event: string, data: any) => {
     switch (event) {
       case "PATIENT_CREATED":
@@ -107,24 +117,33 @@ const NotificationTile = ({
         </div>
         <div className="flex justify-end gap-2">
           <ButtonV2
-            className={classNames(
-              "bg-white px-2 py-1 font-semibold hover:bg-secondary-300",
-              result.read_at && "invisible",
-            )}
+            className="bg-white px-2 py-1 font-semibold hover:bg-secondary-300"
             variant="secondary"
             border
             ghost
             disabled={isMarkingAsRead}
             onClick={(event) => {
               event.stopPropagation();
-              handleMarkAsRead();
+              if (result.read_at) {
+                handleMarkAsUnRead();
+              } else {
+                handleMarkAsRead();
+              }
             }}
           >
             <CareIcon
-              icon={isMarkingAsRead ? "l-spinner" : "l-envelope-check"}
+              icon={
+                isMarkingAsRead
+                  ? "l-spinner"
+                  : result.read_at
+                    ? "l-envelope"
+                    : "l-envelope-check"
+              }
               className={isMarkingAsRead ? "animate-spin" : ""}
             />
-            <span className="text-xs">{t("mark_as_read")}</span>
+            <span className="text-xs">
+              {result.read_at ? t("mark_as_unread") : t("mark_as_read")}
+            </span>
           </ButtonV2>
           <ButtonV2
             border

src/Locale/en/Notifications.json

@@ -1,6 +1,7 @@
 {
   "no_notices_for_you": "No notices for you.",
   "mark_as_read": "Mark as Read",
+  "mark_as_unread": "Mark as Unread",
   "subscribe": "Subscribe",
   "subscribe_on_this_device": "Subscribe on this device",
   "show_unread_notifications": "Show Unread",

src/Redux/api.tsx

@@ -1062,6 +1062,11 @@ const routes = {
     method: "PATCH",
     TRes: Type<NotificationData>(),
   },
+  markNotificationAsUnRead: {
+    path: "/api/v1/notification/{id}/",
+    method: "PATCH",
+    TRes: Type<NotificationData>(),
+  },
   getPublicKey: {
     path: "/api/v1/notification/public_key/",
     method: "GET",