complete redesign of homepage

eea · Nov 25, 2021 · 889b6a2 · 889b6a2
1 parent 343e1ba
commit 889b6a2
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 166 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -22,7 +22,7 @@ export function getFrontpageSlides() {
     type: GET_FRONTPAGESLIDES,
     request: {
       op: 'get',
-      path: `/frontpage_slides?fullobjects`,
+      path: `/frontpage_slides/example.json/@@download/file`,
     },
   };
 }

diff --git a/src/components/theme/Header/HomepageSlider.jsx b/src/components/theme/Header/HomepageSlider.jsx
@@ -4,39 +4,9 @@ import PropTypes from 'prop-types';
 import 'react-image-gallery/styles/css/image-gallery.css';
 
 import ImageGallery from 'react-image-gallery';
-// import HomepageSliderPlaceholder from './HomepageSliderPlaceholder';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 import { Placeholder } from 'semantic-ui-react';
 import { getBasePath } from '@eeacms/volto-forests-theme/helpers';
-// function SampleNextArrow(props) {
-//   const { onClick } = props;
-//   return (
-//     <div
-//       role="button"
-//       className="slideArrow nextArrow"
-//       onClick={onClick}
-//       tabIndex={-1}
-//       onKeyPress={() => {}}
-//     >
-//       <Icon name={right} size="45px" />
-//     </div>
-//   );
-// }
-
-// function SamplePrevArrow(props) {
-//   const { onClick } = props;
-//   return (
-//     <div
-//       role="button"
-//       className="slideArrow prevArrow"
-//       onClick={onClick}
-//       tabIndex={-1}
-//       onKeyPress={() => {}}
-//     >
-//       <Icon name={left} size="45px" />
-//     </div>
-//   );
-// }
 
 class HomepageSlider extends Component {
   constructor(props) {
@@ -73,19 +43,11 @@ class HomepageSlider extends Component {
   renderSlide = (item) => {
     return (
       <div className="slider-slide">
-        {/* <div
-          className="slide-img"
-          style={{ backgroundImage: `url(${item.original})` }}
-        > */}
         {item.original ? (
           <LazyLoadImage
             className="slide-img"
-            // alt={image.alt}
             height={601}
             effect="blur"
-            // delayMethod={'debounce'}
-            // delayTime={1900}
-            // src={item.original} // use normal <img> attributes as props
             style={{ backgroundImage: `url(${getBasePath(item.original)})` }}
             width={'100%'}
             visibleByDefault={true}
@@ -101,8 +63,6 @@ class HomepageSlider extends Component {
           </Placeholder>
         )}
 
-        {/* </div> */}
-
         <div className="slide-overlay" />
         <div className="slide-body">
           <div className="slide-title">{item.title || ''}</div>
@@ -115,6 +75,10 @@ class HomepageSlider extends Component {
   createDescription(children) {
     const items = children.map((child) => (
       <div className="slider-child">
+        <img
+          alt="descriptive icon"
+          src={`data:image/svg+xml;utf8,${child.icon}`}
+        />
         <span>{child.text}</span> <br></br>
         <a href={child.link}> {child.linkText}</a>
       </div>
@@ -123,96 +87,36 @@ class HomepageSlider extends Component {
   }
 
   getSlides(items) {
-    const slidesArr = items ? items : this.props.items;
-
+    const slidesArr = items ? items : this.props.items.slides;
     const slidesUrl =
       (slidesArr &&
         slidesArr.map((item, index) => {
           return {
             original: item.image,
             thumbnail: item.image,
             title: item.title,
-            description: this.createDescription(
-              item.children || [
-                {
-                  text:
-                    'Monocultures harbour less biodiversity than mixed forests.',
-                  link: 'google.com',
-                  linkText: 'Learn more about forest management',
-                },
-                {
-                  text:
-                    'Monocultures harbour less biodiversity than mixed forests.',
-                  link: 'google.com',
-                  linkText: 'Learn more about forest management',
-                },
-                {
-                  text:
-                    'Natural disturbances like droughts and pests and storms decrease forest health',
-                  link: 'google.com',
-                  linkText: 'Learn more about forest health and resilience.',
-                },
-              ],
-            ),
+            description: this.createDescription(item.children || []),
           };
         })) ||
       [];
-    // this.setState({
-    //   slides: slidesUrl,
-    // });
-
     return slidesUrl;
   }
 
-  // componentDidMount() {
-  //   if (this.props.items && this.props.items.length) {
-  //     this.getSlides();
-  //   } else {
-  //     this.setState({
-  //       slides: [],
-  //     });
-  //   }
-  // }
-
-  // componentDidUpdate(prevProps) {
-  //   if (
-  //     !this.state.slides.length &&
-  //     this.props.items &&
-  //     this.props.items.length
-  //   ) {
-  //     this.getSlides();
-  //   }
-  // }
-
   render() {
-    // if (!this.state.slides.length) return '';
-    const slides = this.getSlides(this.props.items);
+    const slides = this.getSlides(this.props.items.slides);
+    const icon = this.props.items.extra.icon || '';
+    const text = this.props.items.extra.text || '';
+    const link = this.props.items.extra.link || '';
+    const linkText = this.props.items.extra.linkText || '';
     return (
       <div>
         <div className="slider-wrapper">
-          {/* <Slider
-            className="mainSlider"
-            asNavFor={this.state.nav2}
-            ref={slider => (this.slider1 = slider)}
-            {...settings}
-          >
-            {this.state.slides}
-          </Slider>
-          <Slider
-            className="navSlider"
-            asNavFor={this.state.nav1}
-            ref={slider => (this.slider2 = slider)}
-            slidesToShow={3}
-            slidesToScroll={1}
-            swipeToSlide={true}
-            focusOnSelect={true}
-          >
-            {this.state.slides}
-          </Slider> */}
-          {/* <img className="slider-caret" src={SliderCaret} alt="" /> */}
           <ImageGallery
-            //className="mainSlider"
             items={slides}
+            icon={icon}
+            text={text}
+            link={link}
+            linkText={linkText}
             showThumbnails={false}
             showNav={false}
             showBullets={true}
@@ -227,22 +131,16 @@ class HomepageSlider extends Component {
           />
         </div>
         <div className="extra-header">
-          Some additional informative text over here to fill up the spaceeeee.{' '}
-          <br></br>
-          <a href="google.com"> Find out more!</a>
+          <img alt="descriptive icon" src={`data:image/svg+xml;utf8,${icon}`} />
+          <div>
+            <span>{text}</span>
+            <br></br>
+            <a href={link}>{linkText}</a>
+          </div>
         </div>
       </div>
     );
   }
 }
 
-// export default compose(
-//   connect(
-//     state => ({
-//       items: state.frontpage_slides.items,
-//     }),
-//     { getFrontpageSlides },
-//   ),
-// )(HomepageSlider);
-
 export default HomepageSlider;
diff --git a/src/reducers/frontpage_slides.js b/src/reducers/frontpage_slides.js
@@ -3,8 +3,6 @@
  * @module reducers/frontpage_slides
  */
 
-import { map } from 'lodash';
-
 import { GET_FRONTPAGESLIDES } from '@eeacms/volto-forests-theme/constants/ActionTypes';
 
 const initialState = {
@@ -34,11 +32,7 @@ export default function frontpage_slides(state = initialState, action = {}) {
       return {
         ...state,
         error: null,
-        items: map(action.result.items, (item) => ({
-          title: item.title,
-          image: item.image.download,
-          description: item.description,
-        })),
+        items: action.result,
         loaded: true,
         loading: false,
       };