Aggiornato reccomender Related

src/reccomenders/Random.js

@@ -6,12 +6,10 @@ import {Link} from "react-router-dom";
 import moment from "moment";
 
 class RecommenderRandom extends Component{
-    constructor(props){
-        super(props);
-        this.state={
+    state={
             items : [],
-        };
-    }
+        }
+
 
 
     ISO_8601parse(a) {
@@ -59,7 +57,7 @@ class RecommenderRandom extends Component{
                                 >
                                     <Card.Img
                                         src={item.snippet.thumbnails.high.url}
-                                        alt={'Thumbnail of ' + item.title}
+                                        alt={'Thumbnail of ' + item.snippet.title}
                                     />
                                     <Card.ImgOverlay>
                                         <Card.Title className="bg-dark d-inline text-white">

src/reccomenders/Related.js

@@ -6,33 +6,23 @@ import moment from "moment";
 
 
 class Related extends Component {
-    constructor(props) {
-        super(props);
-        this.state={
-            videoId : '0J2QdDbelmY',
+    state={
+            videoId : localStorage['lastId'],
             items : []
         }
-    }
+
 
     ISO_8601parse(a) {
         return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
     }
-    componentWillMount() {
-        if(this.props.match.params.id){
-            if(this.props.match.params.id === this.state.videoId){}
-            else{
-                this.setState({videoId: this.props.match.params.id});
-            }
-        }
-    }
 
     componentDidMount() {
         axios.get("https://www.googleapis.com/youtube/v3/search",{
             params:{
                 'part': 'snippet',
-                'relatedToVideoId' : this.state.videoId,
+                'relatedToVideoId' : this.props.match.params.id,
                 'type' : 'video',
-                'maxResults' : '21',
+                'maxResults' : '22',
                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
             }
         }).then(
@@ -40,7 +30,6 @@ class Related extends Component {
                 this.setState({
                     items: response.data.items,
                 })
-                console.log(response);
             },
             error => {
                 console.error(error);
@@ -48,10 +37,26 @@ class Related extends Component {
         )
     }
 
-    componentWillUpdate(nextProps, nextState) {
-        if(nextProps.match.params.id === this.state.videoId){}
-        else if( nextProps.match.params.id){
-            this.setState({videoId: nextProps.match.params.id});
+    componentDidUpdate(prevProps,prevState){
+        if (prevProps.match.params.videoId !== this.state.videoId){
+            axios.get("https://www.googleapis.com/youtube/v3/search",{
+                params:{
+                    'part': 'snippet',
+                    'relatedToVideoId' : this.props.match.params.id,
+                    'type' : 'video',
+                    'maxResults' : '22',
+                    'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+                }
+            }).then(
+                response => {
+                    this.setState({
+                        items: response.data.items,
+                    })
+                },
+                error => {
+                    console.error(error);
+                }
+            )
         }
     }
 
@@ -70,13 +75,12 @@ class Related extends Component {
                                 >
                                     <Card.Img
                                         src={item.snippet.thumbnails.high.url}
-                                        alt={'Thumbnail of ' + item.title}
+                                        alt={'Thumbnail of ' + item.snippet.title}
                                     />
                                     <Card.ImgOverlay>
                                         <Card.Title className="bg-dark d-inline text-white">
                                             {item.snippet.title}<br/>
                                             {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
-
                                         </Card.Title>
                                     </Card.ImgOverlay>
                                 </Link>