Added space nesting (#52)

src/app/organisms/navigation/DrawerHeader.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import initMatrix from '../../../client/initMatrix';
 import {
-  openPublicRooms, openCreateRoom, openInviteUser,
+  selectSpace, openPublicRooms, openCreateRoom, openInviteUser,
 } from '../../../client/action/navigation';
+import navigation from '../../../client/state/navigation';
 
 import Text from '../../atoms/text/Text';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
@@ -13,16 +15,33 @@ import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/Cont
 import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
 import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
 import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
+import ChevronLeftIC from '../../../../public/res/ic/outlined/chevron-left.svg';
+
+function DrawerHeader({ selectedTab, spaceId }) {
+  const mx = initMatrix.matrixClient;
+  const tabName = selectedTab === 'home' ? 'Home' : 'Direct messages';
+
+  const room = mx.getRoom(spaceId);
+  const spaceName = selectedTab === 'dm' ? null : (room?.name || null);
+
+  function handleBackClick() {
+    const spacePath = navigation.selectedSpacePath;
+    if (spacePath.length === 1) {
+      selectSpace(null);
+      return;
+    }
+    selectSpace(spacePath[spacePath.length - 2]);
+  }
 
-function DrawerHeader({ activeTab }) {
   return (
     <Header>
       <TitleWrapper>
-        <Text variant="s1">{(activeTab === 'home' ? 'Home' : 'Direct messages')}</Text>
+        <Text variant="s1">{spaceName || tabName}</Text>
       </TitleWrapper>
-      {(activeTab === 'dm')
-        ? <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" />
-        : (
+      { spaceName && <IconButton onClick={handleBackClick} tooltip="Back" src={ChevronLeftIC} size="normal" /> }
+      { selectedTab === 'dm' && <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" /> }
+      { selectSpace !== 'dm' && !spaceName && (
+        <>
           <ContextMenu
             content={(hideMenu) => (
               <>
@@ -43,13 +62,19 @@ function DrawerHeader({ activeTab }) {
             )}
             render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add room" src={PlusIC} size="normal" />)}
           />
-        )}
+        </>
+      )}
       {/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
     </Header>
   );
 }
+
+DrawerHeader.defaultProps = {
+  spaceId: null,
+};
 DrawerHeader.propTypes = {
-  activeTab: PropTypes.string.isRequired,
+  selectedTab: PropTypes.string.isRequired,
+  spaceId: PropTypes.string,
 };
 
 export default DrawerHeader;