Social Media 만들기 - 15) create, like, update, delete comment 구현하기

 

 

먼저 인풋박스를 만들어주자. 

import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { createComment } from '../../_actions/commentActions'

function InputComment({children,post , onReply, setOnReply}) {

    const [content, setContent] = useState("")

    const theme = useSelector(state => state.theme)
    const userLogin = useSelector(state => state.userLogin)
    const {userInfo} = userLogin

    const dispatch = useDispatch()

    const handleSubmit= (e) =>{
        e.preventDefault()

        if(!content.trim()) {
            if(setOnReply) return setOnReply(false)
            return
        } 

        setContent('')

        const newcomment = {
            content, 
            likes:[],
            user:userInfo.user,
            createdAt : new Date().toISOString(),
            reply: onReply && onReply.commentId,
            tag:onReply && onReply.user
        }
        
        dispatch(createComment({newcomment, post}))

        if(setOnReply) return setOnReply(false)

    }

    return (
        <form className="card-footer comment_input" onSubmit={handleSubmit} >
            {children}
            <input type="text" placeholder="Add your comments ..." value={content} onChange={e=>setContent(e.target.value)} style={{filter: theme? 'invert(1)': 'invert(0)', color: theme? 'white':'#111', background:theme? 'rgba(0,0,0,.03)':''}}/>

            <button type="submit" className="postBtn">
                Post
            </button>
        </form>
    )
}

export default InputComment

 

 

 

 

 

 

commentRouter를 먼저 작성해보자. 

commentRouter.post('/', auth, async(req, res)=>{

    try{
        const post = await Post.findById(req.body.postId)
        if(!post) return res.status(400).json({msg:'This post does not exist.'})

        if(req.body.reply){
            const cm = await Comment.findById(req.body.reply)
            if(!cm) return res.status(400).json({msg:"This comment does not exist."})
        }

        const newcomment = new Comment({
            user:req.user.id, content: req.body.content, tag:req.body.tag, reply:req.body.reply, postUserId: req.body.postUserId, postId:req.body.postId
        })

        await Post.findOneAndUpdate({_id:req.body.postId}, {
            $push:{comments:newcomment._id}
        }, {new:true})

        await newcomment.save()

        res.json({newcomment})

    }catch(err){
        return res.status(500).json({message:err.message})
    }
})

 

server.js에 라우터 추가해준다. 

app.use('/api/comment', require('./routes/commentRouter'))

 

comment constants

export const CREATE_COMMENT_REQUEST = 'CREATE_COMMENT_REQUEST'
export const CREATE_COMMENT_SUCCESS = 'CREATE_COMMENT_SUCCESS'
export const CREATE_COMMENT_FAIL = 'CREATE_COMMENT_FAIL'
export const CREATE_COMMENT_RESET = 'CREATE_COMMENT_RESET'

 

 

comment Action

export const createComment = ({newcomment, post})=> async(dispatch, getState)=>{

    dispatch({
        type:CREATE_COMMENT_REQUEST,
        payload:{loading:true}
    })

    const {userLogin:{userInfo}} = getState()


    try{
        const res = await axios.post('/api/comment', {...newcomment, postId: post._id, postUserId: post.user._id},{
            headers:{authorization:`Bearer ${userInfo.token}`}
        })
        const newpost = {...post, comments:[...post.comments, newcomment]}

        dispatch({
            type:CREATE_COMMENT_SUCCESS,
            payload:res.data.newcomment
        })

        dispatch({
            type:UPDATE_POST_SUCCESS,
            payload:newpost
        })




    }catch(error){
        dispatch({
            type:CREATE_COMMENT_FAIL,
            payload:                
            error.response && error.response.data.message
            ? error.response.data.message
            : error.message
        })
    }

}

 

 

comment reducer

export const commentCreateReducer = (state={}, action)=>{
    switch(action.type){
        case CREATE_COMMENT_REQUEST:
            return {loading:true}
        case CREATE_COMMENT_SUCCESS:
            return {newcomment:action.payload, loading:false}
        case CREATE_COMMENT_FAIL:
            return {loading:false, error:action.payload}
        case CREATE_COMMENT_RESET:
            return {}
        default:
            return state
    }
}

 

store.js

    createcomment:commentCreateReducer,

 

잘 생성된다. 

 

 

 

 

이제 커맨트를 보여주는 부분을 생성하자. 

 

커멘트 부분을 만들어줄것이다. 

 

 

커맨트는 전체적인 댓글부분에서 최상위 댓글을 나타내는 comment부분과 reply부분을 설정하는 commentdisplay와 

커멘트 자체를 보여주는 comment card로 나누어서 진행한다. 

 

comment.js

import React, { useEffect, useState } from 'react'
import CommentDisplay from '../comments/CommentDisplay'

function Comments({post}) {
    const [comments, setComments] = useState([])
    const [replyComments, setReplyComments] = useState([])
    const [showComments, setShowComments] = useState([])
    const [next, setNext] = useState(2)

    useEffect(() => {
        const newCm = post.comments.filter(cm=>!cm.reply)        
        setComments(newCm)
        setShowComments(newCm.slice(0,next))

        console.log(newCm.slice(newCm.length -next))
         console.log(comments)
    }, [post.comments, next])

    useEffect(() => {
        const newRep = post.comments.filter(cm=>cm.reply)
        setReplyComments(newRep)
    }, [post.comments])


    return (
        <div className="comments">
            {
                showComments.map((comment, index)=>(
                    <CommentDisplay key = {index} comment = {comment} post = {post}
                     replyCm={replyComments.filter(item=>item.reply===comment._id)}/>
                ))
            }
            {
                comments.length - next >0
                ? <div className="p-2border-top" style={{cursor:'pointer', color:'crimson'}} onClick={()=>setNext(next+10)}>
                    See more comments...
                </div>
                : comments.length>2 &&
                <div className="p-2 border-top" style={{cursor:'pointer', color:'crimson'}} onClick={()=>setNext(2)}>
                    Hide comments...
                </div>
            }
        </div>
    )
}

export default Comments

 

 

comment display.js

import React, { useEffect, useState } from 'react'
import CommentCard from './CommentCard'

function CommentDisplay({comment, post, replyCm}) {
    const [showReply, setShowReply] = useState([])
    const [next, setNext] = useState(1)

    useEffect(() => {
        setShowReply(replyCm.slice(0, next))
    }, [replyCm,next ])

    
    return (
        <div className="comment_display">
            <CommentCard comment={comment} post={post} commentId={comment._id} >
                <div className="pl-4">
                    {
                        showReply.map((item, index) => (
                            item.reply &&
                            <CommentCard
                            key={index}
                            comment={item}
                            post={post}
                            commentId={comment._id}
                             />
                        ))
                    }

                    {
                        replyCm.length - next > 0
                        ? <div style={{cursor: 'pointer', color: 'crimson'}}
                        onClick={() => setNext(next + 10)}>
                            See more comments...
                        </div>

                        : replyCm.length > 1 &&
                        <div style={{cursor: 'pointer', color: 'crimson'}}
                        onClick={() => setNext(1)}>
                            Hide comments...
                        </div>
                    }
                </div>
            </CommentCard>
        </div>
    )
}

export default CommentDisplay

 

 

각각 제일 최상위 댓글은 맨 처음에 2개를 보여주고, 댓글이 있다면, 맨처음 1개씩 보여주는 모양을 취하게 된다. 

 

 

 

커맨트 모양을 잡아주는 comment card를 만들자. 

여기서 댓글을 업데이트하고, 좋아요를 표시하고 해제하는 기능도 만들어준다. 

 

각각의 기능을 수행하는 부분은 likebutton을 이용해서 보여주고, comment Menu부분을 따로 빼내서 편집을 가능하도록 설정한다. 

 

reply부분은 댓글에 댓글을 남기는 부분으로, input 박스를 재활용해서 넣는다. 

댓글을 남길때는 최상위 커멘트를 기준으로 댓글들이 달리게 된다. 

 

 

import React, { useEffect, useState } from 'react'
import Avatar from '../Avatar'
import {Link} from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import moment from 'moment'
import LIkeButton from '../LIkeButton'
import InputComment from '../post_card/InputComment'
import CommentMenu from './CommentMenu'
import { likeComment, unlikeComment, updateComment } from '../../_actions/commentActions'

function CommentCard({children, comment, post, commentId}) {

    const [onEdit, setOnEdit] = useState(false)
    const [content, setContent] = useState(comment.content)
    const [readMore, setReadMore] = useState(false)
    const [onReply, setOnReply] = useState(false)
    const [isLike, setIsLike] = useState(false)

    const theme = useSelector(state => state.theme)
    const userLogin = useSelector(state => state.userLogin)
    const {userInfo} = userLogin

    const dispatch = useDispatch()
    

    useEffect(() => {
        setIsLike(false)
        setOnReply(false)
        if(comment.likes.find(like=>like._id ===userInfo.user._id)){
            setIsLike(true)
        }
    }, [comment, userInfo.user._id])


    const handleLike = () =>{
        if(isLike){
            dispatch(unlikeComment({comment, post}))
            setIsLike(false)
        }
        else{
            dispatch(likeComment({comment, post}))
            setIsLike(true)
        }
    }

    const handleReply= () =>{
        if(onReply) return setOnReply(false)
        setOnReply({...comment, commentId})

    }
    const handleUpdate=() =>{
        if(comment.content !==content){
            dispatch(updateComment({comment, post, content}))
            setOnEdit(false)
        }else{
            setOnEdit(false)
        }

    }
    
    return (
        <div className="comment_card mt-2" style={{opacity:comment._id? 1:0.5, pointerEvents:comment._id? 'inherit': 'none'}}>
            <Link to={`/profile/${comment.user._id}`} className="d-flex text-dark">
                <Avatar src={comment.user.avatar} size="small-avatar"/>
                <h6 className="mx-1">{comment.user.username}</h6>
            </Link>

            <div className="comment_content">
                <div className="flex-fill" style={{filter:theme? 'invert(1)' : 'invert(0)', color:theme? 'white':'#111'}}>
                    {
                        onEdit
                        ? <textarea rows="5" value={content} onChange={e=>setContent(e.target.value)} />
                        : <div>
                            {
                                comment.tag && comment.tag._id !== comment.user._id &&
                                <Link to={`/profile/${comment.tag._id}`} className="mr-1">
                                    @{comment.tag.username}
                                </Link>
                            }
                            <span>
                                {
                                    content?.length <100 ? content:
                                    readMore? content + ' ' : content?.slice(0, 100) + '....'
                                }
                            </span>
                            {
                                content?.length > 100 &&
                                <span className="readMore" onClick={()=>setReadMore(!readMore)}>
                                    {readMore? 'Hide content' : 'Read more'}
                                </span>
                            }
                        </div>
                    }
                    <div style={{cursor:'pointer'}}>
                        <small className="text-muted mr-3">
                            {moment(comment.createdAt).fromNow()}
                        </small>
                        <small className="font-weight-bold mr-3">
                            {comment.likes.length} likes
                        </small>
                        {
                            onEdit
                            ? <>
                                <small className="font-weight-bold mr-3" onClick={handleUpdate}>
                                    update
                                </small>
                                <small className="font-weight-bold mr-3" onClick={()=>setOnEdit(false)}>
                                    cancel
                                </small>
                            </>
                            : <small className="font-weight-bold mr-3" onClick={handleReply}>
                                {onReply? 'cancel': 'reply'}
                            </small>
                        }
                    </div>
                </div>

                <div className="d-flex align-items-center mx-2">
                    <CommentMenu post = {post} comment = {comment} setOnEdit={setOnEdit}/>
                    <LIkeButton isLike={isLike} handleLike={handleLike}/>
                    
                </div>
            </div>
            {
                onReply &&
                <InputComment post = {post} onReply={onReply} setOnReply={setOnReply}>
                    <Link to={`/profile/${onReply.user._id}`} className="mr-1">
                        @{onReply.user.username}
                    </Link>
                </InputComment>
            }

            {children}
        </div>
    )
}

export default CommentCard

 

 

comment menu.js

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { deleteComment } from '../../_actions/commentActions'

function CommentMenu({post,comment, setOnEdit}) {

    const userLogin = useSelector(state => state.userLogin)
    const {userInfo} = userLogin

    const dispatch = useDispatch()

    const handleRemove = () =>{
        if(post.user._id === userInfo.user._id || comment.user._id ===userInfo.user._id){
            dispatch(deleteComment({post, comment}))
        }
    }
    return (
        <div className="menu">
            {
                (post.user._id === userInfo.user._id || comment.user._id === userInfo.user._id) &&
                <div className="nav-item dropdown">
                    <span className="material-icons" id="moreLink" data-toggle="dropdown">
                        more_vert
                    </span>

                    <div className="dropdown-menu" aria-labelledby="moreLink">
                        {
                            post.user._id === userInfo.user._id
                            ? comment.user._id === userInfo.user._id
                            ?   <>
                                <div className="dropdown-item" onClick={()=>setOnEdit(true)}>
                                    <span className="material-icons">create</span> Edit
                                </div>
                                <div className="dropdown-item" onClick={handleRemove}>
                                    <span className="material-icons">delete_outline</span>Delete
                                </div>
                                </>
                                : <div className="dropdown-item">
                                    <span className="material-icons">delete_outline</span>Remove
                                </div>
                            : comment.user._id ===userInfo.user._id && 
                                <>
                                <div className="dropdown-item" onClick={()=>setOnEdit(true)}>
                                    <span className="material-icons">create</span> Edit
                                </div>
                                <div className="dropdown-item" onClick={handleRemove}>
                                    <span className="material-icons">delete_outline</span>Delete
                                </div>
                                </>
                        }
                    </div>
                </div>
            }
        </div>
    )
}

export default CommentMenu

 

style을 주자. 

comment.css

.comment_input{
    display: flex;
    align-items: center;
}
.comment_input input{
    background: #f7f7f7;
    border: none;
    outline: none;
    flex: 1;
    overflow: auto;
}
.comment_input .postBtn{
    border: none;
    outline: none;
    background: #f7f7f7;
    color: blue;
    font-weight: 600;
}
.comment_input .dropdown-menu{
    transform: translate3d(-120px, -200px, 0px) !important;
}

/* ---------- Comments ---------- */
.comment_display{
    padding: 10px 25px;
}
.comment_card .comment_content{
    background: #eee;
    padding: 7px;
    border-radius: 10px;
    border-top-left-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.comment_card .comment_content .readMore{
    cursor: pointer;
    color: crimson;
}

.comment_card .comment_content .nav-item{
    cursor: pointer;
    opacity: 0;
}
.comment_card .comment_content:hover .nav-item{
    opacity: 1;
}
.comment_card .comment_content .dropdown-menu{
    position: absolute;
    right: 0;
    left: inherit;
}
.comment_card .comment_content .dropdown-item{
    display: flex;
    margin: 10px 0;
}
.comment_card .comment_content textarea{
    width: 100%;
    border: none;
    outline: none;
}

global.css

/* -------- Comment ---------- */
@import url("./comment.css");

 

이제 라이크 버튼과 update, delete 버튼을활성화하는 router를 작성한다. 

 

 

먼저 like 버튼을 활성화하자. 

 

commentRouter.js

commentRouter.patch('/:id/like',auth, async(req, res)=>{
    try{
        const cm = await Comment.find({_id:req.params.id, likes:req.user.id})
        if(cm.length>0) return res.status(400).json({msg:"You already liked this comment."})

        const comment = await Comment.findOneAndUpdate({_id:req.params.id}, {
            $push:{likes:req.user.id}
        },{new:true})

        res.json({comment})
    }catch(err){
        return res.status(500).json({message:err.message})
    }
})

commentRouter.patch('/:id/unlike', auth, async(req, res)=>{
    try{
        const comment = await Comment.findOneAndUpdate({_id:req.params.id}, {
            $pull:{likes:req.user.id}
        }, {new:true})
        
        res.json({comment})
    }catch(err){
        return res.status(500).json({message:err.message})
    }
})

 

commentconstants.js

export const LIKE_COMMENT_REQUEST = 'LIKE_COMMENT_REQUEST'
export const LIKE_COMMENT_SUCCESS = 'LIKE_COMMENT_SUCCESS'
export const LIKE_COMMENT_FAIL = 'LIKE_COMMENT_FAIL'
export const LIKE_COMMENT_RESET = 'LIKE_COMMENT_RESET'

export const UNLIKE_COMMENT_REQUEST = 'UNLIKE_COMMENT_REQUEST'
export const UNLIKE_COMMENT_SUCCESS = 'UNLIKE_COMMENT_SUCCESS'
export const UNLIKE_COMMENT_FAIL = 'UNLIKE_COMMENT_FAIL'
export const UNLIKE_COMMENT_RESET = 'UNLIKE_COMMENT_RESET'

commentActions.js

export const likeComment = ({comment, post})=>async(dispatch, getState)=>{
    dispatch({
        type:LIKE_COMMENT_REQUEST,
        payload:{loading:true}
    })
    const {userLogin:{userInfo}} = getState()

    try{
        const res = await axios.patch(`/api/comment/${comment._id}/like`, null, {
            headers:{authorization:`Bearer ${userInfo.token}`}
        })

        const newComments = post.comments.map(postcomment=>(
            postcomment._id === comment._id? {comment, likes:[...comment.likes, userInfo.user]} : postcomment
        ))

        const newpost = {...post, comments:newComments}

        dispatch({
            type:LIKE_COMMENT_SUCCESS,
            payload:res.data.comment
        })

        dispatch({
            type:UPDATE_POST_SUCCESS,
            payload:newpost
        })

    }catch(error){
        dispatch({
            type:LIKE_COMMENT_FAIL,
            payload:                
            error.response && error.response.data.message
            ? error.response.data.message
            : error.message
        })
    }}

export const unlikeComment = ({comment, post})=>async(dispatch, getState)=>{
    dispatch({
        type:UNLIKE_COMMENT_REQUEST,
        payload:{loading:true}
    })
    const {userLogin:{userInfo}} = getState()

    try{
        const res = await axios.patch(`/api/comment/${comment._id}/unlike`, null, {
            headers:{authorization:`Bearer ${userInfo.token}`}
        })

        const newComments = post.comments.map(postcomment=>(
            postcomment._id === comment._id? {comment, likes:comment.likes.filter(cm=>cm._id !== userInfo.user._id)} : postcomment
        ))

        const newpost = {...post, comments:newComments}

        dispatch({
            type:UNLIKE_COMMENT_SUCCESS,
            payload:res.data.comment
        })

        dispatch({
            type:UPDATE_POST_SUCCESS,
            payload:newpost
        })

    }catch(error){
        dispatch({
            type:UNLIKE_COMMENT_FAIL,
            payload:                
            error.response && error.response.data.message
            ? error.response.data.message
            : error.message
        })
    }}

 

commentReducers.js

 

export const commentLikeReducer = (state={}, action)=>{
    switch(action.type){
        case LIKE_COMMENT_REQUEST:
            return {loading:true}
        case LIKE_COMMENT_SUCCESS:
            return {loading:false, comment:action.payload}
        case LIKE_COMMENT_FAIL:
            return {loading:false, error:action.payload}
        case LIKE_COMMENT_RESET:
            return {}
        default:
            return state
    }
}

export const commentUnlikeReducer = (state={}, action)=>{
    switch(action.type){
        case UNLIKE_COMMENT_REQUEST:
            return {loading:true}
        case UNLIKE_COMMENT_SUCCESS:
            return {loading:false, comment:action.payload}
        case UNLIKE_COMMENT_FAIL:
            return {loading:false, error:action.payload}
        case UNLIKE_COMMENT_RESET:
            return {}
        default:
            return state
    }
}

 

 

store.js

    likecomment:commentLikeReducer,
    unlikecomment:commentUnlikeReducer,

 

 

 

 

 

이제 댓글을 update하는 것을 진행하자. 

 

commentRouter.js

commentRouter.patch('/:id', auth, async(req, res)=>{
    try{
        const comment = await Comment.findOneAndUpdate({_id:req.params.id, user:req.user.id}, {content: req.body.content})
        res.json({comment})

    }catch(err){
        return res.status(500).json({message:err.message})
    }

})

 

 

commentConstants.js

export const UPDATE_COMMENT_REQUEST = 'UPDATE_COMMENT_REQUEST'
export const UPDATE_COMMENT_SUCCESS = 'UPDATE_COMMENT_SUCCESS'
export const UPDATE_COMMENT_FAIL = 'UPDATE_COMMENT_FAIL'
export const UPDATE_COMMENT_RESET = 'UPDATE_COMMENT_RESET'

commentActions.js

export const updateComment = ({comment, post, content})=>async(dispatch, getState)=>{
    dispatch({
        type:UPDATE_COMMENT_REQUEST,
        payload:{loading:true}
    })
    const {userLogin:{userInfo}} = getState()

    try{
        const res = await axios.patch(`api/comment/${comment._id}`, {content},{
            headers:{authorization:`Bearer ${userInfo.token}`}
        })

        const newComments = post.comments.map(postcomment =>(
            postcomment._id ===comment._id? {...comment, content}: postcomment
        ))
        const newpost = {...post, comments:newComments}

        dispatch({
            type:UPDATE_COMMENT_SUCCESS,
            payload:res.data.comment
        })

        dispatch({
            type:UPDATE_POST_SUCCESS,
            payload:newpost
        })

    }catch(error){
        dispatch({
            type:UPDATE_COMMENT_FAIL,
            payload:                
            error.response && error.response.data.message
            ? error.response.data.message
            : error.message
        })
    }
}

 

commentReducers.js

export const commentUpdateReducer = (state={}, action)=>{
    switch(action.type){
        case UPDATE_COMMENT_REQUEST:
            return {loading:true}
        case UPDATE_COMMENT_SUCCESS:
            return {loading:false, comment:action.payload}
        case UPDATE_COMMENT_FAIL:
            return {loading:false, error:action.payload}
        case UPDATE_COMMENT_RESET:
            return {}
        default:
            return state
    }
}

 

store.js

    updatecomment:commentUpdateReducer,

 

 

 

이제 delete를 진행하자. 

 

commentRouter.js

 

commentRouter.delete('/:id', auth, async(req, res)=>{
    try{
        const comment =  await Comment.findOneAndDelete({
            _id:req.params.id,
            $or:[
                {user:req.user.id},
                {postUserId:req.user.id}
            ]
        })

        await Post.findOneAndUpdate({_id:comment.postId}, {
            $pull:{comments:req.params.id}
        })

        res.json({comment})

    }catch(err){
        return res.status(500).json({message:err.message})
    }})

commentConstants.js

 

export const DELETE_COMMENT_REQUEST = 'DELETE_COMMENT_REQUEST'
export const DELETE_COMMENT_SUCCESS = 'DELETE_COMMENT_SUCCESS'
export const DELETE_COMMENT_FAIL = 'DELETE_COMMENT_FAIL'

 

commentActions.js

export const deleteComment= ({post, comment})=>async(dispatch, getState)=>{

    dispatch({
        type:DELETE_COMMENT_REQUEST,
        payload:{loading:true}
    })

    const {userLogin:{userInfo}} = getState()

    try{

        const deleteArr = [...post.comments.filter(cm=>cm.reply === comment._id), comment]
        const newpost = {...post, comments:post.comments.filter(cm=>!deleteArr.find(da=>cm._id ===da._id))}
       
        deleteArr.forEach(async(deletecm)=>{
             await axios.delete(`/api/comment/${deletecm._id}`, {
                headers:{authorization:`Bearer ${userInfo.token}`}
            })

        })

        dispatch({
            type:DELETE_COMMENT_SUCCESS,
            payload:deleteArr
        })

        dispatch({
            type:UPDATE_POST_SUCCESS,
            payload:newpost
        })
    }catch(error){
        dispatch({
            type:DELETE_COMMENT_FAIL,
            payload:                
            error.response && error.response.data.message
            ? error.response.data.message
            : error.message
        })
    }
}

 

commentReducers.js

export const commentDeleteReducer = (state={}, action)=>{
    switch(action.type){
        case DELETE_COMMENT_REQUEST:
            return {loading:true}
        case DELETE_COMMENT_SUCCESS:
            return {loading:false, success:true}
        case DELETE_COMMENT_FAIL:
            return {loading:false, error:action.payload}
        default:
            return state
    }
}

 

store.js

    deletecomment:commentDeleteReducer,

 

잘 사라졌다.