From 17977064aa80fbd42728da301bbb4609480e3491 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=8Dtalo=20Sousa?= <italusousa@gmail.com>
Date: Tue, 1 Nov 2022 09:08:07 -0300
Subject: [PATCH] Functional Component Refactor: MarkAsViewed (#4365)

* chore: convert MarkAsViewed to functional component

* chore: fix issues with MarkAsViewed refactor
---
 .../Document/components/MarkAsViewed.ts       | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/app/scenes/Document/components/MarkAsViewed.ts b/app/scenes/Document/components/MarkAsViewed.ts
index 81a6ef04d..5ae6d4924 100644
--- a/app/scenes/Document/components/MarkAsViewed.ts
+++ b/app/scenes/Document/components/MarkAsViewed.ts
@@ -4,29 +4,28 @@ import Document from "~/models/Document";
 const MARK_AS_VIEWED_AFTER = 3 * 1000;
 type Props = {
   document: Document;
+  children: JSX.Element;
 };
 
-class MarkAsViewed extends React.Component<Props> {
-  viewTimeout: ReturnType<typeof setTimeout>;
+function MarkAsViewed(props: Props) {
+  const { document, children } = props;
+  const viewTimeout = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  componentDidMount() {
-    const { document } = this.props;
-    this.viewTimeout = setTimeout(async () => {
+  React.useEffect(() => {
+    viewTimeout.current = setTimeout(async () => {
       const view = await document.view();
 
       if (view) {
         document.updateLastViewed(view);
       }
     }, MARK_AS_VIEWED_AFTER);
-  }
 
-  componentWillUnmount() {
-    clearTimeout(this.viewTimeout);
-  }
+    return () => {
+      viewTimeout.current && clearTimeout(viewTimeout.current);
+    };
+  }, [document]);
 
-  render() {
-    return this.props.children || null;
-  }
+  return children || null;
 }
 
 export default MarkAsViewed;