Don't reference the notification levels by colour (#12138)

* Don't reference the notification levels by colour

We're about to change what colours they are so either we'd have to rename
a bunch of constants. We may as well make things not reference what colour
anything is in the actual UI. Hopefully these constants are clear enough.

 * Rename NotificationColor -> NotificationLevel
 * Red -> Highlight
 * Grey -> Notification
 * Bold -> Activity
 * Anywhere else that calls it 'color' -> 'level'

Also fixes some weird mixes of US & UK English.

It turns out this is referenced in... quite a lot of places, so this is
quite a large PR. It can't really be much smaller, sorry.

* One test rename & some hiding due to ts-ignore

* More hiding behind ts-ignore

* Damn you, @ts-ignore...

* Fix test CSS values

* Missed some colour -> level

Co-authored-by: Florian Duros <florianduros@element.io>

* Change other instances of variables renamed in suggestion

* Update new test for renames

---------

Co-authored-by: Florian Duros <florianduros@element.io>
This commit is contained in:
David Baker 2024-01-15 15:25:48 +00:00 committed by GitHub
parent 97339ee2f6
commit 9254e9562e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 268 additions and 265 deletions

View file

@ -17,7 +17,7 @@ limitations under the License.
import { NotificationCountType, Room, RoomEvent, ThreadEvent } from "matrix-js-sdk/src/matrix";
import { useCallback, useEffect, useState } from "react";
import { NotificationColor } from "../../stores/notifications/NotificationColor";
import { NotificationLevel } from "../../stores/notifications/NotificationLevel";
import { doesRoomOrThreadHaveUnreadMessages } from "../../Unread";
import { useEventEmitter } from "../useEventEmitter";
@ -26,16 +26,16 @@ import { useEventEmitter } from "../useEventEmitter";
* @param room the room to track
* @returns the type of notification for this room
*/
export const useRoomThreadNotifications = (room: Room): NotificationColor => {
const [notificationColor, setNotificationColor] = useState(NotificationColor.None);
export const useRoomThreadNotifications = (room: Room): NotificationLevel => {
const [notificationLevel, setNotificationLevel] = useState(NotificationLevel.None);
const updateNotification = useCallback(() => {
switch (room?.threadsAggregateNotificationType) {
case NotificationCountType.Highlight:
setNotificationColor(NotificationColor.Red);
setNotificationLevel(NotificationLevel.Highlight);
break;
case NotificationCountType.Total:
setNotificationColor(NotificationColor.Grey);
setNotificationLevel(NotificationLevel.Notification);
break;
}
// We don't have any notified messages, but we might have unread messages. Let's
@ -43,7 +43,7 @@ export const useRoomThreadNotifications = (room: Room): NotificationColor => {
for (const thread of room!.getThreads()) {
// If the current thread has unread messages, we're done.
if (doesRoomOrThreadHaveUnreadMessages(thread)) {
setNotificationColor(NotificationColor.Bold);
setNotificationLevel(NotificationLevel.Activity);
break;
}
}
@ -63,5 +63,5 @@ export const useRoomThreadNotifications = (room: Room): NotificationColor => {
updateNotification();
}, [updateNotification]);
return notificationColor;
return notificationLevel;
};

View file

@ -19,7 +19,7 @@ import { useCallback, useEffect, useState } from "react";
import type { NotificationCount, Room } from "matrix-js-sdk/src/matrix";
import { determineUnreadState } from "../RoomNotifs";
import { NotificationColor } from "../stores/notifications/NotificationColor";
import { NotificationLevel } from "../stores/notifications/NotificationLevel";
import { useEventEmitter } from "./useEventEmitter";
export const useUnreadNotifications = (
@ -28,11 +28,11 @@ export const useUnreadNotifications = (
): {
symbol: string | null;
count: number;
color: NotificationColor;
level: NotificationLevel;
} => {
const [symbol, setSymbol] = useState<string | null>(null);
const [count, setCount] = useState<number>(0);
const [color, setColor] = useState<NotificationColor>(NotificationColor.None);
const [level, setLevel] = useState<NotificationLevel>(NotificationLevel.None);
useEventEmitter(
room,
@ -50,10 +50,10 @@ export const useUnreadNotifications = (
useEventEmitter(room, RoomEvent.MyMembership, () => updateNotificationState());
const updateNotificationState = useCallback(() => {
const { symbol, count, color } = determineUnreadState(room, threadId);
const { symbol, count, level } = determineUnreadState(room, threadId);
setSymbol(symbol);
setCount(count);
setColor(color);
setLevel(level);
}, [room, threadId]);
useEffect(() => {
@ -63,6 +63,6 @@ export const useUnreadNotifications = (
return {
symbol,
count,
color,
level,
};
};