From 8aa30868ced7f729881418ea791a1e773d1e5359 Mon Sep 17 00:00:00 2001
From: christalib <piks3l@mailoo.org>
Date: Fri, 4 Oct 2019 11:37:34 +0200
Subject: [PATCH] finished react 10 -- need review on the css

---
 react/8/pics/src/components/ImageCard.js  | 34 +++++++++++++++++++++++
 react/8/pics/src/components/ImageList.js  |  6 ++--
 react/8/pics/src/components/imageList.css | 10 +++++++
 3 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 react/8/pics/src/components/ImageCard.js
 create mode 100644 react/8/pics/src/components/imageList.css

diff --git a/react/8/pics/src/components/ImageCard.js b/react/8/pics/src/components/ImageCard.js
new file mode 100644
index 0000000..66dbc1a
--- /dev/null
+++ b/react/8/pics/src/components/ImageCard.js
@@ -0,0 +1,34 @@
+import React from 'react'
+
+class ImageCard extends React.Component {
+    constructor(props) {
+        super(props)
+
+        this.state = { spans: 0 }
+
+        this.imageRef = React.createRef()
+    }
+
+    componentDidMount() {
+        this.imageRef.current.addEventListener('load', this.setSpans)
+    }
+
+    setSpans = () => {
+        const height = this.imageRef.current.clientHeight
+
+        const spans = Math.ceil(height / 150 + 1)
+
+        this.setState({ spans })
+    }
+
+    render() {
+        const { description, urls } = this.props.image
+        return (
+            <div style={{ gridRowEnd: `span ${this.state.spans}` }}>
+                <img ref={this.imageRef} src={urls.regular} alt={description} />
+            </div>
+        )
+    }
+}
+
+export default ImageCard
\ No newline at end of file
diff --git a/react/8/pics/src/components/ImageList.js b/react/8/pics/src/components/ImageList.js
index b979934..c77959e 100644
--- a/react/8/pics/src/components/ImageList.js
+++ b/react/8/pics/src/components/ImageList.js
@@ -1,11 +1,13 @@
 import React from 'react'
+import ImageCard from './ImageCard'
+import './imageList.css'
 
 const ImageList = (props) => {
     const images = props.images.map((image) => {
-        return <img key={image.id} src={image.urls.regular} alt={image.description} />
+        return <ImageCard key={image.id} image={image} />
     })
 
-    return <div>{images}</div>
+    return <div className="image-list">{images}</div>
 }
 
 export default ImageList 
\ No newline at end of file
diff --git a/react/8/pics/src/components/imageList.css b/react/8/pics/src/components/imageList.css
new file mode 100644
index 0000000..92eb588
--- /dev/null
+++ b/react/8/pics/src/components/imageList.css
@@ -0,0 +1,10 @@
+.image-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    grid-gap: 0 10px;
+    grid-auto-rows: 100px;
+}
+
+.image-list img {
+    width: 250px;
+}
\ No newline at end of file