From 9fb815081cce30ce335e5ab47bb215f1bd3953e1 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Thu, 17 Oct 2019 12:28:32 +0300
Subject: [PATCH] ArticleCard image refactoring

---
 src/components/ArticleCard/index.tsx | 21 ++++++++++++++-------
 src/components/ArticleCardList.jsx   | 21 +++++++++++++++------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/components/ArticleCard/index.tsx b/src/components/ArticleCard/index.tsx
index 1d364e38..b414bd07 100644
--- a/src/components/ArticleCard/index.tsx
+++ b/src/components/ArticleCard/index.tsx
@@ -6,11 +6,18 @@ const Date = ({ children }) => (
     <p className="date">{dateFormat(children)}</p>
 )
 
-export interface IArticleCardProps {
-    article: any
+interface IImage {
+    alt: string
+    src: string
+    srcSet: Array<{ url: string, density: number }>
 }
 
-export const ArticleCard: React.FC<IArticleCardProps> = ({ article }) => (
+export interface IArticleCardProps {
+    article: any
+    preview?: IImage
+}
+
+export const ArticleCard: React.FC<IArticleCardProps> = ({ article, ...props }) => (
     <section className="ArticleCard">
         <style jsx>{`
             .ArticleCard {
@@ -105,13 +112,13 @@ export const ArticleCard: React.FC<IArticleCardProps> = ({ article }) => (
 
         <a className="invisible" href={article.url}>
             <div className="ArticleCard-image">
-                {!article.preview ? null : (
+                {!props.preview ? null : (
                     <picture>
                         <img
                             className={cx({ opa: false })}
-                            alt={article.title}
-                            src={article.preview.src}
-                            srcSet={article.preview.set.map(({ url, density }) => `${url} ${density}x`)}
+                            alt={props.preview.alt}
+                            src={props.preview.src}
+                            srcSet={props.preview.srcSet.map(({ url, density }) => `${url} ${density}x`).join(' ')}
                         />
                     </picture >
                 )}
diff --git a/src/components/ArticleCardList.jsx b/src/components/ArticleCardList.jsx
index c9f5bf24..9ee7f704 100644
--- a/src/components/ArticleCardList.jsx
+++ b/src/components/ArticleCardList.jsx
@@ -17,12 +17,21 @@ export const ArticleCardList = ({ articles, nextPage, prevPage }) => (
         )}
 
         <div className={'body'}>
-            {articles.map((article, i) => (
-                <ArticleCard
-                    key={i}
-                    article={article}
-                />
-            ))}
+            {articles.map((article, i) => {
+                const preview = {
+                    alt: article.title,
+                    src: article.preview.src,
+                    srcSet: article.preview.set,
+                }
+
+                return (
+                    <ArticleCard
+                        key={i}
+                        article={article}
+                        preview={preview}
+                    />
+                )
+            })}
         </div>
 
         {!nextPage ? null : (