Show categorized subspaces

Signed-off-by: Ajay Bura <ajbura@gmail.com>

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

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

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

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) => (
-    <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)}
         />
       ))}
     </>

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

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