presque finis #6 vreste plus qu'a avoir un design propres

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

.gitignore

@@ -17,7 +17,6 @@
 
 # misc
 .DS_Store
-.env*
 
 # debug
 npm-debug.log*

components/FluxItem.jsx

@@ -1,15 +1,17 @@
 import React from 'react'
+import Link from 'next/link'
 
 export default class FluxItem extends React.Component {
 
 
 	render() {
+		const location = this.props.locations.find((el) => el.id === this.props.item.coinId)
 		return (
 			<div>
 				<img src={this.props.item.path} alt=""/>
 				<p>
-					<span>By <a href="#!">{this.props.item.pseudo}</a></span>
-					<span>At <a href="#!">{this.props.item.location}</a></span>
+					<span>By <Link as={`/flux?pseudo=${this.props.item.pseudo}`} href={`/flux?pseudo=${this.props.item.pseudo}`}><a>{this.props.item.pseudo}</a></Link></span>
+					<span>At <Link as={`/flux?location=${this.props.item.coinId}`} href={`/flux?location=${this.props.item.coinId}`}><a>{location.name}</a></Link></span>
 				</p>
 				<style jsx>{`
 					div {

pages/api/photos.js

@@ -42,7 +42,7 @@ export default async (req, res) => {
 			builder.pseudo = pseudo
 		}
 		if (location) {
-			builder.location =  parseInt(location)
+			builder.coinId =  parseInt(location)
 
 		}
 		res.end(JSON.stringify(await Photo.findAll(Object.keys(builder).length > 0 ? {where: builder} : undefined)))

pages/flux.jsx

@@ -5,20 +5,23 @@ 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()
-		return {data}
+		const data = await (await fetch(`${hostname}/api/photos${pseudo ? `?pseudo=${pseudo}${coindId && `&location=${coindId}` || ''}` : `${coindId && `?location=${coindId}` || ''}`}`)).json()
+		const locations = await (await fetch(`${hostname}/api/coins`)).json()
+		return {data, locations}
 	}
 
 	render() {
 		return (
 			<div>
 				{this.props.data.map((el, index) => (
-					<FluxItem key={index} item={el} />
+					<FluxItem key={index} item={el} locations={this.props.locations} />
 				))}
 			</div>
 		)