Skip to content

Commit

Permalink
Merge pull request #116 from BeyondPong/dev-bug#115
Browse files Browse the repository at this point in the history 
Bug: 친구추가 및 삭제 버튼 attribute 잘 받아오도록 수정
  • Loading branch information
@Hosung99
Hosung99 authored Jul 1, 2024
2 parents a8a608b + ca4fa01 commit da84763
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 66 deletions.
13 changes: 10 additions & 3 deletions frontend/static/css/profile.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,6 @@
border-radius: 50%;
border: 2px solid #fff;
padding: 1rem;
/* background-image: url(https://cdn.intra.42.fr/users/22a150a2b718bb79bbe204dc8e4a4ae7/misukim.jpg); */
}

.friend_name {
Expand All @@ -377,21 +376,29 @@
}

.friend_button {
padding: 0.2rem 1rem;
width: 10%;
}

.friendButton {
width: 100%;
line-height: 2rem;
background-color: var(--profile-background);
border-radius: 5px;
color: var(--black-color);
cursor: pointer;
font-weight: bold;
}

.friend_add_button {
width: 10%;
}

.disabled_button {
cursor: not-allowed;
background-color: var(--disabled-button-background-color);
}

.disabled_friend_button {
padding: 0.2rem 1rem;
border-radius: 5px;
font-weight: bold;
background-color: var(--disabled-button-background-color);
Expand Down
155 changes: 92 additions & 63 deletions frontend/static/js/view/Profile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,31 +79,6 @@ export default class extends AbstractView {
}
}

handleDelete(e) {
let target;
if (e.type === 'click') {
target = e.target;
} else if (e.type === 'keydown') {
if (e.key === 'Enter') {
target = e.target.querySelector('button');
e.preventDefault();
} else {
return;
}
}
if (target) {
target = target.querySelector('button');
const userId = target.getAttribute('data-user-id');
deleteFriend(userId).then(() => {
target.classList.add('disabled_button');
target.disabled = true;
const parent = target.parentElement;
parent.classList.add('disabled_button');
target.disabled = true;
});
}
}

async showFriendsResult() {
const friendResultBox = document.querySelector('.friends_result_box');
friendResultBox.innerHTML = '';
Expand All @@ -130,16 +105,56 @@ export default class extends AbstractView {
<div class="friend_image" style="background-image: url(/static/assets/${friend.profile_img}.png);"></div>
<div class="friend_name">${friend.nickname}</div>
<div class="friend_message">${friend.status_msg}</div>
<div tabindex="0" class="friend_button delete_button"><button class="#" data-user-id=${friend.id}>${words[registry.lang].friend_delete_button
<div tabindex="0" class="friend_button"><button class="delete_button friendButton" data-user-id=${friend.id}>${words[registry.lang].friend_delete_button
}</button></div>
`;
friendDiv.innerHTML = friendHTML;
friendResultBox.appendChild(friendDiv);
});

const deleteButtonsTab = Array.from(document.getElementsByClassName('friend_button'));
deleteButtonsTab.forEach((deleteButtons) => {
deleteButtons.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
const button = e.target.querySelector('button');
if (button) {
const userId = button.getAttribute('data-user-id');
deleteFriend(userId).then(() => {
button.classList.add('disabled_button');
button.disabled = true;
const parent = button.parentElement;
parent.classList.add('disabled_button');
button.disabled = true;
});
}
}
});
})

const deleteButtons = Array.from(document.getElementsByClassName('delete_button'));
deleteButtons.forEach((button) => {
button.addEventListener('click', this.handleDelete);
button.addEventListener('keydown', this.handleDelete);
button.addEventListener('click', function (e) {
const userId = e.target.getAttribute('data-user-id');
deleteFriend(userId).then(() => {
e.target.classList.add('disabled_button');
e.target.disabled = true;
const parent = e.target.parentElement;
parent.classList.add('disabled_button');
e.target.disabled = true;
});
});
button.addEventListener("keypress", function (e) {
if (e.key === 'Enter') {
const userId = e.target.getAttribute('data-user-id');
deleteFriend(userId).then(() => {
e.target.classList.add('disabled_button');
e.target.disabled = true;
const parent = e.target.parentElement;
parent.classList.add('disabled_button');
e.target.disabled = true;
});
}
});
});
}
}
Expand Down Expand Up @@ -184,51 +199,72 @@ export default class extends AbstractView {
<div class="friend_message">${user.status_msg}</div>
`;
if (user.is_friend) {
resultHTML += `<div class="disabled_friend_button friend_add_button"><button class="add_button disabled_button" disabled data-user-id="${user.id
}">${words[registry.lang].friend_add_button}</button></div>`;
resultHTML += `<div class="disabled_friend_button friend_add_button"><button class="add_button disabled_button" disabled data-user-id="${user.id
resultHTML += `<div class="disabled_friend_button friend_add_button"><button class="add_button friendButton disabled_button" disabled data-user-id="${user.id
}">${words[registry.lang].friend_add_button}</button></div>`;
} else {
resultHTML += `<div tabindex="0" class="friend_button friend_add_button"><button class="add_button" data-user-id="${user.id
resultHTML += `<div tabindex="0" class="friend_add_button"><button tabindex="0" class="add_button friendButton" data-user-id="${user.id
}">${words[registry.lang].friend_add_button}</button></div>`;
}
friendElement.innerHTML = resultHTML;
searchResultBox.appendChild(friendElement);
});

function handleFriendAction(e) {
let target;
if (e.type === 'click') {
target = e.target;
} else if (e.type === 'keydown') {
const addButtonsTab = Array.from(document.getElementsByClassName('friend_add_button'));
addButtonsTab.forEach((buttonTab) => {
buttonTab.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
target = e.target.querySelector('button');
e.preventDefault();
} else {
return;
const button = e.target.querySelector('button');
if (button) {
const userId = button.getAttribute('data-user-id');
const user = matchFriends.users.find((u) => u.id === parseInt(userId));
if (user && user.is_friend === false) {
postAddFriend(userId).then(() => {
friendModal.classList.remove('hidden');
friendModal.querySelector('span').textContent = `${words[registry.lang].friend_message_success}`;
button.style.cursor = 'not-allowed';
button.style.backgroundColor = 'grey';
button.disabled = true;
button.parentNode.classList.add('disabled_friend_button');
});
}
}
}
}
if (target) {
target = target.querySelector('button');
const userId = target.getAttribute('data-user-id');
})
})


const buttons = Array.from(document.getElementsByClassName('add_button'));
buttons.forEach((button) => {
button.addEventListener('click', (e) => {
const userId = e.target.getAttribute('data-user-id');
const user = matchFriends.users.find((u) => u.id === parseInt(userId));
if (user && user.is_friend === false) {
postAddFriend(userId).then(() => {
friendModal.classList.remove('hidden');
friendModal.querySelector('span').textContent = `${words[registry.lang].friend_message_success}`;
target.style.cursor = 'not-allowed';
target.style.backgroundColor = 'grey';
target.disabled = true;
target.parentNode.classList.add('disabled_friend_button');
e.target.style.cursor = 'not-allowed';
e.target.style.backgroundColor = 'grey';
e.target.disabled = true;
e.target.parentNode.classList.add('disabled_friend_button');
});
}
}
};

const buttons = Array.from(document.getElementsByClassName('friend_add_button'));
buttons.forEach((button) => {
button.addEventListener('click', handleFriendAction);
button.addEventListener('keydown', handleFriendAction);
});
button.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
const userId = e.target.getAttribute('data-user-id');
const user = matchFriends.users.find((u) => u.id === parseInt(userId));
if (user && user.is_friend === false) {
postAddFriend(userId).then(() => {
friendModal.classList.remove('hidden');
friendModal.querySelector('span').textContent = `${words[registry.lang].friend_message_success}`;
e.target.style.cursor = 'not-allowed';
e.target.style.backgroundColor = 'grey';
e.target.disabled = true;
e.target.parentNode.classList.add('disabled_friend_button');
});
}
}
});
});
};

Expand Down Expand Up @@ -419,7 +455,6 @@ export default class extends AbstractView {
saveButton.querySelector('button').style.cursor = 'not-allowed';
saveButton.querySelector('button').style.color = 'var(--disabled-button-background-color)';
saveButton.querySelector('button').disabled = true;
console.log('button disable');
} else {
input.style.borderBottomColor = 'var(--profile-background)';
saveButton.querySelector('button').style.cursor = 'pointer';
Expand All @@ -445,18 +480,12 @@ export default class extends AbstractView {
saveButton.querySelector('button').style.cursor = 'not-allowed';
saveButton.querySelector('button').style.color = 'var(--disabled-button-background-color)';
saveButton.querySelector('button').disabled = true;
console.log('button disable');
} else {
input.style.borderBottomColor = 'var(--profile-background)';
saveButton.querySelector('button').style.cursor = 'pointer';
saveButton.querySelector('button').style.color = 'var(--profile-background)';
saveButton.querySelector('button').disabled = false;
}
// if (input.value.length > 20) {
// input.disabled = true;
// } else {
// input.disabled = false;
// }
});
}
});
Expand Down

0 comments on commit da84763

Please sign in to comment.