From 6a8751370328dc069f8183473344bdd9a54b0808 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Mon, 5 Aug 2019 15:36:02 +0300
Subject: [PATCH] PersonCardList -> CardList + refactoring

---
 pages/collective.jsx                     | 10 ++++++----
 src/components/CardList.jsx              | 19 +++++++++++++++++++
 src/style/components/PersonCardList.scss |  7 -------
 src/style/style.scss                     |  1 -
 4 files changed, 25 insertions(+), 12 deletions(-)
 create mode 100644 src/components/CardList.jsx
 delete mode 100644 src/style/components/PersonCardList.scss

diff --git a/pages/collective.jsx b/pages/collective.jsx
index cde4d9ee..5c13c381 100644
--- a/pages/collective.jsx
+++ b/pages/collective.jsx
@@ -5,6 +5,7 @@ import App from '../src/components/App'
 import { Meta } from '../src/components/Meta'
 import { CollectiveImage } from '../src/components/CollectiveImage'
 import PersonCard from '../src/components/PersonCard'
+import {CardList} from '../src/components/CardList'
 import menuModel from '../src/models/menu'
 import { buildMenu } from '../src/lib/menu'
 import { meta } from '../src/lib/meta'
@@ -30,8 +31,9 @@ const Page = (props) => (
                 />
             )}
 
-            <div className="PersonCardList">
-                {props.persons.map((person, index) => (
+            <CardList
+                items={props.persons}
+                renderItem={(person, index) => (
                     <PersonCard
                         key={index}
                         profile={person}
@@ -39,8 +41,8 @@ const Page = (props) => (
                         url={person.url}
                         name={person.name}
                     />
-                ))}
-            </div>
+                )}
+            />
         </div>
     </App>
 )
diff --git a/src/components/CardList.jsx b/src/components/CardList.jsx
new file mode 100644
index 00000000..ba033e41
--- /dev/null
+++ b/src/components/CardList.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+export const CardList = props => (
+    <div className="CardList">
+        <style jsx>{`
+            .CardList {
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+
+                justify-content: space-between;
+            }
+        `}</style>
+
+        {props.items.map(
+            (item, index) => props.renderItem(item, index)
+        )}
+    </div>
+)
diff --git a/src/style/components/PersonCardList.scss b/src/style/components/PersonCardList.scss
deleted file mode 100644
index 5edd1c9a..00000000
--- a/src/style/components/PersonCardList.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.PersonCardList {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  justify-content: space-between;
-}
diff --git a/src/style/style.scss b/src/style/style.scss
index 1bf6eee3..b7a123cc 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -22,7 +22,6 @@
 
 @import "components/ArticleCardList";
 @import "components/ArticleTags";
-@import "components/PersonCardList";
 
 @import "main";
 @import "body-wrapper";