From 3a1c130662d21645846c0b76026d8ecb472dc9de Mon Sep 17 00:00:00 2001 From: KancerEzeroglu Date: Tue, 24 Oct 2017 09:48:41 +0300 Subject: [PATCH] React example --- src/actions/index.js | 0 src/components/app.js | 9 ------ src/components/search_bar.js | 42 ++++++++++++++++++++++++ src/components/video_detail.js | 24 ++++++++++++++ src/components/video_list.js | 21 ++++++++++++ src/components/video_list_item.js | 21 ++++++++++++ src/index.js | 54 ++++++++++++++++++++++++------- src/reducers/index.js | 7 ---- style/style.css | 27 ++++++++++++++++ 9 files changed, 178 insertions(+), 27 deletions(-) delete mode 100644 src/actions/index.js delete mode 100644 src/components/app.js create mode 100644 src/components/search_bar.js create mode 100644 src/components/video_detail.js create mode 100644 src/components/video_list.js create mode 100644 src/components/video_list_item.js delete mode 100644 src/reducers/index.js diff --git a/src/actions/index.js b/src/actions/index.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/components/app.js b/src/components/app.js deleted file mode 100644 index 58614b02cf..0000000000 --- a/src/components/app.js +++ /dev/null @@ -1,9 +0,0 @@ -import React, { Component } from 'react'; - -export default class App extends Component { - render() { - return ( -
React simple starter
- ); - } -} diff --git a/src/components/search_bar.js b/src/components/search_bar.js new file mode 100644 index 0000000000..9952d229a9 --- /dev/null +++ b/src/components/search_bar.js @@ -0,0 +1,42 @@ +import React, { Component } from 'react'; + +class SearchBar extends Component { + constructor(props) { + super(props); + + this.state = { term: '' }; + } + + render() { + return( +
+ this.onInputChange(event.target.value)}/> +
+ ); + } + + onInputChange(term) { + this.setState({term}); + this.props.onSearchTermChange(term); + } +} + +export default SearchBar; + + +/* +----- 2 ------ +class SearchBar extends React.Component { + render() { + return ; + } + +} +*/ +/* +-----1---- +const SearchBar = () => { + return ; +};*/ diff --git a/src/components/video_detail.js b/src/components/video_detail.js new file mode 100644 index 0000000000..b5bc4f6fef --- /dev/null +++ b/src/components/video_detail.js @@ -0,0 +1,24 @@ +import React from 'react'; + +const VideoDetail = ({video}) => { + if (!video){ + return
Loading...
; + } + + const videoId = video.id.videoId; + const url = `https://www.youtube.com/embed/${videoId}`; + + return( +
+
+ +
+
+
{video.snippet.title}
+
{video.snippet.description}
+
+
+); + +}; +export default VideoDetail; \ No newline at end of file diff --git a/src/components/video_list.js b/src/components/video_list.js new file mode 100644 index 0000000000..22b22eaab8 --- /dev/null +++ b/src/components/video_list.js @@ -0,0 +1,21 @@ +import React from 'react'; +import VideoListItem from './video_list_item'; + +const VideoList = (props) => { + const videoItems = props.videos.map((video) => { + return ( + ); + }); + + + return ( + + ); +}; + +export default VideoList; \ No newline at end of file diff --git a/src/components/video_list_item.js b/src/components/video_list_item.js new file mode 100644 index 0000000000..8f1b576425 --- /dev/null +++ b/src/components/video_list_item.js @@ -0,0 +1,21 @@ +import React from 'react'; + +const VideoListItem = ({video, onVideoSelect}) => { + + const imageUrl = video.snippet.thumbnails.default.url; + + return( +
  • onVideoSelect(video)} className="list-group-item"> +
    +
    + +
    +
    +
    {video.snippet.title}
    +
    +
    +
    • + ); +}; + +export default VideoListItem; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 69d577acd1..0acfe84032 100644 --- a/src/index.js +++ b/src/index.js @@ -1,15 +1,47 @@ -import React from 'react'; +import _ from 'lodash'; +import React , {Component} from 'react'; import ReactDOM from 'react-dom'; -import { Provider } from 'react-redux'; -import { createStore, applyMiddleware } from 'redux'; +import YTSearch from 'youtube-api-search'; +import SearchBar from './components/search_bar'; +import VideoList from './components/video_list'; +import VideoDetail from './components/video_detail'; +const API_KEY = 'AIzaSyA5hsdzfx-GWznhryIs_y0onwMNWlGFCDc'; -import App from './components/app'; -import reducers from './reducers'; +class App extends Component +{ + constructor(props){ + super(props); -const createStoreWithMiddleware = applyMiddleware()(createStore); + this.state = { + videos: [] , + selectedVideo: null + }; + this.videoSearch('cat'); + } -ReactDOM.render( - - - - , document.querySelector('.container')); + videoSearch(term){ + YTSearch ({key: API_KEY, term: term}, (videos) => { + this.setState({ + videos: videos, + selectedVideo: videos[0] + }); + }); + } + + render() { + const videoSearch = _.debounce((term) => {this.videoSearch(term)}, 300); + + + return ( +
    + + + this.setState({selectedVideo})} + videos={this.state.videos}/> +
    + ); + } +} + +ReactDOM.render(, document.querySelector('.container')); \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js deleted file mode 100644 index d12506f382..0000000000 --- a/src/reducers/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import { combineReducers } from 'redux'; - -const rootReducer = combineReducers({ - state: (state = {}) => state -}); - -export default rootReducer; diff --git a/style/style.css b/style/style.css index e69de29bb2..35ff431bb3 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,27 @@ +.search-bar { + margin: 20px; + text-align: center; +} + +.search-bar input { + width: 75%; +} + +.video-item img { + max-width: 64px; +} + +.video-detail .details { + margin-top:10px; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; +} + +.list-group-item { + cursor: pointer; +} + +.list-group-item:hover { + background-color: #eee; +} \ No newline at end of file