Skip to content

Commit

Permalink
adding comment, likes and blog editing
Browse files Browse the repository at this point in the history
  • Loading branch information
@kennyg37
kennyg37 committed Apr 30, 2024
1 parent f302f98 commit 6d7c3cc
Show file tree
Hide file tree
Showing 7 changed files with 445 additions and 254 deletions.
307 changes: 205 additions & 102 deletions src/js/blog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,16 @@ function closemenu() {
sidemenu.style.right = "-350px"
}

const overlay = document.querySelector('.overlay');
// preloader

function openoverlay() {
overlay.style.display = 'block';
setTimeout(() => {
overlay.style.opacity = '1';
}, 50);
function showPreloader() {
document.getElementById('preloader').style.display = 'flex';
}

function closeoverlay() {
overlay.style.opacity = '0';
setTimeout(() => {
overlay.style.display = 'none';
}, 300);
function hidePreloader() {
document.getElementById('preloader').style.display = 'none';
}

const addBlog = document.getElementById('add-blog');
const commentForm = document.getElementById('comment-form');
const comments = document.querySelector('.comments');
const switchButton = document.getElementById('switch');

addBlog.addEventListener('click', function() {
commentForm.style.display = 'block';
comments.style.display = 'none';
addBlog.style.display = 'none';
switchButton.style.display = 'block';

});
switchButton.addEventListener('click', function() {
commentForm.style.display = 'none';
comments.style.display = 'block';
addBlog.style.display = 'block';
switchButton.style.display = 'none';
})

// alert box

const alertBox = document.querySelector('.alertBox');
const paragraph = document.querySelector('.alertBox p');
Expand Down Expand Up @@ -117,41 +93,75 @@ function openalert(message) {
newsContainer.appendChild(blogIcons);

const likeIconContainer = document.createElement('div');
const blogId = blog.id;
likeIconContainer.id = `likeIconContainer_${blogId}`;
likeIconContainer.classList.add('likeIcon', 'icon');
blogIcons.appendChild(likeIconContainer);

const likeIcon = document.createElement('i');
likeIcon.classList.add('fa-solid', 'fa-heart');
likeIcon.setAttribute('onclick', `toggleLike('${blog.id}')`);
likeIcon.setAttribute('onclick', `toggleLike('${blogId}')`);
likeIconContainer.appendChild(likeIcon);


const likeCount = document.createElement('p');
likeCount.classList.add('lcount');
likeCount.textContent = blog.likes;
likeIconContainer.appendChild(likeCount);

const commentIconContainer = document.createElement('div');
commentIconContainer.classList.add('commentIcon', 'icon');
blogIcons.appendChild(commentIconContainer);


const commentIcon = document.createElement('i');
commentIcon.classList.add('fa-solid', 'fa-comment');
commentIcon.setAttribute('onclick', `openoverlay('${blog.id}')`);
commentIcon.setAttribute('onclick', `openoverlay('${blogId}')`);
commentIconContainer.appendChild(commentIcon);

const commentCount = document.createElement('p');
commentCount.classList.add('ccount');
commentCount.textContent = blog.commentsCount;
commentIconContainer.appendChild(commentCount);


const shareIconContainer = document.createElement('div');
shareIconContainer.classList.add('shareIcon', 'icon');
blogIcons.appendChild(shareIconContainer);

const shareIcon = document.createElement('i');
shareIcon.classList.add('fas', 'fa-share');
shareIconContainer.appendChild(shareIcon);
});
});
}

})
} catch (error) {

}

function toggleLike(blogId) {
const likeIcon = document.getElementById(`likeIconContainer_${blogId}`);

if (likeIcon.classList.contains('liked')) {
likeIcon.classList.remove('liked');
unlike(blogId);
const likeCount = likeIcon.querySelector('.lcount');
likeCount.textContent = parseInt(likeCount.textContent) - 1;
console.log('unliked');
} else {
likeIcon.classList.add('liked');
addLike(blogId);
const likeCount = likeIcon.querySelector('.lcount');
likeCount.textContent = parseInt(likeCount.textContent) + 1;
console.log('liked');
}
}


function addLike(){
function addLike(blogId){
const usertoken = localStorage.getItem('guest_token');
const id = blogId;
fetch(`https://my-brand-ken-ganza-1.onrender.com/v1/blog/like/${id}`, {
method: 'PUT',
headers: {
Expand All @@ -165,96 +175,189 @@ function addLike(){
setTimeout(() => {
closealert();
}, 3000);
} else if(response === 401){
openalert('log in to like this blog');
setTimeout(() => {
closealert();
const likeIcon = document.getElementById(`likeIconContainer_${blogId}`);
likeIcon.classList.remove('liked');
}, 3000);
} else{
console.log('like request successful');
}
return response.json();
})
.then(data => {
openalert('Blog liked successfully');
setTimeout(() => {
closealert();
}, 3000);
})
.catch(error => {
console.error('Error liking blog:', error);
});
}
function unlike(){
function unlike(blogId){
const usertoken = localStorage.getItem('guest_token');
const id = localStorage.getItem('blogId');
const id = blogId;
fetch(`https://my-brand-ken-ganza-1.onrender.com/v1/blog/delete/like/${id}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${usertoken}`
}
})
.then(response => response.json())
.then(data => {
console.log(data);
openalert('Blog unliked successfully');
setTimeout(() => {
closealert();
}, 3000);
.then(response => {
if (!response.ok) {
openalert('log in to like this blog');
setTimeout(() => {
closealert();
}, 3000);
} else if(response === 401){
openalert('log in to perform this action');
setTimeout(() => {
closealert();
}, 3000);
}
return response.json();

})
.catch(error => {
console.error(error);
});
}
function toggleLike(element) {
if (element.classList.contains('liked')) {
element.classList.remove('liked');
unlike();
const nlikes = parseInt(localStorage.getItem('likes'));
const likes = document.querySelector('.lcount');
likes.textContent = nlikes;
console.log('unliked');
} else {
element.classList.add('liked');
addLike();
const nlikes = parseInt(localStorage.getItem('likes')) + 1;
const likes = document.querySelector('.lcount');
likes.textContent = nlikes;
console.log('liked');
// setTimeout(() => {
// element.classList.remove('liked');
// }, 2000);

const overlay = document.querySelector('.overlay');

function openoverlay(blogId) {
blogToggle(blogId);
fetchComments(blogId)
.then(comments => {
displayComments(comments);
overlay.style.display = 'block';
setTimeout(() => {
overlay.style.opacity = '1';
}, 50);
})
.catch(error => {
console.error('Error fetching comments:', error);
});
}
function closeoverlay() {
overlay.style.opacity = '0';
setTimeout(() => {
overlay.style.display = 'none';
}, 300);
}

async function fetchComments(blogId) {
const response = await fetch(`https://my-brand-ken-ganza-1.onrender.com/v1/blog/data/comments/${blogId}`);
if (!response.ok) {
openalert('An error occured while fetching comments');
}
}
return await response.json();
}

function displayComments(comments) {
const commenter = localStorage.getItem('gusername');
const commentContainer = document.querySelector('.comments');
commentContainer.innerHTML = '';

if (comments.length === 0) {
const noComment = document.createElement('p');
noComment.textContent = 'No comments yet';
commentContainer.appendChild(noComment);
} else {
comments.forEach(comment => {
const commentDiv = document.createElement('div');
commentDiv.classList.add('comment');
commentContainer.appendChild(commentDiv);

const addCommentForm = document.getElementById('commentForm');
const message = document.getElementById('message');
const commentUser = document.createElement('h2');
commentUser.textContent = commenter;
commentUser.classList.add('cname');
commentDiv.appendChild(commentUser);

addCommentForm.addEventListener('submit', function(event) {
event.preventDefault();

const comment = message.value;

const id = localStorage.getItem('blogId');
const usertoken = localStorage.getItem('guest_token');
fetch(`https://my-brand-ken-ganza-1.onrender.com/v1/blog/comment/${id}` , {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${usertoken}`
},
body: JSON.stringify({
comment: comment
})
})
.then(response => response.json())
.then(data => {
console.log(data);
openalert('Comment added successfully');
setTimeout(() => {
closealert();
const commentContent = document.createElement('p');
commentContent.classList.add('commentparagraph');
commentContent.textContent = comment;
commentDiv.appendChild(commentContent);
});
}
}

function blogToggle(blogId){
const addBlog = document.getElementById('add-blog');
const commentForm = document.getElementById('comment-form');
const comments = document.querySelector('.comments');
const switchButton = document.getElementById('switch');

addBlog.addEventListener('click', function() {
commentForm.style.display = 'block';
comments.style.display = 'none';
addBlog.style.display = 'none';
switchButton.style.display = 'block';

});
switchButton.addEventListener('click', function() {
commentForm.style.display = 'none';
comments.style.display = 'block';
addBlog.style.display = 'block';
switchButton.style.display = 'none';
});

const addCommentForm = document.getElementById('commentForm');
const message = document.getElementById('message');

addCommentForm.addEventListener('submit', function(event) {
event.preventDefault();
submitCommentForm(blogId);
addCommentForm.reset();
}, 3000);
})
.catch(error => {
console.log(error);
openalert('An error occured while adding comment');
})
})

function submitCommentForm(blogId){
const comment = message.value;
const usertoken = localStorage.getItem('guest_token');

showPreloader();
fetch(`https://my-brand-ken-ganza-1.onrender.com/v1/blog/comment/${blogId}` , {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${usertoken}`
},
body: JSON.stringify({
comment: comment
})
})
.then(response => {
if (!response.ok) {
openalert('log in to comment on this blog');
setTimeout(() => {
hidePreloader();
closealert();
commentForm.reset();
}, 3000);
} else if(response === 401){
openalert('log in to comment on this blog');
setTimeout(() => {
hidePreloader();
closealert();
commentForm.reset();
closeoverlay();
}, 3000);
}
else{
openalert('Comment added successfully');
setTimeout(() => {
hidePreloader();
closealert();
commentForm.reset();
}, 3000);
}
return response.json();
})
.catch(error => {
console.log(error);
openalert('An error occured while adding comment');
setTimeout(() => {
closealert();
}, 3000);
});
}
});
}

Loading

0 comments on commit 6d7c3cc

Please sign in to comment.