Show categorized subspaces

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-03-03 18:36:53 +05:30
parent 699f67aa75
commit a05b96e9a0
6 changed files with 59 additions and 76 deletions

View file

@ -3,10 +3,9 @@ import React, { useEffect } from 'react';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import { selectRoom } from '../../../client/action/navigation';
import Postie from '../../../util/Postie'; import Postie from '../../../util/Postie';
import Selector from './Selector'; import RoomsCategory from './RoomsCategory';
import { AtoZ } from './common'; import { AtoZ } from './common';
@ -40,14 +39,7 @@ function Directs() {
}; };
}, []); }, []);
return directIds.map((id) => ( return <RoomsCategory name="People" hideHeader roomIds={directIds} drawerPostie={drawerPostie} />;
<Selector
key={id}
roomId={id}
drawerPostie={drawerPostie}
onClick={() => selectRoom(id)}
/>
));
} }
export default Directs; export default Directs;

View file

@ -53,19 +53,4 @@
var(--bg-surface-low), var(--bg-surface-low),
var(--bg-surface-low-transparent)); 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;
}
}

View file

@ -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 SpacePlusIC from '../../../../public/res/ic/outlined/space-plus.svg';
import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.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 mx = initMatrix.matrixClient;
const room = mx.getRoom(spaceId); const room = mx.getRoom(spaceId);
const canManage = room const canManage = room

View file

@ -4,31 +4,44 @@ import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import { selectSpace, selectRoom } from '../../../client/action/navigation';
import Postie from '../../../util/Postie'; import Postie from '../../../util/Postie';
import Text from '../../atoms/text/Text'; import RoomsCategory from './RoomsCategory';
import Selector from './Selector';
import { AtoZ } from './common'; import { useCategorizedSpaces } from '../../hooks/useCategorizedSpaces';
import { AtoZ, RoomToDM } from './common';
const drawerPostie = new Postie(); const drawerPostie = new Postie();
function Home({ spaceId }) { 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 spaceIds = [];
let roomIds = []; let roomIds = [];
let directIds = []; let directIds = [];
const spaceChildIds = roomList.getSpaceChildren(spaceId); const spaceChildIds = roomList.getSpaceChildren(spaceId);
if (spaceChildIds) { if (spaceChildIds) {
spaceIds = spaceChildIds.filter((roomId) => roomList.spaces.has(roomId)).sort(AtoZ); spaceIds = spaceChildIds.filter((roomId) => spaces.has(roomId));
roomIds = spaceChildIds.filter((roomId) => roomList.rooms.has(roomId)).sort(AtoZ); roomIds = spaceChildIds.filter((roomId) => rooms.has(roomId));
directIds = spaceChildIds.filter((roomId) => roomList.directs.has(roomId)).sort(AtoZ); directIds = spaceChildIds.filter((roomId) => directs.has(roomId));
} else { } else {
spaceIds = [...roomList.spaces] spaceIds = [...spaces].filter((roomId) => !roomIdToParents.has(roomId));
.filter((roomId) => !roomList.roomIdToParents.has(roomId)).sort(AtoZ); roomIds = [...rooms].filter((roomId) => !roomIdToParents.has(roomId));
roomIds = [...roomList.rooms] }
.filter((roomId) => !roomList.roomIdToParents.has(roomId)).sort(AtoZ);
spaceIds.sort(AtoZ);
roomIds.sort(AtoZ);
directIds.sort(AtoZ);
if (isCategorized) {
categories = roomList.getCategorizedSpaces(spaceIds);
} }
useEffect(() => { useEffect(() => {
@ -56,43 +69,27 @@ function Home({ spaceId }) {
}; };
}, []); }, []);
const renderCatHeader = (name) => (
<Text className="cat-header" variant="b3" weight="bold">{name}</Text>
);
return ( return (
<> <>
{ spaceIds.length !== 0 && renderCatHeader('Spaces') } { !isCategorized && spaceIds.length !== 0 && (
{ spaceIds.map((id) => ( <RoomsCategory name="Spaces" roomIds={spaceIds} drawerPostie={drawerPostie} />
<Selector )}
key={id}
roomId={id}
isDM={false}
drawerPostie={drawerPostie}
onClick={() => selectSpace(id)}
/>
))}
{ roomIds.length !== 0 && renderCatHeader('Rooms') } { roomIds.length !== 0 && (
{ roomIds.map((id) => ( <RoomsCategory name="Rooms" roomIds={roomIds} drawerPostie={drawerPostie} />
<Selector )}
key={id}
roomId={id}
isDM={false}
drawerPostie={drawerPostie}
onClick={() => selectRoom(id)}
/>
)) }
{} { directIds.length !== 0 && (
<RoomsCategory name="People" roomIds={directIds} drawerPostie={drawerPostie} />
)}
{ directIds.length !== 0 && renderCatHeader('People') } { isCategorized && [...categories].map(([catId, childIds]) => (
{ directIds.map((id) => ( <RoomsCategory
<Selector key={catId}
key={id} spaceId={catId}
roomId={id} name={mx.getRoom(catId).name}
roomIds={[...childIds].sort(AtoZ).sort(RoomToDM)}
drawerPostie={drawerPostie} drawerPostie={drawerPostie}
onClick={() => selectRoom(id)}
/> />
))} ))}
</> </>

View file

@ -1,5 +1,5 @@
/* eslint-disable react/prop-types */ /* eslint-disable react/prop-types */
import React, { useState, useEffect } from 'react'; import React, { useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
@ -29,11 +29,11 @@ function Selector({
const [, forceUpdate] = useForceUpdate(); const [, forceUpdate] = useForceUpdate();
useEffect(() => { useEffect(() => {
drawerPostie.subscribe('selector-change', roomId, forceUpdate); const unSub1 = drawerPostie.subscribe('selector-change', roomId, forceUpdate);
drawerPostie.subscribe('unread-change', roomId, forceUpdate); const unSub2 = drawerPostie.subscribe('unread-change', roomId, forceUpdate);
return () => { return () => {
drawerPostie.unsubscribe('selector-change', roomId); unSub1();
drawerPostie.unsubscribe('unread-change', roomId); unSub2();
}; };
}, []); }, []);

View file

@ -18,4 +18,13 @@ function AtoZ(aId, bId) {
return 0; 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 };