Merge pull request #602 from City-of-Helsinki/hotfix/fullwidthhearing…

…-image Add default image on imageless fullwidth hearing.
City-of-Helsinki · Feb 23, 2018 · 03adba3 · 03adba3
2 parents d2ed3a5 + 22f81cb
commit 03adba3
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 9 deletions.
diff --git a/__tests__/Home/__snapshots__/HearingCard.react-test.js.snap b/__tests__/Home/__snapshots__/HearingCard.react-test.js.snap
@@ -8,7 +8,7 @@ exports[`HearingCard component should render as expected 1`] = `
     className="hearing-card-image"
     style={
       Object {
-        "backgroundImage": "url(\\"https://api.hel.fi/kerrokantasi-test/media/images/2017/10/LzqVMrMI.jpeg\\")",
+        "backgroundImage": "url(https://api.hel.fi/kerrokantasi-test/media/images/2017/10/LzqVMrMI.jpeg)",
       }
     }
     to={

diff --git a/src/components/FullWidthHearing.js b/src/components/FullWidthHearing.js
@@ -9,7 +9,7 @@ import getAttr from '../utils/getAttr';
 const FullWidthHearing = ({hearing, className = '', ...rest}, {language}) => {
   const backgroundImage = getHearingMainImageURL(hearing);
   const styles = {
-    backgroundImage: backgroundImage ? `url(${backgroundImage})` : '',
+    backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'url(/assets/images/default-image.svg)',
   };
   return (
     <div className={`fullwidth-hearing ${className}`} {...rest}>

diff --git a/src/components/HearingCard.js b/src/components/HearingCard.js
@@ -12,14 +12,10 @@ import config from '../config';
 
 const HearingCard = ({hearing, language, className = ''}) => {
   const backgroundImage = getHearingMainImageURL(hearing);
-  let cardImageStyle = {
-    backgroundImage: 'url(/assets/images/default-image.svg)',
+  const cardImageStyle = {
+    backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'url(/assets/images/default-image.svg)',
   };
-  if (backgroundImage) {
-    cardImageStyle = {
-      backgroundImage: 'url("' + backgroundImage + '")',
-    };
-  }
+
   // FIXME: Should there be direct linking to hearing using certain language?
   const translationAvailable = !!getAttr(hearing.title, language, {exact: true});
   const expiresSoon = moment(hearing.close_at).diff(moment(), 'weeks') < 1;