@eeacms/volto-clms-theme 1.0.84 → 1.0.87

package/CHANGELOG.md

@@ -4,8 +4,37 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [1.0.87](https://github.com/eea/volto-clms-theme/compare/1.0.86...1.0.87)
+
+- images condition for lightGallery rendering [`728b2b3`](https://github.com/eea/volto-clms-theme/commit/728b2b32a1470d61a2eabf7d51ef59ea2b9adc33)
+
+#### [1.0.86](https://github.com/eea/volto-clms-theme/compare/1.0.85...1.0.86)
+
+> 23 March 2022
+
+- Develop [`#243`](https://github.com/eea/volto-clms-theme/pull/243)
+- News item view and blocks [`#242`](https://github.com/eea/volto-clms-theme/pull/242)
+- NewsItem with blocks [`5320bd3`](https://github.com/eea/volto-clms-theme/commit/5320bd3073f7528d511d49b41755a5ebea05ba20)
+- if a news item has blocks render them [`5795bd4`](https://github.com/eea/volto-clms-theme/commit/5795bd47a8215a575142bfe5a42713f2ed2b540b)
+
+#### [1.0.85](https://github.com/eea/volto-clms-theme/compare/1.0.84...1.0.85)
+
+> 22 March 2022
+
+- Upgrade to Volto 15.2.1 [`#241`](https://github.com/eea/volto-clms-theme/pull/241)
+- Volto 15 upgrade [`#240`](https://github.com/eea/volto-clms-theme/pull/240)
+- jest config [`5e0723b`](https://github.com/eea/volto-clms-theme/commit/5e0723b1c1006609811a84d6fb9a3b6744c8d1be)
+- sort downloads [`50cdd33`](https://github.com/eea/volto-clms-theme/commit/50cdd332f992e45a8745483bddaf25e01ecd5db5)
+- condition valid Start date [`dce8883`](https://github.com/eea/volto-clms-theme/commit/dce8883f386676c682af2b5a68f7451d3ccd49dd)
+- search block new features [`8e814cb`](https://github.com/eea/volto-clms-theme/commit/8e814cbd359782540c21fe37b37ef146d331f0d6)
+- language selector cookie management [`1385ac9`](https://github.com/eea/volto-clms-theme/commit/1385ac95795702206d3623ba6e780faa43a89e0a)
+- toolbar cookie management [`5c23200`](https://github.com/eea/volto-clms-theme/commit/5c23200790b20e1d4f1bc966463c37bf4c808f47)
+
 #### [1.0.84](https://github.com/eea/volto-clms-theme/compare/1.0.83...1.0.84)
 
+> 18 March 2022
+
+- Develop [`#239`](https://github.com/eea/volto-clms-theme/pull/239)
 - lightgallery style imports [`7b6c1a9`](https://github.com/eea/volto-clms-theme/commit/7b6c1a9d2b269a74d7c0ec699b078f41035c7e23)
 - lightGallery added for meeting view [`4047d5c`](https://github.com/eea/volto-clms-theme/commit/4047d5c18ce4c64b03fbcc3db761b3c0f4cd26d3)
 

package/Jenkinsfile

@@ -4,9 +4,9 @@ pipeline {
   environment {
         GIT_NAME = "volto-clms-theme"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "clms.land.copernicus.eu,volto.eea.europa.eu"
+        SONARQUBE_TAGS = "clms.land.copernicus.eu,volto.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu"
         DEPENDENCIES = ""
-        VOLTO = "14.10.0"
+        VOLTO = "15.2.1"
     }
 
   stages {

package/jest-addon.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
+  testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s(x)?'],
   collectCoverageFrom: [
     'src/addons/**/src/**/*.{js,jsx,ts,tsx}',
     '!src/**/*.d.ts',
@@ -15,6 +15,7 @@ module.exports = {
     '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
     'volto-clms-theme/(.*)$': '<rootDir>/src/addons/volto-clms-theme/src/$1',
     '~/(.*)$': '<rootDir>/src/$1',
+    '@root/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
   },
@@ -38,4 +39,7 @@ module.exports = {
       statements: 5,
     },
   },
+  roots: ['<rootDir>'],
+  modulePaths: ['<rootDir>'],
+  moduleDirectories: ['node_modules'],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.84",
+  "version": "1.0.87",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/AccordionFacet.jsx

@@ -1,5 +1,10 @@
 import { Checkbox } from 'semantic-ui-react';
 import React from 'react';
+import {
+  selectFacetSchemaEnhancer,
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from '@plone/volto/components/manage/Blocks/Search/components/base';
 
 const AccordionFacet = (props) => {
   const {
@@ -79,4 +84,7 @@ const AccordionFacet = (props) => {
   );
 };
 
+AccordionFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+AccordionFacet.stateToValue = selectFacetStateToValue;
+AccordionFacet.valueToQuery = selectFacetValueToQuery;
 export default AccordionFacet;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/CheckboxTreeFacet.jsx

@@ -5,6 +5,12 @@ import React, { useState } from 'react';
 import { Checkbox, List } from 'semantic-ui-react';
 import { structure_taxonomy_terms } from '@eeacms/volto-clms-theme/components';
 
+import {
+  selectFacetSchemaEnhancer,
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from '@plone/volto/components/manage/Blocks/Search/components/base';
+
 const CheckboxTreeFacet = (props) => {
   const { facet, choices, onChange, value } = props;
   const facetValue = value;
@@ -120,4 +126,7 @@ const CheckboxListParent = ({ option, key, onChange, value, id }) => {
   );
 };
 
+CheckboxTreeFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+CheckboxTreeFacet.stateToValue = selectFacetStateToValue;
+CheckboxTreeFacet.valueToQuery = selectFacetValueToQuery;
 export default CheckboxTreeFacet;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/DoubleRangeFacet.jsx

@@ -5,6 +5,11 @@ import React, { useState } from 'react';
 
 import InputRange from 'react-input-range';
 import { Segment } from 'semantic-ui-react';
+import {
+  selectFacetSchemaEnhancer,
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from '@plone/volto/components/manage/Blocks/Search/components/base';
 
 const DoubleRangeFacet = (props) => {
   const { facet, choices, onChange, value } = props;
@@ -73,4 +78,7 @@ const DoubleRangeFacet = (props) => {
   );
 };
 
+DoubleRangeFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+DoubleRangeFacet.stateToValue = selectFacetStateToValue;
+DoubleRangeFacet.valueToQuery = selectFacetValueToQuery;
 export default DoubleRangeFacet;

package/src/components/Blocks/customBlocks.js

@@ -6,6 +6,7 @@ import {
   CheckboxTreeFacet,
   rewriteOptions,
 } from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoSearchBlock';
+import { SelectFacetFilterListEntry } from '@plone/volto/components/manage/Blocks/Search/components';
 import {
   CclCarouselView,
   CclProductTabsView,
@@ -305,24 +306,40 @@ const customBlocks = (config) => ({
             title: 'Accordion Checkbox',
             view: WithType(AccordionFacet, 'checkbox'),
             isDefault: true,
+            schemaEnhancer: AccordionFacet.schemaEnhancer,
+            stateToValue: AccordionFacet.stateToValue,
+            valueToQuery: AccordionFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
           },
           {
             id: 'accordionLabelFacet',
             title: 'Accordion Label',
             view: WithType(AccordionFacet, 'label'),
             isDefault: false,
+            schemaEnhancer: AccordionFacet.schemaEnhancer,
+            stateToValue: AccordionFacet.stateToValue,
+            valueToQuery: AccordionFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
           },
           {
             id: 'doubleRangeFacet',
             title: 'Double Range',
             view: DoubleRangeFacet,
             isDefault: false,
+            schemaEnhancer: DoubleRangeFacet.schemaEnhancer,
+            stateToValue: DoubleRangeFacet.stateToValue,
+            valueToQuery: DoubleRangeFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
           },
           {
             id: 'checkboxTreeFacet',
             title: 'Checkbox Tree',
             view: CheckboxTreeFacet,
             isDefault: false,
+            schemaEnhancer: CheckboxTreeFacet.schemaEnhancer,
+            stateToValue: CheckboxTreeFacet.stateToValue,
+            valueToQuery: CheckboxTreeFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
           },
 
           ...config.blocks.blocksConfig.search.extensions.facetWidgets.types,

package/src/components/CLMSDownloadsView/CLMSDownloadTasks.jsx

@@ -67,15 +67,23 @@ const CLMSDownloadTasks = (props) => {
     return (
       <Grid columns={2}>
         {tasks?.length > 0 &&
-          tasks.map((item, key) => (
-            <Grid.Column key={key}>
-              <FileCard
-                item={item}
-                showDeleteTaskLoading={showDel}
-                deleteTaskInProgress={delTask}
-              />
-            </Grid.Column>
-          ))}
+          tasks
+            .map((item) => {
+              if (!item.RegistrationDateTime) {
+                item.RegistrationDateTime = '1970-01-01T00:00:00.000Z';
+              }
+              return item;
+            })
+            .sort(dynamicSort('-RegistrationDateTime'))
+            .map((item, key) => (
+              <Grid.Column key={key}>
+                <FileCard
+                  item={item}
+                  showDeleteTaskLoading={showDel}
+                  deleteTaskInProgress={delTask}
+                />
+              </Grid.Column>
+            ))}
       </Grid>
     );
   };
@@ -108,6 +116,22 @@ const CLMSDownloadTasks = (props) => {
     setter(intermediate);
   }
 
+  const dynamicSort = (property) => {
+    var sortOrder = 1;
+    if (property[0] === '-') {
+      sortOrder = -1;
+      property = property.substr(1);
+    }
+    return function (a, b) {
+      /* next line works with strings and numbers,
+       * and you may want to customize it to your needs
+       */
+      var result =
+        a[property] < b[property] ? -1 : a[property] > b[property] ? 1 : 0;
+      return result * sortOrder;
+    };
+  };
+
   const deleteTaskInProgress = (task_id) => {
     setShowDeleteTaskLoading(task_id);
     dispatch(deleteDownloadtool(task_id));
@@ -220,7 +244,7 @@ const CLMSDownloadTasks = (props) => {
         <h2>
           <FormattedMessage id="Cancelled" defaultMessage="Cancelled" />
         </h2>
-        {cancelled?.length !== 0 ? (
+        {cancelled?.length > 0 ? (
           <MapTasks tasks={cancelled} showDel={showDeleteTaskLoading} />
         ) : (
           <p>

package/src/components/CLMSDownloadsView/FileCard.jsx

@@ -125,18 +125,25 @@ const FileCard = (props) => {
           >
             <Header as="h3">{`Task ID: ${item?.TaskID}`}</Header>
             <Segment basic className="file-datetimes">
-              Start date:{' '}
-              {new Date(item?.RegistrationDateTime).toLocaleString('en-GB', {
-                timeZone: 'UTC',
-              })}{' '}
-              <span
-                className="info-icon"
-                tooltip="Dates and times are in UTC"
-                direction="up"
-              >
-                <FontAwesomeIcon icon={faInfoCircle} />
-              </span>
-              <br />
+              {item?.RegistrationDateTime && (
+                <>
+                  Start date:
+                  {new Date(item?.RegistrationDateTime).toLocaleString(
+                    'en-GB',
+                    {
+                      timeZone: 'UTC',
+                    },
+                  )}
+                  <span
+                    className="info-icon"
+                    tooltip="Dates and times are in UTC"
+                    direction="up"
+                  >
+                    <FontAwesomeIcon icon={faInfoCircle} />
+                  </span>
+                  <br />
+                </>
+              )}
               {item?.FinalizationDateTime && (
                 <>
                   End date:{' '}

package/src/components/CLMSMeetingView/CclLightGallery.jsx

@@ -4,8 +4,9 @@ import LightGallery from 'lightgallery/react';
 import lgZoom from 'lightgallery/plugins/zoom';
 import 'lightgallery/css/lightgallery.css';
 import 'lightgallery/css/lg-zoom.css';
-import { Image } from 'semantic-ui-react';
 import './styles.less';
+
+import { Image } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { useDispatch, useSelector } from 'react-redux';
 import { searchContent } from '@plone/volto/actions';
@@ -23,7 +24,6 @@ export const LightGalleryListing = () => {
         {
           'path.depth': 1,
           portal_type: 'Image',
-          fullobjects: true,
         },
         'images',
       ),
@@ -32,27 +32,32 @@ export const LightGalleryListing = () => {
       dispatch(searchContent([]));
     };
   }, [dispatch]);
-
   return (
     <>
       <div>
-        <LightGallery plugins={[lgZoom]} mode="lg-fade">
-          {images?.map((item, index) => (
-            <a
-              key={index}
-              className="gallery-item"
-              href={flattenToAppURL(item?.image?.download)}
-              data-sub-html={item.description}
-              data-src={flattenToAppURL(item?.image?.scales?.huge?.download)}
-            >
-              <Image
-                src={flattenToAppURL(item?.image?.scales?.large?.download)}
-                className="img-responsive"
-                alt={item.description}
-              />
-            </a>
-          ))}
-        </LightGallery>
+        {images?.length > 0 && (
+          <LightGallery plugins={[lgZoom]} mode="lg-fade">
+            {images?.map((item, index) => (
+              <a
+                key={index}
+                className="gallery-item"
+                href={flattenToAppURL(
+                  `${item['@id']}/@@images/${item?.image_field}/huge`,
+                )}
+                data-sub-html={item?.description}
+                data-src={flattenToAppURL(
+                  `${item['@id']}/@@images/${item?.image_field}/huge`,
+                )}
+              >
+                <Image
+                  src={`${item['@id']}/@@images/${item?.image_field}/large`}
+                  className="img-responsive"
+                  alt={item?.description}
+                />
+              </a>
+            ))}
+          </LightGallery>
+        )}
       </div>
     </>
   );

package/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx

@@ -1,32 +1,42 @@
 import React from 'react';
 import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
+import { hasBlocksData } from '@plone/volto/helpers';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 
 const CLMSNewsItemView = (props) => {
   const { content } = props;
   return (
     <div className="ccl-container">
-      <h1 className="page-title">{content.title}</h1>
-      <div className="news-detail">
-        <div className="news-detail-date">
-          {new Date(content?.effective).toLocaleString()}
-        </div>
-        {content?.image && (
-          <figure className="news-detail-image">
-            <img
-              src={
-                content?.image
-                  ? content?.image?.download
-                  : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-              }
-              alt={content?.image ? content?.image?.filename : 'Placeholder'}
-            />
-            <figcaption>{content?.image_caption}</figcaption>
-          </figure>
-        )}
-        <div className="news-detail-content">
-          <StringToHTML string={content.text?.data || ''} />
-        </div>
-      </div>
+      {hasBlocksData(content) && content.blocks_layout?.items?.length > 1 ? (
+        <RenderBlocks {...props} />
+      ) : (
+        <>
+          <h1 className="page-title">{content.title}</h1>
+          <div className="news-detail">
+            <div className="news-detail-date">
+              {new Date(content?.effective).toLocaleDateString()}
+            </div>
+            {content?.image && (
+              <figure className="news-detail-image">
+                <img
+                  src={
+                    content?.image
+                      ? content?.image?.download
+                      : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+                  }
+                  alt={
+                    content?.image ? content?.image?.filename : 'Placeholder'
+                  }
+                />
+                <figcaption>{content?.image_caption}</figcaption>
+              </figure>
+            )}
+            <div className="news-detail-content">
+              <StringToHTML string={content.text?.data || ''} />
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 };

package/src/components/CclLanguageSelector/CclLanguageSelector.jsx

@@ -4,21 +4,26 @@
  */
 
 import { Helmet, flattenToAppURL, langmap } from '@plone/volto/helpers';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import CclModal from '@eeacms/volto-clms-theme/components/CclModal/CclModal';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import React from 'react';
 import config from '@plone/volto/registry';
-import cookie from 'react-cookie';
 import cx from 'classnames';
 import { find } from 'lodash';
-import { updateIntl } from 'react-intl-redux';
 
 let locales = {};
 
+const messages = defineMessages({
+  switchLanguageTo: {
+    id: 'Switch to',
+    defaultMessage: 'Switch to',
+  },
+});
+
 if (config.settings) {
   config.settings.supportedLanguages.forEach((lang) => {
     import('~/../locales/' + lang + '.json').then((locale) => {
@@ -31,12 +36,9 @@ function Capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-const ModalContent = ({
-  translations,
-  currentLang,
-  onClickAction,
-  changeLanguage,
-}) => {
+const ModalContent = (props) => {
+  const intl = useIntl();
+  const { translations, currentLang, onClickAction } = props;
   return (
     <div className="ccl-container">
       <div className="modal-language-header">
@@ -64,6 +66,9 @@ const ModalContent = ({
                 <span className="language-link" lang-code={lang}>
                   {lang !== currentLang ? (
                     <Link
+                      aria-label={`${intl.formatMessage(
+                        messages.switchLanguageTo,
+                      )} ${langmap[lang].nativeName.toLowerCase()}`}
                       to={
                         translation
                           ? flattenToAppURL(translation['@id'])
@@ -72,7 +77,6 @@ const ModalContent = ({
                       title={langmap[lang].nativeName}
                       onClick={() => {
                         onClickAction();
-                        changeLanguage(lang);
                       }}
                       key={`language-selector-${lang}`}
                     >
@@ -92,26 +96,11 @@ const ModalContent = ({
 };
 
 function CclLanguageSelector(props) {
-  const dispatch = useDispatch();
   const currentLang = useSelector((state) => state.intl.locale);
   const translations = useSelector(
     (state) => state.content.data?.['@components']?.translations?.items,
   );
 
-  function changeLanguage(language) {
-    cookie.save('I18N_LANGUAGE', language, {
-      expires: new Date((2 ** 31 - 1) * 1000),
-      path: '/',
-    });
-
-    dispatch(
-      updateIntl({
-        locale: language,
-        messages: locales[language],
-      }),
-    );
-  }
-
   return config.settings.isMultilingual ? (
     <div className="ccl-header-lang">
       <CclModal
@@ -129,7 +118,6 @@ function CclLanguageSelector(props) {
           translations={translations}
           currentLang={currentLang}
           onClickAction={props.onClickAction}
-          changeLanguage={changeLanguage}
         />
       </CclModal>
 
@@ -142,7 +130,6 @@ function CclLanguageSelector(props) {
             translations={translations}
             currentLang={currentLang}
             onClickAction={props.onClickAction}
-            changeLanguage={changeLanguage}
           />
         </CclModal>
       </div>

package/src/customizations/volto/components/manage/Toolbar/Toolbar.jsx

@@ -3,41 +3,44 @@
  * @module components/manage/Toolbar/Toolbar
  */
 
-import { BodyClass, getBaseUrl } from '@plone/volto/helpers';
 import React, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import jwtDecode from 'jwt-decode';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import { withCookies } from 'react-cookie';
 import { filter, find } from 'lodash';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+
+import More from '@plone/volto/components/manage/Toolbar/More';
+import PersonalTools from '@plone/volto/components/manage/Toolbar/PersonalTools';
+import Types from '@plone/volto/components/manage/Toolbar/Types';
+import PersonalInformation from '@plone/volto/components/manage/Preferences/PersonalInformation';
+import PersonalPreferences from '@plone/volto/components/manage/Preferences/PersonalPreferences';
+import StandardWrapper from '@plone/volto/components/manage/Toolbar/StandardWrapper';
 import {
   getTypes,
   listActions,
   setExpandedToolbar,
   unlockContent,
 } from '@plone/volto/actions';
-
 import { Icon } from '@plone/volto/components';
-import { Link } from 'react-router-dom';
-import More from '@plone/volto/components/manage/Toolbar/More';
-import PersonalInformation from '@plone/volto/components/manage/Preferences/PersonalInformation';
-import PersonalPreferences from '@plone/volto/components/manage/Preferences/PersonalPreferences';
-import PersonalTools from '@plone/volto/components/manage/Toolbar/PersonalTools';
+import { BodyClass, getBaseUrl } from '@plone/volto/helpers';
 import { Pluggable } from '@plone/volto/components/manage/Pluggable';
-import PropTypes from 'prop-types';
-import StandardWrapper from '@plone/volto/components/manage/Toolbar/StandardWrapper';
-import Types from '@plone/volto/components/manage/Toolbar/Types';
-import addSVG from '@plone/volto/icons/add-document.svg';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import { compose } from 'redux';
-import config from '@plone/volto/registry';
-import { connect } from 'react-redux';
-import cookie from 'react-cookie';
-import cx from 'classnames';
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
-import folderSVG from '@plone/volto/icons/folder.svg';
-import jwtDecode from 'jwt-decode';
-import moreSVG from '@plone/volto/icons/more.svg';
+
 import penSVG from '@plone/volto/icons/pen.svg';
 import unlockSVG from '@plone/volto/icons/unlock.svg';
+import folderSVG from '@plone/volto/icons/folder.svg';
+import addSVG from '@plone/volto/icons/add-document.svg';
+import moreSVG from '@plone/volto/icons/more.svg';
 import userSVG from '@plone/volto/icons/user.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+// import cookie from 'react-cookie';
 
 const messages = defineMessages({
   edit: {
@@ -174,17 +177,21 @@ class Toolbar extends Component {
     types: [],
   };
 
-  state = {
-    expanded: cookie.load('toolbar_expanded') !== 'false',
-    showMenu: false,
-    menuStyle: {},
-    menuComponents: [],
-    loadedComponents: [],
-    hideToolbarBody: false,
-  };
-
   toolbarWindow = React.createRef();
 
+  constructor(props) {
+    super(props);
+    const { cookies } = props;
+    this.state = {
+      expanded: cookies.get('toolbar_expanded') !== 'false',
+      showMenu: false,
+      menuStyle: {},
+      menuComponents: [],
+      loadedComponents: [],
+      hideToolbarBody: false,
+    };
+  }
+
   /**
    * Component will mount
    * @method componentDidMount
@@ -225,8 +232,11 @@ class Toolbar extends Component {
   }
 
   handleShrink = () => {
-    cookie.save('toolbar_expanded', !this.state.expanded, {
-      expires: new Date((2 ** 31 - 1) * 1000),
+    const { cookies } = this.props;
+    cookies.set('toolbar_expanded', !this.state.expanded, {
+      expires: new Date(
+        new Date().getTime() + config.settings.cookieExpires * 1000,
+      ),
       path: '/',
     });
     this.setState(
@@ -303,6 +313,7 @@ class Toolbar extends Component {
       id: 'folderContents',
     });
     const { expanded } = this.state;
+
     if (this.props.roles && this.props.roles?.includes('Manager')) {
       return (
         this.props.token && (
@@ -583,6 +594,7 @@ class Toolbar extends Component {
 
 export default compose(
   injectIntl,
+  withCookies,
   connect(
     (state, props) => ({
       actions: state.actions.actions,