Develop

CHANGELOG.md

@@ -6,7 +6,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### [0.1.20](https://github.com/eea/volto-forests-theme/compare/0.1.19...0.1.20)
 
+- Develop [`#25`](https://github.com/eea/volto-forests-theme/pull/25)
 - update logo, plotly colour scheme and theme colours [`#23`](https://github.com/eea/volto-forests-theme/pull/23)
+- More styles to slate, added fonts [`40ae6ab`](https://github.com/eea/volto-forests-theme/commit/40ae6ab83ea6bb41e64f57ed6bee2b19af10620d)
+- Lint fix [`1d2c554`](https://github.com/eea/volto-forests-theme/commit/1d2c5548adfd01c4f483931f0a211d157cf9bc71)
+- Switch request for parent data in Header [`fd89852`](https://github.com/eea/volto-forests-theme/commit/fd8985232d98b0e2c04b36dd9ee31d45ac76ef5d)
 - fix [`bd6b8b3`](https://github.com/eea/volto-forests-theme/commit/bd6b8b39b259e9b04d51111adf6df789908232d0)
 
 #### [0.1.19](https://github.com/eea/volto-forests-theme/compare/0.1.18...0.1.19)

src/actions/index.js

@@ -77,6 +77,7 @@ export function getParentFolderData(url) {
     request: {
       op: 'get',
       path: `/${url}?fullobjects`,
+      accept: 'application/json',
     },
   };
 }

src/customizations/volto/components/theme/Header/Header.jsx

@@ -8,11 +8,11 @@ import HomepageSlider from '@eeacms/volto-forests-theme/components/theme/Header/
 import MobileSearchWidget from '@eeacms/volto-forests-theme/components/theme/MobileSearchWidget/MobileSearchWidget';
 import Sticky from 'react-stickynode';
 import HeaderBackground from './header-bg.png';
-import axios from 'axios';
 import {
   getBasePath,
   getNavigationByParent,
 } from '@eeacms/volto-forests-theme/components/manage/Blocks/NavigationBlock/helpers';
+import { getParentFolderData } from '@eeacms/volto-forests-theme/actions';
 
 const Header = (props) => {
   const {
@@ -29,45 +29,73 @@ const Header = (props) => {
   const [leadCaptionText, setLeadCaptionText] = React.useState('');
   const [navigationItems, setNavigationItems] = React.useState('');
 
-  const getParentData = (url) => {
-    axios
-      .get(url, {
-        headers: {
-          accept: 'application/json',
-        },
-      })
-      .then((response) => {
-        const parentImage =
-          response.data && response.data.image && response.data.image.download
-            ? response.data.image.download
-            : '';
+  // console.log('parentImg', props.parentImg);
+  // const getParentData = (url) => {
+  //   axios
+  //     .get(url, {
+  //       headers: {
+  //         accept: 'application/json',
+  //       },
+  //     })
+  //     .then((response) => {
+  //       const parentImage =
+  //         response.data && response.data.image && response.data.image.download
+  //           ? response.data.image.download
+  //           : '';
 
-        const parentLeadCaption =
-          response.data &&
-          response.data.lead_image_caption &&
-          response.data.lead_image_caption.data
-            ? response.data.lead_image_caption.data
-            : '';
+  //       const parentLeadCaption =
+  //         response.data &&
+  //         response.data.lead_image_caption &&
+  //         response.data.lead_image_caption.data
+  //           ? response.data.lead_image_caption.data
+  //           : '';
 
-        const parentData =
-          response.data && props.navItems && response.data['@id']
-            ? getNavigationByParent(
-                props.navItems,
-                getBasePath(response.data['@id']),
-              )
-            : '';
-        if (inheritLeadingData) {
-          setInheritedImage(parentImage);
-          setLeadCaptionText(parentLeadCaption);
-        }
-        if (leadNavigation) {
-          setNavigationItems(parentData.items);
-        }
-      })
-      .catch((error) => {
-        return error;
-      });
-  };
+  //       const parentData =
+  //         response.data && props.navItems && response.data['@id']
+  //           ? getNavigationByParent(
+  //               props.navItems,
+  //               getBasePath(response.data['@id']),
+  //             )
+  //           : '';
+  //       if (inheritLeadingData) {
+  //         //setInheritedImage(props.parentImg);
+  //         //setLeadCaptionText(parentLeadCaption);
+  //       }
+  //       // if (leadNavigation) {
+  //       //   setNavigationItems(parentData.items);
+  //       // }
+  //     })
+  //     .catch((error) => {
+  //       return error;
+  //     });
+  // };
+  React.useEffect(() => {
+    if (leadNavigation || inheritLeadingData) {
+      if (!props.parentItems || props.parentItems.length === 0) {
+        props.getParentFolderData(getBasePath(parentData['@id']));
+      }
+      if (props.parentItems && props.parentItems.length > 0) {
+        const parentItems = getNavigationByParent(
+          props.navItems,
+          getBasePath(parentData['@id']),
+        );
+        if (leadNavigation) setNavigationItems(parentItems.items);
+      }
+      if (inheritLeadingData) {
+        if (props.parentImg && props.parentImg.download)
+          setInheritedImage(props.parentImg.download);
+        if (props.leadCaption) setLeadCaptionText(props.leadCaption);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    props.parentItems,
+    props.parentImg,
+    inheritLeadingData,
+    props.leadCaption,
+    parentData,
+    leadNavigation,
+  ]);
 
   React.useEffect(() => {
     if (props.actualPathName) {
@@ -77,8 +105,9 @@ const Header = (props) => {
 
   React.useEffect(() => {
     if (inheritLeadingData || leadNavigation) {
-      const parentUrl = parentData['@id'];
-      getParentData(parentUrl);
+      //const parentUrl = parentData['@id'];
+      // getParentData(parentUrl);
+
       if (!inheritLeadingData) {
         setLeadCaptionText(leadImageCaption.data);
       }
@@ -141,7 +170,15 @@ const Header = (props) => {
     </div>
   );
 };
-export default connect((state) => ({
-  token: state.userSession.token,
-  navItems: state.navigation?.items,
-}))(Header);
+export default connect(
+  (state) => ({
+    token: state.userSession.token,
+    navItems: state.navigation?.items,
+    parentItems: state.parent_folder_data?.items?.items,
+    parentImg: state.parent_folder_data?.items?.image,
+    leadCaption: state.parent_folder_data?.items?.lead_image_caption?.data,
+  }),
+  {
+    getParentFolderData,
+  },
+)(Header);

src/index.js

@@ -125,6 +125,11 @@ export default function applyConfig(config) {
     { cssClass: 'red-text', label: 'Red text' },
     { cssClass: 'yellow-text', label: 'Yellow text' },
     { cssClass: 'grey-text', label: 'Grey text' },
+
+    // font-sizes
+    { cssClass: 'x-large', label: 'x-large' },
+    { cssClass: 'xx-large', label: 'xx-large' },
+    { cssClass: 'xxx-large', label: 'xxx-large' },
   ];
   // config.settings.slate.styleMenu.blockStyles = [
   //   ...config.settings.slate.styleMenu.blockStyles,

src/slate-styles.css

@@ -157,3 +157,17 @@
 .black-gainsboro-text {
   color: #e3e3e3;
 }
+
+/* font sizes */
+
+.x-large {
+  font-size: x-large;
+}
+
+.xx-large {
+  font-size: xx-large;
+}
+
+.xxx-large {
+  font-size: xxx-large;
+}