Node.js - Twitter Clone Coding // Retweeting posts

 

post.js

const express = require('express');
const app = express();
const router = express.Router();
const bodyParser = require("body-parser");
const User = require('../../schemas/UserSchema');
const Post = require('../../schemas/PostSchema');



app.use(bodyParser.urlencoded({ extended:false}));



router.get("/", (req, res, next)=>{
   Post.find()
    .populate("postedBy")
    //retweet
    .populate("retweetData")
    .sort({ "createdAt" : -1}) // 시간순으로 정렬하려면 -1 해야함. 1은 디폴트값
    .then(async results=>{
        //retweet
        //the root of retweetData is Post, and the root of Post can be identified by postedBy@@@@
        results = await User.populate(results, { path : "retweetData.postedBy"})
        res.status(200).send(results);
     })
    .catch(error => {
        console.log(error);
        res.sendStatus(400);
    })
})



router.post("/", async (req, res, next)=>{
    //session 을 통해 누가 로그인 했는지 알 수 있다. 
    if(!req.body.content) {
        console.log("Content param not sent with request");
        return res.sendStatus(400);
    }

    var postData ={
        content : req.body.content,
        postedBy : req.session.user
    }

    //callback ??인지??
    Post.create(postData)
        .then( async newPost =>{//201 : Created!, 200 :Success!

            newPost = await User.populate(newPost, { path : "postedBy"})
            
            res.status(201).send(newPost);
        })
        .catch( error =>{
            console.log(error);
            res.sendStatus(400);
        })
    //res.status(200).send("it worked");
})


//like를 위해 추가 
//url : `/api/posts/${postId}/like`
router.put("/:id/like", async (req, res, next)=>{//:id말고 다른 아이디 네임 작성해도 괜찮음
    
    //console.log(req.params.id);// :id라고 적어서 id라고 작성함 

    var postId = req.params.id;
    var userId = req.session.user._id;//session을 통해서 누군지 알 수 있음 

    // have to check same person already pressed like or not
    // 이미 좋아요 누른 경우 
    var isLiked = req.session.user.likes && req.session.user.likes.includes(postId);
    
    //console.log("Is liked: " + isLiked);

    var option = isLiked ? "$pull" : "$addToSet"; //mongoDB에서 쓰는..
    
    console.log("is liked : " + isLiked);
    console.log("option : " + option);
    console.log("User Id : " + userId);


    //Insert User Table like (need to update)
    //here have to put await !! 비동기 시스템이라 안하면 user table에 like 필드가 안나타난다. 
    //option을 valuable 하게 사용하려고 [] 씀 & like가 아니라 ! User테이블의 likes 필드명
    //unlike 가 실행이 안됐던 이유 : findByIdAndUpdate 가 실행되면서 새롭게 업데이트 된 document를 리턴하지 않아서 
    req.session.user = await User.findByIdAndUpdate(userId, { [option] : { likes: postId} }, { new : true})
        .catch(error => {
            console.log(error);
            res.sendStatus(400);
        })

    //Insert Post Table like (need to update)
    var post= await Post.findByIdAndUpdate(postId, { [option] : { likes: userId} }, { new : true})
        .catch(error => {
            console.log(error);
            res.sendStatus(400);
        })

    res.status(200).send(post);
})

//retweet를 위해 추가
router.post("/:id/retweet", async (req, res, next)=>{

    //return res.status(200).send("response test") // retweet 버튼반응테스트

    var postId = req.params.id;
    var userId = req.session.user._id;

    //Try and delete retweet    
    var deletedPost = await Post.findOneAndDelete({ postedBy : userId, retweetData : postId }) // retweetData
        .catch(error => {
            console.log(error);
            res.sendStatus(400);
        })

    var option = deletedPost !=null ? "$pull" : "$addToSet"; 


    //return res.status(200).send(option);
    //NOTE : REPOST HAS A VALUE!!! @@@@@
    var repost = deletedPost;

    if(repost == null){
        repost = await Post.create({ postedBy : userId, retweetData: postId })// retweetData
            .catch(error => {
                console.log(error);
                res.sendStatus(400);
            })
    }
    //NOTE : Retweet 에서 id는 Post 테이블의 postId가 될 수 없다. repost의 고유한 id가 되어야 한다. @@@@@@
    //User Table
    req.session.user = await User.findByIdAndUpdate(userId, { [option] : { retweets: repost._id} }, { new : true})
        .catch(error => {
            console.log(error);
            res.sendStatus(400);
        })

    //Post Table
    var post= await Post.findByIdAndUpdate(postId, { [option] : { retweetUsers: userId} }, { new : true})
        .catch(error => {
            console.log(error);
            res.sendStatus(400);
        })

    res.status(200).send(post);
})



module.exports = router;

common.js

// $(document).ready(()=>{//from main-layout.png!!!
//     //alert("hola"); //파일에 js 연결 잘 됐는지 확인
// })


//버튼 활성화 시키기
$("#postTextarea").keyup(event =>{//여기서 파라미터가 1개면 () 필요없이 그냥 사용가능
    var textbox = $(event.target);
    var value=textbox.val().trim();
    //console.log(value);

    var submitButton = $("#submitPostButton");//# 중요해

    //==랑 ===차이점 @@@
    if(submitButton.lengh == 0) return alert("No submit button found");

    if (value==""){
        submitButton.prop("disabled", true);
        return;
    }
    submitButton.prop("disabled", false);


})

//작성한 글 저장
$("#submitPostButton").click(()=>{
    var button = $(event.target);
    var textbox = $("#postTextarea");

    var data={
        //object
        content:textbox.val()
    }

    //ajax만들기(request, which will send the data to the server without us having to reload the page)
    $.post("/api/posts", data, postData => { //()=>{} : callback 함수
    // 여기에서 data를 "/api/post"로 요청 req 하고 끝나면  ()=>{} 함수로 돌아오겠다, callback 해라는 이야기 
        //alert(postData);
        //console.log(postData);
        var html = createPostHtml(postData);
        //prepend(top) & apend(end)
        $(".postsContainer").prepend(html);
        textbox.val("");//remove the textbox
        button.prop("disabled", true);
    })

})


//like를 위해서 @@@@important@@@@@
//document 전체페이지가 로딩된 후 버튼 이벤트를 통해서 실행
$(document).on("click", ".likeButton", (event)=>{
    
    //alert("button clicked");
    var button = $(event.target);
    var postId = getPostIdFromElement(button);
    //console.log(postId);

    //중요 : ajax로 put request(create@@@) 하기 (but 한번 사용했던 이름으로 $.post or $.get으로는 재사용 불가능)
    if(postId === undefined) return;
    
    $.ajax({
        url : `/api/posts/${postId}/like`,
        type : "PUT", // PUT 이나 POST 나 둘 다 작동함 
        //callback (arrow function)
        success: (postData)=>{//if on success they are gonna be return postData
           // console.log(postData.likes.length);//크롬콘솔에 찍힐예정 -> like :1 , unlike :0
           //버튼 누를시 새로고침 없이 숫자 나타내기
           button.find("span").text(postData.likes.length || "");
       
           if(postData.likes.includes(userLoggedIn._id)){// .id는 user 테이블에 자동 pk id number값
                button.addClass("active");
           }else{
            button.removeClass("active");
           }

        }
    })


});




//리트윗을 위해서 
$(document).on("click", ".retweetButton", (event)=>{
    
    var button = $(event.target);
    var postId = getPostIdFromElement(button);

    if(postId === undefined) return;
    
    $.ajax({
        url : `/api/posts/${postId}/retweet`,
        type : "POST", //PUT->POST
        success: (postData)=>{

           //console.log(postData);

           button.find("span").text(postData.retweetUsers.length || "");
       
           if(postData.retweetUsers.includes(userLoggedIn._id)){
                button.addClass("active");
           }else{
            button.removeClass("active");
           }

        }
    })


});







//각 포스팅된 것들의 pk 넘버 찾는것 
function getPostIdFromElement(element){
    var isRoot = element.hasClass("post");
    var rootElement = isRoot == true ? element : element.closest(".post");
    var postId = rootElement.data().id;//data().id 의미 : 밑에있는 data-id

    if(postId === undefined) return alert("Post id undefined");

    return postId;
}





function createPostHtml(postData){
    //return postData.content;

    if(postData == null) return alert("post object is null");

    //retweet
    var isRetweet = postData.retweetData !== undefined;
    var retweetedBy = isRetweet ? postData.postedBy.userName : null;
    postData = isRetweet ? postData.retweetData : postData;

    console.log(isRetweet);


    //html 작업하기
    var postedBy = postData.postedBy;

    //Have to Populated!! 
    if(postedBy._id === undefined){
        return console.log("User object not populated");
    }


    var displayName=postedBy.firstName + " " + postedBy.lastName;
    //시간 변경하기
    var timestamps = timeDifference(new Date(), new Date(postData.createdAt));

    //showing correct button colour when page loads
    var likeButtonActiveClass = postData.likes.includes(userLoggedIn._id) ? "active" : "";
    //page reloading 했을때 리트윗이 있으면 색 그대로 유지하기
    var retweetButtonActiveClass = postData.retweetUsers.includes(userLoggedIn._id) ? "active" : "";



    //retweet
    var retweetedText = '';
    if(isRetweet){
        retweetedText = `<span>
                                <i class='fas fa-retweet '></i>
                                Retweeted by <a href ='/profile/${retweetedBy}'>@${retweetedBy}</a>
                        </span>`
    }


    return `<div class='post' data-id='${postData._id}'>
                
                <div class='postActionContainer'>
                    ${retweetedText}
                </div>

                <div class='mainContentContainer'>
                    <div class='userImageContainer'>
                        <img src='${postedBy.profilePic}'>
                    </div>
                    <div class='postContentContainer'>
                        <div class='header'>
                            <a href='/profile/${postedBy.userName}' class='displayName'>${displayName}</a>
                            <span class='userName'>@${postedBy.userName}</span>
                            <span class='date'>${timestamps}</span>
                        </div>
                        <div class='postBody'>
                            <span>${postData.content}</span>
                        </div>
                        <div class='postFooter'>
                            <div class='postButtonContainer'>
                                <button>
                                    <i class='far fa-comment'></i>
                                </button>
                            </div>
                            <div class='postButtonContainer green'>
                                <button class='retweetButton ${retweetButtonActiveClass}'>
                                    <i class='fas fa-retweet '></i>
                                    <span>${postData.retweetUsers.length || ""}</span>
                                </button>
                            </div>
                            <div class='postButtonContainer red'>
                                <button class='likeButton ${likeButtonActiveClass}'>
                                    <i class='far fa-heart'></i>
                                    <span>${postData.likes.length || ""}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;
}

//posting 한 시간을 시간그대로 나타내는게 아니라 ㅇㅇ전이라고 표시하기
function timeDifference(current, previous) {

    var msPerMinute = 60 * 1000;
    var msPerHour = msPerMinute * 60;
    var msPerDay = msPerHour * 24;
    var msPerMonth = msPerDay * 30;
    var msPerYear = msPerDay * 365;

    var elapsed = current - previous;

    if (elapsed < msPerMinute) {
         if(elapsed/1000 < 30) return "Just Now"
         return Math.round(elapsed/1000) + ' seconds ago';   
    }

    else if (elapsed < msPerHour) {
         return Math.round(elapsed/msPerMinute) + ' minutes ago';   
    }

    else if (elapsed < msPerDay ) {
         return Math.round(elapsed/msPerHour ) + ' hours ago';   
    }

    else if (elapsed < msPerMonth) {
        return Math.round(elapsed/msPerDay) + ' days ago';   
    }

    else if (elapsed < msPerYear) {
        return  Math.round(elapsed/msPerMonth) + ' months ago';   
    }

    else {
        return Math.round(elapsed/msPerYear ) + ' years ago';   
    }
}

PostSchema.js

const mongoose = require("mongoose");

const Schema = mongoose.Schema;

const PostSchema = new Schema({
    content :  { type: String, trim : true },
    postedBy :  { type: Schema.Types.ObjectId, ref: 'User'}, // Schema.Types.ObjectId -> mongodb가 자동으로 populate 할 수 있다. 
    pinned :  Boolean, // 고정하기 
    //likes도 마찬가지로 User의 object이다@@
    likes:[{ type: Schema.Types.ObjectId, ref: 'User'}],
    //retweet
    retweetUsers : [{ type: Schema.Types.ObjectId, ref: 'User'}], // [] ->every tweet uses
    //the root of retweetData is Post, and the root of Post can be identified by postedBy@@@@@
    retweetData : { type: Schema.Types.ObjectId, ref: 'Post'}//retweet 하는 just id of the post every retwitting...
}, {timestamps:true});

var Post = mongoose.model('Post', PostSchema);
module.exports = Post;

main.css

:root{
    --blue: #1FA2F1;
    --blueLight:#9BD1F9;
    --buttonHoverBg:#d4edff;
    --lightGrey:rgb(230, 236, 240);
    --spacing:15px;
    --greyText:rgb(101,110,134);
    --greyButtonText:rgba(0,0,0,0.34);
    --red:rgb(226, 34,94);
    --redBackground:rgba(226,34,94,0.1);
    --green:rgb(23, 1991,99);
    --greenBackground:rgba(23,191,99,0.1);
}

*{
    outline:none imp !important;
}



a{
    color: inherit;   
}

a:hover{
    color:inherit;
    text-decoration: none;
}

h1{
    font-size: 19px;
    font-weight: 800;
    margin: 0;
}




nav a:hover{
    background-color: var(--buttonHoverBg);
    color: var(--blue);
    border-radius: 50%;
}


nav{
    display:flex;
    flex-direction:column;
    align-items : flex-end;
    height:100%
    
}

nav a{
    padding: 10px;
    font-size: 30px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav a.blue{
    color: var(--blue);
}

button{
    background-color: transparent;
    border: none;
    color:var(--greyButtonText);
}

button i,
button span{
    pointer-events: none;
}

.mainSectionContainer{
    padding: 0;
    border-left: 1px solid var(--lightGrey);
    border-right: 1px solid var(--lightGrey);
    display : flex;
    flex-direction: column;
}

.titleContainer {
    height : 53px;
    padding : 0 var(--spacing);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--lightGrey);
    flex-shrink: 0;
}

.titleContainer h1{
    flex:1;
}

.postFormContainer{
    display: flex;
    padding : var(--spacing);
    border-bottom: 10px solid rgb(230, 236, 240);
    flex-shrink: 0;
}

.userImageContainer{
    width: 50px;
    height: 50px;

}

.userImageContainer img{
    width: 100%;
    border-radius: 50%;
    background-color: white;
}

.textareaContainer{
    flex:1;
    padding-left: var(--spacing);

}

.textareaContainer textarea{
    width: 100%;
    border: none;
    resize:none;
    font-size: 25px;
}

#submitPostButton{
    background-color: var(--blue);
    color: white;
    border: none;
    border-radius: 40px;
    padding: 7px 15px;
}
#submitPostButton:disabled{
    background-color: var(--blueLight);
}

.post{
    display: flex;
    flex-direction: column;
    padding:var(--spacing);
    cursor: pointer;
    border-bottom: 1px solid var(--lightGrey);
    flex-shrink: 0;

}

.mainContentContainer{
    flex:1;
    display: flex;
}

.postContentContainer{
    padding-left: var(--spacing);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.userName,
.date{
    color:var(--greyText)
}

.displayName{
    font-weight:bold;
}

.postFooter{
    display: flex;
    align-items: center;
}

.postFooter .postButtonContainer{
    flex:1;
    display: flex;
}

.postFooter .postButtonContainer button{
    padding: 2px 7px; 
}

.header a:hover{
    text-decoration: underline;
}
.header a,
.header span{
    padding-right: 5px;
}

.postButtonContainer button:hover{
    background-color: #d4eeff;
    color: var(--blue);
    border-radius: 50%;
}

.postButtonContainer.red button.active{
    color: var(--red);
}

.postButtonContainer.red button:hover{
    color: var(--red);
    background-color: var(--redBackground);
}


.postButtonContainer.green button.active{
    color: var(--green);
}

.postButtonContainer.green button:hover{
    color: var(--green);
    background-color: var(--greenBackground);
}

.postActionContainer{
    padding-left: 35px;
    padding-bottom: 10px;
    font-size: 13px;
    font-weight:bold;
    color: var(--greyText);
    
}

UserSchema.js

const mongoose = require("mongoose");



const Schema = mongoose.Schema;

const UserSchema = new Schema({//괄호 안에 옵션넣기 
   firstName : { type:String, required : true, trim : true },
   lastName : { type:String, equired : true,trim : true },
   userName : { type:String, equired : true,trim : true, unique : true },
   email : { type:String, equired : true,trim : true, unique : true },
   password : { type:String, equired : true},
   profilePic : { type:String, default : "/images/profilePic.png"},
   //PostSchema.js에 like 필드가 추가되었으니 여기도 추가해줘야한다.(User->Post라고 디비 이름 변경)
   likes:[{ type: Schema.Types.ObjectId, ref: 'Post'}],
   retweets:[{ type: Schema.Types.ObjectId, ref: 'Post'}]

}, {timestamps:true});

var User = mongoose.model('User', UserSchema);
module.exports = User;

app.js

const express = require('express');
const app = express();
const port = 3003;
const middleware = require('./middleware');//it means that current folder is equal .
//css파일 알려주기
const path = require('path');
const bodyParser = require("body-parser");
const mongoose=require("./database");
const session = require("express-session");





const server = app.listen(port, ()=>{//callback 함수 
    console.log("Server listening on port" + port);
});

//서버에 알려주기
app.set("view engine", "pug");
app.set("views", "views");


//바디파서 서버에게 알려주기
app.use(bodyParser.urlencoded({ extended:false}));
//정적파일(css) 서버에게 알려주기
app.use(express.static(path.join(__dirname, '/public'))); 

//session
app.use(session({//passing option 설정
    secret: "bbq chips",
    resave: true,
    saveUninitialized:false
}))




// Routes
const loginRoute = require('./routes/loginRoutes');
const registerRoute = require('./routes/registerRoutes');
const logoutRoute = require('./routes/logout');

//Api routes
const postApiRoute = require('./routes/api/posts');




app.use("/login", loginRoute);//
app.use("/register", registerRoute);//re
app.use("/logout", logoutRoute);


//Api
app.use("/api/posts", postApiRoute);





//get(1,2,3) -> 1,2,3... 순서대로 execute
app.get("/", middleware.requireLogin, (req, res, next)=>{//it means that / is equal views 
    var payload={
        pageTitle:"Home",
        userLoggedIn: req.session.user,//server 가 사용하는 session
        //like를 위해서 (서버->클라이언트 전달)
        //data 를 전달하기 위해서 user object 를 -> String (userLoggedInJs를 main-layout.pug 템플릿에서 사용해야 함!)
        userLoggedInJs: JSON.stringify(req.session.user)//client 가 사용하는 session(for like)
    }
    res.status(200).render("home",payload); // 이게 views/home.pug 
});