Comment Model 만들기
import mongoose from "mongoose";
const commentSchema = new mongoose.Schema({
text: { type: String, required: true },
owner: { type: mongoose.Schema.Types.ObjectId, required: true, ref: "User" },
video: { type: mongoose.Schema.Types.ObjectId, required: true, ref: "Video" },
createAt: { type: Date, required: true, default: Date.now() },
});
const Comment = mongoose.model("Comment", commentSchema);
export default Comment;
const videoSchema = new mongoose.Schema({
fileUrl: { type: String, required: true },
thumbUrl: { type: String, required: true },
title: { type: String, required: true, trim: true, maxlength: 80 },
description: { type: String, required: true, trim: true, minlength: 10 },
createdAt: { type: Date, required: true, default: Date.now },
hashtags: [{ type: String, trim: true }],
meta: {
views: { type: Number, default: 0, required: true },
rating: { type: Number, default: 0, required: true },
},
comments: [{ type: mongoose.Schema.Types.ObjectId, ref: "Comment" }],
owner: { type: mongoose.Schema.Types.ObjectId, required: true, ref: "User" },
});
const userSchema = new mongoose.Schema({
email: { type: String, required: true, unique: true },
avatarUrl: { type: String },
socialOnly: { type: Boolean, default: false },
username: { type: String, required: true, unique: true },
password: { type: String },
name: { type: String, required: true },
location: { type: String },
videos: [{ type: mongoose.Schema.Types.ObjectId, ref: "Video" }],
comments: [{ type: mongoose.Schema.Types.ObjectId, ref: "Comment" }],
});
로그인한 유저만 댓글 달 수 있게 하기위해 조건문을 썼다.
if loggedIn
div.video__comments
form.video__comment-form#commentForm
textarea(cols="30", rows="10", placeholder="공개 댓글 추가...")
button 댓글
comment 백엔드에 보내기
const videoContainer = document.getElementById("videoContainer");
const form = document.querySelector("#commentForm");
const handleSubmit = e => {
e.preventDefault();
const textarea = form.querySelector("textarea");
const text = textarea.value;
const videoId = videoContainer.dataset.id;
if (text === "") {
return;
}
fetch(`/api/videos/${videoId}/comment`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
text,
}),
});
};
form.addEventListener("submit", handleSubmit);
req.body를 통해 프론트에서 fetch로 보내준 내용을 얻을 수 있다.
export const createComment = (req, res) => {
console.log(req.body);
return res.end();
};
받은 comment로 comment create하기
export const createComment = async (req, res) => {
const {
session: { user },
body: { text },
params: { id },
} = req;
const video = await Video.findById(id);
if (!video) {
return res.sendStatus(404);
}
const comment = await Comment.create({
text,
owner: user._id,
video: id,
});
console.log(comment);
return res.sendStatus(201);
};
export const createComment = async (req, res) => {
const {
session: { user },
body: { text },
params: { id },
} = req;
const video = await Video.findById(id);
if (!video) {
return res.sendStatus(404);
}
const comment = await Comment.create({
text,
owner: user._id,
video: id,
});
video.comments.push(comment._id);
await video.save();
return res.sendStatus(201);
};
reverse()
메서드는 배열의 순서를 반전한다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 된다.
div.video__comments
ul
each comment in video.comments.reverse()
li.video__comment=comment.text