diff --git a/README.md b/README.md index 152ce8b..f8b7728 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +# HazeTV + ## Available Scripts In the project directory, you can run: @@ -20,7 +22,7 @@ Your app is ready to be deployed! **Quando questo comando viene eseguito viene creata la cartella `build/` e al suo interno vengono messi i file per la nostra single page application** -# Axios +## Axios [https://github.com/axios/axios](https://github.com/axios/axios#example) @@ -98,6 +100,7 @@ axios.get('https://jsonplaceholder.typicode.com/users', ``` ## Config Object + [Request config object link](https://github.com/axios/axios#request-config) In questo oggetto andiamo a definire particolari tipi di configurazione. @@ -107,9 +110,10 @@ Nelle righe dove c'è `//default` li abbiamo dei parametri predefiniti che perme Di norma le uniche proprietà che andremo a definire nell'oggetto saranno `params: {}` e `data:{}` rispettivamente per GET e POST. --- + ``` json params:{ - id:1, + id: 1, name: 'Tiziano' } ``` @@ -121,12 +125,12 @@ mentre `data:{}` sarà riempito con l'oggetto da passare al POST --- Quindi in generale `axios.get(url,{})` con -`{} == ` +`{} ==` ```json { - params:{ - id:1, + params: { + id: 1, name: 'Tiziano', key: 'value' } @@ -141,7 +145,7 @@ Dopo ogni `axios.get(url,{})` c'è un `.then()` all'interno di questo `then` vie `response` sarà un oggetto strutturato in questo modo: -```json +```json response: { // `data` is the response that was provided by the server data: {}, @@ -167,11 +171,12 @@ response: { ``` ## Error object + [Error object reference](https://github.com/axios/axios#handling-errors) -in generale `error.message` e `error.response.status` sono sufficienti +in generale `error.message` e `error.response.status` sono sufficienti. -# YouTube API +## YouTube API L'API key è `AIzaSyBbuSz5f4wzfVJzHZpDv_UJcM8WZYH4YmE` Può essere trovata nel file `apikey`. @@ -218,10 +223,10 @@ axios.get('https://www.googleapis.com/youtube/v3/videos', { }) ``` -# React Bootstrap +## React Bootstrap ``` javascript -import 'bootstrap/dist/css/bootstrap.css'; +import 'bootstrap/dist/css/bootstrap.css'; ``` Il css di bootstrap va importato una volta sola nel componente che racchiude tutta la logica dell'applicazione, infatti qui è importato solamente in `App.js`. @@ -230,12 +235,12 @@ Il css di bootstrap va importato una volta sola nel componente che racchiude tut - [Bootstrap 4.1 site](https://getbootstrap.com/docs/4.1) - [ReactBootstrap reference](https://react-bootstrap.netlify.com/getting-started/introduction/) -# YouTube video player +## YouTube video player ## [From react-youtube README:](https://github.com/troybetz/react-youtube/blob/master/README.md) -Usage ----- +## Usage + ```js null @@ -257,8 +262,7 @@ Usage For convenience it is also possible to access the PlayerState constants through react-youtube: `YouTube.PlayerState` contains the values that are used by the [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference#onStateChange). -Example ------ +## Example ```js import React from 'react'; @@ -296,6 +300,5 @@ class Example extends React.Component { You can access & control the player in a way similar to the [official api](https://developers.google.com/youtube/iframe_api_reference#Events): > The component will pass an event object as the sole argument to each of the event handler props. The event object has the following properties: - -> * The event's `target` identifies the video player that corresponds to the event. -> * The event's `data` specifies a value relevant to the event. Note that the `onReady` event does not specify a `data` property. +> - The event's `target` identifies the video player that corresponds to the event. +> - The event's `data` specifies a value relevant to the event. Note that the `onReady` event does not specify a `data` property. diff --git a/node-entry.js b/node-entry.js index 4948d7c..5adfe7f 100644 --- a/node-entry.js +++ b/node-entry.js @@ -3,8 +3,12 @@ const app = express(); app.use(express.static(__dirname + '/build')); -app.get('/test', (req, res) => { - res.send({ ok: 'ok get' }); +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}); }); app.listen(8000, () => console.log('listen on 8000')); diff --git a/src/App.js b/src/App.js index 9bac8d8..e4771a8 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,7 @@ import { Row, Col } from 'react-bootstrap'; // eslint-disable-line no-unused-var 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 Test from './Test'; import './App.css'; class App extends React.Component { @@ -22,7 +23,11 @@ class App extends React.Component { - + + + + + ); diff --git a/src/Test.js b/src/Test.js new file mode 100644 index 0000000..068f895 --- /dev/null +++ b/src/Test.js @@ -0,0 +1,50 @@ +import React, { Component } from 'react'; +import wikijs from 'wikijs'; +//import PropTypes from 'prop-types'; + +class Test extends Component { + constructor(props) { + super(props); + + } + + componentWillMount() { + + } + + componentDidMount() { + wikijs.find('star wars').then(data => console.log(data.results.length)); + } + + componentWillReceiveProps(nextProps) { + + } + + shouldComponentUpdate(nextProps, nextState) { + + } + + componentWillUpdate(nextProps, nextState) { + + } + + componentDidUpdate(prevProps, prevState) { + + } + + componentWillUnmount() { + + } + + render() { + return ( +
+ +
+ ); + } +} +Test.propTypes = { + +}; +export default Test; \ No newline at end of file