feat(cardCompoenent): adds a large cardComponent for single object view

final-version/src/modules/articles/components/article.component.js

@@ -8,7 +8,7 @@ export const Article = ({ id }) => {
   const articles = useArticlesSelector();
   const article = articles.find(item => item.slug === id);
 
-  return article ? <ArticleCard article={article} /> : null;
+  return article ? <ArticleCard article={article} size="L" /> : null;
 };
 
 Article.propTypes = {

final-version/src/modules/articles/components/articleCard.component.js

@@ -7,13 +7,14 @@ import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
-import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 
 import { makeStyles } from '@material-ui/core/styles';
 import { addToCart } from '../../cart/cart.actions';
 import { useCart } from '../../cart/cart.context';
 
+import { CardWrapper } from './cardWrapper.component';
+
 const useStyles = makeStyles({
   card: {
     height: '100%',
@@ -28,39 +29,56 @@ const useStyles = makeStyles({
   },
 });
 
-export function ArticleCard({ article }) {
-  const { name, year, image, slug } = article;
+const cardElementsBySize = {
+  S: {
+    hasViewButton: true,
+    hasDescription: false,
+  },
+  L: {
+    hasViewButton: false,
+    hasDescription: true,
+  },
+};
+
+export function ArticleCard({ article, size }) {
+  const { name, year, image, slug, description } = article;
+  const { hasViewButton, hasDescription } = cardElementsBySize[size];
+  const Wrapper = CardWrapper[size];
+
   const classes = useStyles();
   const [, dispatch] = useCart();
 
   const dispatchAddToCart = () => dispatch(addToCart(article));
 
   return (
-    <Grid item xs={12} sm={6} md={4}>
+    <Wrapper>
       <Card className={classes.card}>
         <CardMedia className={classes.cardMedia} image={image} title={name} />
         <CardContent className={classes.cardContent}>
           <Typography gutterBottom variant="h5" component="h2">
             {name}
           </Typography>
           <Typography>{year}</Typography>
+          {hasDescription && <Typography>{description}</Typography>}
         </CardContent>
         <CardActions>
           <Button onClick={dispatchAddToCart} size="small" color="secondary" variant="outlined">
             Add to Cart
           </Button>
-          <Button
-            size="small"
-            component={Link}
-            to={`/articles/${slug}`}
-            color="primary"
-            variant="outlined"
-          >
-            View
-          </Button>
+          {hasViewButton && (
+            <Button
+              size="small"
+              component={Link}
+              to={`/articles/${slug}`}
+              color="primary"
+              variant="outlined"
+            >
+              View
+            </Button>
+          )}
         </CardActions>
       </Card>
-    </Grid>
+    </Wrapper>
   );
 }
 
@@ -70,6 +88,8 @@ ArticleCard.propTypes = {
     year: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired,
     image: PropTypes.string.isRequired,
-    slug: PropTypes.string.isRequired,
+    slug: PropTypes.string,
+    description: PropTypes.string,
   }).isRequired,
+  size: PropTypes.string.isRequired,
 };

final-version/src/modules/articles/components/articlesList.component.js

@@ -2,17 +2,15 @@ import React from 'react';
 
 import Grid from '@material-ui/core/Grid';
 
-import { ArticleCard } from './articleCard.component';
-
 import { useArticlesSelector } from '../articles.selectors';
+import { ArticleCard } from './articleCard.component';
 
 export function ArticlesList() {
   const articles = useArticlesSelector();
-
   return (
     <Grid container spacing={4}>
       {articles.map(article => (
-        <ArticleCard key={article.id} article={article} />
+        <ArticleCard key={article.id} article={article} size="S" />
       ))}
     </Grid>
   );

final-version/src/modules/articles/components/cardWrapper.component.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Grid from '@material-ui/core/Grid';
+
+const LargeCardWrapper = ({ children }) => (
+  <Grid item xs={12}>
+    {children}
+  </Grid>
+);
+
+LargeCardWrapper.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+const SmallCardWrapper = ({ children }) => (
+  <Grid item xs={12} sm={6} md={4}>
+    {children}
+  </Grid>
+);
+
+SmallCardWrapper.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+export const CardWrapper = {
+  S: SmallCardWrapper,
+  L: LargeCardWrapper,
+};