Hot-Fix: Chat Notifications (#1199)

* chore(1133): Handled focused chat

* chore(1133): Bumped header version

Author: 1AhmedYasser

GUI/package.json

@@ -11,7 +11,7 @@
     "prettier": "prettier --write \"{,!(node_modules)/**/}*.{ts,tsx,js,json,css,less,scss}\""
   },
   "dependencies": {
-    "@buerokratt-ria/header": "^0.1.21",
+    "@buerokratt-ria/header": "^0.1.22",
     "@buerokratt-ria/menu": "^0.2.6",
     "@buerokratt-ria/styles": "^0.0.1",
     "@buerokratt-ria/common-gui-components": "^0.0.4",

GUI/src/components/Chat/index.tsx

@@ -1,4 +1,11 @@
-import { ChangeEvent, FC, useEffect, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  FC,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { format } from 'date-fns';
 import { et } from 'date-fns/locale';
@@ -141,6 +148,27 @@ const Chat: FC<ChatProps> = ({
       : null
   );
 
+  const onVisibilityChange = () => {
+    if (document.visibilityState === 'visible') {
+      localStorage.setItem('focused_chat', chat.id);
+    } else if (document.visibilityState === 'hidden') {
+      localStorage.removeItem('focused_chat');
+    }
+  };
+
+  useEffect(() => {
+    localStorage.setItem('focused_chat', chat.id);
+    return () => {
+      localStorage.removeItem('focused_chat');
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    return () =>
+      document.removeEventListener('visibilitychange', onVisibilityChange);
+  }, []);
+
   useEffect(() => {
     getMessages();
   }, []);