Skip to content

Commit

Permalink
feat: refactor comment
Browse files Browse the repository at this point in the history
  • Loading branch information
@dewanakl
dewanakl committed Jan 18, 2025
1 parent 6ed476e commit a801c4e
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 18 deletions.
58 changes: 51 additions & 7 deletions js/app/component/comment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,38 @@ import { request, HTTP_GET, HTTP_POST, HTTP_DELETE, HTTP_PUT } from '../../conne

export const comment = (() => {

/**
* @type {ReturnType<typeof storage>|null}
*/
let owns = null;

/**
* @type {ReturnType<typeof storage>|null}
*/
let user = null;

/**
* @type {ReturnType<typeof storage>|null}
*/
let tracker = null;

/**
* @type {ReturnType<typeof storage>|null}
*/
let showHide = null;

/**
* @returns {string}
*/
const onNullComment = () => {
return `<div class="text-center p-4 my-2 bg-theme-${theme.isDarkMode('dark', 'light')} rounded-4 shadow"><p class="fw-bold p-0 m-0" style="font-size: 0.95rem;">Yuk bagikan undangan ini biar banyak komentarnya</p></div>`;
};

/**
* @param {string} id
* @param {boolean} disabled
* @returns {void}
*/
const changeButton = (id, disabled) => {
document.querySelector(`[data-button-action="${id}"]`).childNodes.forEach((e) => {
e.disabled = disabled;
Expand Down Expand Up @@ -175,12 +198,14 @@ export const comment = (() => {
}

if (nameValue.length == 0) {
name.scrollIntoView({ behavior: 'smooth' });
alert('Silakan masukkan nama Anda.');
return;
}

const presence = document.getElementById('form-presence');
if (!id && presence && presence.value == '0') {
presence.scrollIntoView({ behavior: 'smooth' });
alert('Silakan pilih status kehadiran Anda.');
return;
}
Expand Down Expand Up @@ -216,7 +241,7 @@ export const comment = (() => {
const response = await request(HTTP_POST, '/api/comment')
.token(session.getToken())
.body(dto.postCommentRequest(id, nameValue, isPresence, form.value))
.send(dto.postCommentResponse)
.send(dto.getCommentResponse)
.then((res) => res, () => null);

if (name) {
Expand Down Expand Up @@ -252,7 +277,7 @@ export const comment = (() => {
const comments = document.getElementById('comments');
pagination.setResultData(comments.children.length);

if (comments.children.length == pagination.getPer()) {
if (pagination.getResultData() == pagination.getPer()) {
comments.lastElementChild.remove();
}

Expand Down Expand Up @@ -285,7 +310,7 @@ export const comment = (() => {
containerDiv.querySelector(`button[onclick="undangan.comment.like.like(this)"][data-uuid="${id}"]`).insertAdjacentHTML('beforebegin', card.renderReadMore(id, anchorTag ? anchorTag.getAttribute('data-uuids').split(',').concat(uuids) : uuids));
}

addEventLike(response.data);
addListenerLike(response.data);
};

const cancel = (id) => {
Expand Down Expand Up @@ -358,7 +383,7 @@ export const comment = (() => {

return request(HTTP_GET, `/api/comment?per=${pagination.getPer()}&next=${pagination.getNext()}`)
.token(session.getToken())
.send()
.send(dto.getCommentsResponse)
.then((res) => {
pagination.setResultData(res.data.length);
comments.setAttribute('data-loading', 'false');
Expand Down Expand Up @@ -386,7 +411,7 @@ export const comment = (() => {
comments.innerHTML = res.data.map((c) => card.renderContent(c)).join('');

res.data.forEach(fetchTracker);
res.data.forEach(addEventLike);
res.data.forEach(addListenerLike);

return res;
});
Expand Down Expand Up @@ -424,6 +449,11 @@ export const comment = (() => {
}
};

/**
* @param {HTMLAnchorElement} anchor
* @param {string} uuid
* @returns {void}
*/
const showMore = (anchor, uuid) => {
const comment = document.getElementById(`content-${uuid}`);
const original = util.base64Decode(comment.getAttribute('data-comment'));
Expand All @@ -434,15 +464,23 @@ export const comment = (() => {
anchor.setAttribute('data-show', isCollapsed ? 'true' : 'false');
};

const addEventLike = (comment) => {
/**
* @param {ReturnType<typeof dto.getCommentResponse>} comment
* @returns {void}
*/
const addListenerLike = (comment) => {
if (comment.comments) {
comment.comments.forEach(addEventLike);
comment.comments.forEach(addListenerLike);
}

const bodyLike = document.getElementById(`body-content-${comment.uuid}`);
bodyLike.addEventListener('touchend', () => like.tapTap(bodyLike));
};

/**
* @param {ReturnType<typeof dto.getCommentResponse>} comment
* @returns {void}
*/
const fetchTracker = (comment) => {
if (!session.isAdmin()) {
return;
Expand Down Expand Up @@ -473,8 +511,14 @@ export const comment = (() => {
});
};

/**
* @returns {void}
*/
const scroll = () => document.getElementById('comments').scrollIntoView({ behavior: 'smooth' });

/**
* @returns {void}
*/
const init = () => {
like.init();
card.init();
Expand Down
6 changes: 6 additions & 0 deletions js/app/component/pagination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,11 @@ export const pagination = (() => {
*/
const getNext = () => pageNow;

/**
* @returns {number}
*/
const getResultData = () => resultData;

/**
* @returns {void}
*/
Expand Down Expand Up @@ -216,6 +221,7 @@ export const pagination = (() => {
getNext,
reset,
setResultData,
getResultData,
previous,
next,
};
Expand Down
29 changes: 18 additions & 11 deletions js/connection/dto.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,27 +26,33 @@ export const dto = (() => {
};

/**
* @param {{uuid: string, own: string, name: string, presence: boolean, comment: string, created_at: string}} postComment
* @returns {{uuid: string, own: string, name: string, presence: boolean, comment: string, is_admin: boolean, created_at: string, comments: postCommentResponse[], like: {love: number}}}
* @param {{ uuid: string, own: string, name: string, presence: boolean, comment: string, created_at: string, is_admin: boolean, ip: string, user_agent: string, comments: getCommentResponse[], like: {love: number} }} data
* @returns {{ uuid: string, own: string, name: string, presence: boolean, comment: string, created_at: string, is_admin: boolean, ip: string, user_agent: string, comments: getCommentResponse[], like: likeCommentResponse }}
*/
const postCommentResponse = ({ uuid, own, name, presence, comment, created_at }) => {
let is_admin = false;
let comments = [];
let like = likeCommentResponse();

const getCommentResponse = ({ uuid, own, name, presence, comment, created_at, is_admin, ip, user_agent, comments, like }) => {
return {
uuid,
own,
name,
presence,
comment,
is_admin,
created_at,
comments,
like,
is_admin: is_admin ?? false,
ip,
user_agent,
comments: comments?.map(getCommentResponse) ?? [],
like: likeCommentResponse(like?.love ?? 0),
};
};

/**
* @param {{ uuid: string, own: string, name: string, presence: boolean, comment: string, created_at: string, is_admin: boolean, ip: string, user_agent: string, comments: getCommentResponse[], like: { love: number } }[]} data
* @returns {{ uuid: string, own: string, name: string, presence: boolean, comment: string, created_at: string, is_admin: boolean, ip: string, user_agent: string, comments: getCommentResponse[], like: likeCommentResponse }[]}
*/
const getCommentsResponse = (data) => {
return data.map(getCommentResponse);
};

/**
* @param {{status: boolean}} status
* @returns {{status: boolean}}
Expand Down Expand Up @@ -150,7 +156,8 @@ export const dto = (() => {
statusResponse,
commentResponse,
likeCommentResponse,
postCommentResponse,
getCommentResponse,
getCommentsResponse,
commentShowMore,
postCommentRequest,
postSessionRequest,
Expand Down

0 comments on commit a801c4e

Please sign in to comment.