area suggestion

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');

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} />

src/TopBar.js

@@ -13,15 +13,9 @@ import './reccomenders/fvitali'
 // import PropTypes from "prop-types";
 
 class TopBar extends Component {
-	constructor(props) {
+	state = {
-		super(props);
+		query: ''
-		this.state = {
+	};
-			query: ''
-		};
-		this.handleChange = this.handleChange.bind(this);
-		this.handleSubmit = this.handleSubmit.bind(this);
-	}
-
 	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={{
+							<Link to={{	pathname: `/video/${localStorage['lastId']}/vitali` }} 
-    							pathname: "/fvitali",
+								className="text-light nav-link">Vitali</Link>
-    							search: "?sort=name",
+							<Link to={{	pathname: `/video/${localStorage['lastId']}/recent` }}  className="text-light nav-link">Recent</Link>
-   								hash: "#the-hash",
+							<Link to={{	pathname: `/video/${localStorage['lastId']}/random` }}  className="text-light nav-link">Random</Link>
-    							state: { fromDashboard: true }
+							<Link to={{	pathname: `/video/${localStorage['lastId']}/related` }}  className="text-light nav-link">Related</Link>
-  							}} 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>
 							{ <NavDropdown title="Similarity" id="basic-nav-dropdown" >
 								<NavDropdown.Item href="#action/3.1">
 									Artist

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) => {

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)'
 					}
 				})

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>
     );

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
+                                                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 */
+                                                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 => {

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 => {