sono finite le banane

src/TopBar.js

@@ -16,12 +16,12 @@ class TopBar extends Component {
 	state = {
 		query: ''
 	};
-	handleChange(event) {
+	handleChange = event => {
 		this.setState({
 			query: event.target.value
 		});
 	}
-	handleSubmit(event) {
+	handleSubmit = event => {
 		event.preventDefault();
 		event.target.reset();
 		this.props.history.push('/search/' + this.state.query);

src/areainfo/Suggestion.js

@@ -4,6 +4,8 @@ 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 Search from '../reccomenders/Search';
+
 // and so on..
 
 class Suggestion extends Component {
@@ -43,7 +45,8 @@ class Suggestion extends Component {
         </Col> */}
         <Col xs="10">
         <Switch>
-          
+        
+        <Route path='/search/:query' component={Search} />
         <Route path='/video/:id/random' component={Random} />
         {/* lasciare questo per ultimo */}
           <Route component={Related} /> 
@@ -54,8 +57,4 @@ class Suggestion extends Component {
   }
 }
 
-Suggestion.propTypes = {
-
-};
-
 export default Suggestion;

src/reccomenders/Search.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import axios from 'axios';
+
+class Search extends React.Component {
+
+    state = {
+        query: '',
+        res: null
+    }
+
+    static getDerivedStateFromProps(nextProps, prevState) {
+        if (nextProps.match.params.query !== prevState.query)
+            return { query: nextProps.match.params.query };
+        return null;
+    }
+
+    componentDidMount() {
+        this.youtubeSearch();
+    }
+
+    // shouldComponentUpdate(nextProps, nextState) {
+
+    // }
+
+    // componentDidUpdate(prevProps, prevState) {
+
+    // }
+
+    // componentWillUnmount() {
+
+    // }
+
+    youtubeSearch() {
+        axios.get('https://www.googleapis.com/youtube/v3/search', { //Richiesta per ottenere i commenti del video
+            params: {
+                'part': 'snippet',
+                'q': this.state.query,
+                'videoEmbeddable': 'true',
+                'type': 'video',
+                'maxResults': 30,
+                'topicId': '/m/04rlf, /m/02jjt',
+                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // process.env.APIKEY in production
+            }
+        }).then(
+            res => {
+                console.log(res.data)
+            },
+            error => {console.error(error)}
+        )
+    }
+
+    render() {
+        return (
+            <div>
+                <span>{this.state.query}  keyword</span>
+            </div>
+        );
+    }
+}
+
+export default Search;