fix siblings by redirecting again to 3rd level

eea · Apr 8, 2020 · e8263de · e8263de
1 parent 688a2c5
commit e8263de
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 49 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -4,6 +4,7 @@ import {
 
 
 export function setSectionTabs(payload) {
+    console.log('in action', payload)
     return {
       type: SET_SECTION_TABS,
       payload: payload,

diff --git a/src/components/theme/View/TabsChildView.jsx b/src/components/theme/View/TabsChildView.jsx
@@ -86,13 +86,17 @@ class DefaultView extends Component {
     const blocksFieldname = getBlocksFieldname(content);
     const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
     const tabs = this.computeFolderTabs(content['@components'].siblings);
-    console.log('section tabs', this.props.sectionTabs)
+    const sectionTabs = this.props.sectionTabs?.items
+    console.log('sectionTabs in child', sectionTabs)
+
     return (
       hasBlocksData(content) && (
-        <div id="page-document" className="ui wrapper">
-          {tabs && tabs.length ? (
-            <nav className="tabs">
-              {tabs.map(tab => (
+        <div className="ui wrapper">
+
+
+          {sectionTabs && sectionTabs.length ? (
+            <nav className="tabs section-tabs">
+              {sectionTabs.map(tab => (
                 <Link
                   key={`localtab-${tab.url}`}
                   className={`tabs__item${(tab.url ===
@@ -107,32 +111,58 @@ class DefaultView extends Component {
               ))}
             </nav>
           ) : (
-            ''
-          )}
-          <Helmet title={content.title} />
-          {map(content[blocksLayoutFieldname].items, block => {
-            const Block =
-              blocks.blocksConfig[
-                (content[blocksFieldname]?.[block]?.['@type'])
-              ]?.['view'] || null;
-            return Block !== null ? (
-              <Block
-                key={`block-${block}`}
-                blockID={block}
-                properties={content}
-                data={content[blocksFieldname][block]}
-              />
-            ) : (
-              <div key={`blocktype-${block}`}>
-                {intl.formatMessage(messages.unknownBlock, {
-                  block: content[blocksFieldname]?.[block]?.['@type'],
-                })}
-              </div>
-            );
-          })}
+              ''
+            )}
+          <div className="widthSidebar">
+            <div className="page-document-sidebar">
+              {tabs && tabs.length ? (
+                <nav className="tabs">
+                  {tabs.map(tab => (
+                    <Link
+                      key={`localtab-${tab.url}`}
+                      className={`tabs__item${(tab.url ===
+                        this.props.location.pathname &&
+                        ' tabs__item_active') ||
+                        ''}`}
+                      to={tab.url}
+                      title={tab.title}
+                    >
+                      {tab.title}
+                    </Link>
+                  ))}
+                </nav>
+              ) : (
+                  ''
+                )}
+            </div>
+            <div id="page-document" className="hasSidebar">
+              <Helmet title={content.title} />
+              {map(content[blocksLayoutFieldname].items, block => {
+                const Block =
+                  blocks.blocksConfig[
+                  (content[blocksFieldname]?.[block]?.['@type'])
+                  ]?.['view'] || null;
+                return Block !== null ? (
+                  <Block
+                    key={`block-${block}`}
+                    blockID={block}
+                    properties={content}
+                    data={content[blocksFieldname][block]}
+                  />
+                ) : (
+                    <div key={`blocktype-${block}`}>
+                      {intl.formatMessage(messages.unknownBlock, {
+                        block: content[blocksFieldname]?.[block]?.['@type'],
+                      })}
+                    </div>
+                  );
+              })}
+            </div>
+          </div>
         </div>
+
       )
-    );
+    )
   }
 }
 
@@ -143,5 +173,5 @@ export default compose(
     content:
       state.prefetch?.[state.router.location.pathname] || state.content.data,
     sectionTabs: state.section_tabs
-  }),mapDispatchToProps),
+  })),
 )(DefaultView);
diff --git a/src/components/theme/View/TabsView.jsx b/src/components/theme/View/TabsView.jsx
@@ -21,6 +21,8 @@ import {
 } from '@plone/volto/helpers';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { setSectionTabs } from '~/actions';
+import { Redirect } from 'react-router-dom';
+
 const mapDispatchToProps = {
   setSectionTabs,
 };
@@ -80,7 +82,10 @@ class DefaultView extends Component {
         title: i.name,
       };
     });
-    this.props.setSectionTabs(tabsItems);
+    console.log('--------------', this.props.pathname)
+    if(this.props.pathname && this.props.pathname.split('/').length === 3) {
+      this.props.setSectionTabs(tabsItems);
+    }
     return tabsItems;
   };
 
@@ -90,26 +95,19 @@ class DefaultView extends Component {
     const blocksFieldname = getBlocksFieldname(content);
     const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
     const tabs = this.computeFolderTabs(content['@components'].siblings);
-
+    const mainItem = content.items[0];
+    const mainUrl = mainItem && mainItem['@id'] && flattenToAppURL(mainItem['@id']);
+    console.log('mainitem,mainurl', mainItem, mainUrl);
+    let redirect = false
+    if (__CLIENT__ && mainUrl && window) {
+      redirect = true
+    }
     return (
       hasBlocksData(content) && (
         <div id="page-document" className="ui wrapper">
-          {tabs && tabs.length ? (
-            <nav className="tabs">
-              {tabs.map(tab => (
-                <Link
-                  key={`localtab-${tab.url}`}
-                  className={`tabs__item${(tab.url ===
-                    this.props.location.pathname &&
-                    ' tabs__item_active') ||
-                    ''}`}
-                  to={tab.url}
-                  title={tab.title}
-                >
-                  {tab.title}
-                </Link>
-              ))}
-            </nav>
+          {/* <button onClick={() => this.props.setSectionTabs(tabs)}>asd</button> */}
+          {tabs && tabs.length && redirect ? (
+             <Redirect to={{ pathname: mainUrl }} />
           ) : (
             ''
           )}

diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -1,6 +1,8 @@
 import defaultReducers from '@plone/volto/reducers';
+import section_tabs from './section_tabs';
 
 const reducers = {
+    section_tabs,
     ...defaultReducers
 }
 

diff --git a/src/reducers/section_tabs.js b/src/reducers/section_tabs.js
@@ -1,4 +1,6 @@
-import { SET_SECTION_TABS } from '~/constants/ActionTypes';
+import {
+    SET_SECTION_TABS,
+} from '~/constants/ActionTypes';
 
 const initialState = {
   error: null,
@@ -16,6 +18,7 @@ const initialState = {
  */
 export default function section_tabs(state = initialState, action = {}) {
   if (action.type === SET_SECTION_TABS) {
+      console.log('setting section tabs', action)
     return {
       ...state,
       error: null,

diff --git a/theme/themes/pastanaga/globals/site.overrides b/theme/themes/pastanaga/globals/site.overrides
@@ -19,4 +19,57 @@
     text-decoration: underline;
     font-weight    : bold;
   }
+}
+
+
+.widthSidebar {
+  display: flex;
+
+  #page-document.hasSidebar {
+    width: 70%;
+    background-color: #f6f6f6;
+    padding: 3rem;
+  }
+  .page-document-sidebar {
+    width: 30%;
+    background-color: #7c7c7c;
+    display: flex;
+    min-height: 100vh;
+    .tabs {
+      flex-direction: column;
+      margin-left: auto;
+      display: inline-flex;
+      position: relative;
+      margin-right: 1rem;
+      margin-top: 2rem;
+      a {
+        color: white;
+        font-size: 1.2rem;
+      }
+    }
+  }
+}
+
+.tabs.section-tabs {
+  display: flex;
+  justify-content: center;
+  a {
+    color: #3f3f3f;
+    font-size: 1.2rem;
+    margin-right: 4rem;
+    line-height: 3;
+  }
+}
+
+.ui.basic.segment.content-area {
+  padding: 0;
+  margin: 0;
+}
+
+h1.documentFirstHeading {
+  font-size: 36px;
+  border-bottom: none!important;
+  &:before {
+    display: none!important;
+  }
 }