From 78e12d5beeaad3b0f1b0f84846ec16bbf19df355 Mon Sep 17 00:00:00 2001
From: Ava Pek <1592386+exodrifter@users.noreply.github.com>
Date: Mon, 25 Jul 2022 01:11:56 -0500
Subject: [PATCH] Add mark as read button to space options (#667)

This allows users to mark all rooms in a space as read, matching similar
features found in other popular chat applications.

We opted to place the mark as read button at the top of the list instead
of next to the add user button like in room options since we felt this
will be the most-used button in the list.

Fixes #645.

Co-authored-by: Maple <mapletree.dv@gmail.com>

Co-authored-by: Maple <mapletree.dv@gmail.com>
---
 src/app/molecules/space-options/SpaceOptions.jsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/app/molecules/space-options/SpaceOptions.jsx b/src/app/molecules/space-options/SpaceOptions.jsx
index e6b78d4c..56fdfd3f 100644
--- a/src/app/molecules/space-options/SpaceOptions.jsx
+++ b/src/app/molecules/space-options/SpaceOptions.jsx
@@ -5,6 +5,7 @@ import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
 import { openSpaceSettings, openSpaceManage, openInviteUser } from '../../../client/action/navigation';
+import { markAsRead } from '../../../client/action/notifications';
 import { leave } from '../../../client/action/room';
 import {
   createSpaceShortcut,
@@ -17,6 +18,7 @@ import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
 
 import CategoryIC from '../../../../public/res/ic/outlined/category.svg';
 import CategoryFilledIC from '../../../../public/res/ic/filled/category.svg';
+import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
 import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
 import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
@@ -28,11 +30,21 @@ import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
 
 function SpaceOptions({ roomId, afterOptionSelect }) {
   const mx = initMatrix.matrixClient;
+  const { roomList } = initMatrix;
   const room = mx.getRoom(roomId);
   const canInvite = room?.canInvite(mx.getUserId());
   const isPinned = initMatrix.accountData.spaceShortcut.has(roomId);
   const isCategorized = initMatrix.accountData.categorizedSpaces.has(roomId);
 
+  const handleMarkAsRead = () => {
+    const spaceChildren = roomList.getCategorizedSpaces([roomId]);
+    spaceChildren?.forEach((childIds, spaceId) => {
+      childIds?.forEach((childId) => {
+        markAsRead(childId);
+      })
+    });
+    afterOptionSelect();
+  };
   const handleInviteClick = () => {
     openInviteUser(roomId);
     afterOptionSelect();
@@ -71,6 +83,7 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
   return (
     <div style={{ maxWidth: 'calc(var(--navigation-drawer-width) - var(--sp-normal))' }}>
       <MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
+      <MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>Mark as read</MenuItem>
       <MenuItem
         onClick={handleCategorizeClick}
         iconSrc={isCategorized ? CategoryFilledIC : CategoryIC}