From f50bca125ded72326dba4791c358238ef0fddc43 Mon Sep 17 00:00:00 2001
From: Barry Low <barrylow@gmail.com>
Date: Thu, 4 Oct 2018 01:57:04 -0700
Subject: [PATCH] Incorporate team images in public team profiles

---
 .../views/teams/components/TeamsDetails.js    | 107 +++++++++++-------
 .../src/views/teams/components/TeamsItem.js   |  82 ++++++++------
 2 files changed, 115 insertions(+), 74 deletions(-)

diff --git a/client/src/views/teams/components/TeamsDetails.js b/client/src/views/teams/components/TeamsDetails.js
index 5383895b6..9351197d7 100644
--- a/client/src/views/teams/components/TeamsDetails.js
+++ b/client/src/views/teams/components/TeamsDetails.js
@@ -42,49 +42,76 @@ const styles = theme => ({
     maxWidth: 600,
     margin: '0 auto',
     padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
+  },
+  banner: {
+    maxWidth: '100%',
+    height: 'auto',
+    margin: '0 auto'
+  },
+  avatar: {
+    maxWidth: 100,
+    height: 100,
+    margin: '0  1em 1em 0',
+    float: 'left'
   }
 })
 
-const TeamsDetails = ({ classes, team }) => (
-  <React.Fragment>
-    <CssBaseline />
-    <main className={classes.layout}>
-      <Paper className={classes.paper}>
-        <div className={classes.heroContent}>
-          <Link to='/teams'>&larr; Back to all teams</Link>
-          <Typography
-            variant='display3'
-            align='center'
-            color='textPrimary'
-            gutterBottom
-          >
-            {team.name}
-          </Typography>
-          <Typography variant='subheading' color='textSecondary'>
-            {team.createdAt}
-          </Typography>
-          <Typography variant='subheading' color='textSecondary'>
-            Motto: {team.profile.motto}
-          </Typography>
-          <Typography variant='subheading' color='textSecondary'>
-            Description: {team.profile.description}
-          </Typography>
-          <Typography variant='subheading' paragraph gutterBottom>
-            Members: {team.members.length}
-          </Typography>
-          <Typography variant='subheading' color='primary'>
-            Team Admin:&nbsp;
-            {team.members.map(member => {
-              if (member.role === 'OWNER' || member.role === 'ADMIN') {
-                return member.member.alias
-              }
-            })}
-          </Typography>
-        </div>
-      </Paper>
-    </main>
-  </React.Fragment>
-)
+const TeamsDetails = ({ classes, team }) => {
+  let avatar
+  if (team.profile.avatar !== undefined && team.profile.avatar !== 'a') {
+    avatar = team.profile.avatar
+  } else {
+    avatar = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'
+  }
+  let banner
+  if (team.profile.banner !== undefined && team.profile.banner !== 'a') {
+    banner = team.profile.banner
+  } else {
+    banner = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'
+  }
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <main className={classes.layout}>
+        <Paper className={classes.paper}>
+          <div className={classes.heroContent}>
+            <Link to='/teams'>&larr; Back to all teams</Link>
+            <img src={banner} alt={team.name} className={classes.banner} />
+            <img src={avatar} alt={team.name} className={classes.avatar} />
+            <Typography
+              variant='display3'
+              align='center'
+              color='textPrimary'
+              gutterBottom
+            >
+              {team.name}
+            </Typography>
+            <Typography variant='subheading' color='textSecondary'>
+              {team.createdAt}
+            </Typography>
+            <Typography variant='subheading' color='textSecondary'>
+              Motto: {team.profile.motto}
+            </Typography>
+            <Typography variant='subheading' color='textSecondary'>
+              Description: {team.profile.description}
+            </Typography>
+            <Typography variant='subheading' paragraph gutterBottom>
+              Members: {team.members.length}
+            </Typography>
+            <Typography variant='subheading' color='primary'>
+              Team Admin:&nbsp;
+              {team.members.map(member => {
+                if (member.role === 'OWNER' || member.role === 'ADMIN') {
+                  return member.member.alias
+                }
+              })}
+            </Typography>
+          </div>
+        </Paper>
+      </main>
+    </React.Fragment>
+  )
+}
 TeamsDetails.propTypes = {
   classes: PropTypes.object.isRequired,
   team: PropTypes.object.isRequired
diff --git a/client/src/views/teams/components/TeamsItem.js b/client/src/views/teams/components/TeamsItem.js
index 9f0d78bf9..b82242757 100644
--- a/client/src/views/teams/components/TeamsItem.js
+++ b/client/src/views/teams/components/TeamsItem.js
@@ -12,40 +12,54 @@ import Typography from '@material-ui/core/Typography'
 
 import { Link } from 'react-router-dom'
 
-export const TeamsItem = ({ classes, team }) => (
-  <Grid item sm={6} md={4} lg={3}>
-    <Card className={classes.card}>
-      <CardActionArea>
-        <CardMedia
-          className={classes.cardMedia}
-          image='data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E' // eslint-disable-line max-len
-          title='Image title'
-        />
-        <CardContent className={classes.cardContent}>
-          <Typography gutterBottom variant='headline' component='h2'>
-            {team.name}
-          </Typography>
-          <Typography variant='caption' color='textSecondary'>
-            {team.createdAt}
-          </Typography>
-          <Typography variant='caption' paragraph gutterBottom>
-            Members: 1
-          </Typography>
-          <Typography variant='subheading' color='primary'>
-            Now recruiting!
-          </Typography>
-        </CardContent>
-      </CardActionArea>
-      <CardActions>
-        <Link to={`/teams/${team.slug}`}>
-          <Button size='small' color='primary' className={classes.buttonRight}>
-            Details
-          </Button>
-        </Link>
-      </CardActions>
-    </Card>
-  </Grid>
-)
+export const TeamsItem = ({ classes, team }) => {
+  /* let avatar
+  if (team.profile.avatar !== undefined && team.profile.avatar !== 'a') {
+    avatar = team.profile.avatar
+  } else {
+    avatar = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'
+  } */
+  let banner
+  if (team.profile.banner !== undefined && team.profile.banner !== null) {
+    banner = team.profile.banner
+  } else {
+    banner = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'
+  }
+  return (
+    <Grid item sm={6} md={4} lg={3}>
+      <Card className={classes.card}>
+        <CardActionArea>
+          <CardMedia
+            className={classes.cardMedia}
+            image={banner}
+            title={team.name}
+          />
+          <CardContent className={classes.cardContent}>
+            <Typography gutterBottom variant='headline' component='h2'>
+              {team.name}
+            </Typography>
+            <Typography variant='caption' color='textSecondary'>
+              {team.createdAt}
+            </Typography>
+            <Typography variant='caption' paragraph gutterBottom>
+              Members: 1
+            </Typography>
+            <Typography variant='subheading' color='primary'>
+              Now recruiting!
+            </Typography>
+          </CardContent>
+        </CardActionArea>
+        <CardActions>
+          <Link to={`/teams/${team.slug}`}>
+            <Button size='small' color='primary' className={classes.buttonRight}>
+              Details
+            </Button>
+          </Link>
+        </CardActions>
+      </Card>
+    </Grid>
+  )
+}
 
 TeamsItem.propTypes = {
   classes: PropTypes.object.isRequired,