2.0.4 - Update to allow for surpressing hero card images

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bolingbrook-church",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^3.9.2",

src/components/hero-card.tsx

@@ -52,6 +52,7 @@ interface HeroCardProps extends WithStyles<typeof styles> {
 type HeroCardMedia = {
   name: string
   media: Asset
+  surpress_image: boolean
 }
 
 interface HeroCardState {
@@ -68,20 +69,29 @@ class HeroCard extends React.PureComponent<HeroCardProps, HeroCardState> {
 
 
   componentWillMount() {
+    console.log(`WillMount for ${this.props.title}`)
     if (this.props.media) {
       heroCardFinder.get(this.props.media)
-        .then(mediaData => { this.setState({ mediaData }) })
+        .then(mediaData => {
+          this.setState({ mediaData })
+          console.log(`Updating media for ${this.props.media}`, mediaData)
+        })
     }
   }
 
   renderMedia() {
+    /* Don't show it if we want to surpress the image */
+    if (this.state.mediaData && this.state.mediaData.surpress_image) {
+      return undefined
+    }
+
     const props: CardMediaProps = {
       className: this.props.classes.media
     }
 
     if (this.props.image) {
       props.image = this.props.image
-    } else if (this.state.mediaData) {
+    } else if (this.state.mediaData && this.state.mediaData.media) {
       props.image = this.state.mediaData.media.fields.file.url + "?w=250"
     } else {
       props.image = '//via.placeholder.com/1'

src/components/hero.tsx

@@ -33,15 +33,17 @@ const styles = (theme: Theme) => createStyles({
 
   content: {
     position: 'absolute',
-    top: '50%',
+    bottom: '25px',
     width: '100%',
-    transform: 'translateY(-50%)',
     display: 'flex',
     flexFlow: 'row',
     justifyContent: 'center',
-
+    
     [theme.breakpoints.down('sm')]: {
-      flexWrap: 'wrap'
+      flexWrap: 'wrap',
+      top: '50%',
+      bottom: 'inherit',
+      transform: 'translateY(-50%)'
     }
   }
 })

src/components/sermon-hero-card.tsx

@@ -24,12 +24,13 @@ class SermonHeroCard extends React.PureComponent<SermonHeroCardProps, {}> {
 
   render() {
     if (!this.props.sermon) {
-      return (<HeroCard title="" image="" link="#"/>)
+      return (<HeroCard title="" image="" link="#" media="latest_sermon"/>)
     } else {
       return (
         <HeroCard title={ isToday(this.props.sermon ) ? "Today's Sermon" : "Latest Sermon" }
                   subtitle={ this.props.sermon.title }
                   image={ getImageUrl(this.props.sermon) }
+                  media="latest_sermon"
                   link={ `/sermons/${this.props.sermon.date}` }/>
       )
     }