refectored navigation

src/app/organisms/navigation/Drawer.jsx

@@ -44,13 +44,13 @@ function AtoZ(aId, bId) {
   return 0;
 }
 
-function DrawerHeader({ tabId }) {
+function DrawerHeader({ activeTab }) {
   return (
     <Header>
       <TitleWrapper>
-        <Text variant="s1">{(tabId === 'channels' ? 'Home' : 'Direct messages')}</Text>
+        <Text variant="s1">{(activeTab === 'home' ? 'Home' : 'Direct messages')}</Text>
       </TitleWrapper>
-      {(tabId === 'dm')
+      {(activeTab === 'dm')
         ? <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" />
         : (
           <ContextMenu
@@ -79,7 +79,7 @@ function DrawerHeader({ tabId }) {
   );
 }
 DrawerHeader.propTypes = {
-  tabId: PropTypes.string.isRequired,
+  activeTab: PropTypes.string.isRequired,
 };
 
 function DrawerBradcrumb() {
@@ -150,7 +150,7 @@ function Home({ selectedRoomId }) {
 Home.defaultProps = { selectedRoomId: null };
 Home.propTypes = { selectedRoomId: PropTypes.string };
 
-function Channels({ tabId }) {
+function Channels({ activeTab }) {
   const [selectedRoomId, changeSelectedRoomId] = useState(null);
   const [, updateState] = useState();
 
@@ -188,7 +188,7 @@ function Channels({ tabId }) {
   return (
     <div className="channels-container">
       {
-        tabId === 'channels'
+        activeTab === 'home'
           ? <Home selectedRoomId={selectedRoomId} />
           : <Directs selectedRoomId={selectedRoomId} />
       }
@@ -196,18 +196,30 @@ function Channels({ tabId }) {
   );
 }
 Channels.propTypes = {
-  tabId: PropTypes.string.isRequired,
+  activeTab: PropTypes.string.isRequired,
 };
 
-function Drawer({ tabId }) {
+function Drawer() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  function onTabChanged(tabId) {
+    setActiveTab(tabId);
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.TAB_CHANGED, onTabChanged);
+    return () => {
+      navigation.removeListener(cons.events.navigation.TAB_CHANGED, onTabChanged);
+    };
+  }, []);
   return (
     <div className="drawer">
-      <DrawerHeader tabId={tabId} />
+      <DrawerHeader activeTab={activeTab} />
       <div className="drawer__content-wrapper">
         <DrawerBradcrumb />
         <div className="channels__wrapper">
           <ScrollView autoHide>
-            <Channels tabId={tabId} />
+            <Channels activeTab={activeTab} />
           </ScrollView>
         </div>
       </div>
@@ -215,8 +227,4 @@ function Drawer({ tabId }) {
   );
 }
 
-Drawer.propTypes = {
-  tabId: PropTypes.string.isRequired,
-};
-
 export default Drawer;

src/app/organisms/navigation/Navigation.jsx

@@ -1,34 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import './Navigation.scss';
 
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { handleTabChange } from '../../../client/action/navigation';
-
 import SideBar from './SideBar';
 import Drawer from './Drawer';
 
 function Navigation() {
-  const [activeTab, changeActiveTab] = useState(navigation.getActiveTab());
-
-  function changeTab(tabId) {
-    handleTabChange(tabId);
-  }
-
-  useEffect(() => {
-    const handleTab = () => {
-      changeActiveTab(navigation.getActiveTab());
-    };
-    navigation.on(cons.events.navigation.TAB_CHANGED, handleTab);
-
-    return () => {
-      navigation.removeListener(cons.events.navigation.TAB_CHANGED, handleTab);
-    };
-  }, []);
   return (
     <div className="navigation">
-      <SideBar tabId={activeTab} changeTab={changeTab} />
+      <SideBar />
-      <Drawer tabId={activeTab} />
+      <Drawer />
     </div>
   );
 }

src/app/organisms/navigation/SideBar.jsx

@@ -1,12 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import './SideBar.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
 import logout from '../../../client/action/logout';
-import { openInviteList, openPublicChannels, openSettings } from '../../../client/action/navigation';
+import {
+  changeTab, openInviteList, openPublicChannels, openSettings,
+} from '../../../client/action/navigation';
+import navigation from '../../../client/state/navigation';
 
 import ScrollView from '../../atoms/scroll/ScrollView';
 import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
@@ -52,24 +54,30 @@ function ProfileAvatarMenu() {
   );
 }
 
-function SideBar({ tabId, changeTab }) {
+function SideBar() {
   const totalInviteCount = () => initMatrix.roomList.inviteRooms.size
     + initMatrix.roomList.inviteSpaces.size
     + initMatrix.roomList.inviteDirects.size;
 
   const [totalInvites, updateTotalInvites] = useState(totalInviteCount());
+  const [activeTab, setActiveTab] = useState('home');
 
+  function onTabChanged(tabId) {
+    setActiveTab(tabId);
+  }
   function onInviteListChange() {
     updateTotalInvites(totalInviteCount());
   }
 
   useEffect(() => {
+    navigation.on(cons.events.navigation.TAB_CHANGED, onTabChanged);
     initMatrix.roomList.on(
       cons.events.roomList.INVITELIST_UPDATED,
       onInviteListChange,
     );
 
     return () => {
+      navigation.removeListener(cons.events.navigation.TAB_CHANGED, onTabChanged);
       initMatrix.roomList.removeListener(
         cons.events.roomList.INVITELIST_UPDATED,
         onInviteListChange,
@@ -83,8 +91,8 @@ function SideBar({ tabId, changeTab }) {
         <ScrollView invisible>
           <div className="scrollable-content">
             <div className="featured-container">
-              <SidebarAvatar active={tabId === 'channels'} onClick={() => changeTab('channels')} tooltip="Home" iconSrc={HomeIC} />
+              <SidebarAvatar active={activeTab === 'home'} onClick={() => changeTab('home')} tooltip="Home" iconSrc={HomeIC} />
-              <SidebarAvatar active={tabId === 'dm'} onClick={() => changeTab('dm')} tooltip="People" iconSrc={UserIC} />
+              <SidebarAvatar active={activeTab === 'dms'} onClick={() => changeTab('dms')} tooltip="People" iconSrc={UserIC} />
               <SidebarAvatar onClick={() => openPublicChannels()} tooltip="Public channels" iconSrc={HashSearchIC} />
             </div>
             <div className="sidebar-divider" />
@@ -110,9 +118,4 @@ function SideBar({ tabId, changeTab }) {
   );
 }
 
-SideBar.propTypes = {
-  tabId: PropTypes.string.isRequired,
-  changeTab: PropTypes.func.isRequired,
-};
-
 export default SideBar;

src/client/action/navigation.js

@@ -1,7 +1,7 @@
 import appDispatcher from '../dispatcher';
 import cons from '../state/cons';
 
-function handleTabChange(tabId) {
+function changeTab(tabId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.CHANGE_TAB,
     tabId,
@@ -71,7 +71,7 @@ function openReadReceipts(roomId, eventId) {
 }
 
 export {
-  handleTabChange,
+  changeTab,
   selectRoom,
   togglePeopleDrawer,
   openInviteList,