v2.0.7 - Add support for dynammic banners

package.json

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

src/components/banner.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { createStyles, withStyles, WithStyles } from '@material-ui/styles';
+import { Theme } from '@material-ui/core'
+import { ContentFinder } from '../services/contentful'
+import Box from './box'
+import Content from './content'
+import moment from 'moment'
+
+const styles = (theme: Theme) => createStyles({
+  root: {
+    display: 'flex',
+    flexFlow: 'column',
+    alignItems: 'center',
+    textAlign: 'center',
+    backgroundColor: theme.palette.secondary.light,
+    top: '0',
+    left: '0',
+    right: '0'
+  }
+
+})
+interface BannerProps extends WithStyles<typeof styles>{
+}
+
+interface BannerState {
+  data?: any
+}
+
+const contentFinder = new ContentFinder<any, boolean>('banner', 'active')
+
+class Banner extends React.PureComponent<BannerProps, BannerState> {
+
+  state = {
+    data: undefined
+  }
+
+  async componentWillMount() {
+    const active = await contentFinder.find(true)
+    const now = moment()
+    const dateBounded = active.find((b) => {
+      return (!b.start || moment(b.start).isBefore(now)) && (!b.end || moment(b.end).isAfter(now))
+    })
+    this.setState({ data: dateBounded })
+  }
+
+  render() {
+    if (this.state.data) {
+      return (
+        <div className={this.props.classes.root}>
+          <Content data={this.state.data} boxVariant="main" />
+        </div>
+      )
+    } else {
+      return null
+    }
+  }
+}
+
+export default withStyles(styles)(Banner)

src/components/content.tsx

@@ -16,8 +16,11 @@ const styles = createStyles({
   code: { fontFamily: 'monospace' }
 })
 
-interface ContentProps extends WithStyles<typeof styles> {
-  name: string
+// The properties for content can either be named or pre-defined but not both
+type NamedContentProps = { name: string }
+type DataContentProps = { data: any }
+type ContentProps = (NamedContentProps | DataContentProps) & WithStyles<typeof styles> & {
+  boxVariant: 'main' | 'section'
 }
 
 interface ContentState {
@@ -42,18 +45,26 @@ const pageFinder = new ContentFinder('staticPage', 'pageName')
 
 class Content extends React.PureComponent<ContentProps, ContentState> {
 
+  static defaultProps: Partial<ContentProps> = {
+    boxVariant: 'main'
+  }
+
   state = {} as ContentState
 
   componentWillMount() {
-    pageFinder.get(this.props.name)
-      .then(data => { this.setState({ data }) })
+    if ("name" in this.props) {
+      pageFinder.get(this.props.name)
+        .then(data => { this.setState({ data }) })
+    } else {
+      this.setState({ data: this.props.data })
+    }
   }
 
   renderNode(node: any, key: string = "0", dense?: boolean) {
     const children = (dense?: boolean) => node.content.map((c: any, index: number) => this.renderNode(c, `${key}.${index}`, dense))
 
     return match(node.nodeType, {
-      'document': () => (<Box key={key}>{children()}</Box>),
+      'document': () => (<Box variant={this.props.boxVariant} key={key}>{children()}</Box>),
 
       'heading-(\\d)': ([k]) => {
         const variant = `h${k}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
@@ -70,7 +81,7 @@ class Content extends React.PureComponent<ContentProps, ContentState> {
         return (<span key={key} className={classNames(classes)}>{node.value}</span>)
       },
 
-      'hyperlink': () => (<Button key={key} variant="contained" link={node.data.uri}>{children()}</Button>),
+      'hyperlink': () => (<Button key={key} variant="text" size="small" link={node.data.uri}>{children()}</Button>),
 
       'unordered-list': () => (<List key={key} dense={true}>{children()}</List>),
 

src/components/page.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import Banner from './banner'
 import Box from './box'
 import Footer from './footer'
 import Header from './header'
@@ -11,6 +12,7 @@ const Page: React.FunctionComponent<PageProps> =
   (props) => (
     <div>
       <Header />
+      <Banner />
       <Box variant="main" className={props.className}>
         {props.children}
       </Box>

src/services/contentful.ts

@@ -18,14 +18,14 @@ export function query<T>(query: any): Promise<T[]> {
     .then(e => e.items.map(i => i.fields))
 }
 
-export class ContentFinder<T> {
+export class ContentFinder<T, K = string> {
   constructor(private type: string, private field_name: string) {}
 
-  find(value: string): Promise<T[]> {
+  find(value: K): Promise<T[]> {
     return query({ content_type: this.type, [`fields.${this.field_name}`]: value })
   }
 
-  get(value: string): Promise<T> {
+  get(value: K): Promise<T> {
     return this.find(value).then(list => list[0])
   }
 }