#7 done (c'est moche mais TG)

Signed-off-by: Avior <florian.bouillon@delta-wings.net>

components/CoinItem.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import Link from 'next/link'
+
+export default class CoinItem extends React.Component {
+
+
+	render() {
+		console.log(this.props.photos)
+		return (
+			<div>
+				<p>Coin {this.props.item.name}</p>
+				<ul>
+					{this.props.photos.map((el, index) => (
+						<>
+							<li>
+								<img src={el.path} alt={`photo by ${el.pseudo}`} key={index} />
+							</li>
+						</>
+					))}
+					<li>
+							<Link href={`/flux?location=${this.props.item.id}`} as={`/flux?location=${this.props.item.id}`}>
+								<a>
+									Voir plus de photos
+								</a>
+							</Link>
+						</li>
+				</ul>
+				<style jsx>{`
+					div {
+						width: 94%;
+						display: flex;
+						flex-direction: column;
+						flex-wrap: nowrap;
+						padding: 2%;
+						margin: 2%;
+						border: 1px solid black;
+						border-radius: 8px;
+					}
+					ul {
+						display flex;
+						flex-direction: row;
+						justify-content: space-between;
+						list-style-type: none;
+					}
+					li {
+						margin: 10px;
+					}
+					img {
+						height: 175px
+					}
+					p {
+						border-bottom: 1px dashed black;
+						padding: 2%;
+					}
+				`}</style>
+			</div>
+		)
+	}
+}

pages/coins.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import CoinItem from '../components/CoinItem'
+import fetch from 'isomorphic-unfetch'
+
+export default class Flux extends React.Component {
+
+	static async getInitialProps(ctx) {
+		const coindId = ctx.query.location
+		const pseudo = ctx.query.pseudo
+		let hostname = ''
+		if (ctx.req) {
+			hostname = `http://${ctx.req.headers.host}`
+
+		}
+		const data = await (await fetch(`${hostname}/api/photos`)).json()
+		const locations = await (await fetch(`${hostname}/api/coins`)).json()
+		return {data, locations}
+	}
+
+	render() {
+		return (
+			<div>
+				{this.props.locations.map((el, index) => {
+					// console.log(el, this.props.data.filter((item) => item.coinId == el.id))
+					return (
+						<CoinItem key={index} item={el} photos={this.props.data.filter((item) => item.coinId == el.id)} />
+					)
+				})}
+			</div>
+		)
+	}
+}