Added option to fav spaces (#52)

src/app/organisms/navigation/DrawerBreadcrumb.jsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
 import './DrawerBreadcrumb.scss';
 
 import initMatrix from '../../../client/initMatrix';
@@ -13,50 +14,47 @@ import ScrollView from '../../atoms/scroll/ScrollView';
 
 import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
 
-function DrawerBreadcrumb() {
-  const [, forceUpdate] = useState({});
+function DrawerBreadcrumb({ spaceId }) {
   const scrollRef = useRef(null);
   const mx = initMatrix.matrixClient;
   const spacePath = navigation.selectedSpacePath;
 
-  function onSpaceSelected() {
-    forceUpdate({});
+  useEffect(() => {
     requestAnimationFrame(() => {
       if (scrollRef?.current === null) return;
       scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
     });
-  }
+  }, [spaceId]);
 
-  useEffect(() => {
-    navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
-    return () => {
-      navigation.removeListener(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
-    };
-  }, []);
-
-  if (spacePath.length === 0) return null;
+  if (spacePath.length === 1) return null;
 
   return (
     <div className="breadcrumb__wrapper">
       <ScrollView ref={scrollRef} horizontal vertical={false} invisible>
         <div className="breadcrumb">
-          <Button onClick={() => selectSpace(null)}>
-            <Text variant="b2">Home</Text>
-          </Button>
           {
-            spacePath.map((spaceId, index) => (
-              <React.Fragment
-                key={spaceId}
-              >
-                <RawIcon size="extra-small" src={ChevronRightIC} />
-                <Button
-                  className={index === spacePath.length - 1 ? 'breadcrumb__btn--selected' : ''}
-                  onClick={() => selectSpace(spaceId)}
+            spacePath.map((id, index) => {
+              if (index === 0) {
+                return (
+                  <Button key={id} onClick={() => selectSpace(id)}>
+                    <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : mx.getRoom(id).name}</Text>
+                  </Button>
+                );
+              }
+              return (
+                <React.Fragment
+                  key={id}
                 >
-                  <Text variant="b2">{ mx.getRoom(spaceId).name }</Text>
-                </Button>
-              </React.Fragment>
-            ))
+                  <RawIcon size="extra-small" src={ChevronRightIC} />
+                  <Button
+                    className={index === spacePath.length - 1 ? 'breadcrumb__btn--selected' : ''}
+                    onClick={() => selectSpace(id)}
+                  >
+                    <Text variant="b2">{ mx.getRoom(id).name }</Text>
+                  </Button>
+                </React.Fragment>
+              );
+            })
           }
           <div style={{ width: 'var(--sp-extra-tight)', height: '100%' }} />
         </div>
@@ -65,4 +63,12 @@ function DrawerBreadcrumb() {
   );
 }
 
+DrawerBreadcrumb.defaultProps = {
+  spaceId: null,
+};
+
+DrawerBreadcrumb.propTypes = {
+  spaceId: PropTypes.string,
+};
+
 export default DrawerBreadcrumb;