#12 Add videoを複数再生することができるように

src/components/App.js

@@ -1,13 +1,13 @@
 import React, { Component } from 'react'
 import LoadVideo from '../containers/LoadVideo'
-// import VideoList from '../containers/VideosList'
+import VideoList from '../containers/VideosList'
 
 class App extends Component {
   render() {
     return (
       <div className="App">
         <LoadVideo />
-        {/* <VideoList /> */}
+        <VideoList />
       </div>
     );
   }

src/components/LoadForm.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const LoadForm = props => (
+const LoadForm = ({ onLoadVideo }) => (
   <input type="file" onChange={e =>
-    props.onLoadVideo(e.target.files[0].path)} />
+    onLoadVideo(e.target.files[0].path)} />
 )
 
 LoadForm.propTypes = {

src/components/Video.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Video = ({ path }) => (
+  <video width="500" height="300" controls loop>
+    <source src={path}/>
+  </video>
+)
+
+Video.protoTypes = {
+  path: PropTypes.string.isRequired
+}
+
+export default Video

src/components/VideosListView.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Video from './Video'
+
+const VideosListView = ({ videos }) => (
+  videos.map((video, index) => (
+    <Video key={index} path={video.path} />
+  ))
+)
+
+VideosListView.propTypes = {
+  videos: PropTypes.arrayOf({
+    path: PropTypes.string.isRequired
+  })
+}
+
+export default VideosListView

src/containers/VideosList.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux'
+import VideoListView from '../components/VideosListView'
+
+const mapStateToProps = state => {
+  return {
+    videos: state
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {}
+}
+
+const LoadVideo = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(VideoListView)
+
+export default LoadVideo

src/reducers/videos.js

@@ -6,8 +6,8 @@ function videos(state = [], action) {
       return [
         ...state,
         {
-          file: action.file,
-          position: state.length
+          path: action.path,
+          // position: state.length
         }
       ]
     default: