eslint added

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+        "standard"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+}

package.json

@@ -1,32 +1,39 @@
 {
-  "name": "miniyoutube",
-  "version": "1.0.0",
-  "description": "A simple YouTube App using ReactJS",
-  "main": "index.js",
-  "repository": "git@github.com:vinitshahdeo/MinYouTube.git",
-  "scripts": {
-    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
-    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
-    "test:watch": "npm run test -- --watch",
-    "build": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "babel-core": "^6.2.1",
-    "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.1.18",
-    "babel-preset-react": "^6.1.18",
-    "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.0"
-  },
-  "dependencies": {
-    "babel-preset-stage-1": "^6.1.18",
-    "lodash": "^3.10.1",
-    "react": "16.3.2",
-    "react-dom": "16.3.2",
-    "react-redux": "5.0.7",
-    "redux": "4.0.0",
-    "youtube-api-search": "0.0.5"
-  }
+    "name": "miniyoutube",
+    "version": "1.0.0",
+    "description": "A simple YouTube App using ReactJS",
+    "main": "index.js",
+    "repository": "git@github.com:vinitshahdeo/MinYouTube.git",
+    "scripts": {
+        "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+        "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
+        "test:watch": "npm run test -- --watch",
+        "build": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"
+    },
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "babel-core": "^6.26.3",
+        "babel-loader": "^8.0.6",
+        "babel-preset-es2015": "^6.24.1",
+        "babel-preset-react": "^6.24.1",
+        "eslint": "^6.5.1",
+        "eslint-config-standard": "^14.1.0",
+        "eslint-plugin-import": "^2.18.2",
+        "eslint-plugin-node": "^10.0.0",
+        "eslint-plugin-promise": "^4.2.1",
+        "eslint-plugin-standard": "^4.0.1",
+        "webpack": "^4.41.0",
+        "webpack-dev-server": "^3.8.2"
+    },
+    "dependencies": {
+        "babel-preset-stage-1": "^6.24.1",
+        "lodash": "^4.17.15",
+        "mocha": "^6.2.1",
+        "react": "^16.10.2",
+        "react-dom": "16.10.2",
+        "react-redux": "7.1.1",
+        "redux": "4.0.4",
+        "youtube-api-search": "0.0.5"
+    }
 }

src/components/search_bar.js

@@ -10,33 +10,31 @@
 //   }
 // }
 
-import React , { Component } from 'react';
+import { Component } from 'react'
 
-class SearchBar extends Component{
-
-  constructor(props){
-      super(props);
-      this.state ={ term : ' '};
+class SearchBar extends Component {
+  constructor (props) {
+    super(props)
+    this.state = { term: ' ' }
   }
-  render(){
-    //return <input onChange={this.onInputChange}/>;
-    //return <input onChange={event =>console.log(event.target.value) }/>
-    return (
-      <div className="search-bar">
-      <input
-        value = {this.state.term}
-        onChange = {event => this.onInputChange(event.target.value)}
-      />
-      </div>
-    );
+
+  render () {
+    // return <input onChange={this.onInputChange}/>;
+    // return <input onChange={event =>console.log(event.target.value) }/>
+    return (< div className = "search-bar" >
+      <
+        input value = { this.state.term }
+        onChange = { event => this.onInputChange(event.target.value) }
+      /> </div >
+    )
   }
 
-  onInputChange(term){
-    this.setState({term});
-    this.props.onSearchTermChange(term);
-    //console.log(event.target.value);
-    console.log(event);
+  onInputChange (term) {
+    this.setState({ term })
+    this.props.onSearchTermChange(term)
+    // console.log(event.target.value);
+    console.log(event)
   }
 }
 
-export default SearchBar;
+export default SearchBar

src/components/video_detail.js

@@ -1,23 +1,24 @@
-import React from 'react';
-
-const VideoDetail = ({video}) =>{
-  if(!video)
-  {
-    return <div>Loading...</div>
+const VideoDetail = ({ video }) => {
+  if (!video) {
+    return <div > Loading... < /div>
   }
-  const videoId = video.id.videoId;
-  const url = `https://www.youtube.com/embed/${videoId}`;
-  return (
-    <div className="video-detail col-md-8">
-      <div className="embed-responsive embed-responsive-16by9">
-        <iframe className="embed-responsive-item" src={url}></iframe>
-      </div>
-      <div className="details">
-        <div>{video.snippet.title}</div>
-        <div className="desc-video">{video.snippet.description}</div>
-      </div>
-    </div>
-  );
+  const videoId = video.id.videoId
+  const url = `https://www.youtube.com/embed/${videoId}`
+  return (<
+    div className = "video-detail col-md-8" >
+    <
+      div className = "embed-responsive embed-responsive-16by9" >
+      <
+        iframe className = "embed-responsive-item"
+        src = { url } > < /iframe> <
+    /div> <
+      div className = "details" >
+      <
+        div > { video.snippet.title } < /div> <
+        div className = "desc-video" > { video.snippet.description } < /div> <
+    /div> <
+  /div>
+  )
 }
 
-export default VideoDetail;
+export default VideoDetail

src/components/video_list.js

@@ -1,19 +1,16 @@
-import React from 'react';
-import VideoListItem from './video_list_item';
-
-const VideoList = (props) =>{
-    const videoItems = props.videos.map((video) => {
+const VideoList = (props) => {
+  const videoItems = props.videos.map((video) => {
     return <VideoListItem
-              onVideoSelect = {props.onVideoSelect}
-              key={video.etag}
-              video={video}
-            />;
-  });
+      onVideoSelect = {props.onVideoSelect}
+      key={video.etag}
+      video={video}
+    />
+  })
   return (
     <ul className="col-md-4 list-group">
       {videoItems}
     </ul>
   )
 }
 
-export default VideoList;
+export default VideoList

src/components/video_list_item.js

@@ -1,9 +1,7 @@
-import React from 'react';
-
-const VideoListItem = ({video, onVideoSelect}) => {
+const VideoListItem = ({ video, onVideoSelect }) => {
   // const video = props.video;
-  console.log(video);
-  const imgUrl = video.snippet.thumbnails.default.url;
+  console.log(video)
+  const imgUrl = video.snippet.thumbnails.default.url
   return (
     <li onClick ={() => onVideoSelect(video)} className="list-group-item">
       <div className="video-list media">
@@ -15,7 +13,7 @@ const VideoListItem = ({video, onVideoSelect}) => {
         </div>
       </div>
     </li>
-    );
+  )
 }
 
-export default VideoListItem;
+export default VideoListItem

src/index.js

@@ -3,15 +3,11 @@
  * @description a web app using youtube api
  */
 // creating a component
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-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 = 'XXXXXXXXXXXX'; // REPLACE IT WITH YOUR YOUTUBE API KEY
+import { Component } from 'react'
+import ReactDOM from 'react-dom'
+import YTSearch from 'youtube-api-search'
 
+const API_KEY = 'XXXXXXXXXXXX' // REPLACE IT WITH YOUR YOUTUBE API KEY
 
 // YTSearch({key : API_KEY, term : 'Katrina Kaif'}, function(data){
 //     console.log(data);
@@ -25,42 +21,41 @@ const API_KEY = 'XXXXXXXXXXXX'; // REPLACE IT WITH YOUR YOUTUBE API KEY
 //   );
 // }
 
-class App extends Component{
-
-  constructor(props){
-
-    super(props);
+class App extends Component {
+  constructor (props) {
+    super(props)
 
     this.state = {
-      videos : [],
-      selectedVideo : null
-    };
-
-    this.videoSearch('Shreya Ghosal');
+      videos: [],
+      selectedVideo: null
+    }
 
+    this.videoSearch('Shreya Ghosal')
   }
-  videoSearch(term){
-    YTSearch({key : API_KEY, term : term}, (videos) => {
-        //console.log(videos);
-        //this.setState({videos});
-        //this.setState({videos : videos})
-        this.setState({
-          videos : videos,
-          selectedVideo : videos[0]
-        })
-    });
+
+  videoSearch (term) {
+    YTSearch({ key: API_KEY, term: term }, (videos) => {
+      // console.log(videos);
+      // this.setState({videos});
+      // this.setState({videos : videos})
+      this.setState({
+        videos: videos,
+        selectedVideo: videos[0]
+      })
+    })
   }
-   render(){
-     return(
-       <div>
+
+  render () {
+    return (
+      <div>
         <SearchBar onSearchTermChange = {term => this.videoSearch(term)}/>
         <VideoDetail video={this.state.selectedVideo} />
         <VideoList
-          onVideoSelect = {selectedVideo => {this.setState({selectedVideo})}}
+          onVideoSelect = {selectedVideo => { this.setState({ selectedVideo }) }}
           videos={this.state.videos}/>
-       </div>
-     );
-   }
+      </div>
+    )
+  }
 }
 
 // const App = function() {
@@ -83,19 +78,18 @@ var App = function App() {
 
 */
 
-ReactDOM.render(<App />,document.querySelector('.container'));
-
-//placing the component in DOM
-
+ReactDOM.render(<App />, document.querySelector('.container'))
 
+// placing the component in DOM
 
 /*
 
 const App = function(){
-  return <ol>
+  return
+  <ol>
     <li>vinit</li>
     <li>shreya</li>
-  	</ol>;
+  </ol>;
 }
 
 the above code gets converted into

test/components/app_test.js

@@ -1,14 +1,14 @@
-import { renderComponent , expect } from '../test_helper';
-import App from '../../src/components/app';
-
-describe('App' , () => {
-  let component;
+import { renderComponent, expect } from '../test_helper'
+import App from '../../src/components/app'
+import { describe, beforeEach, it } from 'mocha'
+describe('App', () => {
+  let component
 
   beforeEach(() => {
-    component = renderComponent(App);
-  });
+    component = renderComponent(App)
+  })
 
   it('renders something', () => {
-    expect(component).to.exist;
-  });
-});
+    expect(component).assert.truthy
+  })
+})