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 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) => (
<Selector
key={id}
roomId={id}
drawerPostie={drawerPostie}
onClick={() => selectRoom(id)}
/>
));
return <RoomsCategory name="People" hideHeader roomIds={directIds} drawerPostie={drawerPostie} />;
}
export default Directs;

View file

@ -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;
}
}
}

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 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

View file

@ -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) => (
<Text className="cat-header" variant="b3" weight="bold">{name}</Text>
);
return (
<>
{ spaceIds.length !== 0 && renderCatHeader('Spaces') }
{ spaceIds.map((id) => (
<Selector
key={id}
roomId={id}
isDM={false}
drawerPostie={drawerPostie}
onClick={() => selectSpace(id)}
/>
))}
{ !isCategorized && spaceIds.length !== 0 && (
<RoomsCategory name="Spaces" roomIds={spaceIds} drawerPostie={drawerPostie} />
)}
{ roomIds.length !== 0 && renderCatHeader('Rooms') }
{ roomIds.map((id) => (
<Selector
key={id}
roomId={id}
isDM={false}
drawerPostie={drawerPostie}
onClick={() => selectRoom(id)}
/>
)) }
{ roomIds.length !== 0 && (
<RoomsCategory name="Rooms" roomIds={roomIds} drawerPostie={drawerPostie} />
)}
{}
{ directIds.length !== 0 && (
<RoomsCategory name="People" roomIds={directIds} drawerPostie={drawerPostie} />
)}
{ directIds.length !== 0 && renderCatHeader('People') }
{ directIds.map((id) => (
<Selector
key={id}
roomId={id}
{ isCategorized && [...categories].map(([catId, childIds]) => (
<RoomsCategory
key={catId}
spaceId={catId}
name={mx.getRoom(catId).name}
roomIds={[...childIds].sort(AtoZ).sort(RoomToDM)}
drawerPostie={drawerPostie}
onClick={() => selectRoom(id)}
/>
))}
</>

View file

@ -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();
};
}, []);

View file

@ -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 };