v2.0.5 - Update to Orange & Add Meet Us

package.json

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

src/App.tsx

@@ -27,6 +27,7 @@ export default class App extends Component<AppProps> {
               <Route exact path="/friends-and-family" component={Routes.FriendsAndFamily} />
               <Route exact path="/giving" component={Routes.Giving} />
               <Route exact path="/shop-bc" component={Routes.ShopBC} />
+              <Route exact path="/meet-us" component={Routes.MeetUs} />
               <Route exact path="/newsletter" component={Routes.Newsletter} />
               <Route exact path="/sermons/:id" component={Routes.Sermon} />
               <Route exact path="/sermons" component={Routes.Sermons} />

src/components/footer.tsx

@@ -71,6 +71,7 @@ class Footer extends React.PureComponent<FooterProps, {}> {
             <Typography className="header" variant="h4">About</Typography>
 
             <Links.OurStory />
+            <Links.MeetUs />
             <Links.Location />
             <Links.Sermons />
             <Links.FriendsFam />

src/components/links.tsx

@@ -52,6 +52,7 @@ export const Sermons      = () => (<Link link='/sermons' icon='video_library'>Se
 export const Giving       = () => (<Link link='/giving' icon='attach_money'>Giving</Link>)
 export const Location     = () => (<Link link='/location' icon='place'>Location</Link>)
 export const Serve        = () => (<Link link='/serve' icon='pan_tool'>Serve</Link>)
+export const MeetUs       = () => (<Link link='/meet-us' icon='people'>Meet Us</Link>)
 export const Newsletter   = () => (<Link link='/newsletter' icon='email'>Newsletter</Link>)
 export const FriendsFam   = () => (<Link link='/friends-and-family' icon='group_add'>Friends &amp; Family</Link>)
 export const ShopBC       = () => (<Link link='/shop-bc' icon='shopping_cart'>Shop BC</Link>)

src/components/nav.tsx

@@ -81,6 +81,7 @@ class Nav extends React.PureComponent<NavProps, NavState> {
         <Links.Home />
 
         <Links.OurStory />
+        <Links.MeetUs />
         <Links.GetConnected />
         <Links.Sermons />
         <Links.Giving />

src/components/staff-card.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Card, CardHeader, CardMedia, CardContent, Typography, Link } from '@material-ui/core'
+import { createStyles, withStyles, WithStyles } from '@material-ui/styles';
+import { StaffInfo } from '../services/staff'
+
+const styles = createStyles({
+  root: {
+    maxWidth: '300px',
+    margin: '12px',
+    flex: '100%',
+    textDecoration: 'none',
+
+    '& .media': {
+      height: '300px',
+    },
+
+    '& .desc': {
+      overflow: 'hidden',
+      display: '-webkit-box',
+      WebkitLineClamp: 4,
+      WebkitBoxOrient: 'vertical'
+    }
+  }
+})
+
+export interface StaffCardProps extends WithStyles<typeof styles> {
+  info: StaffInfo
+}
+
+class StaffCard extends React.PureComponent<StaffCardProps, {}> {
+
+  render() {
+    return (
+      <Card className={this.props.classes.root}>
+        <CardMedia image={ this.props.info.picture.fields.file.url } className="media"/>
+        <CardHeader title={this.props.info.name} subheader={this.props.info.title} />
+        <CardContent>
+          <Link href={`mailto:${this.props.info.email}`}>{this.props.info.email}</Link>
+        </CardContent>
+      </Card>
+    )
+  }
+}
+
+export default withStyles(styles)(StaffCard)

src/pages/index.ts

@@ -5,6 +5,7 @@ export { default as Location } from './location'
 export { default as Connect } from './connect'
 export { default as FriendsAndFamily } from './friends-and-family'
 export { default as Giving } from './giving'
+export { default as MeetUs } from './meet-us'
 export { default as Newsletter } from './newsletter'
 export { default as Sermon } from './sermon'
 export { default as Sermons } from './sermons'

src/pages/meet-us.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { Typography } from '@material-ui/core'
+import { createStyles, withStyles, WithStyles } from '@material-ui/styles';
+import Page from '../components/page'
+import { list, StaffInfo } from '../services/staff'
+import Box from '../components/box'
+import Hero from '../components/hero'
+import StaffCard from '../components/staff-card'
+
+const styles = createStyles({
+  header: {
+    color: 'white'
+  },
+
+  list: {
+    display: 'flex',
+    flexFlow: 'row wrap',
+    justifyContent: 'center'
+  }
+})
+
+interface MeetUsState {
+  staff: StaffInfo[] 
+}
+
+class MeetUs extends React.PureComponent<WithStyles<typeof styles>, MeetUsState> {
+  state = { staff: [] as StaffInfo[] }
+
+  componentDidMount() {
+    list().then(staff => {
+      this.setState({ staff })
+    })
+  }
+
+  render() {
+
+    return (
+      <Page>
+        <Hero media="meetUs" height={0.3} shade={0.4}>
+          <Typography className={this.props.classes.header} variant="h1">Meet Us</Typography>
+        </Hero>
+        <Box className={this.props.classes.list}>
+          { this.state.staff.map(info => { return (<StaffCard key={info.name} info={info} />) }) }
+        </Box>
+      </Page>
+    )
+  }
+}
+
+export default withStyles(styles)(MeetUs)

src/services/staff.ts

@@ -0,0 +1,17 @@
+import { query, Asset } from './contentful'
+
+export interface StaffInfo {
+  name: string
+  title: string
+  email: string
+  order: number
+  about?: any
+  picture: Asset
+}
+
+export function list(): Promise<StaffInfo[]> {
+  return query<StaffInfo>({content_type: 'staffCard'})
+  .then(staff => {
+    return staff.sort((a, b) => a.order - b.order)
+  })
+}

src/theme.ts

@@ -14,7 +14,7 @@ const accentFontFamily = `'Roboto', sans-serif`
 export default
   createMuiTheme({
     palette: {
-      primary: cyan,
+      primary: orange,
       secondary: {
         main: orange[500],
         light: orange[200],