was implemented list component to show items searched

Author: ltaverao95

src/modules/domain/common.ts

@@ -0,0 +1,5 @@
+export namespace Common{
+
+    export const YOUTUBE_URL = 'https://www.googleapis.com/youtube/v3/search';
+    export const API_KEY = 'AIzaSyAvucYb8pcxTx20CHE6StwLF8iGT76K1RA';
+}

src/modules/domain/index.ts

@@ -3,6 +3,7 @@ export * from './models';
 export * from './reducers';
 export * from './selectors';
 export * from './services';
+export * from './common';
 export * from './actions';
 export * from './actionTypes';
 export * from './videoSearchBar';

src/modules/domain/services.ts

@@ -1,4 +1,6 @@
 import * as u from 'updeep';
+import axios from 'axios';
+import YTSearch from 'youtube-api-search';
 
 import {
 
@@ -10,13 +12,15 @@ import {
 import {
 
     //Models
-    IdEntityBase
+    IdEntityBase,
+    Common,
+    VideoSearchBar
 
 } from './';
 
 export namespace Services {
 
-    export class EntityMapStorageService{
+    export class EntityMapStorageService {
 
         public storeById<TEntity extends IdEntityBase>(previousEntityMap: EntityMap<TEntity>, newEntityMap: TEntity): EntityMap<TEntity> {
 
@@ -31,9 +35,9 @@ export namespace Services {
             return newEntityMapState;
         }
 
-        public storeByAllIds(previousIdsList:Array<string>, idEntityBase:IdEntityBase) : Array<string>{
-            
-            if(previousIdsList.indexOf(idEntityBase.id) == -1){
+        public storeByAllIds(previousIdsList: Array<string>, idEntityBase: IdEntityBase): Array<string> {
+
+            if (previousIdsList.indexOf(idEntityBase.id) == -1) {
                 return [...previousIdsList, idEntityBase.id];
             }
 

src/modules/video-list-item/components/VideoListItem.tsx

@@ -4,43 +4,49 @@ import {
     Media
 } from 'react-bootstrap';
 
-export class VideoListItem extends React.Component<undefined, undefined>{
+import {
+
+    Video
+
+} from '../../domain';
+
+interface OwnProps {
+    videosList: Array<Video>;
+}
+
+export class VideoListItem extends React.Component<OwnProps, undefined>{
 
     render() {
 
         return (
             <div>
-                <Panel>
-                    <Media>
-                        <Media.Left align="top">
-                            <img width={64} height={64} src="/assets/thumbnail.png" alt="Image" />
-                        </Media.Left>
-                        <Media.Body>
-                            <Media.Heading>Top aligned media</Media.Heading>
-                        </Media.Body>
-                    </Media>
-                </Panel>
-                <Panel>
-                    <Media>
-                        <Media.Left align="top">
-                            <img width={64} height={64} src="/assets/thumbnail.png" alt="Image" />
-                        </Media.Left>
-                        <Media.Body>
-                            <Media.Heading>Top aligned media</Media.Heading>
-                        </Media.Body>
-                    </Media>
-                </Panel>
-                <Panel>
+                {
+                    this.getContent()
+                }
+            </div>
+        );
+    }
+
+    private getContent() {
+        
+        if (!this.props.videosList ||
+            this.props.videosList.length == 0) {
+            return <span></span>
+        }
+
+        return this.props.videosList.map((video: Video, index: number) => {
+            return (
+                <Panel key={index}>
                     <Media>
                         <Media.Left align="top">
-                            <img width={64} height={64} src="/assets/thumbnail.png" alt="Image" />
+                            <img width={64} height={64} src={video.videoImgUrl} alt="Image" />
                         </Media.Left>
                         <Media.Body>
-                            <Media.Heading>Top aligned media</Media.Heading>
+                            <Media.Heading>{video.title}</Media.Heading>
                         </Media.Body>
                     </Media>
                 </Panel>
-            </div>
-        );
+            );
+        });
     }
 }

src/modules/video-list/components/VideoList.tsx

@@ -3,17 +3,40 @@ import {
     Panel
 } from 'react-bootstrap';
 
+import {
+
+    Video
+
+} from '../../domain';
+
 import {
     VideoListItem
 } from '../../video-list-item/components/VideoListItem';
 
-export class VideoList extends React.Component<undefined, undefined>{
+export interface OwnProps {
+
+}
+
+export interface VideoListProps{
+    videosList: Array<Video>;
+}
+
+export interface VideoListDispatch{
+
+}
+
+export class VideoList extends React.Component<VideoListProps & VideoListDispatch & OwnProps, undefined>{
+
+    constructor(props: VideoListProps & VideoListDispatch & OwnProps){
+
+        super(props);
+    }
 
     render() {
 
         return (
             <Panel>
-                <VideoListItem />               
+                <VideoListItem videosList={this.props.videosList} />               
             </Panel>
         );
     }

src/modules/video-list/containers/VideoListContainer.ts

@@ -5,38 +5,27 @@ import { connect } from 'react-redux';
 
 import {
 
-    AppState,    
+    AppState,
+    Actions,
+    Selectors
 
 } from '../../domain';
 
-/*import {
-    Actions
-} from '../actions';
-
-import {
-    Selectors
-} from '../selectors';*/
-
 import { 
+    
+    OwnProps,
+    VideoListProps,
+    VideoListDispatch,
     VideoList
+    
 } from '../components/VideoList';
 
-interface OwnProps {
-
-}
 
-interface VideoListProps{
-    
-}
 
 const mapStateToProps = (appState: AppState): VideoListProps => ({    
-    
+    videosList: Selectors.Videos.getVideosList(appState)
 });
 
-interface VideoListDispatch{
-
-}
-
 const mapDispatchToProps = (dispatch: any /*redux.Dispatch<Captions.ManageCaptionViewModel>*/): VideoListDispatch => ({
 
 });

src/modules/video-search-bar/components/VideoSearchBar.tsx

@@ -9,7 +9,8 @@ import {
 import {
 
     AppState,
-    VideoSearchBar as VideoSearchBarModule
+    VideoSearchBar as VideoSearchBarModule,
+    Common
 
 } from '../../domain';
 
@@ -25,9 +26,6 @@ export interface VideoSearchBarDispatch {
     storeVideosResult: (videoSearchViewModel: VideoSearchBarModule.VideoSearchViewModel) => void;
 }
 
-const YOUTUBE_URL = 'https://www.googleapis.com/youtube/v3/search';
-const API_KEY = 'AIzaSyAvucYb8pcxTx20CHE6StwLF8iGT76K1RA';
-
 export class VideoSearchBar extends React.Component<VideoSearchBarProps & VideoSearchBarDispatch & OwnProps, undefined>{
 
     private videoSearchViewModel: VideoSearchBarModule.VideoSearchViewModel;
@@ -82,22 +80,22 @@ export class VideoSearchBar extends React.Component<VideoSearchBarProps & VideoS
 
         const params = {
             part: 'snippet',
-            key: API_KEY,
+            key: Common.API_KEY,
             q: this.videoSearchViewModel.videoSearchName,
             type: 'video'
         };
 
-        const request = axios.get(YOUTUBE_URL, { params: params });
+        const request = axios.get(Common.YOUTUBE_URL, { params: params });
 
         request.then((response: any) => {
             console.log(response.data);
 
-            let videoDTO = new VideoSearchBarModule.VideoDTO();
-
             this.videoSearchViewModel.videoSearchDTO.searchResult = [];
 
             response.data.items.map((item) => {
 
+                let videoDTO = new VideoSearchBarModule.VideoDTO();
+
                 videoDTO.id = item.id.videoId;
                 videoDTO.title = item.snippet.title;
                 videoDTO.imageUrl = item.snippet.thumbnails.medium.url;

src/modules/video-search-bar/services.ts

@@ -84,7 +84,7 @@ export namespace Services {
             let video = new Video();
 
             video.id = this.nextId.toString();
-            video.title = video.title;
+            video.title = videoDTO.title;
             video.videoImgUrl = videoDTO.imageUrl;
             video.videoDetailId = this.nextId.toString();