feat(AdCard): fill heart if the card is liked

frontend-park-mail-ru · Dec 20, 2024 · 4dbe375 · 4dbe375
1 parent f9bd423
commit 4dbe375
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/components/AdCard/AdCard.hbs b/src/components/AdCard/AdCard.hbs
@@ -57,19 +57,23 @@
             <button class='housing-card__like-button js-like-button'>
                 <svg
                     aria-label='heart'
-                    class='housing-card__like-button__heart js-fill-heart {{#if isFavorite}} already-liked {{/if}}'
+                    class='housing-card__like-button__heart js-empty-heart'
+                    {{#if isFavorite}} display="none" {{/if}}
                     aria-hidden='true'
                     width='16'
                     height='16'
                     viewBox='0 0 16 16'
-                    {{! fill='none' }}
+                    fill='none'
                     xmlns='http://www.w3.org/2000/svg'
                 ><path
                         fill='currentColor'
                         fill-rule='evenodd'
                         clip-rule='evenodd'
                         d='M4.93 2.98C3.307 2.98 2 4.276 2 5.86c0 2.12 1.476 4.121 3.181 5.692A19.988 19.988 0 0 0 8 13.705a19.988 19.988 0 0 0 2.819-2.152C12.524 9.98 14 7.98 14 5.86c0-1.585-1.306-2.88-2.93-2.88-.928 0-1.753.423-2.29 1.085L8 5.024l-.78-.959a2.942 2.942 0 0 0-2.29-1.084ZM8 14.865l-.49.863h-.001l-.002-.002-.006-.003-.019-.01a7.205 7.205 0 0 1-.307-.182 21.988 21.988 0 0 1-3.357-2.528C2.025 11.348 0 8.847 0 5.86 0 3.17 2.212 1 4.93 1 6.09 1 7.158 1.396 8 2.057A4.956 4.956 0 0 1 11.07 1C13.788 1 16 3.17 16 5.86c0 2.987-2.024 5.488-3.819 7.142a21.994 21.994 0 0 1-3.663 2.71l-.019.01-.006.003-.002.002L8 14.864Zm0 0 .49.863L8 16l-.49-.273.49-.863Zm-.49-.863Z'
                     ></path></svg>
+                <svg class="js-filled-heart" aria-label="heartActive" {{#unless isFavorite}} display="none" {{/unless}}" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M0 5.51C0 11.46 8 16 8 16s8-4.54 8-10.49C16 3.018 13.99 1 11.509 1 10.089 1 8.823 1.661 8 2.694A4.476 4.476 0 0 0 4.491 1C2.011 1 0 3.019 0 5.51Z" fill="red"></path>
+                </svg>
             </button>
 
             <button

diff --git a/src/components/AdCard/AdCard.ts b/src/components/AdCard/AdCard.ts
@@ -204,9 +204,6 @@ export default class AdCard extends ReactiveComponent {
      */
     async addToFavorite(e: Event) {
         e.stopPropagation();
-        const heartButton = this.thisElement.querySelector(
-            '.js-fill-heart'
-        ) as HTMLButtonElement;
 
         if (globalStore.auth.isAuthorized) {
             if (!this.data.isFavorite) {
@@ -218,15 +215,25 @@ export default class AdCard extends ReactiveComponent {
                 document
                     .querySelector('.page-container')
                     ?.appendChild(successMessage);
-                heartButton.classList.add('already-liked');
+                this.thisElement
+                    .querySelector('.js-filled-heart')
+                    ?.setAttribute('display', 'unset');
+                this.thisElement
+                    .querySelector('.js-empty-heart')
+                    ?.setAttribute('display', 'none');
             } else {
                 this.data.isFavorite = false;
                 await ApiClient.removeFromFavourites(this.data.id);
                 const successMessage = PopupSuccess('Успешно удалено');
                 document
                     .querySelector('.page-container')
                     ?.appendChild(successMessage);
-                heartButton.classList.remove('already-liked');
+                this.thisElement
+                    .querySelector('.js-filled-heart')
+                    ?.setAttribute('display', 'none');
+                this.thisElement
+                    .querySelector('.js-empty-heart')
+                    ?.setAttribute('display', 'unset');
             }
         } else {
             const errorMessage = PopupAlert('Необходимо зарегистрироваться');