Fix warnings/errors

Author: djroush

src/clients/TwitchClientImpl.ts

@@ -5,7 +5,7 @@ import $ from 'jquery';
 
 class TwitchClientImpl implements Twitch.Client {
 
-  const baseRequest = {
+  baseRequest = {
     type: 'GET',
     dataType: 'json',
     beforeSend: function (xhr: JQuery.jqXHR<any>) {

src/components/App.tsx

@@ -7,9 +7,10 @@ import SearchBar from '../components/SearchBar'
 import NavBar from '../components/NavBar'
 import TabsContainer from '../components/TabsContainer'
 
-type AppState = {
+export type AppState = {
   activeTab?: string;
   user?: AppUser;
+  videoid: number
 }
 
 class App extends React.Component<{}, AppState> {
@@ -74,7 +75,6 @@ class App extends React.Component<{}, AppState> {
 
 
   render() {
-	const user = this.state.user
 	const loadUser = this.loadUser.bind(this)
 	const videoClick = this.videoClick.bind(this)
 	const headerClick = this.clickNavHeader.bind(this)

src/components/ClipsTab.tsx

@@ -19,7 +19,7 @@ type ClipsTabState = {
 class ClipsTab extends React.Component<ClipsTabProps, ClipsTabState> {
   twitchClient: Twitch.Client = TwitchClientFactory.getInstance();
 
-  loadClips(user: string) {
+  loadClips(user: AppUser) {
 	const callback = this.getClipsCallback.bind(this);
      this.twitchClient.getClips(user.id, callback);
   }
@@ -81,7 +81,6 @@ class ClipsTab extends React.Component<ClipsTabProps, ClipsTabState> {
        </div>
       )
     } else {
-	  const className = "tab" + (isActive ? " active" : "");
       const clipList = !clips ? "" : clips.map((clip: AppClip) =>
         <a data-id={clip.id} key={clip.id} className="clip" onClick={clipClick}>
           <img src={clip.thumbnail_url}/>

src/components/NavBar.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import '../css/NavBar.css'
 
-import {AppState} from '../components/App'
 import NavHeader from '../components/NavHeader'
+import type {AppState} from '../components/App'
 
 type NavBarProps = {
 	headerClick: () => (event: React.MouseEvent<any, any>) => void;
@@ -19,31 +19,34 @@ class NavBar extends React.Component<NavBarProps, AppState> {
     const isClipsActive = activeTab === 'clips'
 
     const className = user === null ? "hidden": ""
-    const innerHTML = user === null ? "" : 
-    	<div id="profile" key={user.id}>
+    const userProfileDiv = user === null ? "" : (
+      <div id="profile" key={user.id}>
         <img className="profileImage" src={user.profile_image_url}></img>
         <span>{user.display_name}</span>
       </div>
+    )
+    const navHeaderDiv = user === null ? "" : 
       <div>
         <ul>  
           <NavHeader isActive={isStreamActive} text="Stream" onClick={headerClick}/>
           <NavHeader isActive={isVideosActive} text="Videos" onClick={headerClick}/>
           <NavHeader isActive={isClipsActive} text="Clips" onClick={headerClick}/>
         </ul>
       </div>
- 
 
     return (
       <div id="channelNavBar" className={className}>
-        {innerHTML}
+        {userProfileDiv}
+        {navHeaderDiv}
       </div>	
     )	
   }
 }
 
 NavBar.prototype.state = {
 	activeTab: null,
-	user: null
+	user: null,
+	videoid: null
 }
 
 export default NavBar;

src/components/SearchBar.tsx

@@ -5,7 +5,7 @@ import $ from 'jquery'
 import '../css/SearchBar.css'
 
 type SearchBarProps = {
-	loadUser: () => (channel: string) => void
+	loadUser: (channel: string) => void
 }
 
 class SearchBar extends React.Component<SearchBarProps, {}> {

src/components/TabsContainer.tsx

@@ -19,7 +19,7 @@ type TabsContainerState = {
 	videoid: number
 }
 
-class TabsContainer extends React.Component<{}, TabsContainerState> {
+class TabsContainer extends React.Component<TabsContainerProps, TabsContainerState> {
   streamTab: StreamTab
   videosTab: VideosTab
   clipsTab:  ClipsTab

src/components/VideosTab.tsx

@@ -15,17 +15,17 @@ type VideosTabState = {
 }
 
 class VideosTab extends React.Component<VideosTabProps, VideosTabState> {
-  twitchClient: TwitchClient = TwitchClientFactory.getInstance()
+  twitchClient: Twitch.Client = TwitchClientFactory.getInstance()
 
   loadVideos(user: AppUser) {
     const callback = this.getVideosCallback.bind(this);
 	this.twitchClient.getVideos(user.id, callback);	
   }
 
   getVideosCallback(getVideosResponse: Twitch.VideosResponse) {
-	const twitchVideos: TwitchVideo[] = getVideosResponse.data
+	const twitchVideos: Twitch.Video[] = getVideosResponse.data
 	const videos: AppVideo[] = [];
-    twitchVideos.forEach(function(twitchVideo: TwitchVideo) {
+    twitchVideos.forEach(function(twitchVideo: Twitch.Video) {
 	    const now = new Date();
 	  	const thumbnail_url= twitchVideo.thumbnail_url.replace("%{width}", "304").replace("%{height}", "171");
 	  	const published_date = new Date(twitchVideo.published_at);