From 4aa15ee19187d4e8f9b9bc22176a1919ab28cd81 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 11 Jun 2020 22:04:10 -0600
Subject: [PATCH] Wire up the context menu to the room list store

Updates are passed along magically to the sublist, so we don't need to listen for the room list store's response to our changes.

This just hits the functions introduced in the last commit.
---
 res/css/views/rooms/_RoomSublist2.scss      | 10 +++++-
 src/components/views/rooms/RoomSublist2.tsx | 35 +++++++++++++++++----
 src/i18n/strings/en_EN.json                 |  2 ++
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss
index ed17c071b6..afedf64e32 100644
--- a/res/css/views/rooms/_RoomSublist2.scss
+++ b/res/css/views/rooms/_RoomSublist2.scss
@@ -240,6 +240,14 @@ limitations under the License.
         font-size: $font-15px;
         line-height: $font-20px;
         font-weight: 600;
-        margin-bottom: 12px;
+        margin-bottom: 4px;
+    }
+
+    .mx_RadioButton, .mx_Checkbox {
+        margin-top: 8px;
+    }
+
+    .mx_Checkbox {
+        margin-left: -8px; // to counteract the indent from the component
     }
 }
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index fa37eef975..91baf4ff81 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -27,8 +27,11 @@ import RoomTile2 from "./RoomTile2";
 import { ResizableBox, ResizeCallbackData } from "react-resizable";
 import { ListLayout } from "../../../stores/room-list/ListLayout";
 import NotificationBadge, { ListNotificationState } from "./NotificationBadge";
-import {ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
+import { ContextMenu, ContextMenuButton } from "../../structures/ContextMenu";
 import StyledCheckbox from "../elements/StyledCheckbox";
+import StyledRadioButton from "../elements/StyledRadioButton";
+import RoomListStore from "../../../stores/room-list/RoomListStore2";
+import { ListAlgorithm, SortAlgorithm } from "../../../stores/room-list/algorithms/models";
 
 /*******************************************************************
  *   CAUTION                                                       *
@@ -115,9 +118,14 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         this.setState({menuDisplayed: false});
     };
 
-    private onUnreadFirstChanged = () => {
-        // TODO: Support per-list algorithm changes
-        console.log("Unread first changed");
+    private onUnreadFirstChanged = async () => {
+        const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.layout.tagId) === ListAlgorithm.Importance;
+        const newAlgorithm = isUnreadFirst ? ListAlgorithm.Natural : ListAlgorithm.Importance;
+        await RoomListStore.instance.setListOrder(this.props.layout.tagId, newAlgorithm);
+    };
+
+    private onTagSortChanged = async (sort: SortAlgorithm) => {
+        await RoomListStore.instance.setTagSorting(this.props.layout.tagId, sort);
     };
 
     private onMessagePreviewChanged = () => {
@@ -147,6 +155,8 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         let contextMenu = null;
         if (this.state.menuDisplayed) {
             const elementRect = this.menuButtonRef.current.getBoundingClientRect();
+            const isAlphabetical = RoomListStore.instance.getTagSorting(this.props.layout.tagId) === SortAlgorithm.Alphabetic;
+            const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.layout.tagId) === ListAlgorithm.Importance;
             contextMenu = (
                 <ContextMenu
                     chevronFace="none"
@@ -157,14 +167,27 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     <div className="mx_RoomSublist2_contextMenu">
                         <div>
                             <div className='mx_RoomSublist2_contextMenu_title'>{_t("Sort by")}</div>
-                            TODO: Radios are blocked by https://github.com/matrix-org/matrix-react-sdk/pull/4731
+                            <StyledRadioButton
+                                onChange={() => this.onTagSortChanged(SortAlgorithm.Recent)}
+                                checked={!isAlphabetical}
+                                name={`mx_${this.props.layout.tagId}_sortBy`}
+                            >
+                                {_t("Activity")}
+                            </StyledRadioButton>
+                            <StyledRadioButton
+                                onChange={() => this.onTagSortChanged(SortAlgorithm.Alphabetic)}
+                                checked={isAlphabetical}
+                                name={`mx_${this.props.layout.tagId}_sortBy`}
+                            >
+                                {_t("A-Z")}
+                            </StyledRadioButton>
                         </div>
                         <hr />
                         <div>
                             <div className='mx_RoomSublist2_contextMenu_title'>{_t("Unread rooms")}</div>
                             <StyledCheckbox
                                 onChange={this.onUnreadFirstChanged}
-                                checked={false/*TODO*/}
+                                checked={isUnreadFirst}
                             >
                                 {_t("Always show first")}
                             </StyledCheckbox>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 81577d740e..31da52a494 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1138,6 +1138,8 @@
     "Not now": "Not now",
     "Don't ask me again": "Don't ask me again",
     "Sort by": "Sort by",
+    "Activity": "Activity",
+    "A-Z": "A-Z",
     "Unread rooms": "Unread rooms",
     "Always show first": "Always show first",
     "Show": "Show",