RealWorld/realworld/src/main/webapp/WEB-INF/jsp/article/articleDetails.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>


<jsp:include page="/WEB-INF/jsp/include/head.jsp"></jsp:include>
<script>
    const follow = 'Follow ' + "${articleDetail.writerName}";
    const unfollow = 'Unfollow ' + "${articleDetail.writerName}";
    const favorite = 'Favorite Article';
    const unfavorite = 'Unfavorite Article';

    function userFollow() {
        const followBtn = document.querySelectorAll('.follow-btn');

        if ("${ssIsLogin}" === "true") {
            followBtn.forEach(button => {
                if (button.classList.contains('active')) {
                    button.querySelector('.follow').textContent = follow;
                    fetch("/user/unfollow", {
                        method: 'DELETE',
                        body: JSON.stringify({
                            fromUser: "${ssId}",
                            toUser: "${articleDetail.writerId}"
                        }),
                        headers: {
                            "Content-Type": "application/json"
                        }
                    })
                        .then(response => {
                            if (response.status === 200) {
                                return button.classList.remove('active');
                            }
                        })
                } else {
                    button.querySelector('.follow').textContent = unfollow;
                    fetch("/user/follow", {
                        body: JSON.stringify({
                            fromUser: "${ssId}",
                            toUser: "${articleDetail.writerId}"
                        }),
                        method: 'POST',
                        headers: {
                            "Content-Type": "application/json"
                        }
                    })
                        .then(response => {
                            if (response.status === 201) {
                                return button.classList.add('active');
                            }
                        })
                }
            })
        } else {
            location.href = "/user/signin"
        }
    }

    function articleFavorite() {
        const favoriteBtn = document.querySelectorAll('.favorite-btn');
        let counts = parseInt(event.target.querySelector('.count').textContent);
        let newCounts = counts + 1;

        if ("${ssIsLogin}" === "true") {
            favoriteBtn.forEach(button => {
                if (button.classList.contains('active')) {
                    button.querySelector('.favorite').textContent = favorite;
                    button.classList.remove('active');

                    fetch("/article/${articleDetail.id}/favorite", { method: 'DELETE' })
                        .then(response => {
                            if (response.status === 200) {
                                return button.querySelector('.count').textContent = counts - 1;
                            }
                        })
                } else {
                    button.querySelector('.favorite').textContent = unfavorite;
                    button.classList.add('active');

                    fetch("/article/${articleDetail.id}/favorite", {
                        body: JSON.stringify({
                            artilceId: "${articleDetail.id}",
                            userId: "${ssId}",
                            created: new Date()
                        }),
                        method: 'POST',
                        headers: {
                            "Content-Type": "application/json"
                        }
                    })
                        .then(response => {
                            if (response.status === 201) {
                                return button.querySelector('.count').textContent = newCounts;
                            }
                        })
                }
            })
        } else {
            location.href = "/user/signin"
        }
    }

    const deleteArticle = (targetArticleId) => {
        fetch("/article/" + targetArticleId, { method: 'DELETE' })
            .then(response => {
                console.table(response);
                if (response.status === 200) {
                    location.href = "/";
                }
            })
    }

    const postComments = () => {
        const commentInputArea = document.querySelector('#comment-input');
        const req = {
            userId: "${ssId}",
            articleId: "${articleDetail.id}",
            content: commentInputArea.value,
            created: new Date()
        }

        const postOptions = {
            body: JSON.stringify(req),
            method: 'POST',
            headers: {
                "Content-Type": "application/json"
            }
        };

        if (commentInputArea.value !== '') {
            fetch('/article/${articleDetail.id}/comment', postOptions)
                .then(response => {
                    if (response.status === 201) {
                        return displayComments();
                    }
                })
        }
        commentInputArea.value = '';
    }

    function deleteComment(targetCommentId) {
        fetch("/article/${articleDetail.id}/comment/" + targetCommentId, { method: 'DELETE' })
            .then(response => {
                if (response.status === 200) {
                    return displayComments();
                }
            })
    }

    function displayComments() {
        fetch('/article/${articleDetail.id}/comment/all', { method: 'GET' })
            .then(response => {
                if (response.status === 200) {
                    return response.json();
                }
            })
            .then(json => {
                const { comments } = json;
                const container = document.querySelector('.comments');

                while (container.firstChild) {
                    container.firstChild.remove();
                }

                comments.forEach(comment => {
                    const domParser = new DOMParser();
                    const domStrComment =
                        `<div class="card">
                            <div class="card-block">
                                <p class="card-text">
                                    \${comment.content}
                                </p>
                            </div>
                            <div class="card-footer comment-footer">
                                <div class="user-info">
                                    <a href="userpage-others.html" class="comment-author">
                                        <img class="comment-img" src="/resources/images/avatar.png" alt="">
                                    </a>
                                    <a href="userpage-others.html" class="comment-author">\${comment.username}</a>
                                    <span class="date-posted"></span>
                                </div>
                                <i style="display: none" class="fas fa-trash-alt" onclick="deleteComment('\${comment.id}')"></i>
                            </div>
                        </div>`;

                    const divComment = domParser.parseFromString(domStrComment, 'text/html').body.firstChild;
                    divComment.querySelector('.date-posted').textContent = new Date(comment.created).toLocaleString();
                    container.appendChild(divComment);
                    const icons = document.querySelectorAll('.comment-footer .fa-trash-alt');
                    icons.forEach(icon => {
                        if (comment.userId == "${ssId}") {
                            icon.style.display = 'block';
                        }
                    })
                })
            })

    }

    window.onload = () => {
        const tags = document.querySelector('.tag-list');
        const tagString = "${articleDetail.tags}"
        const tagList = tagString.split(',');
        if (tagString !== '') {
            tags.innerHTML = tagList.map(tag =>
                `<li class="tag">\${tag}</li>`
            ).join('');
        }

        const date = "${articleDetail.created}"
        document.querySelectorAll('.date').forEach(value =>
            value.textContent = new Date(date).toLocaleString()
        )

        const count = "${articleDetail.favoriteNum}";
        document.querySelectorAll('.count').forEach(value => {
            value.textContent = count;
        })

        const followString = document.querySelectorAll('.follow-btn');
        followString.forEach(value => {
            if(value.classList.contains('active')) {
                value.querySelector('.follow').textContent = unfollow;
            }
        })

        const favoriteString = document.querySelectorAll('.favorite-btn');
        favoriteString.forEach(value => {
            if (value.classList.contains('active')) {
                value.querySelector('.favorite').textContent = unfavorite;
            }
        })

        displayComments();
    }

</script>
</head>

<body>
    <jsp:include page="/WEB-INF/jsp/include/header.jsp"></jsp:include>

    <div class="article-page">
        <!-- Article Banner -->
        <section class="banner">
            <div class="container">
                <h1 class="article-banner-title">
                    <c:out value="${articleDetail.title}"></c:out>
                </h1>
                <div class="article-meta">
                    <div class="metadata">
                        <a href="userpage-my.html" class="profile-link">
                            <img src="/resources/images/avatar.png" alt="avatar">
                        </a>
                        <div class="article-info">
                            <a href="userpage-my.html" class="name">
                                <c:out value="${articleDetail.writerName}"></c:out>
                            </a>
                            <span class="date">
                            </span>
                        </div>
                        <c:choose>
                            <c:when test="${articleDetail.writerId eq ssId}">
                                <div class="buttons">
                                    <a href="/article/${articleDetail.id}/edit"
                                        class="edit-article btn-sm">
                                        <i class="fas fa-pencil-alt"> Edit Article</i>
                                    </a>
                                    <button class="delete-article btn-sm"
                                        onclick="deleteArticle('${articleDetail.id}')">
                                        <i class="fas fa-trash-alt"> Delete Article</i>
                                    </button>
                                </div>
                            </c:when>
                            <c:otherwise>
                                <div class="buttons">
                                    <button class="follow-btn btn-sm btn-meta <c:if test="${articleDetail.writerFollow eq true}">active</c:if>"
                                        onclick="userFollow()"
                                        >
                                        <i class="fas fa-plus"></i>
                                        <span class="follow">Follow <c:out
                                                value="${articleDetail.writerName}"></c:out>
                                            </span>
                                    </button>
                                    <button class="favorite-btn btn-sm btn-meta <c:if test="${articleDetail.favorite eq true}">active</c:if>"
                                        onclick="articleFavorite()">
                                        <i class="fas fa-heart"></i>
                                        <span class="favorite"> Favorite Article </span> (
                                        <span class="count">
                                        </span>
                                        )
                                    </button>
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>
        </section>

        <div class="container main">
            <div class="article-content">
                <div class="col-12">
                    <pre>
<c:out value="${articleDetail.content}"></c:out>
</pre>
                    <ul class="tag-list">
                    </ul>
                </div>
            </div>
            <hr>
            <div class="article-actions">
                <div class="article-meta">
                    <div class="metadata">
                        <a href="userpage-my.html" class="profile-link">
                            <img src="/resources/images/avatar.png" alt="avatar">
                        </a>
                        <div class="article-info">
                            <a href="userpage-my.html" class="name">
                                <c:out value="${articleDetail.writerName}"></c:out>
                            </a>
                            <span class="date">

                            </span>
                        </div>
                        <div class="buttons">
                        </div>
                        <c:choose>
                            <c:when test="${articleDetail.writerId eq ssId}">
                                <div class="buttons">
                                    <a href="/article/${articleDetail.id}/edit"
                                        class="edit-article btn-sm">
                                        <i class="fas fa-pencil-alt"> Edit Article</i>
                                    </a>
                                    <button class="delete-article btn-sm"
                                        onclick="deleteArticle('${articleDetail.id}')">
                                        <i class="fas fa-trash-alt"> Delete Article</i>
                                    </button>
                                </div>
                            </c:when>
                            <c:otherwise>
                                <div class="buttons">
                                    <button class="follow-btn btn-sm btn-meta <c:if test="${articleDetail.writerFollow eq true}">active</c:if>" onclick="userFollow()"
                                        >
                                        <i class="fas fa-plus"></i>
                                        <span class="follow">Follow <c:out
                                                value="${articleDetail.writerName}"></c:out>
                                            </span>
                                    </button>
                                    <button class="favorite-btn btn-sm btn-meta <c:if test="${articleDetail.favorite eq true}">active</c:if>"
                                        onclick="articleFavorite()">
                                        <i class="fas fa-heart"></i>
                                        <span class="favorite"> Favorite Article </span> (
                                        <span class="count">
                                        </span>
                                        )
                                    </button>
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>
            <!-- comment -->
            <div class="row">
                <div class="col-8">
                    <div class="card comment-form">
                        <div class="card-block">
                            <textarea id="comment-input" class="form-control"
                                placeholder="Write a comment..." rows="3"></textarea>
                        </div>
                        <div class="card-footer">
                            <img class="comment-img" src="/resources/images/avatar.png" alt="">
                            <button class="btn btn-card btn-sm" onclick="postComments()">Post
                                Comment</button>
                        </div>
                    </div>
                    <div class="comments">

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>