Make dialog to add existing rooms to space

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

src/app/organisms/navigation/DrawerHeader.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import './DrawerHeader.scss';
 
@@ -7,9 +7,9 @@ import { twemojify } from '../../../util/twemojify';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import {
-  openPublicRooms, openCreateRoom, openInviteUser, openReusableContextMenu,
+  openPublicRooms, openCreateRoom, openSpaceManage,
+  openSpaceAddExisting, openInviteUser, openReusableContextMenu,
 } from '../../../client/action/navigation';
-import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
 import { getEventCords } from '../../../util/common';
 
 import { blurOnBubbling } from '../../atoms/button/script';
@@ -18,24 +18,83 @@ import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
 import IconButton from '../../atoms/button/IconButton';
-import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
 import SpaceOptions from '../../molecules/space-options/SpaceOptions';
 
 import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
 import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
 import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
+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';
-import PinIC from '../../../../public/res/ic/outlined/pin.svg';
-import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
+
+function HomeSpaceOptions({ spaceId, afterOptionSelect }) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(spaceId);
+  const canManage = room
+    ? room.currentState.maySendStateEvent('m.space.child', mx.getUserId())
+    : true;
+
+  return (
+    <>
+      <MenuHeader>Add rooms or spaces</MenuHeader>
+      <MenuItem
+        iconSrc={HashPlusIC}
+        onClick={() => { afterOptionSelect(); openCreateRoom(); }}
+        disabled={!canManage}
+      >
+        Create new room
+      </MenuItem>
+      <MenuItem
+        iconSrc={SpacePlusIC}
+        onClick={() => { afterOptionSelect(); }}
+        disabled={!canManage}
+      >
+        Create new space
+      </MenuItem>
+      { !spaceId && (
+        <MenuItem
+          iconSrc={HashGlobeIC}
+          onClick={() => { afterOptionSelect(); openPublicRooms(); }}
+        >
+          Join public room
+        </MenuItem>
+      )}
+      { spaceId && (
+        <MenuItem
+          iconSrc={PlusIC}
+          onClick={() => { afterOptionSelect(); openSpaceAddExisting(spaceId); }}
+          disabled={!canManage}
+        >
+          Add existing
+        </MenuItem>
+      )}
+      { spaceId && (
+        <MenuItem
+          onClick={() => { afterOptionSelect(); openSpaceManage(spaceId); }}
+          iconSrc={HashSearchIC}
+        >
+          Manage rooms
+        </MenuItem>
+      )}
+    </>
+  );
+}
+HomeSpaceOptions.defaultProps = {
+  spaceId: null,
+};
+HomeSpaceOptions.propTypes = {
+  spaceId: PropTypes.string,
+  afterOptionSelect: PropTypes.func.isRequired,
+};
 
 function DrawerHeader({ selectedTab, spaceId }) {
-  const [, forceUpdate] = useState({});
   const mx = initMatrix.matrixClient;
-  const { spaceShortcut } = initMatrix.roomList;
   const tabName = selectedTab !== cons.tabs.DIRECTS ? 'Home' : 'Direct messages';
 
+  const isDMTab = selectedTab === cons.tabs.DIRECTS;
   const room = mx.getRoom(spaceId);
-  const spaceName = selectedTab === cons.tabs.DIRECTS ? null : (room?.name || null);
+  const spaceName = isDMTab ? null : (room?.name || null);
 
   const openSpaceOptions = (e) => {
     e.preventDefault();
@@ -46,6 +105,15 @@ function DrawerHeader({ selectedTab, spaceId }) {
     );
   };
 
+  const openHomeSpaceOptions = (e) => {
+    e.preventDefault();
+    openReusableContextMenu(
+      'right',
+      getEventCords(e, '.ic-btn'),
+      (closeMenu) => <HomeSpaceOptions spaceId={spaceId} afterOptionSelect={closeMenu} />,
+    );
+  };
+
   return (
     <Header>
       {spaceName ? (
@@ -65,41 +133,9 @@ function DrawerHeader({ selectedTab, spaceId }) {
           <Text variant="s1" weight="medium" primary>{tabName}</Text>
         </TitleWrapper>
       )}
-      {spaceName && (
-        <IconButton
-          size="extra-small"
-          tooltip={spaceShortcut.has(spaceId) ? 'Unpin' : 'Pin to sidebar'}
-          src={spaceShortcut.has(spaceId) ? PinFilledIC : PinIC}
-          onClick={() => {
-            if (spaceShortcut.has(spaceId)) deleteSpaceShortcut(spaceId);
-            else createSpaceShortcut(spaceId);
-            forceUpdate({});
-          }}
-        />
-      )}
-      { selectedTab === cons.tabs.DIRECTS && <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" /> }
-      { selectedTab !== cons.tabs.DIRECTS && !spaceName && (
-        <ContextMenu
-          content={(hideMenu) => (
-            <>
-              <MenuHeader>Add room</MenuHeader>
-              <MenuItem
-                iconSrc={HashPlusIC}
-                onClick={() => { hideMenu(); openCreateRoom(); }}
-              >
-                Create new room
-              </MenuItem>
-              <MenuItem
-                iconSrc={HashGlobeIC}
-                onClick={() => { hideMenu(); openPublicRooms(); }}
-              >
-                Join public room
-              </MenuItem>
-            </>
-          )}
-          render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add room" src={PlusIC} size="normal" />)}
-        />
-      )}
+
+      { isDMTab && <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="small" /> }
+      { !isDMTab && <IconButton onClick={openHomeSpaceOptions} tooltip="Add rooms/spaces" src={PlusIC} size="small" /> }
     </Header>
   );
 }

src/app/organisms/pw/Dialogs.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import ReadReceipts from '../read-receipts/ReadReceipts';
 import ProfileViewer from '../profile-viewer/ProfileViewer';
+import SpaceAddExisting from '../../molecules/space-add-existing/SpaceAddExisting';
 import Search from '../search/Search';
 
 function Dialogs() {
@@ -9,6 +10,7 @@ function Dialogs() {
     <>
       <ReadReceipts />
       <ProfileViewer />
+      <SpaceAddExisting />
       <Search />
     </>
   );