display tag content in sidebar content

packages/app/src/components/Sidebar.jsx

@@ -162,6 +162,7 @@ class Sidebar extends React.Component {
           <div id="grw-sidebar-content-container">
             <SidebarContents
               isSharedUser={this.props.appContainer.isSharedUser}
+              appContainer={this.props.appContainer}
             />
           </div>
         </div>

packages/app/src/components/Sidebar/SidebarContents.jsx

@@ -4,35 +4,35 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
+import AppContainer from '~/client/services/AppContainer';
 import NavigationContainer from '~/client/services/NavigationContainer';
 
 import RecentChanges from './RecentChanges';
 import CustomSidebar from './CustomSidebar';
+import Tag from './Tag';
 
 const SidebarContents = (props) => {
-  const { navigationContainer, isSharedUser } = props;
+  const { appContainer, navigationContainer, isSharedUser } = props;
 
   if (isSharedUser) {
     return null;
   }
 
   let Contents;
-  switch (navigationContainer.state.sidebarContentsId) {
-    case 'recent':
-      Contents = RecentChanges;
-      break;
-    default:
-      Contents = CustomSidebar;
+  if (navigationContainer.state.sidebarContentsId === 'resent') {
+    return <RecentChanges />;
+  }
+  if (navigationContainer.state.sidebarContentsId === 'tag') {
+    return <Tag appContainer={appContainer} />;
   }
 
-  return (
-    <Contents />
-  );
+  return <CustomSidebar />;
 
 };
 
 SidebarContents.propTypes = {
   navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   isSharedUser: PropTypes.bool,
 };

packages/app/src/components/Sidebar/SidebarNav.jsx

@@ -19,6 +19,7 @@ class SidebarNav extends React.Component {
 
   itemSelectedHandler = (contentsId) => {
     const { navigationContainer, onItemSelected } = this.props;
+    console.log(navigationContainer, ' in itemSelectedHandler:', onItemSelected);
     if (onItemSelected != null) {
       onItemSelected(contentsId);
     }
@@ -66,7 +67,7 @@ class SidebarNav extends React.Component {
         <div className="grw-sidebar-nav-primary-container">
           {!isSharedUser && <PrimaryItem id="custom" label="Custom Sidebar" iconName="code" />}
           {!isSharedUser && <PrimaryItem id="recent" label="Recent Changes" iconName="update" />}
-          {/* <PrimaryItem id="tag" label="Tags" iconName="icon-tag" /> */}
+          {!isSharedUser && <PrimaryItem id="tag" label="Tags" iconName="tag" />}
           {/* <PrimaryItem id="favorite" label="Favorite" iconName="icon-star" /> */}
         </div>
         <div className="grw-sidebar-nav-secondary-container">

packages/app/src/components/Sidebar/Tag.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import TagsList from '../TagsList';
+import AppContainer from '../../client/services/AppContainer';
+
+type Props = {
+  appContainer: AppContainer,
+};
+
+
+const Tag: FC<Props> = (props:Props) => {
+  const { t } = useTranslation('');
+  const { appContainer } = props;
+  return (
+    <>
+      <div className="grw-sidebar-content-header p-3 d-flex">
+        <h3 className="mb-0">{t('Tags')}</h3>
+        <button type="button" className="btn btn-sm ml-auto grw-btn-reload-rc" onClick={() => { window.location.href = '/tags' }}>
+          <i className="icon icon-reload"></i>
+        </button>
+      </div>
+      <div className="d-flex justify-content-center">
+        <button className="btn btn-primary my-4" type="button" onClick={() => { window.location.href = '/tags' }}>check all tags</button>
+      </div>
+      <TagsList crowi={appContainer} />
+    </>
+  );
+
+};
+
+export default Tag;