che palle

db.json

@@ -0,0 +1,44 @@
+{
+  "videos": [
+    {
+      "id": "cu3K1njbYqs",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:43:18.202Z"
+    },
+    {
+      "id": "PoSbnAFvqfA",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:43:24.851Z"
+    },
+    {
+      "id": "rzeLynj1GYM",
+      "timesWatched": 2,
+      "lastWatched": "2018-12-02T20:43:45.916Z"
+    },
+    {
+      "id": "0J2QdDbelmY",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:49:32.498Z"
+    },
+    {
+      "id": "unRjK82bDLw",
+      "timesWatched": 2,
+      "lastWatched": "2018-12-02T20:49:50.769Z"
+    },
+    {
+      "id": "g2N0TkfrQhY",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:52:07.780Z"
+    },
+    {
+      "id": "EM4vblG6BVQ",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:52:43.282Z"
+    },
+    {
+      "id": "tPwqOWK6EFw",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:53:26.049Z"
+    }
+  ]
+}

node-entry.js

@@ -1,14 +1,69 @@
 const express = require('express');
-const app = express();
+const bodyParser = require('body-parser');
+const low = require('lowdb');
+const lodashId = require('lodash-id');
+const FileAsync = require('lowdb/adapters/FileAsync');
+const app = express(); // app is an instance of express
 
-app.use(express.static(__dirname + '/build'));
+app.use(bodyParser.urlencoded({ extended: false })) // parse application/x-www-form-urlencoded
+app.use(bodyParser.json()) // parse application/json
+app.use(express.static(__dirname + '/build')); // serve static build site
 
-app.get('/test/:id', (req, res) => {
-	// req.params.id
-	// new wiki().page(req.params.id)
-	// .then(page => page.fullInfo())
-	// .then(parsed => res.send(parsed));
-	res.send({ok:req.params.id});
-});
+// Create database instance and start server
+// const adapter = new FileAsync(__dirname + '/db.json');
+low(new FileAsync(__dirname + '/db.json')) // production
+// low(new FileAsync('/tmp/db.json')) // dev
+	.then(db => {
+		db._.mixin(lodashId);
+		// DATABASE ROUTES 
 
-app.listen(8000, () => console.log('listen on 8000'));
+// ==============
+
+		app.post('/test',(req,res)=>{
+					// "reason": {
+				// 	"fitali": req.body.reason.toString() === "fvitali" ? 1:0,
+				// 	"": req.body.reason.toString() === "" ? 1:0,
+				// 	"": req.body.reason.toString() === "" ? 1:0,
+				// }
+			// try {
+			// 	let test = table.updateById(req.body.id, { })
+			// }
+			// catch(e) {
+			// }
+			res.send(req.body);
+		});
+
+// ==============
+
+		// GET /videotrack/:id? 
+		app.get('/videotrack/:id?', (req, res) => {
+			const videos = db.get('videos');
+			req.params.id ?	res.send(videos.getById(req.params.id).value())	:	res.send(videos.value())
+		});
+
+		// POST /videotrack
+		app.post('/videotrack', (req, res) => {
+			const videos =	db.get('videos');
+			const row = videos.getById(req.body.id);			
+			if(row.value()) {
+				row
+				.update('timesWatched',(n) => ++n)
+				.update('lastWatched',() => new Date().toISOString())
+				.write()
+				.then(output => res.send(output))
+			} else {
+				let newRow = {
+					"id": req.body.id.toString(), 
+					"timesWatched": 1,
+					"lastWatched": new Date().toISOString(),
+				}
+				videos.push(newRow).last().write().then(output => res.send(output))
+			}
+		});
+		
+		// Set db default values
+		return db.defaults({ videos: [] }).write();
+	})
+	.then(() => {
+		app.listen(8000, () => console.log('listen on 8000')); // bind to port 8000 as required from specs
+	});

package.json

@@ -3,24 +3,31 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@c0b41/ytclear": "^1.0.0",
-    "axios": "^0.18.0",
+    "axios": "latest",
+    "body-parser": "^1.18.3",
     "bootstrap": "^4.1.3",
     "express": "^4.16.4",
+    "lodash-id": "^0.14.0",
+    "lowdb": "^1.0.0",
+    "moment": "^2.23.0",
+    "moment-duration-format": "^2.2.2",
     "react": "^16.6.1",
     "react-app-polyfill": "^0.1.3",
     "react-bootstrap": "^1.0.0-beta.2",
     "react-dom": "^16.6.1",
+    "react-height": "^3.0.0",
+    "react-linkify": "^0.2.2",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "react-youtube": "^7.8.0",
-    "wikidata-sdk": "^5.15.9",
-    "wikijs": "^4.8.1"
+    "wikijs": "^4.8.1",
+    "youtube-page-token": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "node": "npm run build && node ./node-entry.js",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

public/index.html

@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>HazeTv</title>
+    <title>react-4</title>
   </head>
   <body>
     <noscript>

src/App.js

@@ -1,30 +1,68 @@
 import React from 'react';
-import { Route, Switch, Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
-import 'bootstrap/dist/css/bootstrap.css'; // eslint-disable-line no-unused-vars
-import { Row, Col } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
-import VideoList from './VideoList'; // eslint-disable-line no-unused-vars
-import TopBar from './TopBar'; // eslint-disable-line no-unused-vars
-import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
+import { Route, Switch } from 'react-router-dom'; 
+import 'bootstrap/dist/css/bootstrap.css'; 
+import { Row, Col, Button, Collapse } from 'react-bootstrap'; 
+import TopBar from './TopBar'; 
+import VideoPlayer from './VideoPlayer'; 
 import VideoInfo from './VideoInfo';
+import VideoList from './VideoList'; 
+import Suggestion from './areainfo/Suggestion';
+import { ReactHeight } from 'react-height';
 import './css/App.css';
 
 class App extends React.Component {
-	render() {
+	constructor(props) {
+		super(props);
+		this.state = {
+			playerHeight: null,
+			navHeight: null,
+			blackbgHeight: null,
+			isInfoToggled: false
+		};
+}
+
+render() {
 		return (
 			<React.Fragment>
-				<Row>
-				<TopBar />
-				</Row>
-				<Row className="justify-content-center bg-black">
-					<Col xs="12" sm="6">
-							<Route path={["/video/:id", "/*"]} component={VideoPlayer} />
+				<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); console.log('l', height) }}>
+					<TopBar />
+				</ReactHeight>
+				<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2" >
+					<Col
+						xs="12"
+						lg={this.state.isInfoToggled ? { span: 6, offset: 1, order: 2 } : { span: 7, offset: 1, order: 2 }}
+						className="align-content-center pt-2 p-1 pr-2">
+						<ReactHeight onHeightReady={height => this.setState({ playerHeight: height })}>
+							<Route path={["/video/:id", "/*"]} component={VideoPlayer} /> {/* change component to children */}
+						</ReactHeight>
 					</Col>
-				</Row>
-				<Row className='scrollable'>
-					<Switch>				
-					<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
-					<Route exact path='/' component={VideoList} />
-					<Route render={() => <div>URL not found</div>}/>
+					<Col
+						xs="12"
+						lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
+						className="p-0 p-sm-0"
+						style={{ 'overflow': "auto", 'max-height': this.state.playerHeight }} >
+						<div class="d-flex justify-content-center">
+						<Button
+							variant="outline-light"
+							onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
+							className="w-50 pt-1 align-content-center"
+							aria-controls="infovideo-collapse"
+							aria-expanded={this.state.isInfoToggled}>
+							{this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"}
+						</Button>
+						</div>
+						<Collapse in={this.state.isInfoToggled}>
+							<div className="pt-1" id="infovideo-collapse">
+								<Route path={["/video/:id", "/search/:query", "/"]} component={VideoInfo} />
+							</div>
+						</Collapse>
+					</Col>
+				</ReactHeight>
+				<Row style={{ "max-height": `calc(99vh - ${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} />
+						<Route render={() => <div>URL not found</div>} />
 					</Switch>
 				</Row>
 			</React.Fragment>

src/GeneralTab.css

@@ -1,6 +0,0 @@
-.fade {
-     opacity: 200;
-    /* -webkit-transition: opacity .15s linear; */
-    -o-transition: opacity .15s linear;
-    /* transition: opacity .15s linear; */
-}

src/GeneralTab.js

@@ -1,138 +0,0 @@
-import React, { Component } from 'react';
-import './App.css';
-import './GeneralTab.css';
-import 'bootstrap/dist/css/bootstrap.css';
-import {Tab,Tabs,ListGroup,ListGroupItem} from 'react-bootstrap';
-import axios from "axios";
-import Card from "react-bootstrap/lib/Card";
-import Linkify  from 'react-linkify';
-
-class GeneralTab extends Component {
-    constructor() {
-        super();
-        this.state = {
-            comments: [],
-            info : []
-        };
-    }
-
-    componentDidMount(){
-        //Richiesta per ottenere i commenti del video
-        axios.get('https://www.googleapis.com/youtube/v3/commentThreads', {
-            params: {
-                'part': 'snippet',
-                'videoId': 'qeMFqkcPYcg', //Da sostituire con variabile
-                'order': 'relevance',
-                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
-            }
-        }).then(
-            response => {
-                this.setState({
-                    comments: response.data.items,
-                });
-            },
-            error => {
-                console.error(error);
-            }
-        )
-        //Richiesta per ottenere le informazioni sul video(Descrizione,dati tecnici,ecc...)
-        axios.get('https://www.googleapis.com/youtube/v3/videos', {
-            params: {
-                'part' : 'snippet,contentDetails,statistics',
-                'id' : 'qeMFqkcPYcg', //Da sostituire con variabile
-                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
-            }
-        }).then(
-            response => {
-                this.setState({
-                    info : response.data.items,
-                });
-            },
-            error => {
-                console.error(error);
-            }
-        )
-    }
-
-    render() {
-        return (
-            <Tabs defaultActiveKey={1} id="tabs" animation={0}>
-                <Tab eventKey={1} title="Video">
-                    <div>
-                        {this.state.info.map(function(item,index){
-                            return(
-                                <div key={index}>
-                                    <h1 style={{margin : '1rem'}}>{item.snippet.title}</h1>
-                                    <ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem',maxWidth: ' 50rem'}}>
-                                        <ListGroupItem><h5>ID Video</h5>{item.id}</ListGroupItem>
-                                        <ListGroupItem><h5>Publish Time</h5>{item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
-                                            return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6);
-                                        })}
-                                        </ListGroupItem>
-                                        <ListGroupItem><h5>Channel Name</h5>{item.snippet.channelTitle}</ListGroupItem>
-                                        <ListGroupItem><h5>Description</h5><Linkify>{item.snippet.description}</Linkify></ListGroupItem>
-                                        <ListGroupItem><h5>Tags</h5>{item.snippet.tags.map(function(element,index){
-                                            return(
-                                                <span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>
-                                            )
-                                        })}</ListGroupItem>
-                                    </ListGroup>
-                                </div>
-                            )
-                            }
-                        )}
-                    </div>
-                </Tab>
-                <Tab eventKey={2} title="Tecnical Informations" >
-                    <div>
-                    {this.state.info.map(function (item,index) {
-                        return(
-                            <div key={index}>
-                                <h1 style={{margin : '1rem'}}>{item.snippet.title}</h1>
-                                <ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem'}}>
-                                    <ListGroupItem><h5>Duration</h5>{item.contentDetails.duration.replace(/(PT(\d+)H(\d+)M(\d+)S)|(PT(\d+)M(\d+)S)/,function(match,p1,p2,p3,p4,p5,p6,p7){
-                                        if(p1) return(p2+':'+p3+':'+p4);
-                                        else return(p6+':'+p7);})}
-                                    </ListGroupItem>
-                                    <ListGroupItem><h5>Definition</h5>{item.contentDetails.definition}</ListGroupItem>
-                                    <ListGroupItem><h5>Dimension</h5>{item.contentDetails.dimension}</ListGroupItem>
-                                    <ListGroupItem><h5>Views</h5>{item.statistics.viewCount}</ListGroupItem>
-                                    <ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}</ListGroupItem>
-                                    <ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}</ListGroupItem>
-                                </ListGroup>
-                           </div>
-                        )
-                    })}
-                    </div>
-                </Tab>
-                <Tab eventKey={3} title="Comment">
-                    <ul>
-                        {this.state.comments.map(function (item,index) {
-                            return(
-                                <div key={index}>
-                                    <Card style = {{width: '40rem',fontSize : 'medium',margin : '1em',borderRadius : '1rem'}}>
-                                        <Card.Body>
-                                            <Card.Title><Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '5rem', height : '5rem',padding : '1rem'}} />{item.snippet.topLevelComment.snippet.authorDisplayName}</Card.Title>
-                                            <Card.Text>
-                                                <Linkify>
-                                                {item.snippet.topLevelComment.snippet.textDisplay}
-                                                </Linkify>
-                                            </Card.Text>
-                                        </Card.Body>
-                                    </Card>
-                                </div>
-                            )
-                        })}
-                    </ul>
-                </Tab>
-                <Tab eventKey={4} title="Wikipedia">
-                    <div>
-
-                    </div>
-                </Tab>
-            </Tabs>
-        );
-    }
-}
-
-export default GeneralTab;

src/VideoInfo.js

@@ -1,123 +1,256 @@
 import React, { Component } from 'react';
-// import PropTypes from 'prop-types';
 import Wikipedia from './areainfo/Wikipedia';
-import { Col, Tabs, Tab } from 'react-bootstrap';
+import { Col, Tabs, Tab,} from 'react-bootstrap';
 import axios from 'axios';
-const ytclear = require('@c0b41/ytclear');
+import Linkify from "react-linkify";
+import Card from "react-bootstrap/lib/Card";
+import moment from 'moment';
+import momentDurationFormat from 'moment-duration-format';
 
 class VideoInfo extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			error: null,
-			isLoaded: false,
-			VideoDetails: {},
-			videoId: '0J2QdDbelmY',
-			others: {}
-		};
-	}
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: null,
+            isLoaded: false,
+            VideoDetails: {},
+            videoId: '0J2QdDbelmY',
+            comments: []
+        };
+        this.momentDuration = this.momentDuration.bind(this);
+    }
 
-	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 });
-			}
-		}
-	}
+    momentDuration(duration){
+        return moment.duration(duration).format('hh:mm:ss');
+    }
 
-	componentDidMount() {
-		axios
-			.get('https://www.googleapis.com/youtube/v3/videos', {
-				params: {
-					part: 'snippet,contentDetails,statistics,topicDetails',
-					id: this.state.videoId,
-					key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
-				}
-			})
-			.then(
-				response => {
-					this.setState((state, props) => {
-						return {
-							VideoDetails: response.data.items[0],
-							isLoaded: true,
-							others: {
-								artist: ytclear(response.data.items[0].snippet.title).split('-')[0],
-								title: ytclear(response.data.items[0].snippet.title).split('-')[1]
-							}
-						};
-					});
-				},
-				error => {
-					console.error(error);
-					this.setState({
-						isLoaded: true,
-						error
-					});
-				}
-			);
-	}
+    // 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 });
+    //         }
+    //     }
+    // }
 
-	// componentWillReceiveProps(nextProps) {
+    componentDidMount() {
+        console.log('didmount',this.state.videoId)
+        axios.all([
+            axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
+            params: {
+                'part': 'snippet,contentDetails,statistics,topicDetails',
+                'id': this.state.videoId,
+                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+            }
+        }), 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'
+            }
+        })])
+            .then(axios.spread((videosResponse, commentThreadResponse) => {
+                this.setState({
+                    VideoDetails: videosResponse.data.items,
+                    comments: commentThreadResponse.data.items,
+                    isLoaded: true
+                });
+            }), error => {
+                console.error(error);
+                this.setState({
+                    isLoaded: true,
+                    error
+                });
+            });
+    }
 
-	// }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        console.info('didup', this.props.match.params.id)
+        // this.setState((state, props) => { return {  }});
+        if (this.props.match.params.id && !(prevProps.match.params.id === this.props.match.params.id)) {
+            this.setState({ videoId: this.props.match.params.id, isLoaded: false });
+            axios.all([
+                axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
+                    params: {
+                        'part': 'snippet,contentDetails,statistics,topicDetails',
+                        'id': this.props.match.params.id,
+                        'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+                    }
+                }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
+                    params: {
+                        'part': 'snippet',
+                        'videoId': this.props.match.params.id,
+                        'order': 'relevance',
+                        'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+                    }
+                })])
+                .then(axios.spread((videosResponse, commentThreadResponse) => {
+                    this.setState({
+                        VideoDetails: videosResponse.data.items,
+                        comments: commentThreadResponse.data.items,
+                        isLoaded: true
+                    });
+                }), error => {
+                    console.error(error);
+                    this.setState({
+                        isLoaded: true,
+                        error
+                    });
+                });
+        }
+    }
 
-	// shouldComponentUpdate(nextProps, nextState) {
+    // shouldComponentUpdate(nextProps, nextState){
+    //     console.log('shouldup', nextProps, nextState)
+    //     if(nextProps.match.params.id)
+    //         return console.log('a',!(nextProps.match.params.id === this.state.videoId)) && !(nextProps.match.params.id === this.state.videoId) ;
+    //     else if(!(nextState.videoId === this.state.videoId))
+    //         return console.log('b') && true;
+    //     else if(nextState.isLoaded)
+    //         return console.log('d') && true;
+    //     else
+    //         return console.log('c') && false;
 
-	// }
+    // }
 
-	componentWillUpdate(nextProps, nextState) {
-		// console.info('nextProps',nextProps);
-		// console.info('nextState',nextState);
-		if (nextProps.match.params.id === this.state.videoId) {
-		} else if (nextProps.match.params.id) {
-			this.setState({ videoId: nextProps.match.params.id });
-		}
-	}
+    // componentWillReceiveProps(nextProps){
+    //     if (nextProps.match.params.id === this.state.videoId) {  console.log('1',nextProps)}
+    //     else if (nextProps.match.params.id) {
+    //         console.log('2',nextProps)
+    //         this.setState({ videoId: nextProps.match.params.id });
+    //         axios.all([
+    //             axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
+    //             params: {
+    //                 'part': 'snippet,contentDetails,statistics,topicDetails',
+    //                 'id': nextProps.match.params.id,
+    //                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+    //             }
+    //         }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
+    //             params: {
+    //                 'part': 'snippet',
+    //                 'videoId': nextProps.match.params.id,
+    //                 'order': 'relevance',
+    //                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+    //             }
+    //         })])
+    //             .then(axios.spread((videosResponse, commentThreadResponse) => {
+    //                 this.setState({
+    //                     VideoDetails: videosResponse.data.items,
+    //                     comments: commentThreadResponse.data.items,
+    //                     isLoaded: true
+    //                 });
+    //             }), error => {
+    //                 console.error(error);
+    //                 this.setState({
+    //                     isLoaded: true,
+    //                     error
+    //                 });
+    //             });
+    //     }
+    //     else{
+    //         console.log('3',nextProps)
+    //     }
+    // }
 
-	componentDidUpdate(prevProps, prevState) {
-		// console.info('prevProps',prevProps);
-		// console.info('prevState',prevState);
-	}
+    render() {
+        const { error, isLoaded, VideoDetails, comments } = this.state;
+        const momentDuration  = this.momentDuration; // bind momentDuration in render to the actual method
+        if (error) {
+            return (
+                <React.Fragment>
+                    Error: {error.message} -- Cannot get {error.config.url}
+                </React.Fragment>
+            );
+        } else if (!isLoaded) {
+            return <React.Fragment>Loading...</React.Fragment>;
+        } else {
+            return (
+                <React.Fragment>
+                    <Col >
+                        {/* codice per tabs reccomenders */}
+                        <Tabs defaultActiveKey={1} id="tabs" animation={0}>
+                            <Tab eventKey={1} title="Video">
+                                <div style={{color : 'white'}}>
+                                    {this.state.VideoDetails.map(function(item,index){
+                                            return(
+                                                <div key={index}>
+                                                    <h5>{item.snippet.title}</h5>
+                                                    <p><b>ID Video :</b> {item.id}<br/>
+                                                        <b>Publish Time :</b> {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
+                                                            return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6);
+                                                        })}<br/>
+                                                        <b>Channel Name :</b> {item.snippet.channelTitle}<br/>
+                                                        <b>Description :</b><br/><Linkify>{item.snippet.description}</Linkify><br/>
+                                                        <b>Tags :</b><br/>{item.snippet.tags.map(function(element,index){
+                                                            if(index===4)
+                                                                return (<br/>);
+                                                            return(
+                                                                <span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>
+                                                            )
+                                                        })}
+                                                    </p>
+                                                </div>
+                                            )
+                                        }
+                                    )}
+                                </div>
+                            </Tab>
+                            <Tab eventKey={2} title="Tecnical Informations">
+                                <div style={{color:'white'}}>
+                                    {this.state.VideoDetails.map(function (item,index) {
+                                        return(
+                                            <div key={index}>
+                                                <h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
+                                                <p><b>Duration :</b>{ momentDuration(item.contentDetails.duration) }<br/>
+                                                    <b>Definition :</b> {item.contentDetails.definition}<br/>
+                                                    <b>Dimension :</b> {item.contentDetails.dimension}<br/>
+                                                    <b> Views :</b> {item.statistics.viewCount}<br/>
+                                                    <b>Likes :</b> {item.statistics.likeCount}<br/>
+                                                    <b>Dislikes :</b> {item.statistics.dislikeCount}
+                                                </p>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </Tab>
+                            <Tab eventKey={3} title="Comment">
+                                <div>
+                                    {this.state.comments.map(function (item,index) {
+                                        return(
+                                            <div key={index}>
+                                                <Card style={{width: '30rem',fontSize : 'small',borderRadius : '1rem'}} className="my-1">
+                                                    <Card.Body>
+                                                        <Card.Title>
+                                                            <Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '3rem', height : '3rem'}} />{item.snippet.topLevelComment.snippet.authorDisplayName}
+                                                        </Card.Title>
+                                                        <Card.Text>
+                                                            <Linkify>
+                                                                {item.snippet.topLevelComment.snippet.textDisplay}
+                                                            </Linkify>
+                                                        </Card.Text>
+                                                    </Card.Body>
+                                                </Card>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </Tab>
+                            <Tab eventKey={4} title="Wikipedia">
+                                <div>
 
-	// componentWillUnmount() {
-
-	// }
-
-	render() {
-		const { error, isLoaded, VideoDetails } = this.state;
-		if (error) {
-			return (
-				<React.Fragment>
-					Error: {error.message} -- Cannot get {error.config.url}
-				</React.Fragment>
-			);
-		} else if (!isLoaded) {
-			return <React.Fragment>Loading...</React.Fragment>;
-		} else {
-			return (
-				<React.Fragment>
-				
-								<Wikipedia
-									title={
-										this.props.location.state
-											? this.props.location.state.title
-											: this.state.others.title
-									}
-									artist={
-										this.props.location.state
-											? this.props.location.state.artist
-											: this.state.others.artist
-									}
-									videoId={this.props.match.params.id}
-								/>
-						
-				</React.Fragment>
-			);
-		}
-	}
+                                </div>
+                            </Tab>
+                        </Tabs>
+                    </Col>
+                </React.Fragment>
+            );
+        }
+    }
 }
 
-VideoInfo.propTypes = {};
+VideoInfo.propTypes = {
 
-export default VideoInfo;
+};
+
+export default VideoInfo;

src/VideoList.js

@@ -36,7 +36,7 @@ class VideoList extends React.Component {
 		);
 	}
 
-// METODI
+	// METODI
 	getThumbnails(videoItems) {
 		let idToLookFor = videoItems.map(item => item.videoID);
 		let finalChunk = (videoItems.length % 50) + 100;
@@ -125,29 +125,36 @@ class VideoList extends React.Component {
 					{items.map(item => (
 						<Col key={item.videoID} lg={{ span: 3 }} md="6">
 							<Card className="my-1 carta">
-								<Link to={{
-									 pathname: '/video/' + item.videoID, 
-									 state: {
-										 artist: item.artist,
-										 title: item.title
+								<Link
+									to={{
+										pathname: '/video/' + item.videoID,
+										state: {
+											artist: item.artist,
+											title: item.title
 										}
-									 }}>
+									}}
+								>
 									{/* {item.artist} - {item.title}		{item.videoID}					{item.category} */}
-									<Card.Img src={item.thumbnail} alt={'Thumbnail of '+item.title } />
+									<Card.Img
+										src={item.thumbnail}
+										alt={'Thumbnail of ' + item.title}
+									/>
 									<Card.ImgOverlay>
 										<Card.Title className="bg-dark d-inline text-white">
 											{item.artist} - {item.title}
 										</Card.Title>
-										<p className='d-table d-lg-none card-text bg-dark text-white'>{item.category}</p>
+										<p className="d-table d-lg-none card-text bg-dark text-white">
+											{item.category}
+										</p>
 									</Card.ImgOverlay>
 								</Link>
 							</Card>
 						</Col>
-					))} 
+					))}
 				</React.Fragment>
 			);
 		}
 	}
 }
 
-export default VideoList;
+export default VideoList;

src/VideoPlayer.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
 import YouTube from 'react-youtube'; // eslint-disable-line no-unused-vars
+import axios from 'axios';
 /* eslint no-console: ["error", { allow: ["info", "error", "warn"] }] */
 
 class VideoPlayer extends Component {
@@ -7,8 +8,8 @@ class VideoPlayer extends Component {
 		super(props);
 		this.state = {
 			opt: {
-				// height: '390',
-				// width: '640',
+				height: '390',
+				width: '640',
 				playerVars: {
 					// https://developers.google.com/youtube/player_parameters
 					autoplay: 0,
@@ -63,16 +64,15 @@ class VideoPlayer extends Component {
 			</React.Fragment>
 		);
 	}
-
+	
+	// access to player in all event handlers via event.target
 	_onError(event) {
-		console.error('on error', event);
+		console.error('Error: ', event);
 	}
 
 	_onPlay(event) {}
 
-	_onReady(event) {
-		// access to player in all event handlers via event.target
-	}
+	_onReady(event) {}
 
 	_onStateChange(event) {
 		let timerId1, timerId2;
@@ -91,8 +91,7 @@ class VideoPlayer extends Component {
 								break;
 						}
 					}, 500);
-					this.setState({outsideReject2: reject });
-					
+					this.setState({ outsideReject2: reject });
 				})
 			});
 			this.state.promise2.then(msg => {
@@ -110,13 +109,20 @@ class VideoPlayer extends Component {
 						});
 						this.state.promise1
 							.then(
-								risultato => {
-									console.info(risultato);
+								videoIdWatched => {
 									// post request to local db
+									axios
+										.post('http://localhost:8000/videotrack', {
+											id: videoIdWatched.toString()
+										})
+										.then(
+											response => console.info(response.data),
+											error => console.info(error)
+										);
 									// local storage logic for recent reccomender
 									clearInterval(timerId1);
 								},
-								error => console.info(error)
+								error => console.error(error)
 							)
 							.finally(() => this.setState({ promise1: null }));
 						break;

src/areainfo/Suggestion.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Random from './reccomenders/Random';
-import Related from './reccomenders/Related';
+import { Row, Col, Button, Collapse } from 'react-bootstrap'; 
+// import Random from './reccomenders/Random';
+// import Related from './reccomenders/Related';
 // and so on..
 
 class Suggestion extends Component {
@@ -39,10 +40,19 @@ class Suggestion extends Component {
   }
 
   render() {
+    let a =['','','','','','','','','','',''];
     return (
-      <div>
-
-      </div>
+      <React.Fragment>
+        <Col xs="10">
+          <Row>
+            {a.map((x,i) => <Col xs={{'span': 10, 'offset': 1}} className="mt-1 border border-danger">- video {i}</Col>)}
+          </Row>
+        </Col>
+        <Col className="mt-1 mr-2 border border-danger">
+        {a.map((x,i) => i)}
+        ?? box utile o superfluo?
+        </Col>
+      </React.Fragment>
     );
   }
 }

src/areainfo/Wikipedia.js

@@ -1,198 +1,94 @@
 import React, { Component } from 'react';
 // import PropTypes from 'prop-types';
 import wikijs from 'wikijs';
-import wdk from 'wikidata-sdk';
-import axios from 'axios';
-import { Table } from 'react-bootstrap';
-import moment from 'moment';
 
 class Wikipedia extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			wikidata: null,
-			wikipedia: null,
-			musicbrainz: null,
-			spareobj: {},
-			error: null,
-			isLoaded: false
-		};
-		this.filterWikipediaRes = this.filterWikipediaRes.bind(this);
-		this.ISO_8601toYYYY = this.ISO_8601toYYYY.bind(this);
-		this.getWikidataPage = this.getWikidataPage.bind(this);
-	}
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: {},
+      infobox: {},
+      error: null,
+      isLoaded: false
+    };
+this.getWikiBox = this.getWikiBox.bind(this);
+this.raffina = this.raffina.bind(this);
+  }
 
-	ISO_8601toYYYY(a) {
-		return moment(a, [moment.ISO_8601, 'YYYY']).format('YYYY');
-	}
+  getWikiBox(name){
+    wikijs()
+    .page(name)
+    .then(page => page.fullInfo())
+    .then(infobox => console.log('infobox', infobox)
+      //this.setState({ infobox })
+    );
+    //console.log('infobox', this.state.infobox)
+  }
 
-	filterWikipediaRes(results) {
-		console.log('filterWikipediaRes', results);
-		return results[0];
-	}
+  raffina(results){
+    console.log('raffina',results);
+    return results[0];
+  }
 
-	getWikidataPage(wikidataPXXXXResID) {
-		return axios.get(wdk.getEntities(wikidataPXXXXResID, 'en'))
-			.then(wikidataPage => {
-				this.setState({
-					wikidata: wikidataPage.data.entities[Object.keys(wikidataPage.data.entities)[0]]
-				})
-			}, error => console.error(error))
-			.finally(() => {
-				console.log(this.state.wikidata)
-				if (this.state.wikidata.sitelinks.enwiki)
-					wikijs()
-						.page(this.state.wikidata.sitelinks.enwiki.title)
-						.then(page => Promise.all([page.fullInfo(), page.summary()]))
-						.then(wikipediaRes => this.setState({
-							wikipedia: {
-								"desc": wikipediaRes[1],
-								"info": wikipediaRes[0].general
-							}
-						}))
-						.finally(() => console.log(this.state.wikipedia));
-			});
-	}
+  // componentWillMount() {
 
-	componentWillMount() {
-		const musicbrainzBaseUrl = "https://musicbrainz.org/ws/2"; // more readable
-		axios.get(wdk.getReverseClaims('P1651', this.props.videoId)) // P1651 is youtube_video_id property
-			.then(wikidataP1651Res => {
-				if (wikidataP1651Res.data.results.bindings.length) { // got a match
-					this.getWikidataPage(wdk.simplify.sparqlResults(wikidataP1651Res.data))// set in state wikidata
-						.then(() => {
-							console.log(this.state.wikidata.claims.P435[0].mainsnak.datavalue.value)
-							axios.get(`${musicbrainzBaseUrl}/work/${this.state.wikidata.claims.P435[0].mainsnak.datavalue.value}`, { // get musicbrainz info
-								params: {
-									'inc': 'artist-rels url-rels',
-									'limit': 1,
-									'offset': 0,
-									'fmt': 'json'
-								}
-							}).then(musicbrainzRes1 => this.setState({ isLoaded: true, musicbrainz: musicbrainzRes1.data }));
-						});
+  // }
 
-				} else { //oof
-					axios.get(`${musicbrainzBaseUrl}/work`, {
-						params: {
-							'query': this.props.title,
-							'limit': 1,
-							'offset': 0,
-							'fmt': 'json'
-						}
-					}).then(musicbrainzRes => {
-						this.setState({ musicbrainz: musicbrainzRes.data.works[0] });
-						axios.all([
-							axios.get(wdk.getReverseClaims('P435', musicbrainzRes.data.works[0].id)), // P435 is musicbrainz id
-							axios.get(`${musicbrainzBaseUrl}/work/${musicbrainzRes.data.works[0].id}`, { // get musicbrainz info 
-								params: {
-									'inc': 'artist-rels  url-rels',
-									'fmt': 'json'
-								}
-							})
-						]).then(
-							axios.spread((wikidataP435Res, musicbrainzWorkRes) => {
-								if (wikidataP435Res.data.results.bindings.length) // found a match
-									this.getWikidataPage(wdk.simplify.sparqlResults(wikidataP435Res.data)); // set the result in the state
-								else if (musicbrainzWorkRes.data.relations.find(currentRel => currentRel.type === "wikidata")) { // found wikidata on music brainz
-									let a = musicbrainzWorkRes.data.relations.find(currentRel => currentRel.type === "wikidata");
-									let wikidataEntityRegEx = new RegExp("[^/]+$"); // match last part of url https://regex101.com/r/0wCQHY/1
-									this.getWikidataPage(wikidataEntityRegEx.exec(a.url.resource)).then(() => this.setState({ isLoaded: true }));
-								}
-								else { // oof
-									wikijs().find(this.props.title).then(data => console.log('asd', data)) // find by props.title
-								}
-							})
-						)
-					})
-				}
-			});
+  componentWillMount() {
+    wikijs().find(this.props.query, this.raffina).then(data => {
+      this.setState({
+        data, 
+        isLoaded: true
+      });
+      console.log(data.html());
+      //this.getWikiBox(data.results[0]);
+    }, error => {
+      console.error(error);
+      this.setState({
+        isLoaded: true,
+        error
+      });
+    });
+  }
 
-	}
+  // componentWillReceiveProps(nextProps) {
 
-	componentDidMount() {
-	}
+  // }
 
-	// componentWillReceiveProps(nextProps) {
+  // shouldComponentUpdate(nextProps, nextState) {
 
-	// }
+  // }
 
-	// shouldComponentUpdate(nextProps, nextState) {
+  // componentWillUpdate(nextProps, nextState) {
 
-	// }
+  // }
 
-	// componentWillUpdate(nextProps, nextState) {
+  // componentDidUpdate(prevProps, prevState) {
 
-	// }
+  // }
 
-	// componentDidUpdate(prevProps, prevState) {
+  // componentWillUnmount() {
 
-	// }
+  // }
 
-	// componentWillUnmount() {
-
-	// }
-
-	render() {
-		const { wikidata, wikipedia, musicbrainz, error, isLoaded } = this.state;
-		const ISO_8601toYYYY = this.ISO_8601toYYYY;
-		if (error) {
-			return <React.Fragment>Error: {error.message}</React.Fragment>;
-		} else if (!isLoaded) {
-			return <React.Fragment>Loading...</React.Fragment>;
-		} else {
-			let keys = {
-				wikipedia: Object.keys(this.state.wikipedia.info),
-				wikidata: Object.keys(this.state.wikidata.claims)
-			}
-			return (
-				<Table striped bordered hover size="sm">
-					<tbody>
-						{
-							keys.wikipedia.map(key => (
-								<tr>
-									<td>{key}</td>
-									<td>{wikipedia.info[key].toLocaleString()}</td>
-								</tr>
-							))
-						}
-						{
-							keys.wikidata.map(key => (
-								<tr>
-									<td>{`${key} - ${wikidata.claims[key][0].mainsnak.datatype}`}</td>
-									<td>{
-										typeof wikidata.claims[key][0].mainsnak.datavalue.value === "string" ?
-											wikidata.claims[key][0].mainsnak.datavalue.value :
-											typeof wikidata.claims[key][0].mainsnak.datavalue.value.id === "string" ?
-												wikidata.claims[key][0].mainsnak.datavalue.value.id :
-												typeof wikidata.claims[key][0].mainsnak.datavalue.value.time === "string" ?
-													ISO_8601toYYYY(wikidata.claims[key][0].mainsnak.datavalue.value.time.toString()) :
-													""
-									}</td>
-								</tr>
-							))
-						}
-						{
-							musicbrainz.relations.map(relation => {
-								if (relation["target-type"] === "artist")
-									return (<tr>
-										<td>{relation.type}</td>
-										<td>{relation.artist.name}</td>
-									</tr>);
-								else if (relation["target-type"] === "url")
-									return (<tr>
-										<td>{relation.type}</td>
-										<td><a href={relation.url.resource}>{relation.type}</a></td>
-									</tr>)
-								else
-									return ("");
-							})
-						}
-					</tbody>
-				</Table>
-			);
-		}
-	}
+  render() {
+    const { data, error, isLoaded } = this.state;
+      if (error) {
+        return (
+          <React.Fragment>
+            Error: {error.message} -- Cannot get {error.config.url}
+          </React.Fragment>
+        );
+      } else if (!isLoaded) {
+        return <React.Fragment>Loading...</React.Fragment>;
+      } else {
+      return (
+      <div>
+        {/* <p>risultato ricerca wikipedia: { data.results[0] }</p> */}
+      </div>
+    );
+      }
+  }
 }
 
-export default Wikipedia;
+export default Wikipedia;

src/css/App.css

@@ -1,9 +1,16 @@
-.bg-black{
-background-color:#000000;
+.upperSection{
+  background-color:#000000;
 }
 
-.scrollable{
-  overflow: auto !important;
-  height: 40vh;
-  margin-top: 2vh;
+/* .sticky{
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1040;
+} */
+
+.downSection{
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* margin-top: 1vh; */
 }

src/reccomenders/Random.js

@@ -1,51 +1,77 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import 'bootstrap/dist/css/bootstrap.css';
+import axios from "axios";
+import createpageToken from 'youtube-page-token';
+import {Card} from "react-bootstrap";
+import {Link} from "react-router-dom";
 
-class Random extends Component {
-  constructor(props) {
-    super(props);
+class RecommenderRandom extends Component{
+    constructor(props){
+        super(props);
+        this.state={
+            items : [],
+        };
+    }
 
-  }
+    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 */
 
-  componentWillMount() {
+        axios.get("https://www.googleapis.com/youtube/v3/search", {
+            params: {
+                'part': 'snippet',
+                'topicId' : '/m/04rlf', //Filtro per la musica.In questo caso il valore è quello della parent directory
+                'type' : 'video',       //che contiene tutti i generi di musica
+                'maxResults': '21',
+                'pageToken' : pageToken,
+                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+            }
+        }).then(
+            response => {
+                this.setState({
+                    items : response.data.items,
+                })
+            },
+            error => {
+                console.error(error);
+            }
+        )
+    }
 
-  }
-
-  componentDidMount() {
-
-  }
-
-  componentWillReceiveProps(nextProps) {
-
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-
-  }
-
-  componentWillUpdate(nextProps, nextState) {
-
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-
-  }
-
-  componentWillUnmount() {
-
-  }
-
-  render() {
-    return (
-      <div>
-
-      </div>
-    );
-  }
+    render(){
+        return (
+            <div style={{width: '100rem',height:'100rem'}}>
+                {this.state.items.map(function (item,index) {
+                    return(
+                        <div key={index} style={{margin: '1rem',float: 'left'}}>
+                            <Card>
+                                <Link
+                                    to={{
+                                        pathname: '/video/' + item.id.videoId,
+                                    }}
+                                >
+                                    <Card.Img
+                                        src={item.snippet.thumbnails.high.url}
+                                        alt={'Thumbnail of ' + item.title}
+                                        style={{width:'30rem',height:'20rem'}}
+                                    />
+                                    <Card.ImgOverlay>
+                                        <Card.Title className="bg-dark d-inline text-white">
+                                            {item.snippet.title}<br/>
+                                            {item.snippet.channelTitle} - {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
+                                            return(p3+'/'+p2+'/'+p1+' at '+p4+':'+p5+':'+p6); //Funzione che trasforma la data e ora di pubblicazione dal formato ISO nel normale formato da cristiani
+                                        })}
+                                        </Card.Title>
+                                    </Card.ImgOverlay>
+                                </Link>
+                            </Card>
+                        </div>
+                    )
+                })}
+            </div>
+        );
+    }
 }
-
-Random.propTypes = {
-
-};
-
-export default Random;
+export default RecommenderRandom;

src/reccomenders/Related.js

@@ -1,47 +1,88 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import axios from 'axios';
+import {Link} from "react-router-dom";
+import {Card} from "react-bootstrap";
 
 class Related extends Component {
-  constructor(props) {
-    super(props);
+    constructor(props) {
+        super(props);
+        this.state={
+            videoId : '0J2QdDbelmY',
+            items : []
+        }
+    }
 
-  }
+    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});
+            }
+        }
+    }
 
-  componentWillMount() {
+    componentDidMount() {
+        axios.get("https://www.googleapis.com/youtube/v3/search",{
+            params:{
+                'part': 'snippet',
+                'relatedToVideoId' : this.state.videoId,
+                'type' : 'video',
+                'maxResults' : '21',
+                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+            }
+        }).then(
+            response => {
+                this.setState({
+                    items: response.data.items,
+                })
+                console.log(response);
+            },
+            error => {
+                console.error(error);
+            }
+        )
+    }
 
-  }
+    componentWillUpdate(nextProps, nextState) {
+        if(nextProps.match.params.id === this.state.videoId){}
+        else if( nextProps.match.params.id){
+            this.setState({videoId: nextProps.match.params.id});
+        }
+    }
 
-  componentDidMount() {
-
-  }
-
-  componentWillReceiveProps(nextProps) {
-
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-
-  }
-
-  componentWillUpdate(nextProps, nextState) {
-
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-
-  }
-
-  componentWillUnmount() {
-
-  }
-
-  render() {
-    return (
-      <div>
-
-      </div>
-    );
-  }
+    render() {
+        return (
+            <div style={{width: '100rem',height:'100rem'}}>
+                {this.state.items.map(function (item,index) {
+                    return(
+                        <div key={index} style={{margin: '1rem',float: 'left'}}>
+                            <Card>
+                                <Link
+                                    to={{
+                                        pathname: '/video/' + item.id.videoId,
+                                    }}
+                                >
+                                    <Card.Img
+                                        src={item.snippet.thumbnails.high.url}
+                                        alt={'Thumbnail of ' + item.title}
+                                        style={{width:'30rem',height:'20rem'}}
+                                    />
+                                    <Card.ImgOverlay>
+                                        <Card.Title className="bg-dark d-inline text-white">
+                                            {item.snippet.title}<br/>
+                                            {item.snippet.channelTitle} - {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
+                                            return(p3+'/'+p2+'/'+p1+' at '+p4+':'+p5+':'+p6); //Funzione che trasforma la data e ora di pubblicazione dal formato ISO nel normale formato da cristiani
+                                        })}
+                                        </Card.Title>
+                                    </Card.ImgOverlay>
+                                </Link>
+                            </Card>
+                        </div>
+                    )
+                })}
+            </div>
+        );
+    }
 }
 
 Related.propTypes = {