fix: use component lifecycle hooks

adfinis · Mar 22, 2023 · 4229bb8 · 4229bb8
1 parent bd78911
commit 4229bb8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/app/components/in-viewport/component.js b/app/components/in-viewport/component.js
@@ -5,19 +5,17 @@ import { tracked } from "@glimmer/tracking";
 export default class InViewport extends Component {
   @tracked rootSelector = "body";
   @tracked rootMargin = 0;
-  @tracked onEnterViewport = this.args["on-enter-viewport"];
-  @tracked onExitViewport = this.args["on-exit-viewport"];
   _observer = null;
 
   @action
   registerObserver(element) {
     const observer = new IntersectionObserver(
       ([{ isIntersecting }]) => {
         if (isIntersecting) {
-          return (this.onEnterViewport ?? (() => {}))();
+          return (this.args["on-enter-viewport"] ?? (() => {}))();
         }
 
-        return (this.onExitViewport ?? (() => {}))();
+        return (this.args["on-exit-viewport"] ?? (() => {}))();
       },
       {
         root: document.querySelector(this.rootSelector),
@@ -32,7 +30,8 @@ export default class InViewport extends Component {
   }
 
   @action
-  disconnectObserver() {
-    this._observer.disconnect();
+  willDestroy(...args) {
+    super.willDestroy(...args);
+    this._observer?.disconnect();
   }
 }
diff --git a/app/components/in-viewport/template.hbs b/app/components/in-viewport/template.hbs
@@ -1,3 +1,2 @@
 <div
-  {{did-insert this.registerObserver}}
-  {{will-destroy this.disconnectObserver}}>{{yield}}</div>
+  {{did-insert this.registerObserver}}>{{yield}}</div>