-
Notifications
You must be signed in to change notification settings - Fork 1
Создать кнопки: лайк и дизлайк #95
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
Giovaaanniii
commented
Nov 2, 2025
- Добавить кнопки "лайк" и "дизлайк" со счетчиками (дизайн) в карточку отзыва (TheReviewCard.vue)
- Забираем значения лайков и дизлайков из пропа comment.
- На каждую из кнопок на событие клик навесить хендлер.
- Для ручки требуется два параметра (params: { path: { uuid, reaction } }). uuid берется из свойства пропа: comment.raw.uuid. reaction: "like" | "dislike" нужно вписать в зависимости от хендлера.
- Отправить запрос с методом PUT (apiClient.PUT). Пока что библиотека это распознает как ошибку, и тесты проходиться не будут, но функционал будет работать -- ждем выкатки бэка на прод, чтобы это все пофиксилось.
- Если вернулось все успешно: меняем стиль кнопки на заполненный, обновляем счетчик. Если случилась ошибка: пока что вывести в консоль.
d085591 to
4d6e7a4
Compare
src/components/TheReviewCard.vue
Outdated
| like_count.value = response.data?.like_count; | ||
| dislike_count.value = response.data?.dislike_count; | ||
| if (action === 'like') { | ||
| like_count.value = response.data?.like_count; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Если пользователь неавторизован и тут есть ошибка, то значение становится undefined, что не очень хорошо. Лучше при отсутствии ответа откатываться на значения до запроса -- либо проверять на то, что data вообще существует до обновления UI, либо через ?? писать.
У меня try-catch не работает -- в консоль 403 выводится как непойманная. Поэтому может быть лучше переписать через
const { data, error } = await apiClient ...
if (error) {
something;
return;
}
что-то с датой, тут она точно есть.
…на if(error) для обработки ошибок
| <v-btn | ||
| class="px-0 pl-4" | ||
| style="max-width: 51px; min-width: 51px;" | ||
| style="max-width: 51px; min-width: 51px" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
prettier убрал
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
А чего не просто width?
| uuid: propsLocal.comment.raw.uuid, | ||
| reaction: action, | ||
| }, | ||
| const response = await apiClient.PUT('/rating/comment/{uuid}/{reaction}', { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ну, в целом ок. Но вообще я вроде говорил, что можно писать
const {response, data, error} = await apiClient...Можешь в любом другом запросе глянуть. Будет более читаемо.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Да и response можно не забирать, если он тебе не нужен. А обычно у нас он нужен только если код ответа нужен зачем-то.