fix: display space description in media card

closes #57

Author: juancarlosfarah

src/components/common/MediaCard.js

@@ -30,7 +30,7 @@ const MediaCard = props => {
         <Typography gutterBottom variant="h5" component="h2">
           {name}
         </Typography>
-        <Typography component="p">{text}</Typography>
+        <Typography component="p" dangerouslySetInnerHTML={{ __html: text }} />
       </CardContent>
       <CardActions>{button}</CardActions>
     </Card>
@@ -41,8 +41,12 @@ MediaCard.propTypes = {
   classes: PropTypes.shape({ media: PropTypes.string.isRequired }).isRequired,
   name: PropTypes.string.isRequired,
   image: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
+  text: PropTypes.string,
   button: PropTypes.shape(Button).isRequired,
 };
 
+MediaCard.defaultProps = {
+  text: '',
+};
+
 export default withStyles(styles)(MediaCard);

src/components/space/SpaceGrid.js

@@ -81,7 +81,7 @@ class SpaceGrid extends Component {
     const { spaces, classes, history } = this.props;
 
     const MediaCards = spaces.map(space => {
-      const { id, name, image = {}, text } = space;
+      const { id, name, image = {}, description } = space;
       const { replace } = history;
       const ViewButton = (
         <Button
@@ -90,6 +90,7 @@ class SpaceGrid extends Component {
           color="primary"
           id={Number(id)}
           onClick={() => replace(`/space/${id}`)}
+          fullWidth
         >
           <RemoveRedEyeIcon className={classes.leftIcon} />
           View
@@ -101,7 +102,7 @@ class SpaceGrid extends Component {
             key={id}
             name={name}
             image={this.generateThumbnail({ image })}
-            text={text}
+            text={description}
             button={ViewButton}
           />
         </Grid>