From 49cdcfeb74489ee9c696a5c6d628aacc845db2cd Mon Sep 17 00:00:00 2001
From: matteo <matteoscorzafava@gmail.com>
Date: Sun, 20 Jan 2019 18:45:00 +0100
Subject: [PATCH] area suggestion

---
 node-entry.js               |  2 ++
 src/App.js                  |  2 +-
 src/TopBar.js               | 28 +++++++++-------------------
 src/VideoInfo.js            |  4 ++--
 src/VideoList.js            |  6 +++---
 src/areainfo/Suggestion.js  | 10 ++++++++--
 src/reccomenders/Random.js  |  6 +++---
 src/reccomenders/Related.js |  2 +-
 8 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/node-entry.js b/node-entry.js
index 989633d..f55b249 100644
--- a/node-entry.js
+++ b/node-entry.js
@@ -1,3 +1,5 @@
+process.env['NODE_ENV'] = 'development';
+process.env.APIKEY = 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig';
 const express = require('express');
 const compression = require('compression')
 const bodyParser = require('body-parser');
diff --git a/src/App.js b/src/App.js
index 2a51fca..df2b297 100644
--- a/src/App.js
+++ b/src/App.js
@@ -78,7 +78,7 @@ static getDerivedStateFromProps(nextProps, prevState) {
 						</Collapse>
 					</Col>
 				</ReactHeight>
-				<Row style={{ "max-height": `calc(99vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
+				<Row style={{ "max-height": `calc(98vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
 					<Switch>
 						<Route exact path='/' component={VideoList} />
 						<Route path={["/video/:id", "/search/:query"]} component={Suggestion} />
diff --git a/src/TopBar.js b/src/TopBar.js
index 227358b..d6e3f4a 100644
--- a/src/TopBar.js
+++ b/src/TopBar.js
@@ -13,15 +13,9 @@ import './reccomenders/fvitali'
 // import PropTypes from "prop-types";
 
 class TopBar extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			query: ''
-		};
-		this.handleChange = this.handleChange.bind(this);
-		this.handleSubmit = this.handleSubmit.bind(this);
-	}
-
+	state = {
+		query: ''
+	};
 	handleChange(event) {
 		this.setState({
 			query: event.target.value
@@ -30,7 +24,7 @@ class TopBar extends Component {
 	handleSubmit(event) {
 		event.preventDefault();
 		event.target.reset();
-		this.props.history.push('/search/'+this.state.query);
+		this.props.history.push('/search/' + this.state.query);
 	}
 	render() {
 		return (
@@ -43,15 +37,11 @@ class TopBar extends Component {
 					<Navbar.Collapse id="basic-navbar-nav">
 						<Nav className="mr-auto">
 							<Link to="/" className="text-light nav-link">Home</Link>
-							<Link to={{
-    							pathname: "/fvitali",
-    							search: "?sort=name",
-   								hash: "#the-hash",
-    							state: { fromDashboard: true }
-  							}} className="text-light nav-link">Vitali</Link>
-							<Link to="/link" className="text-light nav-link">Recent</Link>
-							<Link to="/link" className="text-light nav-link">Random</Link>
-							<Link to="/link" className="text-light nav-link">Related</Link>
+							<Link to={{	pathname: `/video/${localStorage['lastId']}/vitali` }} 
+								className="text-light nav-link">Vitali</Link>
+							<Link to={{	pathname: `/video/${localStorage['lastId']}/recent` }}  className="text-light nav-link">Recent</Link>
+							<Link to={{	pathname: `/video/${localStorage['lastId']}/random` }}  className="text-light nav-link">Random</Link>
+							<Link to={{	pathname: `/video/${localStorage['lastId']}/related` }}  className="text-light nav-link">Related</Link>
 							{ <NavDropdown title="Similarity" id="basic-nav-dropdown" >
 								<NavDropdown.Item href="#action/3.1">
 									Artist
diff --git a/src/VideoInfo.js b/src/VideoInfo.js
index 5cf6d72..04a8d8d 100644
--- a/src/VideoInfo.js
+++ b/src/VideoInfo.js
@@ -93,14 +93,14 @@ class VideoInfo extends React.Component {
                 params: {
                     'part': 'snippet,contentDetails,statistics,topicDetails',
                     'id': this.state.videoId,
-                    'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+                    'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // process.env.APIKEY in production
                 }
             }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
                 params: {
                     'part': 'snippet',
                     'videoId': this.state.videoId,
                     'order': 'relevance',
-                    'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+                    'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // process.env.APIKEY in production
                 }
             })])
             .then(axios.spread((videosResponse, commentThreadResponse) => {
diff --git a/src/VideoList.js b/src/VideoList.js
index 828db6b..05e7f7c 100644
--- a/src/VideoList.js
+++ b/src/VideoList.js
@@ -47,7 +47,7 @@ class VideoList extends React.Component {
 					params: {
 						part: 'snippet',
 						id: idToLookFor.slice(0, 50).toString(),
-						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
+						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', // process.env.APIKEY in production
 						fields: 'items(id,snippet/thumbnails/medium)'
 					}
 				}),
@@ -56,7 +56,7 @@ class VideoList extends React.Component {
 					params: {
 						part: 'snippet',
 						id: idToLookFor.slice(50, 100).toString(),
-						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
+						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', // process.env.APIKEY in production
 						fields: 'items(id,snippet/thumbnails/medium)'
 					}
 				}),
@@ -65,7 +65,7 @@ class VideoList extends React.Component {
 					params: {
 						part: 'snippet',
 						id: idToLookFor.slice(100, finalChunk).toString(),
-						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
+						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', // process.env.APIKEY in production
 						fields: 'items(id,snippet/thumbnails/medium)'
 					}
 				})
diff --git a/src/areainfo/Suggestion.js b/src/areainfo/Suggestion.js
index 922e144..123c588 100644
--- a/src/areainfo/Suggestion.js
+++ b/src/areainfo/Suggestion.js
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Row, Col, Button, Collapse } from 'react-bootstrap'; 
+import { Switch, Route } from 'react-router';
 // import Random from './reccomenders/Random';
-// import Related from './reccomenders/Related';
+import Related from '../reccomenders/Related';
 // and so on..
 
 class Suggestion extends Component {
@@ -31,7 +32,7 @@ class Suggestion extends Component {
     let a =['','','','','','','','','','',''];
     return (
       <React.Fragment>
-        <Col xs="10">
+        {/* <Col xs="10">
           <Row>
             {a.map((x,i) => <Col xs={{'span': 10, 'offset': 1}} className="mt-1 border border-danger">- video {i}</Col>)}
           </Row>
@@ -39,6 +40,11 @@ class Suggestion extends Component {
         <Col className="mt-1 mr-2 border border-danger">
         {a.map((x,i) => i)}
         ?? box utile o superfluo?
+        </Col> */}
+        <Col xs="10">
+        <Switch>
+          <Route path='/video/:id/related' component={Related} />
+        </Switch>
         </Col>
       </React.Fragment>
     );
diff --git a/src/reccomenders/Random.js b/src/reccomenders/Random.js
index 3dbec24..2772464 100644
--- a/src/reccomenders/Random.js
+++ b/src/reccomenders/Random.js
@@ -16,8 +16,8 @@ class RecommenderRandom extends Component{
     componentDidMount(){
         let pos = Math.floor(Math.random() * 500);
         let pageToken = createpageToken(pos); /* createPageToken(pos) restituisce il pageToken relativo al numero
-                                                 di pagina che gli viene passato(in questo caso pos) che verrai poi usato
-                                                 come paramentro da axios per ottenere una determinata pagina di risultati */
+                                                di pagina che gli viene passato(in questo caso pos) che verrai poi usato
+                                                come paramentro da axios per ottenere una determinata pagina di risultati */
 
         axios.get("https://www.googleapis.com/youtube/v3/search", {
             params: {
@@ -26,7 +26,7 @@ class RecommenderRandom extends Component{
                 'type' : 'video',       //che contiene tutti i generi di musica
                 'maxResults': '21',
                 'pageToken' : pageToken,
-                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // process.env.APIKEY in production
             }
         }).then(
             response => {
diff --git a/src/reccomenders/Related.js b/src/reccomenders/Related.js
index 197e9a3..b1c3529 100644
--- a/src/reccomenders/Related.js
+++ b/src/reccomenders/Related.js
@@ -28,7 +28,7 @@ class Related extends Component {
                 'relatedToVideoId' : this.state.videoId,
                 'type' : 'video',
                 'maxResults' : '21',
-                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // process.env.APIKEY in production
             }
         }).then(
             response => {