Youtube 만들기 - 9) 구독 비디오 페이지 만들기

 

이번에는 구독한 비디오만 나타나는 페이지를 만들 것이다. 

순서

src>components>views>SubscriptionPage>SubscriptionPage.js파일을 만들어준다. 

import React from 'react'

function SubscriptionPage() {
    return (
        <div>
            SubscriptionPage
        </div>
    )
}

export default SubscriptionPage

 

App.js에 라우트를 추가해준다. 

import SubscriptionPage from "./views/SubscriptionPage/SubscriptionPage";


<Route exact path="/subscription" component={Auth(SubscriptionPage, null)} />

 

랜딩페이지에서의 템플릿을 복사해서 가져온다(비슷하기 때문에)

import React ,{useEffect,useState} from 'react'
import { FaCode } from "react-icons/fa";
import {Card, Icon, Avatar, Col, Typography, Row} from 'antd';
import { response } from 'express';
import moment from 'moment';
import Axios from 'axios';

const {Title} = Typography
const {Meta} = Card;

function SubscriptionPage() {
    const [Video, setVideo] = useState([])
        
    useEffect(() => {
        Axios.get('/api/video/getVideos')
        .then(response =>{
            if(response.data.success){
                setVideo(response.data.videos)

            }
            else{ 
                alert('비디오 가져오기를 실패 했습니다.')
            }
        })

    }, [])//input 부분이 없으면 계속 실행 있으면 한번만 실행

        const renderCards = Video.map((video,index)=>{
            var minutes = Math.floor(video.duration/60);
            var seconds = Math.floor((video.duration - minutes*60));
            
            return <Col lg = {6} md={8} xs={24}>
                {/* 하나의 동영상에 해당하는 페이지로 이동 */}
            <a href={`/video/post/${video._id}`}>
                <div style={{ position:'relative'}}>
                    <a href={`/video/${video._id}`}></a>
                    <img style = {{width:'100%'}} src={`http://localhost:5000/${video.thumbnail}`} alt=""/>
                    <div className="duration">
                        <span>{minutes}:{seconds}</span>

                    </div>
                </div>
            </a>
            <br/>
            <Meta
                avatar={
                    // Avatar는 유저 이미지 
                    <Avatar src={video.writer.image}/>
                }
                title = {video.title}
                description=""
            
            />
            <span>{video.writer.name}</span><br/>
            <span style={{marginLeft:'3rem'}}>{video.views} views</span> - <span>{moment(video.createdAt).format("MMM Do YY")}</span>

        </Col>
        })


    return (

        <div style={{ width:'85%', margin:'3rem auto'}}>
            <Title level={2}>Recommended</Title>
            <hr/>
            {/* Row하나당 Column의 갯수 정한다.  */}
            <Row gutter = {[32, 16]}>

                {renderCards}
                

            </Row>
        </div>
    )
}

export default SubscriptionPage

 

subscription페이지를 왼쪽 메뉴(탭)에 추가해보자. 

다음과 같이 변경해준다. 

 

import React from 'react';
import { Menu } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

function LeftMenu(props) {
  return (
    <Menu mode={props.mode}>
    <Menu.Item key="mail">
      <a href="/">Home</a>
    </Menu.Item>
    <Menu.Item key="mail">
      <a href="/subscription">Subscription</a>
    </Menu.Item>

  </Menu>
  )
}

export default LeftMenu

이제 가져오는 비디오 데이터를 조금 수정해보자. 

axios를 다음과 같이 수정해준다. 

여기서 비디오를 가져올 때는 조건에 맞는 것을 가져와야하므로 properties를 같이 넣어준다. 

 

    useEffect(() => {
        const subscriptionVariables = {
            userFrom: localStorage.getItem('userId')
        }
        Axios.post('/api/video/getSubscriptionVideos',subscriptionVariables)
        .then(response =>{
            if(response.data.success){
                setVideo(response.data.videos)

            }
            else{ 
                alert('비디오 가져오기를 실패 했습니다.')
            }
        })

    }, [])//input 부분이 없으면 계속 실행 있으면 한번만 실행

 

axios를 생성했으니 video.js파일에가서 route를 생성해줘야한다. 

 

mongodb 데이터에 가보면 이렇게 subscribers정보들이 나와있으니 이것을 이용해서 가져온다. 

router.post('/getSubscriptionVideos', (req, res)=>{
    //자신의 아이디를 가지고 구독하는 사람들을 다 찾는다. 
    Subscriber.find({userFrom: req.body.userFrom})
        .exec((err, SubscriberInfo) => {
            if(err) return res.status(400).send(err);
            //구독하는 사람들의 정보들이 SubscriberInfo에 담긴다.
            let subscribedUser = [];
            SubscriberInfo.map((subscriber, i)=>{
                subscribedUser.push(subscriber.userTo);
            })
            
    //찾는 사람들의 비디오를 가지고 온다. 
            //아이디에 맞는 사람의 정보를 가져와야한다. (그런데 구독한유저가 몇명인지 모르니까 $in을 사용한다. (in을 사용하면 subscribedUser안의 사람들 개개인마다 가져온다.))
            Video.find({writer: {$in : subscribedUser} })
                .populate('writer') //아이디만 가지고 있으니까 populate해서 유저정보를 가지고 온다.
                .exec((err, videos)=>{
                    if(err) return res.status(400).send(err);
                    res.status(200).json({succes:true, videos})
                })
        })


})

 

완성된 화면