From c98fdec10eda3a31525effde41705d7816a01403 Mon Sep 17 00:00:00 2001
From: Brice-W <brice@loki.network>
Date: Mon, 12 Jul 2021 15:03:30 +1000
Subject: [PATCH] adding new files

---
 .../conversation/ReadableMessage.tsx          | 28 +++++++++++++++++++
 ts/hooks/useFocus.ts                          | 11 ++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 ts/components/conversation/ReadableMessage.tsx
 create mode 100644 ts/hooks/useFocus.ts

diff --git a/ts/components/conversation/ReadableMessage.tsx b/ts/components/conversation/ReadableMessage.tsx
new file mode 100644
index 000000000..d5288e221
--- /dev/null
+++ b/ts/components/conversation/ReadableMessage.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useFocus } from "../../hooks/useFocus"
+import { InView } from 'react-intersection-observer';
+
+type ReadableMessageProps = {
+    children: React.ReactNode;
+    id: string;
+    className: string;
+    onChange: (inView: boolean) => void;
+    onContextMenu: (e: any) => void
+}
+
+export const ReadableMessage = (props: ReadableMessageProps) => {
+
+    const { onChange } = props;
+    useFocus(onChange);
+
+    return (
+        <InView
+        {...props}
+        as="div"
+        threshold={1}
+        delay={200}
+        triggerOnce={true}
+        >
+        {props.children}
+        </InView>);
+}
diff --git a/ts/hooks/useFocus.ts b/ts/hooks/useFocus.ts
new file mode 100644
index 000000000..e3d3d510c
--- /dev/null
+++ b/ts/hooks/useFocus.ts
@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+export const useFocus = (action: (param: any) => void) => {
+  
+  useEffect(() => {
+    window.addEventListener("focus", action);
+    return () => {
+      window.removeEventListener("focus", action);
+    };
+  });
+}
\ No newline at end of file