From a05b96e9a0848baed4601fcb64e120a531fa5b40 Mon Sep 17 00:00:00 2001 From: Ajay Bura Date: Thu, 3 Mar 2022 18:36:53 +0530 Subject: [PATCH] Show categorized subspaces Signed-off-by: Ajay Bura --- src/app/organisms/navigation/Directs.jsx | 12 +-- src/app/organisms/navigation/Drawer.scss | 17 +--- src/app/organisms/navigation/DrawerHeader.jsx | 2 +- src/app/organisms/navigation/Home.jsx | 83 +++++++++---------- src/app/organisms/navigation/Selector.jsx | 10 +-- src/app/organisms/navigation/common.js | 11 ++- 6 files changed, 59 insertions(+), 76 deletions(-) diff --git a/src/app/organisms/navigation/Directs.jsx b/src/app/organisms/navigation/Directs.jsx index 5f2da8ab..49244bc3 100644 --- a/src/app/organisms/navigation/Directs.jsx +++ b/src/app/organisms/navigation/Directs.jsx @@ -3,10 +3,9 @@ import React, { useEffect } from 'react'; import initMatrix from '../../../client/initMatrix'; import cons from '../../../client/state/cons'; import navigation from '../../../client/state/navigation'; -import { selectRoom } from '../../../client/action/navigation'; import Postie from '../../../util/Postie'; -import Selector from './Selector'; +import RoomsCategory from './RoomsCategory'; import { AtoZ } from './common'; @@ -40,14 +39,7 @@ function Directs() { }; }, []); - return directIds.map((id) => ( - selectRoom(id)} - /> - )); + return ; } export default Directs; diff --git a/src/app/organisms/navigation/Drawer.scss b/src/app/organisms/navigation/Drawer.scss index fb42e1d3..4e54c5fa 100644 --- a/src/app/organisms/navigation/Drawer.scss +++ b/src/app/organisms/navigation/Drawer.scss @@ -53,19 +53,4 @@ var(--bg-surface-low), var(--bg-surface-low-transparent)); } - - & > .room-selector { - width: calc(100% - var(--sp-extra-tight)); - @include dir.side(margin, auto, 0); - } - - & > .room-selector:first-child { - margin-top: var(--sp-extra-tight); - } - - & .cat-header { - margin-top: var(--sp-extra-tight); - padding: var(--sp-extra-tight) var(--sp-normal); - text-transform: uppercase; - } -} \ No newline at end of file +} diff --git a/src/app/organisms/navigation/DrawerHeader.jsx b/src/app/organisms/navigation/DrawerHeader.jsx index ab8d68a0..3613c643 100644 --- a/src/app/organisms/navigation/DrawerHeader.jsx +++ b/src/app/organisms/navigation/DrawerHeader.jsx @@ -28,7 +28,7 @@ import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg'; import SpacePlusIC from '../../../../public/res/ic/outlined/space-plus.svg'; import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg'; -function HomeSpaceOptions({ spaceId, afterOptionSelect }) { +export function HomeSpaceOptions({ spaceId, afterOptionSelect }) { const mx = initMatrix.matrixClient; const room = mx.getRoom(spaceId); const canManage = room diff --git a/src/app/organisms/navigation/Home.jsx b/src/app/organisms/navigation/Home.jsx index 8f3a215c..c239582b 100644 --- a/src/app/organisms/navigation/Home.jsx +++ b/src/app/organisms/navigation/Home.jsx @@ -4,31 +4,44 @@ import PropTypes from 'prop-types'; import initMatrix from '../../../client/initMatrix'; import cons from '../../../client/state/cons'; import navigation from '../../../client/state/navigation'; -import { selectSpace, selectRoom } from '../../../client/action/navigation'; import Postie from '../../../util/Postie'; -import Text from '../../atoms/text/Text'; -import Selector from './Selector'; +import RoomsCategory from './RoomsCategory'; -import { AtoZ } from './common'; +import { useCategorizedSpaces } from '../../hooks/useCategorizedSpaces'; +import { AtoZ, RoomToDM } from './common'; const drawerPostie = new Postie(); function Home({ spaceId }) { - const { roomList, notifications } = initMatrix; + const mx = initMatrix.matrixClient; + const { roomList, notifications, accountData } = initMatrix; + const { + spaces, rooms, directs, roomIdToParents, + } = roomList; + const categorizedSpaces = useCategorizedSpaces(); + const isCategorized = accountData.categorizedSpaces.has(spaceId); + + let categories = null; let spaceIds = []; let roomIds = []; let directIds = []; const spaceChildIds = roomList.getSpaceChildren(spaceId); if (spaceChildIds) { - spaceIds = spaceChildIds.filter((roomId) => roomList.spaces.has(roomId)).sort(AtoZ); - roomIds = spaceChildIds.filter((roomId) => roomList.rooms.has(roomId)).sort(AtoZ); - directIds = spaceChildIds.filter((roomId) => roomList.directs.has(roomId)).sort(AtoZ); + spaceIds = spaceChildIds.filter((roomId) => spaces.has(roomId)); + roomIds = spaceChildIds.filter((roomId) => rooms.has(roomId)); + directIds = spaceChildIds.filter((roomId) => directs.has(roomId)); } else { - spaceIds = [...roomList.spaces] - .filter((roomId) => !roomList.roomIdToParents.has(roomId)).sort(AtoZ); - roomIds = [...roomList.rooms] - .filter((roomId) => !roomList.roomIdToParents.has(roomId)).sort(AtoZ); + spaceIds = [...spaces].filter((roomId) => !roomIdToParents.has(roomId)); + roomIds = [...rooms].filter((roomId) => !roomIdToParents.has(roomId)); + } + + spaceIds.sort(AtoZ); + roomIds.sort(AtoZ); + directIds.sort(AtoZ); + + if (isCategorized) { + categories = roomList.getCategorizedSpaces(spaceIds); } useEffect(() => { @@ -56,43 +69,27 @@ function Home({ spaceId }) { }; }, []); - const renderCatHeader = (name) => ( - {name} - ); - return ( <> - { spaceIds.length !== 0 && renderCatHeader('Spaces') } - { spaceIds.map((id) => ( - selectSpace(id)} - /> - ))} + { !isCategorized && spaceIds.length !== 0 && ( + + )} - { roomIds.length !== 0 && renderCatHeader('Rooms') } - { roomIds.map((id) => ( - selectRoom(id)} - /> - )) } + { roomIds.length !== 0 && ( + + )} - {} + { directIds.length !== 0 && ( + + )} - { directIds.length !== 0 && renderCatHeader('People') } - { directIds.map((id) => ( - ( + selectRoom(id)} /> ))} diff --git a/src/app/organisms/navigation/Selector.jsx b/src/app/organisms/navigation/Selector.jsx index 45d56fe4..56e57c57 100644 --- a/src/app/organisms/navigation/Selector.jsx +++ b/src/app/organisms/navigation/Selector.jsx @@ -1,5 +1,5 @@ /* eslint-disable react/prop-types */ -import React, { useState, useEffect } from 'react'; +import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import initMatrix from '../../../client/initMatrix'; @@ -29,11 +29,11 @@ function Selector({ const [, forceUpdate] = useForceUpdate(); useEffect(() => { - drawerPostie.subscribe('selector-change', roomId, forceUpdate); - drawerPostie.subscribe('unread-change', roomId, forceUpdate); + const unSub1 = drawerPostie.subscribe('selector-change', roomId, forceUpdate); + const unSub2 = drawerPostie.subscribe('unread-change', roomId, forceUpdate); return () => { - drawerPostie.unsubscribe('selector-change', roomId); - drawerPostie.unsubscribe('unread-change', roomId); + unSub1(); + unSub2(); }; }, []); diff --git a/src/app/organisms/navigation/common.js b/src/app/organisms/navigation/common.js index 27cc676c..3c37e548 100644 --- a/src/app/organisms/navigation/common.js +++ b/src/app/organisms/navigation/common.js @@ -18,4 +18,13 @@ function AtoZ(aId, bId) { return 0; } -export { AtoZ }; +const RoomToDM = (aId, bId) => { + const { directs } = initMatrix.roomList; + const aIsDm = directs.has(aId); + const bIsDm = directs.has(bId); + if (aIsDm && !bIsDm) return 1; + if (!aIsDm && bIsDm) return -1; + return 0; +}; + +export { AtoZ, RoomToDM };