mi sono perso per strada

db.json

@@ -1,44 +0,0 @@
-{
-  "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,69 +1,14 @@
 const express = require('express');
-const bodyParser = require('body-parser');
+const app = express();
-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(bodyParser.urlencoded({ extended: false })) // parse application/x-www-form-urlencoded
+app.use(express.static(__dirname + '/build'));
-app.use(bodyParser.json()) // parse application/json
-app.use(express.static(__dirname + '/build')); // serve static build site
 
-// Create database instance and start server
+app.get('/test/:id', (req, res) => {
-// const adapter = new FileAsync(__dirname + '/db.json');
+	// req.params.id
-low(new FileAsync(__dirname + '/db.json')) // production
+	// new wiki().page(req.params.id)
-// low(new FileAsync('/tmp/db.json')) // dev
+	// .then(page => page.fullInfo())
-	.then(db => {
+	// .then(parsed => res.send(parsed));
-		db._.mixin(lodashId);
+	res.send({ok:req.params.id});
-		// 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,31 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "latest",
+    "@c0b41/ytclear": "^1.0.0",
-    "body-parser": "^1.18.3",
+    "axios": "^0.18.0",
     "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",
-    "wikijs": "^4.8.1",
+    "wikidata-sdk": "^5.15.9",
-    "youtube-page-token": "^1.0.1"
+    "wikijs": "^4.8.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>react-4</title>
+    <title>HazeTv</title>
   </head>
   <body>
     <noscript>

src/App.js

@@ -1,68 +1,30 @@
 import React from 'react';
-import { Route, Switch } from 'react-router-dom'; 
+import { Route, Switch, Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
-import 'bootstrap/dist/css/bootstrap.css'; 
+import 'bootstrap/dist/css/bootstrap.css'; // eslint-disable-line no-unused-vars
-import { Row, Col, Button, Collapse } from 'react-bootstrap'; 
+import { Row, Col } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
-import TopBar from './TopBar'; 
+import VideoList from './VideoList'; // eslint-disable-line no-unused-vars
-import VideoPlayer from './VideoPlayer'; 
+import TopBar from './TopBar'; // eslint-disable-line no-unused-vars
+import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
 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 {
-	constructor(props) {
+	render() {
-		super(props);
-		this.state = {
-			playerHeight: null,
-			navHeight: null,
-			blackbgHeight: null,
-			isInfoToggled: false
-		};
-}
-
-render() {
 		return (
 			<React.Fragment>
-				<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); console.log('l', height) }}>
+				<Row>
-					<TopBar />
+				<TopBar />
-				</ReactHeight>
+				</Row>
-				<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2" >
+				<Row className="justify-content-center bg-black">
-					<Col
+					<Col xs="12" sm="6">
-						xs="12"
+							<Route path={["/video/:id", "/*"]} component={VideoPlayer} />
-						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>
-					<Col
+				</Row>
-						xs="12"
+				<Row className='scrollable'>
-						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={VideoInfo} />
-						<Route path={["/video/:id", "/search/:query"]} component={Suggestion} />
+					<Route exact path='/' component={VideoList} />
-						<Route render={() => <div>URL not found</div>} />
+					<Route render={() => <div>URL not found</div>}/>
 					</Switch>
 				</Row>
 			</React.Fragment>

src/GeneralTab.css

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

src/GeneralTab.js

@@ -0,0 +1,138 @@
+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,256 +1,123 @@
 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';
-import Linkify from "react-linkify";
+const ytclear = require('@c0b41/ytclear');
-import Card from "react-bootstrap/lib/Card";
-import moment from 'moment';
-import momentDurationFormat from 'moment-duration-format';
 
 class VideoInfo extends Component {
-    constructor(props) {
+	constructor(props) {
-        super(props);
+		super(props);
-        this.state = {
+		this.state = {
-            error: null,
+			error: null,
-            isLoaded: false,
+			isLoaded: false,
-            VideoDetails: {},
+			VideoDetails: {},
-            videoId: '0J2QdDbelmY',
+			videoId: '0J2QdDbelmY',
-            comments: []
+			others: {}
-        };
+		};
-        this.momentDuration = this.momentDuration.bind(this);
+	}
-    }
 
-    momentDuration(duration){
+	componentWillMount() {
-        return moment.duration(duration).format('hh:mm:ss');
+		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() {
-    //     if (this.props.match.params.id) {
+		axios
-    //         if (this.props.match.params.id === this.state.videoId) { }
+			.get('https://www.googleapis.com/youtube/v3/videos', {
-    //         else {
+				params: {
-    //             this.setState({ videoId: this.props.match.params.id });
+					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
+					});
+				}
+			);
+	}
 
-    componentDidMount() {
+	// componentWillReceiveProps(nextProps) {
-        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;
 
-    // }
+	// }
 
-    // componentWillReceiveProps(nextProps){
+	componentWillUpdate(nextProps, nextState) {
-    //     if (nextProps.match.params.id === this.state.videoId) {  console.log('1',nextProps)}
+		// console.info('nextProps',nextProps);
-    //     else if (nextProps.match.params.id) {
+		// console.info('nextState',nextState);
-    //         console.log('2',nextProps)
+		if (nextProps.match.params.id === this.state.videoId) {
-    //         this.setState({ videoId: nextProps.match.params.id });
+		} else if (nextProps.match.params.id) {
-    //         axios.all([
+			this.setState({ videoId: nextProps.match.params.id });
-    //             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)
-    //     }
-    // }
 
-    render() {
+	componentDidUpdate(prevProps, prevState) {
-        const { error, isLoaded, VideoDetails, comments } = this.state;
+		// console.info('prevProps',prevProps);
-        const momentDuration  = this.momentDuration; // bind momentDuration in render to the actual method
+		// console.info('prevState',prevState);
-        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>
 
-                                </div>
+	// componentWillUnmount() {
-                            </Tab>
+
-                        </Tabs>
+	// }
-                    </Col>
+
-                </React.Fragment>
+	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>
+			);
+		}
+	}
 }
 
-VideoInfo.propTypes = {
+VideoInfo.propTypes = {};
-
-};
 
 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,27 +125,20 @@ class VideoList extends React.Component {
 					{items.map(item => (
 						<Col key={item.videoID} lg={{ span: 3 }} md="6">
 							<Card className="my-1 carta">
-								<Link
+								<Link to={{
-									to={{
+									 pathname: '/video/' + item.videoID, 
-										pathname: '/video/' + item.videoID,
+									 state: {
-										state: {
+										 artist: item.artist,
-											artist: item.artist,
+										 title: item.title
-											title: item.title
 										}
-									}}
+									 }}>
-								>
 									{/* {item.artist} - {item.title}		{item.videoID}					{item.category} */}
-									<Card.Img
+									<Card.Img src={item.thumbnail} alt={'Thumbnail of '+item.title } />
-										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">
+										<p className='d-table d-lg-none card-text bg-dark text-white'>{item.category}</p>
-											{item.category}
-										</p>
 									</Card.ImgOverlay>
 								</Link>
 							</Card>

src/VideoPlayer.js

@@ -1,6 +1,5 @@
 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 {
@@ -8,8 +7,8 @@ class VideoPlayer extends Component {
 		super(props);
 		this.state = {
 			opt: {
-				height: '390',
+				// height: '390',
-				width: '640',
+				// width: '640',
 				playerVars: {
 					// https://developers.google.com/youtube/player_parameters
 					autoplay: 0,
@@ -65,14 +64,15 @@ class VideoPlayer extends Component {
 		);
 	}
 
-	// access to player in all event handlers via event.target
 	_onError(event) {
-		console.error('Error: ', event);
+		console.error('on error', event);
 	}
 
 	_onPlay(event) {}
 
-	_onReady(event) {}
+	_onReady(event) {
+		// access to player in all event handlers via event.target
+	}
 
 	_onStateChange(event) {
 		let timerId1, timerId2;
@@ -91,7 +91,8 @@ class VideoPlayer extends Component {
 								break;
 						}
 					}, 500);
-					this.setState({ outsideReject2: reject });
+					this.setState({outsideReject2: reject });
+					
 				})
 			});
 			this.state.promise2.then(msg => {
@@ -109,20 +110,13 @@ class VideoPlayer extends Component {
 						});
 						this.state.promise1
 							.then(
-								videoIdWatched => {
+								risultato => {
+									console.info(risultato);
 									// 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.error(error)
+								error => console.info(error)
 							)
 							.finally(() => this.setState({ promise1: null }));
 						break;

src/areainfo/Suggestion.js

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col, Button, Collapse } from 'react-bootstrap'; 
+import Random from './reccomenders/Random';
-// import Random from './reccomenders/Random';
+import Related from './reccomenders/Related';
-// import Related from './reccomenders/Related';
 // and so on..
 
 class Suggestion extends Component {
@@ -40,19 +39,10 @@ class Suggestion extends Component {
   }
 
   render() {
-    let a =['','','','','','','','','','',''];
     return (
-      <React.Fragment>
+      <div>
-        <Col xs="10">
+
-          <Row>
+      </div>
-            {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,94 +1,198 @@
 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) {
+	constructor(props) {
-    super(props);
+		super(props);
-    this.state = {
+		this.state = {
-      data: {},
+			wikidata: null,
-      infobox: {},
+			wikipedia: null,
-      error: null,
+			musicbrainz: null,
-      isLoaded: false
+			spareobj: {},
-    };
+			error: null,
-this.getWikiBox = this.getWikiBox.bind(this);
+			isLoaded: false
-this.raffina = this.raffina.bind(this);
+		};
-  }
+		this.filterWikipediaRes = this.filterWikipediaRes.bind(this);
+		this.ISO_8601toYYYY = this.ISO_8601toYYYY.bind(this);
+		this.getWikidataPage = this.getWikidataPage.bind(this);
+	}
 
-  getWikiBox(name){
+	ISO_8601toYYYY(a) {
-    wikijs()
+		return moment(a, [moment.ISO_8601, 'YYYY']).format('YYYY');
-    .page(name)
+	}
-    .then(page => page.fullInfo())
-    .then(infobox => console.log('infobox', infobox)
-      //this.setState({ infobox })
-    );
-    //console.log('infobox', this.state.infobox)
-  }
 
-  raffina(results){
+	filterWikipediaRes(results) {
-    console.log('raffina',results);
+		console.log('filterWikipediaRes', results);
-    return results[0];
+		return results[0];
-  }
+	}
 
-  // componentWillMount() {
+	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() {
+		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 }));
+						});
 
-  componentWillMount() {
+				} else { //oof
-    wikijs().find(this.props.query, this.raffina).then(data => {
+					axios.get(`${musicbrainzBaseUrl}/work`, {
-      this.setState({
+						params: {
-        data, 
+							'query': this.props.title,
-        isLoaded: true
+							'limit': 1,
-      });
+							'offset': 0,
-      console.log(data.html());
+							'fmt': 'json'
-      //this.getWikiBox(data.results[0]);
+						}
-    }, error => {
+					}).then(musicbrainzRes => {
-      console.error(error);
+						this.setState({ musicbrainz: musicbrainzRes.data.works[0] });
-      this.setState({
+						axios.all([
-        isLoaded: true,
+							axios.get(wdk.getReverseClaims('P435', musicbrainzRes.data.works[0].id)), // P435 is musicbrainz id
-        error
+							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
+								}
+							})
+						)
+					})
+				}
+			});
 
-  // componentWillReceiveProps(nextProps) {
+	}
 
-  // }
+	componentDidMount() {
+	}
 
-  // shouldComponentUpdate(nextProps, nextState) {
+	// componentWillReceiveProps(nextProps) {
 
-  // }
+	// }
 
-  // componentWillUpdate(nextProps, nextState) {
+	// shouldComponentUpdate(nextProps, nextState) {
 
-  // }
+	// }
 
-  // componentDidUpdate(prevProps, prevState) {
+	// componentWillUpdate(nextProps, nextState) {
 
-  // }
+	// }
 
-  // componentWillUnmount() {
+	// componentDidUpdate(prevProps, prevState) {
 
-  // }
+	// }
 
-  render() {
+	// componentWillUnmount() {
-    const { data, error, isLoaded } = this.state;
+
-      if (error) {
+	// }
-        return (
+
-          <React.Fragment>
+	render() {
-            Error: {error.message} -- Cannot get {error.config.url}
+		const { wikidata, wikipedia, musicbrainz, error, isLoaded } = this.state;
-          </React.Fragment>
+		const ISO_8601toYYYY = this.ISO_8601toYYYY;
-        );
+		if (error) {
-      } else if (!isLoaded) {
+			return <React.Fragment>Error: {error.message}</React.Fragment>;
-        return <React.Fragment>Loading...</React.Fragment>;
+		} else if (!isLoaded) {
-      } else {
+			return <React.Fragment>Loading...</React.Fragment>;
-      return (
+		} else {
-      <div>
+			let keys = {
-        {/* <p>risultato ricerca wikipedia: { data.results[0] }</p> */}
+				wikipedia: Object.keys(this.state.wikipedia.info),
-      </div>
+				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>
+			);
+		}
+	}
 }
 
 export default Wikipedia;

src/css/App.css

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

src/reccomenders/Random.js

@@ -1,77 +1,51 @@
 import React, { Component } from 'react';
-import 'bootstrap/dist/css/bootstrap.css';
+import PropTypes from 'prop-types';
-import axios from "axios";
-import createpageToken from 'youtube-page-token';
-import {Card} from "react-bootstrap";
-import {Link} from "react-router-dom";
 
-class RecommenderRandom extends Component{
+class Random extends Component {
-    constructor(props){
+  constructor(props) {
-        super(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 */
 
-        axios.get("https://www.googleapis.com/youtube/v3/search", {
+  componentWillMount() {
-            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);
-            }
-        )
-    }
 
-    render(){
+  }
-        return (
+
-            <div style={{width: '100rem',height:'100rem'}}>
+  componentDidMount() {
-                {this.state.items.map(function (item,index) {
+
-                    return(
+  }
-                        <div key={index} style={{margin: '1rem',float: 'left'}}>
+
-                            <Card>
+  componentWillReceiveProps(nextProps) {
-                                <Link
+
-                                    to={{
+  }
-                                        pathname: '/video/' + item.id.videoId,
+
-                                    }}
+  shouldComponentUpdate(nextProps, nextState) {
-                                >
+
-                                    <Card.Img
+  }
-                                        src={item.snippet.thumbnails.high.url}
+
-                                        alt={'Thumbnail of ' + item.title}
+  componentWillUpdate(nextProps, nextState) {
-                                        style={{width:'30rem',height:'20rem'}}
+
-                                    />
+  }
-                                    <Card.ImgOverlay>
+
-                                        <Card.Title className="bg-dark d-inline text-white">
+  componentDidUpdate(prevProps, prevState) {
-                                            {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
+
-                                        })}
+  componentWillUnmount() {
-                                        </Card.Title>
+
-                                    </Card.ImgOverlay>
+  }
-                                </Link>
+
-                            </Card>
+  render() {
-                        </div>
+    return (
-                    )
+      <div>
-                })}
+
-            </div>
+      </div>
-        );
+    );
-    }
+  }
 }
-export default RecommenderRandom;
+
+Random.propTypes = {
+
+};
+
+export default Random;

src/reccomenders/Related.js

@@ -1,88 +1,47 @@
 import React, { Component } from 'react';
-import axios from 'axios';
+import PropTypes from 'prop-types';
-import {Link} from "react-router-dom";
-import {Card} from "react-bootstrap";
 
 class Related extends Component {
-    constructor(props) {
+  constructor(props) {
-        super(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});
-            }
-        }
-    }
 
-    componentDidMount() {
+  componentWillMount() {
-        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});
-        }
-    }
 
-    render() {
+  componentDidMount() {
-        return (
+
-            <div style={{width: '100rem',height:'100rem'}}>
+  }
-                {this.state.items.map(function (item,index) {
+
-                    return(
+  componentWillReceiveProps(nextProps) {
-                        <div key={index} style={{margin: '1rem',float: 'left'}}>
+
-                            <Card>
+  }
-                                <Link
+
-                                    to={{
+  shouldComponentUpdate(nextProps, nextState) {
-                                        pathname: '/video/' + item.id.videoId,
+
-                                    }}
+  }
-                                >
+
-                                    <Card.Img
+  componentWillUpdate(nextProps, nextState) {
-                                        src={item.snippet.thumbnails.high.url}
+
-                                        alt={'Thumbnail of ' + item.title}
+  }
-                                        style={{width:'30rem',height:'20rem'}}
+
-                                    />
+  componentDidUpdate(prevProps, prevState) {
-                                    <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){
+  componentWillUnmount() {
-                                            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>
+  render() {
-                                </Link>
+    return (
-                            </Card>
+      <div>
-                        </div>
+
-                    )
+      </div>
-                })}
+    );
-            </div>
+  }
-        );
-    }
 }
 
 Related.propTypes = {