URL navigation in interface and other improvements (#1633)
* load room on url change * add direct room list * render space room list * fix css syntax error * update scroll virtualizer * render subspaces room list * improve sidebar notification badge perf * add nav category components * add space recursive direct component * use nav category component in home, direct and space room list * add empty home and direct list layout * fix unread room menu ref * add more navigation items in room, direct and space tab * add more navigation * fix unread room menu to links * fix space lobby and search link * add explore navigation section * add notifications navigation menu * redirect to initial path after login * include unsupported room in rooms * move router hooks in hooks/router folder * add featured explore - WIP * load featured room with room summary * fix room card topic line clamp * add react query * load room summary using react query * add join button in room card * add content component * use content component in featured community content * fix content width * add responsive room card grid * fix async callback error status * add room card error button * fix client drawer shrink * add room topic viewer * open room card topic in viewer * fix room topic close btn * add get orphan parent util * add room card error dialog * add view featured room or space btn * refactor orphanParent to orphanParents * WIP - explore server * show space hint in room card * add room type filters * add per page item limit popout * reset scroll on public rooms load * refactor explore ui * refactor public rooms component * reset search on server change * fix typo * add empty featured section info * display user server on top * make server room card view btn clickable * add user server as default redirect for explore path * make home empty btn clickable * add thirdparty instance filter in server explore * remove since param on instance change * add server button in explore menu * rename notifications path to inbox * update react-virtual * Add notification messages inbox - WIP * add scroll top container component * add useInterval hook * add visibility change callback prop to scroll top container component * auto refresh notifications every 10 seconds * make message related component reusable * refactor matrix event renderer hoook * render notification message content * refactor matrix event renderer hook * update sequence card styles * move room navigate hook in global hooks * add open message button in notifications * add mark room as read button in notification group * show error in notification messages * add more featured spaces * render reply in notification messages * make notification message reply clickable * add outline prop for attachments * make old settings dialog viewable * add open featured communities as default config option * add invite count notification badge in sidebar and inbox menu * add element size observer hook * improve element size observer hook props * improve screen size hook * fix room avatar util function * allow Text props in Time component * fix dm room util function * add invitations * add no invites and notification cards * fix inbox tab unread badge visible without invite count * update folds and change inbox icon * memo search param construction * add message search in home * fix default message search order * fix display edited message new content * highlight search text in search messages * fix message search loading * disable log in production * add use space context * add useRoom context * fix space room list * fix inbox tab active state * add hook to get space child room recursive * add search for space * add virtual tile component * virtualize home and directs room list * update nav category component * use virtual tile component in more places * fix message highlight when click on reply twice * virtualize space room list * fix space room list lag issue * update folds * add room nav item component in space room list * use room nav item in home and direct room list * make space categories closable and save it in local storage * show unread room when category is collapsed * make home and direct room list category closable * rename room nav item show avatar prop * fix explore server category text alignment * rename closedRoomCategories to closedNavCategories * add nav category handler hook * save and restore last navigation path on space select * filter space rooms category by activity when it is closed * save and restore home and direct nav path state * save and restore inbox active path on open * save and restore explore tab active path * remove notification badge unread menu * add join room or space before navigate screen * move room component to features folder and add new room header * update folds * add room header menu * fix home room list activity sorting * do not hide selected room item on category closed in home and direct tab * replace old select room/tab call with navigate hook * improve state event hooks * show room card summary for joined rooms * prevent room from opening in wrong tab * only show message sender id on hover in modern layout * revert state event hooks changes * add key prop to room provider components * add welcome page * prevent excessive redirects * fix sidebar style with no spaces * move room settings in popup window * remove invite option from room settings * fix open room list search * add leave room prompt * standardize room and user avatar * fix avatar text size * add new reply layout * rename space hierarchy hook * add room topic hook * add room name hook * add room avatar hook and add direct room avatar util * space lobby - WIP * hide invalid space child event from space hierarchy in lobby * move lobby to features * fix element size observer hook width and height * add lobby header and hero section * add hierarchy room item error and loading state * add first and last child prop in sequence card * redirect to lobby from index path * memo and retry hierarchy room summary error * fix hierarchy room item styles * rename lobby hierarchy item card to room item card * show direct room avatar in space lobby * add hierarchy space item * add space item unknown room join button * fix space hierarchy hook refresh after new space join * change user avatar color and fallback render to user icon * change room avatar fallback to room icon * rename room/user avatar renderInitial prop to renderFallback * add room join and view button in space lobby * make power level api more reusable * fix space hierarchy not updating on child update * add menu to suggest or remove space children * show reply arrow in place of reply bend in message * fix typeerror in search because of wrong js-sdk t.ds * do not refetch hierarchy room summary on window focus * make room/user avatar un-draggable * change welcome page support button copy * drag-and-drop ordering of lobby spaces/rooms - WIP * add ASCIILexicalTable algorithms * fix wrong power level check in lobby items options * fix lobby can drop checks * fix join button error crash * fix reply spacing * fix m direct updated with other account data * add option to open room/space settings from lobby * add option in lobby to add new or existing room/spaces * fix room nav item selected styles * add space children reorder mechanism * fix space child reorder bug * fix hierarchy item sort function * Apply reorder of lobby into room list * add and improve space lobby menu items * add existing spaces menu in lobby * change restricted room allow params when dragging outside space * move featured servers config from homeserver list * removed unused features from space settings * add canonical alias as name fallback in lobby item * fix unreliable unread count update bug * fix after login redirect * fix room card topic hover style * Add dnd and folders in sidebar spaces * fix orphan space not visible in sidebar * fix sso login has mix of icon and button * fix space children not visible in home upon leaving space * recalculate notification on updating any space child * fix user color saturation/lightness * add user color to user avatar * add background colors to room avatar * show 2 length initial in sidebar space avatar * improve link color * add nav button component * open legacy create room and create direct * improve page route structure * handle hash router in path utils * mobile friendly router and navigation * make room header member drawer icon mobile friendly * setup index redirect for inbox and explore server route * add leave space prompt * improve member drawer filter menu * add space context menu * add context menu in home * add leave button in lobby items * render user tab avatar on sidebar * force overwrite netlify - test * netlify test * fix reset-password path without server redirected to login * add message link copy button in message menu * reset unread on sync prepared * fix stuck typing notifications * show typing indication in room nav item * refactor closedNavCategories atom to use userId in store key * refactor closedLobbyCategoriesAtom to include userId in store key * refactor navToActivePathAtom to use userId in storage key * remove unused file * refactor openedSidebarFolderAtom to include userId in storage key * add context menu for sidebar space tab * fix eslint not working * add option to pin/unpin child spaces * add context menu for directs tab * add context menu for direct and home tab * show lock icon for non-public space in header * increase matrix max listener count * wrap lobby add space room in callback hook
This commit is contained in:
Ajay Bura
GitHub
parent
2b7d825694
commit
4c76a7fd18
25 changed files with 17436 additions and 3213 deletions
68
src/app/state/closedLobbyCategories.ts
Normal file
68
src/app/state/closedLobbyCategories.ts
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
import { WritableAtom, atom } from 'jotai';
|
||||
import produce from 'immer';
|
||||
import {
|
||||
atomWithLocalStorage,
|
||||
getLocalStorageItem,
|
||||
setLocalStorageItem,
|
||||
} from './utils/atomWithLocalStorage';
|
||||
|
||||
const CLOSED_LOBBY_CATEGORY = 'closedLobbyCategories';
|
||||
|
||||
type ClosedLobbyCategoriesAction =
|
||||
| {
|
||||
type: 'PUT';
|
||||
categoryId: string;
|
||||
}
|
||||
| {
|
||||
type: 'DELETE';
|
||||
categoryId: string;
|
||||
};
|
||||
|
||||
export type ClosedLobbyCategoriesAtom = WritableAtom<
|
||||
Set<string>,
|
||||
[ClosedLobbyCategoriesAction],
|
||||
undefined
|
||||
>;
|
||||
|
||||
export const makeClosedLobbyCategoriesAtom = (userId: string): ClosedLobbyCategoriesAtom => {
|
||||
const storeKey = `${CLOSED_LOBBY_CATEGORY}${userId}`;
|
||||
|
||||
const baseClosedLobbyCategoriesAtom = atomWithLocalStorage<Set<string>>(
|
||||
storeKey,
|
||||
(key) => {
|
||||
const arrayValue = getLocalStorageItem<string[]>(key, []);
|
||||
return new Set(arrayValue);
|
||||
},
|
||||
(key, value) => {
|
||||
const arrayValue = Array.from(value);
|
||||
setLocalStorageItem(key, arrayValue);
|
||||
}
|
||||
);
|
||||
|
||||
const closedLobbyCategoriesAtom = atom<Set<string>, [ClosedLobbyCategoriesAction], undefined>(
|
||||
(get) => get(baseClosedLobbyCategoriesAtom),
|
||||
(get, set, action) => {
|
||||
if (action.type === 'DELETE') {
|
||||
set(
|
||||
baseClosedLobbyCategoriesAtom,
|
||||
produce(get(baseClosedLobbyCategoriesAtom), (draft) => {
|
||||
draft.delete(action.categoryId);
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (action.type === 'PUT') {
|
||||
set(
|
||||
baseClosedLobbyCategoriesAtom,
|
||||
produce(get(baseClosedLobbyCategoriesAtom), (draft) => {
|
||||
draft.add(action.categoryId);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return closedLobbyCategoriesAtom;
|
||||
};
|
||||
|
||||
export const makeLobbyCategoryId = (...args: string[]): string => args.join('|');
|
||||
68
src/app/state/closedNavCategories.ts
Normal file
68
src/app/state/closedNavCategories.ts
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
import { WritableAtom, atom } from 'jotai';
|
||||
import produce from 'immer';
|
||||
import {
|
||||
atomWithLocalStorage,
|
||||
getLocalStorageItem,
|
||||
setLocalStorageItem,
|
||||
} from './utils/atomWithLocalStorage';
|
||||
|
||||
const CLOSED_NAV_CATEGORY = 'closedNavCategories';
|
||||
|
||||
type ClosedNavCategoriesAction =
|
||||
| {
|
||||
type: 'PUT';
|
||||
categoryId: string;
|
||||
}
|
||||
| {
|
||||
type: 'DELETE';
|
||||
categoryId: string;
|
||||
};
|
||||
|
||||
export type ClosedNavCategoriesAtom = WritableAtom<
|
||||
Set<string>,
|
||||
[ClosedNavCategoriesAction],
|
||||
undefined
|
||||
>;
|
||||
|
||||
export const makeClosedNavCategoriesAtom = (userId: string): ClosedNavCategoriesAtom => {
|
||||
const storeKey = `${CLOSED_NAV_CATEGORY}${userId}`;
|
||||
|
||||
const baseClosedNavCategoriesAtom = atomWithLocalStorage<Set<string>>(
|
||||
storeKey,
|
||||
(key) => {
|
||||
const arrayValue = getLocalStorageItem<string[]>(key, []);
|
||||
return new Set(arrayValue);
|
||||
},
|
||||
(key, value) => {
|
||||
const arrayValue = Array.from(value);
|
||||
setLocalStorageItem(key, arrayValue);
|
||||
}
|
||||
);
|
||||
|
||||
const closedNavCategoriesAtom = atom<Set<string>, [ClosedNavCategoriesAction], undefined>(
|
||||
(get) => get(baseClosedNavCategoriesAtom),
|
||||
(get, set, action) => {
|
||||
if (action.type === 'DELETE') {
|
||||
set(
|
||||
baseClosedNavCategoriesAtom,
|
||||
produce(get(baseClosedNavCategoriesAtom), (draft) => {
|
||||
draft.delete(action.categoryId);
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (action.type === 'PUT') {
|
||||
set(
|
||||
baseClosedNavCategoriesAtom,
|
||||
produce(get(baseClosedNavCategoriesAtom), (draft) => {
|
||||
draft.add(action.categoryId);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return closedNavCategoriesAtom;
|
||||
};
|
||||
|
||||
export const makeNavCategoryId = (...args: string[]): string => args.join('|');
|
||||
15
src/app/state/hooks/closedLobbyCategories.ts
Normal file
15
src/app/state/hooks/closedLobbyCategories.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { createContext, useContext } from 'react';
|
||||
import { ClosedLobbyCategoriesAtom } from '../closedLobbyCategories';
|
||||
|
||||
const ClosedLobbyCategoriesAtomContext = createContext<ClosedLobbyCategoriesAtom | null>(null);
|
||||
export const ClosedLobbyCategoriesProvider = ClosedLobbyCategoriesAtomContext.Provider;
|
||||
|
||||
export const useClosedLobbyCategoriesAtom = (): ClosedLobbyCategoriesAtom => {
|
||||
const anAtom = useContext(ClosedLobbyCategoriesAtomContext);
|
||||
|
||||
if (!anAtom) {
|
||||
throw new Error('ClosedLobbyCategoriesAtom is not provided!');
|
||||
}
|
||||
|
||||
return anAtom;
|
||||
};
|
||||
15
src/app/state/hooks/closedNavCategories.ts
Normal file
15
src/app/state/hooks/closedNavCategories.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { createContext, useContext } from 'react';
|
||||
import { ClosedNavCategoriesAtom } from '../closedNavCategories';
|
||||
|
||||
const ClosedNavCategoriesAtomContext = createContext<ClosedNavCategoriesAtom | null>(null);
|
||||
export const ClosedNavCategoriesProvider = ClosedNavCategoriesAtomContext.Provider;
|
||||
|
||||
export const useClosedNavCategoriesAtom = (): ClosedNavCategoriesAtom => {
|
||||
const anAtom = useContext(ClosedNavCategoriesAtomContext);
|
||||
|
||||
if (!anAtom) {
|
||||
throw new Error('ClosedNavCategoriesAtom is not provided!');
|
||||
}
|
||||
|
||||
return anAtom;
|
||||
};
|
||||
|
|
@ -3,9 +3,8 @@ import { selectAtom } from 'jotai/utils';
|
|||
import { MatrixClient } from 'matrix-js-sdk';
|
||||
import { useCallback } from 'react';
|
||||
import { isDirectInvite, isRoom, isSpace, isUnsupportedRoom } from '../../utils/room';
|
||||
import { compareRoomsEqual } from '../utils';
|
||||
import { mDirectAtom } from '../mDirectList';
|
||||
import { allInvitesAtom } from '../inviteList';
|
||||
import { compareRoomsEqual } from '../room-list/utils';
|
||||
import { allInvitesAtom } from '../room-list/inviteList';
|
||||
|
||||
export const useSpaceInvites = (mx: MatrixClient, invitesAtom: typeof allInvitesAtom) => {
|
||||
const selector = useCallback(
|
||||
|
|
@ -18,9 +17,8 @@ export const useSpaceInvites = (mx: MatrixClient, invitesAtom: typeof allInvites
|
|||
export const useRoomInvites = (
|
||||
mx: MatrixClient,
|
||||
invitesAtom: typeof allInvitesAtom,
|
||||
directAtom: typeof mDirectAtom
|
||||
mDirects: Set<string>
|
||||
) => {
|
||||
const mDirects = useAtomValue(directAtom);
|
||||
const selector = useCallback(
|
||||
(rooms: string[]) =>
|
||||
rooms.filter(
|
||||
|
|
@ -36,9 +34,8 @@ export const useRoomInvites = (
|
|||
export const useDirectInvites = (
|
||||
mx: MatrixClient,
|
||||
invitesAtom: typeof allInvitesAtom,
|
||||
directAtom: typeof mDirectAtom
|
||||
mDirects: Set<string>
|
||||
) => {
|
||||
const mDirects = useAtomValue(directAtom);
|
||||
const selector = useCallback(
|
||||
(rooms: string[]) =>
|
||||
rooms.filter(
|
||||
|
|
|
|||
15
src/app/state/hooks/navToActivePath.ts
Normal file
15
src/app/state/hooks/navToActivePath.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { createContext, useContext } from 'react';
|
||||
import { NavToActivePathAtom } from '../navToActivePath';
|
||||
|
||||
const NavToActivePathAtomContext = createContext<NavToActivePathAtom | null>(null);
|
||||
export const NavToActivePathProvider = NavToActivePathAtomContext.Provider;
|
||||
|
||||
export const useNavToActivePathAtom = (): NavToActivePathAtom => {
|
||||
const anAtom = useContext(NavToActivePathAtomContext);
|
||||
|
||||
if (!anAtom) {
|
||||
throw new Error('NavToActivePathAtom is not provided!');
|
||||
}
|
||||
|
||||
return anAtom;
|
||||
};
|
||||
15
src/app/state/hooks/openedSidebarFolder.ts
Normal file
15
src/app/state/hooks/openedSidebarFolder.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { createContext, useContext } from 'react';
|
||||
import { OpenedSidebarFolderAtom } from '../openedSidebarFolder';
|
||||
|
||||
const OpenedSidebarFolderAtomContext = createContext<OpenedSidebarFolderAtom | null>(null);
|
||||
export const OpenedSidebarFolderProvider = OpenedSidebarFolderAtomContext.Provider;
|
||||
|
||||
export const useOpenedSidebarFolderAtom = (): OpenedSidebarFolderAtom => {
|
||||
const anAtom = useContext(OpenedSidebarFolderAtomContext);
|
||||
|
||||
if (!anAtom) {
|
||||
throw new Error('OpenedSidebarFolderAtom is not provided!');
|
||||
}
|
||||
|
||||
return anAtom;
|
||||
};
|
||||
|
|
@ -1,52 +1,177 @@
|
|||
import { useAtomValue } from 'jotai';
|
||||
import { Atom, useAtomValue } from 'jotai';
|
||||
import { selectAtom } from 'jotai/utils';
|
||||
import { MatrixClient } from 'matrix-js-sdk';
|
||||
import { useCallback } from 'react';
|
||||
import { isRoom, isSpace, isUnsupportedRoom } from '../../utils/room';
|
||||
import { compareRoomsEqual } from '../utils';
|
||||
import { mDirectAtom } from '../mDirectList';
|
||||
import { allRoomsAtom } from '../roomList';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { getAllParents, isRoom, isSpace, isUnsupportedRoom } from '../../utils/room';
|
||||
import { compareRoomsEqual } from '../room-list/utils';
|
||||
import { RoomToParents } from '../../../types/matrix/room';
|
||||
|
||||
export const useSpaces = (mx: MatrixClient, roomsAtom: typeof allRoomsAtom) => {
|
||||
const selector = useCallback(
|
||||
(rooms: string[]) => rooms.filter((roomId) => isSpace(mx.getRoom(roomId))),
|
||||
[mx]
|
||||
);
|
||||
return useAtomValue(selectAtom(roomsAtom, selector, compareRoomsEqual));
|
||||
export type RoomsAtom = Atom<string[]>;
|
||||
export type RoomSelector = (roomId: string) => boolean | undefined;
|
||||
|
||||
export const selectedRoomsAtom = (
|
||||
roomsAtom: RoomsAtom,
|
||||
selector: (roomId: string) => boolean | undefined
|
||||
) => selectAtom(roomsAtom, (rooms) => rooms.filter(selector), compareRoomsEqual);
|
||||
|
||||
export const useSelectedRooms = (roomsAtom: RoomsAtom, selector: RoomSelector) => {
|
||||
const anAtom = useMemo(() => selectedRoomsAtom(roomsAtom, selector), [roomsAtom, selector]);
|
||||
|
||||
return useAtomValue(anAtom);
|
||||
};
|
||||
|
||||
export const useRooms = (
|
||||
export type SpaceChildSelectorFactory = (parentId: string) => RoomSelector;
|
||||
|
||||
export const useRecursiveChildScopeFactory = (
|
||||
mx: MatrixClient,
|
||||
roomsAtom: typeof allRoomsAtom,
|
||||
directAtom: typeof mDirectAtom
|
||||
roomToParents: RoomToParents
|
||||
): SpaceChildSelectorFactory =>
|
||||
useCallback(
|
||||
(parentId: string) => (roomId) =>
|
||||
isRoom(mx.getRoom(roomId)) &&
|
||||
roomToParents.has(roomId) &&
|
||||
getAllParents(roomToParents, roomId).has(parentId),
|
||||
[mx, roomToParents]
|
||||
);
|
||||
|
||||
export const useChildSpaceScopeFactory = (
|
||||
mx: MatrixClient,
|
||||
roomToParents: RoomToParents
|
||||
): SpaceChildSelectorFactory =>
|
||||
useCallback(
|
||||
(parentId: string) => (roomId) =>
|
||||
isSpace(mx.getRoom(roomId)) && roomToParents.get(roomId)?.has(parentId),
|
||||
[mx, roomToParents]
|
||||
);
|
||||
|
||||
export const useRecursiveChildSpaceScopeFactory = (
|
||||
mx: MatrixClient,
|
||||
roomToParents: RoomToParents
|
||||
): SpaceChildSelectorFactory =>
|
||||
useCallback(
|
||||
(parentId: string) => (roomId) =>
|
||||
isSpace(mx.getRoom(roomId)) &&
|
||||
roomToParents.has(roomId) &&
|
||||
getAllParents(roomToParents, roomId).has(parentId),
|
||||
[mx, roomToParents]
|
||||
);
|
||||
|
||||
export const useChildRoomScopeFactory = (
|
||||
mx: MatrixClient,
|
||||
mDirects: Set<string>,
|
||||
roomToParents: RoomToParents
|
||||
): SpaceChildSelectorFactory =>
|
||||
useCallback(
|
||||
(parentId: string) => (roomId) =>
|
||||
isRoom(mx.getRoom(roomId)) &&
|
||||
!mDirects.has(roomId) &&
|
||||
roomToParents.get(roomId)?.has(parentId),
|
||||
[mx, mDirects, roomToParents]
|
||||
);
|
||||
|
||||
export const useRecursiveChildRoomScopeFactory = (
|
||||
mx: MatrixClient,
|
||||
mDirects: Set<string>,
|
||||
roomToParents: RoomToParents
|
||||
): SpaceChildSelectorFactory =>
|
||||
useCallback(
|
||||
(parentId: string) => (roomId) =>
|
||||
isRoom(mx.getRoom(roomId)) &&
|
||||
!mDirects.has(roomId) &&
|
||||
roomToParents.has(roomId) &&
|
||||
getAllParents(roomToParents, roomId).has(parentId),
|
||||
[mx, mDirects, roomToParents]
|
||||
);
|
||||
|
||||
export const useChildDirectScopeFactory = (
|
||||
mx: MatrixClient,
|
||||
mDirects: Set<string>,
|
||||
roomToParents: RoomToParents
|
||||
): SpaceChildSelectorFactory =>
|
||||
useCallback(
|
||||
(parentId: string) => (roomId) =>
|
||||
isRoom(mx.getRoom(roomId)) &&
|
||||
mDirects.has(roomId) &&
|
||||
roomToParents.get(roomId)?.has(parentId),
|
||||
[mx, mDirects, roomToParents]
|
||||
);
|
||||
|
||||
export const useRecursiveChildDirectScopeFactory = (
|
||||
mx: MatrixClient,
|
||||
mDirects: Set<string>,
|
||||
roomToParents: RoomToParents
|
||||
): SpaceChildSelectorFactory =>
|
||||
useCallback(
|
||||
(parentId: string) => (roomId) =>
|
||||
isRoom(mx.getRoom(roomId)) &&
|
||||
mDirects.has(roomId) &&
|
||||
roomToParents.has(roomId) &&
|
||||
getAllParents(roomToParents, roomId).has(parentId),
|
||||
[mx, mDirects, roomToParents]
|
||||
);
|
||||
|
||||
export const useSpaceChildren = (
|
||||
roomsAtom: RoomsAtom,
|
||||
spaceId: string,
|
||||
selectorFactory: SpaceChildSelectorFactory
|
||||
) => {
|
||||
const mDirects = useAtomValue(directAtom);
|
||||
const selector = useCallback(
|
||||
(rooms: string[]) =>
|
||||
rooms.filter((roomId) => isRoom(mx.getRoom(roomId)) && !mDirects.has(roomId)),
|
||||
const recursiveChildRoomSelector = useMemo(
|
||||
() => selectorFactory(spaceId),
|
||||
[selectorFactory, spaceId]
|
||||
);
|
||||
return useSelectedRooms(roomsAtom, recursiveChildRoomSelector);
|
||||
};
|
||||
|
||||
export const useSpaces = (mx: MatrixClient, roomsAtom: RoomsAtom) => {
|
||||
const selector: RoomSelector = useCallback((roomId) => isSpace(mx.getRoom(roomId)), [mx]);
|
||||
return useSelectedRooms(roomsAtom, selector);
|
||||
};
|
||||
|
||||
export const useOrphanSpaces = (
|
||||
mx: MatrixClient,
|
||||
roomsAtom: RoomsAtom,
|
||||
roomToParents: RoomToParents
|
||||
) => {
|
||||
const selector: RoomSelector = useCallback(
|
||||
(roomId) => isSpace(mx.getRoom(roomId)) && !roomToParents.has(roomId),
|
||||
[mx, roomToParents]
|
||||
);
|
||||
return useSelectedRooms(roomsAtom, selector);
|
||||
};
|
||||
|
||||
export const useRooms = (mx: MatrixClient, roomsAtom: RoomsAtom, mDirects: Set<string>) => {
|
||||
const selector: RoomSelector = useCallback(
|
||||
(roomId: string) => isRoom(mx.getRoom(roomId)) && !mDirects.has(roomId),
|
||||
[mx, mDirects]
|
||||
);
|
||||
return useAtomValue(selectAtom(roomsAtom, selector, compareRoomsEqual));
|
||||
return useSelectedRooms(roomsAtom, selector);
|
||||
};
|
||||
|
||||
export const useDirects = (
|
||||
export const useOrphanRooms = (
|
||||
mx: MatrixClient,
|
||||
roomsAtom: typeof allRoomsAtom,
|
||||
directAtom: typeof mDirectAtom
|
||||
roomsAtom: RoomsAtom,
|
||||
mDirects: Set<string>,
|
||||
roomToParents: RoomToParents
|
||||
) => {
|
||||
const mDirects = useAtomValue(directAtom);
|
||||
const selector = useCallback(
|
||||
(rooms: string[]) =>
|
||||
rooms.filter((roomId) => isRoom(mx.getRoom(roomId)) && mDirects.has(roomId)),
|
||||
const selector: RoomSelector = useCallback(
|
||||
(roomId) => isRoom(mx.getRoom(roomId)) && !mDirects.has(roomId) && !roomToParents.has(roomId),
|
||||
[mx, mDirects, roomToParents]
|
||||
);
|
||||
return useSelectedRooms(roomsAtom, selector);
|
||||
};
|
||||
|
||||
export const useDirects = (mx: MatrixClient, roomsAtom: RoomsAtom, mDirects: Set<string>) => {
|
||||
const selector: RoomSelector = useCallback(
|
||||
(roomId) => isRoom(mx.getRoom(roomId)) && mDirects.has(roomId),
|
||||
[mx, mDirects]
|
||||
);
|
||||
return useAtomValue(selectAtom(roomsAtom, selector, compareRoomsEqual));
|
||||
return useSelectedRooms(roomsAtom, selector);
|
||||
};
|
||||
|
||||
export const useUnsupportedRooms = (mx: MatrixClient, roomsAtom: typeof allRoomsAtom) => {
|
||||
const selector = useCallback(
|
||||
(rooms: string[]) => rooms.filter((roomId) => isUnsupportedRoom(mx.getRoom(roomId))),
|
||||
export const useUnsupportedRooms = (mx: MatrixClient, roomsAtom: RoomsAtom) => {
|
||||
const selector: RoomSelector = useCallback(
|
||||
(roomId) => isUnsupportedRoom(mx.getRoom(roomId)),
|
||||
[mx]
|
||||
);
|
||||
return useAtomValue(selectAtom(roomsAtom, selector, compareRoomsEqual));
|
||||
return useSelectedRooms(roomsAtom, selector);
|
||||
};
|
||||
|
|
|
|||
46
src/app/state/hooks/unread.ts
Normal file
46
src/app/state/hooks/unread.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import { useCallback } from 'react';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { selectAtom } from 'jotai/utils';
|
||||
import { RoomToUnread, Unread } from '../../../types/matrix/room';
|
||||
import { roomToUnreadAtom, unreadEqual } from '../room/roomToUnread';
|
||||
|
||||
const compareUnreadEqual = (u1?: Unread, u2?: Unread): boolean => {
|
||||
if (!u1 || !u2) return false;
|
||||
return unreadEqual(u1, u2);
|
||||
};
|
||||
|
||||
const getRoomsUnread = (rooms: string[], roomToUnread: RoomToUnread): Unread | undefined => {
|
||||
const unread = rooms.reduce<Unread | undefined>((u, roomId) => {
|
||||
const roomUnread = roomToUnread.get(roomId);
|
||||
if (!roomUnread) return u;
|
||||
const newUnread: Unread = u ?? {
|
||||
total: 0,
|
||||
highlight: 0,
|
||||
from: new Set(),
|
||||
};
|
||||
newUnread.total += roomUnread.total;
|
||||
newUnread.highlight += roomUnread.highlight;
|
||||
newUnread.from?.add(roomId);
|
||||
return newUnread;
|
||||
}, undefined);
|
||||
return unread;
|
||||
};
|
||||
|
||||
export const useRoomsUnread = (
|
||||
rooms: string[],
|
||||
roomToUnreadAtm: typeof roomToUnreadAtom
|
||||
): Unread | undefined => {
|
||||
const selector = useCallback(
|
||||
(roomToUnread: RoomToUnread) => getRoomsUnread(rooms, roomToUnread),
|
||||
[rooms]
|
||||
);
|
||||
return useAtomValue(selectAtom(roomToUnreadAtm, selector, compareUnreadEqual));
|
||||
};
|
||||
|
||||
export const useRoomUnread = (
|
||||
roomId: string,
|
||||
roomToUnreadAtm: typeof roomToUnreadAtom
|
||||
): Unread | undefined => {
|
||||
const selector = useCallback((roomToUnread: RoomToUnread) => roomToUnread.get(roomId), [roomId]);
|
||||
return useAtomValue(selectAtom(roomToUnreadAtm, selector, compareUnreadEqual));
|
||||
};
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
import { MatrixClient } from 'matrix-js-sdk';
|
||||
import { allInvitesAtom, useBindAllInvitesAtom } from '../inviteList';
|
||||
import { allRoomsAtom, useBindAllRoomsAtom } from '../roomList';
|
||||
import { allInvitesAtom, useBindAllInvitesAtom } from '../room-list/inviteList';
|
||||
import { allRoomsAtom, useBindAllRoomsAtom } from '../room-list/roomList';
|
||||
import { mDirectAtom, useBindMDirectAtom } from '../mDirectList';
|
||||
import { muteChangesAtom, mutedRoomsAtom, useBindMutedRoomsAtom } from '../mutedRoomList';
|
||||
import { roomToUnreadAtom, useBindRoomToUnreadAtom } from '../roomToUnread';
|
||||
import { roomToParentsAtom, useBindRoomToParentsAtom } from '../roomToParents';
|
||||
import { muteChangesAtom, mutedRoomsAtom, useBindMutedRoomsAtom } from '../room-list/mutedRoomList';
|
||||
import { roomToUnreadAtom, useBindRoomToUnreadAtom } from '../room/roomToUnread';
|
||||
import { roomToParentsAtom, useBindRoomToParentsAtom } from '../room/roomToParents';
|
||||
import { roomIdToTypingMembersAtom, useBindRoomIdToTypingMembersAtom } from '../typingMembers';
|
||||
|
||||
export const useBindAtoms = (mx: MatrixClient) => {
|
||||
useBindMDirectAtom(mx, mDirectAtom);
|
||||
|
|
@ -13,4 +14,6 @@ export const useBindAtoms = (mx: MatrixClient) => {
|
|||
useBindRoomToParentsAtom(mx, roomToParentsAtom);
|
||||
useBindMutedRoomsAtom(mx, mutedRoomsAtom);
|
||||
useBindRoomToUnreadAtom(mx, roomToUnreadAtom, muteChangesAtom);
|
||||
|
||||
useBindRoomIdToTypingMembersAtom(mx, roomIdToTypingMembersAtom);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -30,10 +30,12 @@ export const useBindMDirectAtom = (mx: MatrixClient, mDirect: typeof mDirectAtom
|
|||
}
|
||||
|
||||
const handleAccountData = (event: MatrixEvent) => {
|
||||
setMDirect({
|
||||
type: 'UPDATE',
|
||||
rooms: getMDirects(event),
|
||||
});
|
||||
if (event.getType() === AccountDataEvent.Direct) {
|
||||
setMDirect({
|
||||
type: 'UPDATE',
|
||||
rooms: getMDirects(event),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
mx.on(ClientEvent.AccountData, handleAccountData);
|
||||
|
|
|
|||
66
src/app/state/navToActivePath.ts
Normal file
66
src/app/state/navToActivePath.ts
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { WritableAtom, atom } from 'jotai';
|
||||
import produce from 'immer';
|
||||
import { Path } from 'react-router-dom';
|
||||
import {
|
||||
atomWithLocalStorage,
|
||||
getLocalStorageItem,
|
||||
setLocalStorageItem,
|
||||
} from './utils/atomWithLocalStorage';
|
||||
|
||||
const NAV_TO_ACTIVE_PATH = 'navToActivePath';
|
||||
|
||||
type NavToActivePath = Map<string, Path>;
|
||||
|
||||
type NavToActivePathAction =
|
||||
| {
|
||||
type: 'PUT';
|
||||
navId: string;
|
||||
path: Path;
|
||||
}
|
||||
| {
|
||||
type: 'DELETE';
|
||||
navId: string;
|
||||
};
|
||||
|
||||
export type NavToActivePathAtom = WritableAtom<NavToActivePath, [NavToActivePathAction], undefined>;
|
||||
|
||||
export const makeNavToActivePathAtom = (userId: string): NavToActivePathAtom => {
|
||||
const storeKey = `${NAV_TO_ACTIVE_PATH}${userId}`;
|
||||
|
||||
const baseNavToActivePathAtom = atomWithLocalStorage<NavToActivePath>(
|
||||
storeKey,
|
||||
(key) => {
|
||||
const obj: Record<string, Path> = getLocalStorageItem(key, {});
|
||||
return new Map(Object.entries(obj));
|
||||
},
|
||||
(key, value) => {
|
||||
const obj: Record<string, Path> = Object.fromEntries(value);
|
||||
setLocalStorageItem(key, obj);
|
||||
}
|
||||
);
|
||||
|
||||
const navToActivePathAtom = atom<NavToActivePath, [NavToActivePathAction], undefined>(
|
||||
(get) => get(baseNavToActivePathAtom),
|
||||
(get, set, action) => {
|
||||
if (action.type === 'DELETE') {
|
||||
set(
|
||||
baseNavToActivePathAtom,
|
||||
produce(get(baseNavToActivePathAtom), (draft) => {
|
||||
draft.delete(action.navId);
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (action.type === 'PUT') {
|
||||
set(
|
||||
baseNavToActivePathAtom,
|
||||
produce(get(baseNavToActivePathAtom), (draft) => {
|
||||
draft.set(action.navId, action.path);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return navToActivePathAtom;
|
||||
};
|
||||
66
src/app/state/openedSidebarFolder.ts
Normal file
66
src/app/state/openedSidebarFolder.ts
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { WritableAtom, atom } from 'jotai';
|
||||
import produce from 'immer';
|
||||
import {
|
||||
atomWithLocalStorage,
|
||||
getLocalStorageItem,
|
||||
setLocalStorageItem,
|
||||
} from './utils/atomWithLocalStorage';
|
||||
|
||||
const OPENED_SIDEBAR_FOLDER = 'openedSidebarFolder';
|
||||
|
||||
type OpenedSidebarFolderAction =
|
||||
| {
|
||||
type: 'PUT';
|
||||
id: string;
|
||||
}
|
||||
| {
|
||||
type: 'DELETE';
|
||||
id: string;
|
||||
};
|
||||
|
||||
export type OpenedSidebarFolderAtom = WritableAtom<
|
||||
Set<string>,
|
||||
[OpenedSidebarFolderAction],
|
||||
undefined
|
||||
>;
|
||||
|
||||
export const makeOpenedSidebarFolderAtom = (userId: string): OpenedSidebarFolderAtom => {
|
||||
const storeKey = `${OPENED_SIDEBAR_FOLDER}${userId}`;
|
||||
|
||||
const baseOpenedSidebarFolderAtom = atomWithLocalStorage<Set<string>>(
|
||||
storeKey,
|
||||
(key) => {
|
||||
const arrayValue = getLocalStorageItem<string[]>(key, []);
|
||||
return new Set(arrayValue);
|
||||
},
|
||||
(key, value) => {
|
||||
const arrayValue = Array.from(value);
|
||||
setLocalStorageItem(key, arrayValue);
|
||||
}
|
||||
);
|
||||
|
||||
const openedSidebarFolderAtom = atom<Set<string>, [OpenedSidebarFolderAction], undefined>(
|
||||
(get) => get(baseOpenedSidebarFolderAtom),
|
||||
(get, set, action) => {
|
||||
if (action.type === 'DELETE') {
|
||||
set(
|
||||
baseOpenedSidebarFolderAtom,
|
||||
produce(get(baseOpenedSidebarFolderAtom), (draft) => {
|
||||
draft.delete(action.id);
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (action.type === 'PUT') {
|
||||
set(
|
||||
baseOpenedSidebarFolderAtom,
|
||||
produce(get(baseOpenedSidebarFolderAtom), (draft) => {
|
||||
draft.add(action.id);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return openedSidebarFolderAtom;
|
||||
};
|
||||
32
src/app/state/room-list/inviteList.ts
Normal file
32
src/app/state/room-list/inviteList.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { atom, WritableAtom } from 'jotai';
|
||||
import { MatrixClient } from 'matrix-js-sdk';
|
||||
import { useMemo } from 'react';
|
||||
import { Membership } from '../../../types/matrix/room';
|
||||
import { RoomsAction, useBindRoomsWithMembershipsAtom } from './utils';
|
||||
|
||||
const baseRoomsAtom = atom<string[]>([]);
|
||||
export const allInvitesAtom = atom<string[], [RoomsAction], undefined>(
|
||||
(get) => get(baseRoomsAtom),
|
||||
(get, set, action) => {
|
||||
if (action.type === 'INITIALIZE') {
|
||||
set(baseRoomsAtom, action.rooms);
|
||||
return;
|
||||
}
|
||||
set(baseRoomsAtom, (ids) => {
|
||||
const newIds = ids.filter((id) => id !== action.roomId);
|
||||
if (action.type === 'PUT') newIds.push(action.roomId);
|
||||
return newIds;
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
export const useBindAllInvitesAtom = (
|
||||
mx: MatrixClient,
|
||||
allRooms: WritableAtom<string[], [RoomsAction], undefined>
|
||||
) => {
|
||||
useBindRoomsWithMembershipsAtom(
|
||||
mx,
|
||||
allRooms,
|
||||
useMemo(() => [Membership.Invite], [])
|
||||
);
|
||||
};
|
||||
98
src/app/state/room-list/mutedRoomList.ts
Normal file
98
src/app/state/room-list/mutedRoomList.ts
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
import { atom, useSetAtom } from 'jotai';
|
||||
import { ClientEvent, IPushRule, IPushRules, MatrixClient, MatrixEvent } from 'matrix-js-sdk';
|
||||
import { useEffect } from 'react';
|
||||
import { MuteChanges } from '../../../types/matrix/room';
|
||||
import { findMutedRule, isMutedRule } from '../../utils/room';
|
||||
|
||||
export type MutedRoomsUpdate =
|
||||
| {
|
||||
type: 'INITIALIZE';
|
||||
addRooms: string[];
|
||||
}
|
||||
| {
|
||||
type: 'UPDATE';
|
||||
addRooms: string[];
|
||||
removeRooms: string[];
|
||||
};
|
||||
|
||||
export const muteChangesAtom = atom<MuteChanges>({
|
||||
added: [],
|
||||
removed: [],
|
||||
});
|
||||
|
||||
const baseMutedRoomsAtom = atom(new Set<string>());
|
||||
export const mutedRoomsAtom = atom<Set<string>, [MutedRoomsUpdate], undefined>(
|
||||
(get) => get(baseMutedRoomsAtom),
|
||||
(get, set, action) => {
|
||||
const mutedRooms = new Set([...get(mutedRoomsAtom)]);
|
||||
if (action.type === 'INITIALIZE') {
|
||||
set(baseMutedRoomsAtom, new Set([...action.addRooms]));
|
||||
set(muteChangesAtom, {
|
||||
added: [...action.addRooms],
|
||||
removed: [],
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (action.type === 'UPDATE') {
|
||||
action.removeRooms.forEach((roomId) => mutedRooms.delete(roomId));
|
||||
action.addRooms.forEach((roomId) => mutedRooms.add(roomId));
|
||||
set(baseMutedRoomsAtom, mutedRooms);
|
||||
set(muteChangesAtom, {
|
||||
added: [...action.addRooms],
|
||||
removed: [...action.removeRooms],
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const useBindMutedRoomsAtom = (mx: MatrixClient, mutedAtom: typeof mutedRoomsAtom) => {
|
||||
const setMuted = useSetAtom(mutedAtom);
|
||||
|
||||
useEffect(() => {
|
||||
const overrideRules = mx.getAccountData('m.push_rules')?.getContent<IPushRules>()
|
||||
?.global?.override;
|
||||
if (overrideRules) {
|
||||
const mutedRooms = overrideRules.reduce<string[]>((rooms, rule) => {
|
||||
if (isMutedRule(rule)) rooms.push(rule.rule_id);
|
||||
return rooms;
|
||||
}, []);
|
||||
setMuted({
|
||||
type: 'INITIALIZE',
|
||||
addRooms: mutedRooms,
|
||||
});
|
||||
}
|
||||
}, [mx, setMuted]);
|
||||
|
||||
useEffect(() => {
|
||||
const handlePushRules = (mEvent: MatrixEvent, oldMEvent?: MatrixEvent) => {
|
||||
if (mEvent.getType() === 'm.push_rules') {
|
||||
const override = mEvent?.getContent()?.global?.override as IPushRule[] | undefined;
|
||||
const oldOverride = oldMEvent?.getContent()?.global?.override as IPushRule[] | undefined;
|
||||
if (!override || !oldOverride) return;
|
||||
|
||||
const isMuteToggled = (rule: IPushRule, otherOverride: IPushRule[]) => {
|
||||
const roomId = rule.rule_id;
|
||||
|
||||
const isMuted = isMutedRule(rule);
|
||||
if (!isMuted) return false;
|
||||
const isOtherMuted = findMutedRule(otherOverride, roomId);
|
||||
if (isOtherMuted) return false;
|
||||
return true;
|
||||
};
|
||||
|
||||
const mutedRules = override.filter((rule) => isMuteToggled(rule, oldOverride));
|
||||
const unMutedRules = oldOverride.filter((rule) => isMuteToggled(rule, override));
|
||||
|
||||
setMuted({
|
||||
type: 'UPDATE',
|
||||
addRooms: mutedRules.map((rule) => rule.rule_id),
|
||||
removeRooms: unMutedRules.map((rule) => rule.rule_id),
|
||||
});
|
||||
}
|
||||
};
|
||||
mx.on(ClientEvent.AccountData, handlePushRules);
|
||||
return () => {
|
||||
mx.removeListener(ClientEvent.AccountData, handlePushRules);
|
||||
};
|
||||
}, [mx, setMuted]);
|
||||
};
|
||||
28
src/app/state/room-list/roomList.ts
Normal file
28
src/app/state/room-list/roomList.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { atom } from 'jotai';
|
||||
import { MatrixClient } from 'matrix-js-sdk';
|
||||
import { useMemo } from 'react';
|
||||
import { Membership } from '../../../types/matrix/room';
|
||||
import { RoomsAction, useBindRoomsWithMembershipsAtom } from './utils';
|
||||
|
||||
const baseRoomsAtom = atom<string[]>([]);
|
||||
export const allRoomsAtom = atom<string[], [RoomsAction], undefined>(
|
||||
(get) => get(baseRoomsAtom),
|
||||
(get, set, action) => {
|
||||
if (action.type === 'INITIALIZE') {
|
||||
set(baseRoomsAtom, action.rooms);
|
||||
return;
|
||||
}
|
||||
set(baseRoomsAtom, (ids) => {
|
||||
const newIds = ids.filter((id) => id !== action.roomId);
|
||||
if (action.type === 'PUT') newIds.push(action.roomId);
|
||||
return newIds;
|
||||
});
|
||||
}
|
||||
);
|
||||
export const useBindAllRoomsAtom = (mx: MatrixClient, allRooms: typeof allRoomsAtom) => {
|
||||
useBindRoomsWithMembershipsAtom(
|
||||
mx,
|
||||
allRooms,
|
||||
useMemo(() => [Membership.Join], [])
|
||||
);
|
||||
};
|
||||
66
src/app/state/room-list/utils.ts
Normal file
66
src/app/state/room-list/utils.ts
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { useSetAtom, WritableAtom } from 'jotai';
|
||||
import { ClientEvent, MatrixClient, Room, RoomEvent } from 'matrix-js-sdk';
|
||||
import { useEffect } from 'react';
|
||||
import { Membership } from '../../../types/matrix/room';
|
||||
|
||||
export type RoomsAction =
|
||||
| {
|
||||
type: 'INITIALIZE';
|
||||
rooms: string[];
|
||||
}
|
||||
| {
|
||||
type: 'PUT' | 'DELETE';
|
||||
roomId: string;
|
||||
};
|
||||
|
||||
export const useBindRoomsWithMembershipsAtom = (
|
||||
mx: MatrixClient,
|
||||
roomsAtom: WritableAtom<string[], [RoomsAction], undefined>,
|
||||
memberships: Membership[]
|
||||
) => {
|
||||
const setRoomsAtom = useSetAtom(roomsAtom);
|
||||
|
||||
useEffect(() => {
|
||||
const satisfyMembership = (room: Room): boolean =>
|
||||
!!memberships.find((membership) => membership === room.getMyMembership());
|
||||
setRoomsAtom({
|
||||
type: 'INITIALIZE',
|
||||
rooms: mx
|
||||
.getRooms()
|
||||
.filter(satisfyMembership)
|
||||
.map((room) => room.roomId),
|
||||
});
|
||||
|
||||
const handleAddRoom = (room: Room) => {
|
||||
if (satisfyMembership(room)) {
|
||||
setRoomsAtom({ type: 'PUT', roomId: room.roomId });
|
||||
}
|
||||
};
|
||||
|
||||
const handleMembershipChange = (room: Room) => {
|
||||
if (satisfyMembership(room)) {
|
||||
setRoomsAtom({ type: 'PUT', roomId: room.roomId });
|
||||
} else {
|
||||
setRoomsAtom({ type: 'DELETE', roomId: room.roomId });
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteRoom = (roomId: string) => {
|
||||
setRoomsAtom({ type: 'DELETE', roomId });
|
||||
};
|
||||
|
||||
mx.on(ClientEvent.Room, handleAddRoom);
|
||||
mx.on(RoomEvent.MyMembership, handleMembershipChange);
|
||||
mx.on(ClientEvent.DeleteRoom, handleDeleteRoom);
|
||||
return () => {
|
||||
mx.removeListener(ClientEvent.Room, handleAddRoom);
|
||||
mx.removeListener(RoomEvent.MyMembership, handleMembershipChange);
|
||||
mx.removeListener(ClientEvent.DeleteRoom, handleDeleteRoom);
|
||||
};
|
||||
}, [mx, memberships, setRoomsAtom]);
|
||||
};
|
||||
|
||||
export const compareRoomsEqual = (a: string[], b: string[]) => {
|
||||
if (a.length !== b.length) return false;
|
||||
return a.every((roomId, roomIdIndex) => roomId === b[roomIdIndex]);
|
||||
};
|
||||
48
src/app/state/room/roomInputDrafts.ts
Normal file
48
src/app/state/room/roomInputDrafts.ts
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
import { atom } from 'jotai';
|
||||
import { atomFamily } from 'jotai/utils';
|
||||
import { Descendant } from 'slate';
|
||||
import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
|
||||
import { TListAtom, createListAtom } from '../list';
|
||||
import { createUploadAtomFamily } from '../upload';
|
||||
import { TUploadContent } from '../../utils/matrix';
|
||||
|
||||
export const roomUploadAtomFamily = createUploadAtomFamily();
|
||||
|
||||
export type TUploadItem = {
|
||||
file: TUploadContent;
|
||||
originalFile: TUploadContent;
|
||||
encInfo: EncryptedAttachmentInfo | undefined;
|
||||
};
|
||||
|
||||
export const roomIdToUploadItemsAtomFamily = atomFamily<string, TListAtom<TUploadItem>>(
|
||||
createListAtom
|
||||
);
|
||||
|
||||
export type RoomIdToMsgAction =
|
||||
| {
|
||||
type: 'PUT';
|
||||
roomId: string;
|
||||
msg: Descendant[];
|
||||
}
|
||||
| {
|
||||
type: 'DELETE';
|
||||
roomId: string;
|
||||
};
|
||||
|
||||
const createMsgDraftAtom = () => atom<Descendant[]>([]);
|
||||
export type TMsgDraftAtom = ReturnType<typeof createMsgDraftAtom>;
|
||||
export const roomIdToMsgDraftAtomFamily = atomFamily<string, TMsgDraftAtom>(() =>
|
||||
createMsgDraftAtom()
|
||||
);
|
||||
|
||||
export type IReplyDraft = {
|
||||
userId: string;
|
||||
eventId: string;
|
||||
body: string;
|
||||
formattedBody?: string;
|
||||
};
|
||||
const createReplyDraftAtom = () => atom<IReplyDraft | undefined>(undefined);
|
||||
export type TReplyDraftAtom = ReturnType<typeof createReplyDraftAtom>;
|
||||
export const roomIdToReplyDraftAtomFamily = atomFamily<string, TReplyDraftAtom>(() =>
|
||||
createReplyDraftAtom()
|
||||
);
|
||||
124
src/app/state/room/roomToParents.ts
Normal file
124
src/app/state/room/roomToParents.ts
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
import produce from 'immer';
|
||||
import { atom, useSetAtom } from 'jotai';
|
||||
import {
|
||||
ClientEvent,
|
||||
MatrixClient,
|
||||
MatrixEvent,
|
||||
Room,
|
||||
RoomEvent,
|
||||
RoomStateEvent,
|
||||
} from 'matrix-js-sdk';
|
||||
import { useEffect } from 'react';
|
||||
import { Membership, RoomToParents, StateEvent } from '../../../types/matrix/room';
|
||||
import {
|
||||
getRoomToParents,
|
||||
getSpaceChildren,
|
||||
isSpace,
|
||||
isValidChild,
|
||||
mapParentWithChildren,
|
||||
} from '../../utils/room';
|
||||
|
||||
export type RoomToParentsAction =
|
||||
| {
|
||||
type: 'INITIALIZE';
|
||||
roomToParents: RoomToParents;
|
||||
}
|
||||
| {
|
||||
type: 'PUT';
|
||||
parent: string;
|
||||
children: string[];
|
||||
}
|
||||
| {
|
||||
type: 'DELETE';
|
||||
roomId: string;
|
||||
};
|
||||
|
||||
const baseRoomToParents = atom<RoomToParents>(new Map());
|
||||
export const roomToParentsAtom = atom<RoomToParents, [RoomToParentsAction], undefined>(
|
||||
(get) => get(baseRoomToParents),
|
||||
(get, set, action) => {
|
||||
if (action.type === 'INITIALIZE') {
|
||||
set(baseRoomToParents, action.roomToParents);
|
||||
return;
|
||||
}
|
||||
if (action.type === 'PUT') {
|
||||
set(
|
||||
baseRoomToParents,
|
||||
produce(get(baseRoomToParents), (draftRoomToParents) => {
|
||||
mapParentWithChildren(draftRoomToParents, action.parent, action.children);
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (action.type === 'DELETE') {
|
||||
set(
|
||||
baseRoomToParents,
|
||||
produce(get(baseRoomToParents), (draftRoomToParents) => {
|
||||
const noParentRooms: string[] = [];
|
||||
draftRoomToParents.delete(action.roomId);
|
||||
draftRoomToParents.forEach((parents, child) => {
|
||||
parents.delete(action.roomId);
|
||||
if (parents.size === 0) noParentRooms.push(child);
|
||||
});
|
||||
noParentRooms.forEach((room) => draftRoomToParents.delete(room));
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const useBindRoomToParentsAtom = (
|
||||
mx: MatrixClient,
|
||||
roomToParents: typeof roomToParentsAtom
|
||||
) => {
|
||||
const setRoomToParents = useSetAtom(roomToParents);
|
||||
|
||||
useEffect(() => {
|
||||
setRoomToParents({ type: 'INITIALIZE', roomToParents: getRoomToParents(mx) });
|
||||
|
||||
const handleAddRoom = (room: Room) => {
|
||||
if (isSpace(room) && room.getMyMembership() !== Membership.Invite) {
|
||||
setRoomToParents({ type: 'PUT', parent: room.roomId, children: getSpaceChildren(room) });
|
||||
}
|
||||
};
|
||||
|
||||
const handleMembershipChange = (room: Room, membership: string) => {
|
||||
if (room.getMyMembership() === Membership.Leave) {
|
||||
setRoomToParents({ type: 'DELETE', roomId: room.roomId });
|
||||
return;
|
||||
}
|
||||
if (isSpace(room) && membership === Membership.Join) {
|
||||
setRoomToParents({ type: 'PUT', parent: room.roomId, children: getSpaceChildren(room) });
|
||||
}
|
||||
};
|
||||
|
||||
const handleStateChange = (mEvent: MatrixEvent) => {
|
||||
if (mEvent.getType() === StateEvent.SpaceChild) {
|
||||
const childId = mEvent.getStateKey();
|
||||
const roomId = mEvent.getRoomId();
|
||||
if (childId && roomId) {
|
||||
if (isValidChild(mEvent)) {
|
||||
setRoomToParents({ type: 'PUT', parent: roomId, children: [childId] });
|
||||
} else {
|
||||
setRoomToParents({ type: 'DELETE', roomId: childId });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteRoom = (roomId: string) => {
|
||||
setRoomToParents({ type: 'DELETE', roomId });
|
||||
};
|
||||
|
||||
mx.on(ClientEvent.Room, handleAddRoom);
|
||||
mx.on(RoomEvent.MyMembership, handleMembershipChange);
|
||||
mx.on(RoomStateEvent.Events, handleStateChange);
|
||||
mx.on(ClientEvent.DeleteRoom, handleDeleteRoom);
|
||||
return () => {
|
||||
mx.removeListener(ClientEvent.Room, handleAddRoom);
|
||||
mx.removeListener(RoomEvent.MyMembership, handleMembershipChange);
|
||||
mx.removeListener(RoomStateEvent.Events, handleStateChange);
|
||||
mx.removeListener(ClientEvent.DeleteRoom, handleDeleteRoom);
|
||||
};
|
||||
}, [mx, setRoomToParents]);
|
||||
};
|
||||
291
src/app/state/room/roomToUnread.ts
Normal file
291
src/app/state/room/roomToUnread.ts
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
import produce from 'immer';
|
||||
import { atom, useSetAtom, PrimitiveAtom, useAtomValue } from 'jotai';
|
||||
import {
|
||||
IRoomTimelineData,
|
||||
MatrixClient,
|
||||
MatrixEvent,
|
||||
Room,
|
||||
RoomEvent,
|
||||
SyncState,
|
||||
} from 'matrix-js-sdk';
|
||||
import { ReceiptContent, ReceiptType } from 'matrix-js-sdk/lib/@types/read_receipts';
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import {
|
||||
MuteChanges,
|
||||
Membership,
|
||||
NotificationType,
|
||||
RoomToUnread,
|
||||
UnreadInfo,
|
||||
Unread,
|
||||
StateEvent,
|
||||
} from '../../../types/matrix/room';
|
||||
import {
|
||||
getAllParents,
|
||||
getNotificationType,
|
||||
getUnreadInfo,
|
||||
getUnreadInfos,
|
||||
isNotificationEvent,
|
||||
roomHaveUnread,
|
||||
} from '../../utils/room';
|
||||
import { roomToParentsAtom } from './roomToParents';
|
||||
import { useStateEventCallback } from '../../hooks/useStateEventCallback';
|
||||
import { useSyncState } from '../../hooks/useSyncState';
|
||||
|
||||
export type RoomToUnreadAction =
|
||||
| {
|
||||
type: 'RESET';
|
||||
unreadInfos: UnreadInfo[];
|
||||
}
|
||||
| {
|
||||
type: 'PUT';
|
||||
unreadInfo: UnreadInfo;
|
||||
}
|
||||
| {
|
||||
type: 'DELETE';
|
||||
roomId: string;
|
||||
};
|
||||
|
||||
const unreadInfoToUnread = (unreadInfo: UnreadInfo): Unread => ({
|
||||
highlight: unreadInfo.highlight,
|
||||
total: unreadInfo.total,
|
||||
from: null,
|
||||
});
|
||||
|
||||
const putUnreadInfo = (
|
||||
roomToUnread: RoomToUnread,
|
||||
allParents: Set<string>,
|
||||
unreadInfo: UnreadInfo
|
||||
) => {
|
||||
const oldUnread = roomToUnread.get(unreadInfo.roomId) ?? { highlight: 0, total: 0, from: null };
|
||||
roomToUnread.set(unreadInfo.roomId, unreadInfoToUnread(unreadInfo));
|
||||
|
||||
const newH = unreadInfo.highlight - oldUnread.highlight;
|
||||
const newT = unreadInfo.total - oldUnread.total;
|
||||
|
||||
allParents.forEach((parentId) => {
|
||||
const oldParentUnread = roomToUnread.get(parentId) ?? { highlight: 0, total: 0, from: null };
|
||||
roomToUnread.set(parentId, {
|
||||
highlight: (oldParentUnread.highlight += newH),
|
||||
total: (oldParentUnread.total += newT),
|
||||
from: new Set([...(oldParentUnread.from ?? []), unreadInfo.roomId]),
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const deleteUnreadInfo = (roomToUnread: RoomToUnread, allParents: Set<string>, roomId: string) => {
|
||||
const oldUnread = roomToUnread.get(roomId);
|
||||
if (!oldUnread) return;
|
||||
roomToUnread.delete(roomId);
|
||||
|
||||
allParents.forEach((parentId) => {
|
||||
const oldParentUnread = roomToUnread.get(parentId);
|
||||
if (!oldParentUnread) return;
|
||||
const newFrom = new Set([...(oldParentUnread.from ?? roomId)]);
|
||||
newFrom.delete(roomId);
|
||||
if (newFrom.size === 0) {
|
||||
roomToUnread.delete(parentId);
|
||||
return;
|
||||
}
|
||||
roomToUnread.set(parentId, {
|
||||
highlight: oldParentUnread.highlight - oldUnread.highlight,
|
||||
total: oldParentUnread.total - oldUnread.total,
|
||||
from: newFrom,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const unreadEqual = (u1: Unread, u2: Unread): boolean => {
|
||||
const countEqual = u1.highlight === u2.highlight && u1.total === u2.total;
|
||||
|
||||
if (!countEqual) return false;
|
||||
|
||||
const f1 = u1.from;
|
||||
const f2 = u2.from;
|
||||
if (f1 === null && f2 === null) return true;
|
||||
if (f1 === null || f2 === null) return false;
|
||||
|
||||
if (f1.size !== f2.size) return false;
|
||||
|
||||
let fromEqual = true;
|
||||
f1?.forEach((item) => {
|
||||
if (!f2?.has(item)) {
|
||||
fromEqual = false;
|
||||
}
|
||||
});
|
||||
|
||||
return fromEqual;
|
||||
};
|
||||
|
||||
const baseRoomToUnread = atom<RoomToUnread>(new Map());
|
||||
export const roomToUnreadAtom = atom<RoomToUnread, [RoomToUnreadAction], undefined>(
|
||||
(get) => get(baseRoomToUnread),
|
||||
(get, set, action) => {
|
||||
if (action.type === 'RESET') {
|
||||
const draftRoomToUnread: RoomToUnread = new Map();
|
||||
action.unreadInfos.forEach((unreadInfo) => {
|
||||
putUnreadInfo(
|
||||
draftRoomToUnread,
|
||||
getAllParents(get(roomToParentsAtom), unreadInfo.roomId),
|
||||
unreadInfo
|
||||
);
|
||||
});
|
||||
set(baseRoomToUnread, draftRoomToUnread);
|
||||
return;
|
||||
}
|
||||
if (action.type === 'PUT') {
|
||||
const { unreadInfo } = action;
|
||||
const currentUnread = get(baseRoomToUnread).get(unreadInfo.roomId);
|
||||
if (currentUnread && unreadEqual(currentUnread, unreadInfoToUnread(unreadInfo))) {
|
||||
// Do not update if unread data has not changes
|
||||
// like total & highlight
|
||||
return;
|
||||
}
|
||||
set(
|
||||
baseRoomToUnread,
|
||||
produce(get(baseRoomToUnread), (draftRoomToUnread) =>
|
||||
putUnreadInfo(
|
||||
draftRoomToUnread,
|
||||
getAllParents(get(roomToParentsAtom), unreadInfo.roomId),
|
||||
unreadInfo
|
||||
)
|
||||
)
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (action.type === 'DELETE' && get(baseRoomToUnread).has(action.roomId)) {
|
||||
set(
|
||||
baseRoomToUnread,
|
||||
produce(get(baseRoomToUnread), (draftRoomToUnread) =>
|
||||
deleteUnreadInfo(
|
||||
draftRoomToUnread,
|
||||
getAllParents(get(roomToParentsAtom), action.roomId),
|
||||
action.roomId
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const useBindRoomToUnreadAtom = (
|
||||
mx: MatrixClient,
|
||||
unreadAtom: typeof roomToUnreadAtom,
|
||||
muteChangesAtom: PrimitiveAtom<MuteChanges>
|
||||
) => {
|
||||
const setUnreadAtom = useSetAtom(unreadAtom);
|
||||
const muteChanges = useAtomValue(muteChangesAtom);
|
||||
|
||||
useEffect(() => {
|
||||
setUnreadAtom({
|
||||
type: 'RESET',
|
||||
unreadInfos: getUnreadInfos(mx),
|
||||
});
|
||||
}, [mx, setUnreadAtom]);
|
||||
|
||||
useSyncState(
|
||||
mx,
|
||||
useCallback(
|
||||
(state) => {
|
||||
if (state === SyncState.Prepared) {
|
||||
setUnreadAtom({
|
||||
type: 'RESET',
|
||||
unreadInfos: getUnreadInfos(mx),
|
||||
});
|
||||
}
|
||||
},
|
||||
[mx, setUnreadAtom]
|
||||
)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handleTimelineEvent = (
|
||||
mEvent: MatrixEvent,
|
||||
room: Room | undefined,
|
||||
toStartOfTimeline: boolean | undefined,
|
||||
removed: boolean,
|
||||
data: IRoomTimelineData
|
||||
) => {
|
||||
if (!room || !data.liveEvent || room.isSpaceRoom() || !isNotificationEvent(mEvent)) return;
|
||||
if (getNotificationType(mx, room.roomId) === NotificationType.Mute) {
|
||||
setUnreadAtom({
|
||||
type: 'DELETE',
|
||||
roomId: room.roomId,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (mEvent.getSender() === mx.getUserId()) return;
|
||||
setUnreadAtom({ type: 'PUT', unreadInfo: getUnreadInfo(room) });
|
||||
};
|
||||
mx.on(RoomEvent.Timeline, handleTimelineEvent);
|
||||
return () => {
|
||||
mx.removeListener(RoomEvent.Timeline, handleTimelineEvent);
|
||||
};
|
||||
}, [mx, setUnreadAtom]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleReceipt = (mEvent: MatrixEvent, room: Room) => {
|
||||
if (mEvent.getType() === 'm.receipt') {
|
||||
const myUserId = mx.getUserId();
|
||||
if (!myUserId) return;
|
||||
if (room.isSpaceRoom()) return;
|
||||
const content = mEvent.getContent<ReceiptContent>();
|
||||
|
||||
const isMyReceipt = Object.keys(content).find((eventId) =>
|
||||
(Object.keys(content[eventId]) as ReceiptType[]).find(
|
||||
(receiptType) => content[eventId][receiptType][myUserId]
|
||||
)
|
||||
);
|
||||
if (isMyReceipt) {
|
||||
setUnreadAtom({ type: 'DELETE', roomId: room.roomId });
|
||||
}
|
||||
}
|
||||
};
|
||||
mx.on(RoomEvent.Receipt, handleReceipt);
|
||||
return () => {
|
||||
mx.removeListener(RoomEvent.Receipt, handleReceipt);
|
||||
};
|
||||
}, [mx, setUnreadAtom]);
|
||||
|
||||
useEffect(() => {
|
||||
muteChanges.removed.forEach((roomId) => {
|
||||
const room = mx.getRoom(roomId);
|
||||
if (!room) return;
|
||||
if (!roomHaveUnread(mx, room)) return;
|
||||
setUnreadAtom({ type: 'PUT', unreadInfo: getUnreadInfo(room) });
|
||||
});
|
||||
muteChanges.added.forEach((roomId) => {
|
||||
setUnreadAtom({ type: 'DELETE', roomId });
|
||||
});
|
||||
}, [mx, setUnreadAtom, muteChanges]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMembershipChange = (room: Room, membership: string) => {
|
||||
if (membership !== Membership.Join) {
|
||||
setUnreadAtom({
|
||||
type: 'DELETE',
|
||||
roomId: room.roomId,
|
||||
});
|
||||
}
|
||||
};
|
||||
mx.on(RoomEvent.MyMembership, handleMembershipChange);
|
||||
return () => {
|
||||
mx.removeListener(RoomEvent.MyMembership, handleMembershipChange);
|
||||
};
|
||||
}, [mx, setUnreadAtom]);
|
||||
|
||||
useStateEventCallback(
|
||||
mx,
|
||||
useCallback(
|
||||
(mEvent) => {
|
||||
if (mEvent.getType() === StateEvent.SpaceChild) {
|
||||
setUnreadAtom({
|
||||
type: 'RESET',
|
||||
unreadInfos: getUnreadInfos(mx),
|
||||
});
|
||||
}
|
||||
},
|
||||
[mx, setUnreadAtom]
|
||||
)
|
||||
);
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue