From 4229bb8fbde9919e7df84fa07ac3141873e5a0ec Mon Sep 17 00:00:00 2001
From: Mitan Omar <mitan@gmx.ch>
Date: Wed, 22 Mar 2023 14:11:50 +0100
Subject: [PATCH] fix: use component lifecycle hooks

---
 app/components/in-viewport/component.js | 11 +++++------
 app/components/in-viewport/template.hbs |  3 +--
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/app/components/in-viewport/component.js b/app/components/in-viewport/component.js
index 17a970be8..f1b878308 100644
--- a/app/components/in-viewport/component.js
+++ b/app/components/in-viewport/component.js
@@ -5,8 +5,6 @@ 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
@@ -14,10 +12,10 @@ export default class InViewport extends Component {
     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
index 6b93e9b60..b00eeb733 100644
--- 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>
\ No newline at end of file
+  {{did-insert this.registerObserver}}>{{yield}}</div>
\ No newline at end of file