Merge pull request AgileVentures#163 from nataliyah123/107-separate-component-for-videos

separate component for videos

Author: mattwr18

src/components/EventSummary.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react'
-import { Header, Segment, Grid, Embed, Image, Icon } from 'semantic-ui-react'
+import { Header, Segment, Grid, Image, Icon } from 'semantic-ui-react'
 import CustomRingLoader from './CustomRingLoader'
+import Videos from './Videos'
 import ReactHtmlParser from 'react-html-parser'
 import moment from 'moment-timezone'
 
@@ -61,24 +62,7 @@ const EventSummary = props => {
               </Grid>
             </Segment>
           </Grid.Column>
-          <Grid.Column width={4} className='event-info-videos'>
-            {event.videos ? event.videos
-              .filter(video => video.yt_video_id !== null)
-              .map(video => (
-                <Fragment key={video.id}>
-                  <Embed
-                    id={video.yt_video_id}
-                    placeholder={
-                      'https://img.youtube.com/vi/' +
-                      video.yt_video_id +
-                      '/3.jpg'
-                    }
-                    source='youtube'
-                  />
-                  <p>{video.title}</p>
-                </Fragment>
-              )) : null}
-          </Grid.Column>
+          <Videos name={event} id='event-info-videos' />
         </Grid>
       </Fragment>
     )

src/components/ProjectSummary.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react'
-import { Header, Image, Grid, Card, Icon, Segment, Embed } from 'semantic-ui-react'
+import { Header, Image, Grid, Card, Icon, Segment } from 'semantic-ui-react'
 import CustomRingLoader from './CustomRingLoader'
+import Videos from './Videos'
 import { Link } from 'react-router-dom'
 import '../assets/ProjectSummary.css'
 
@@ -110,24 +111,7 @@ const ProjectSummary = props => {
             </Grid>
           </Fragment>
         </Grid.Column>
-        <Grid.Column width={4} className='project-info-videos'>
-          {project.videos
-            .filter(video => video.yt_video_id !== null)
-            .map(video => (
-              <Fragment key={video.id}>
-                <Embed
-                  id={video.yt_video_id}
-                  placeholder={
-                    'https://img.youtube.com/vi/' +
-                        video.yt_video_id +
-                        '/3.jpg'
-                  }
-                  source='youtube'
-                />
-                <p>{video.title}</p>
-              </Fragment>
-            ))}
-        </Grid.Column>
+        <Videos name={project} id='project-info-videos' />
       </Grid>
     )
   } else {

src/components/UserSummary.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react'
-import { Card, Image, Grid, Label, Tab, Embed, Icon } from 'semantic-ui-react'
+import { Card, Image, Grid, Label, Tab, Icon } from 'semantic-ui-react'
 import CustomRingLoader from './CustomRingLoader'
+import Videos from './Videos'
 import moment from 'moment'
 import '../assets/UserSummary.css'
 
@@ -221,24 +222,7 @@ const UserSummary = props => {
                 className='user-profile-tabs'
               />
             </Grid.Column>
-            <Grid.Column width={4} className='user-profile-videos'>
-              {user.videos
-                .filter(video => video.yt_video_id !== null)
-                .map(video => (
-                  <Fragment key={video.id}>
-                    <Embed
-                      id={video.yt_video_id}
-                      placeholder={
-                        'https://img.youtube.com/vi/' +
-                        video.yt_video_id +
-                        '/3.jpg'
-                      }
-                      source='youtube'
-                    />
-                    <p>{video.title}</p>
-                  </Fragment>
-                ))}
-            </Grid.Column>
+            <Videos name={user} id='user-profile-videos' />
           </Grid.Row>
         </Grid>
       </Fragment>

src/components/Videos.js

@@ -0,0 +1,27 @@
+import React, { Fragment } from 'react'
+import { Grid, Embed } from 'semantic-ui-react'
+
+const Videos = (props) => {
+  return (
+    <Grid.Column width={4} className={props.id}>
+      {props.name.videos
+        .filter(video => video.yt_video_id !== null)
+        .map(video => (
+          <Fragment key={video.id}>
+            <Embed
+              id={video.yt_video_id}
+              placeholder={
+                'https://img.youtube.com/vi/' +
+                        video.yt_video_id +
+                        '/3.jpg'
+              }
+              source='youtube'
+            />
+            <p>{video.title}</p>
+          </Fragment>
+        ))}
+
+    </Grid.Column>
+  )
+}
+export default Videos