refactor code

frontend-park-mail-ru · Nov 10, 2024 · 651ea68 · 651ea68
1 parent 0b2a987
commit 651ea68
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/components/AdCard/AdCard.ts b/components/AdCard/AdCard.ts
@@ -13,7 +13,6 @@ interface AdCardState {
 /** Карточка объявления на главной странице */
 export default class AdCard extends ReactiveComponent {
     #data;
-    #circles: HTMLCollectionOf<Element>;
     currentImagePath: string;
 
     /** 
@@ -35,7 +34,6 @@ export default class AdCard extends ReactiveComponent {
         });
         this.currentImagePath = '';
         this.#data = data;
-        this.#circles = [];
     }
 
     addEventListeners() {
@@ -65,14 +63,14 @@ export default class AdCard extends ReactiveComponent {
         const areaFraction =
             imgElem.getBoundingClientRect().width / imagesAmount;
 
-        this.#circles = this.thisElement.getElementsByClassName(
+        const circles = this.thisElement.getElementsByClassName(
             'housing-card__circle'
         );
 
         imgElem.onmousemove = (e) => this.#onMouseMove(e, areaFraction);
         imgElem.onmouseout = () => this.#onMouseOut();
 
-        this.#circles[this.state.toShowIndex as number].classList.add(
+        circles[this.state.toShowIndex as number].classList.add(
             'housing-card__circle--fill'
         );
     }
@@ -89,12 +87,11 @@ export default class AdCard extends ReactiveComponent {
         if (toShowIndex === this.state.toShowIndex) {
             return;
         }
-        console.log('new to show index:', toShowIndex);
 
         // todo: fix this
-        // setTimeout(() => {
-        this.state.toShowIndex = toShowIndex;
-        // }, SCROLL_DELAY);
+        setTimeout(() => {
+            this.state.toShowIndex = toShowIndex;
+        }, SCROLL_DELAY);
     }
 
     /**

diff --git a/components/ReactiveComponent/ReactiveComponent.ts b/components/ReactiveComponent/ReactiveComponent.ts
@@ -71,10 +71,11 @@ export default abstract class ReactiveComponent {
                 return target[prop];
             },
             set: (target: { [key: string]: unknown }, prop: string, value) => {
+                if (target[prop] === value) return true; // Protect from setting the same value & useless rerendering
                 target[prop] = value;
                 this.#deps.get(prop).notify();
                 console.log('gonna rerender');
-                this.rerender();
+                this.update();
                 return true;
             },
         });
@@ -114,7 +115,7 @@ export default abstract class ReactiveComponent {
         });
     }
 
-    rerender() {
+    update() {
         this.thisElement = document.getElementById(
             this.#elementId
         ) as HTMLElement;