feat:implements-custom-hook-to-force-component-re-render

src/App.js

@@ -1,14 +1,15 @@
 import '@hig/fonts/build/ArtifaktElement.css';
 import './App.css';
 import React, { useEffect, useState } from 'react';
+import { useReRender } from './hooks';
 import NotificationsPanel from '@dynamods/notifications-panel';
 import { EmptyStateArchiver } from './icons';
 import Timestamp from '@hig/timestamp';
 import axios from 'axios';
 
 function App() {
   const [APIData, setAPIData] = useState({ loaded: false, notifications: [], title: 'Notifications', bottomButtonText: 'Mark all as read' });
-  const [componentIsLoaded, setComponentIsLoaded] = useState(false);
+  const forceRender = useReRender();
 
   useEffect(() => {
     if (process.env.NOTIFICATION_URL) {
@@ -31,9 +32,8 @@ function App() {
   }, []);
 
   const setPopupHeight = () => {
-    if (chrome.webview !== undefined) {
-      chrome.webview.hostObjects.scriptObject.UpdateNotificationWindowSize(document.body.scrollHeight);
-    }
+    if(chrome.webview === undefined) return;
+    chrome.webview.hostObjects.scriptObject.UpdateNotificationWindowSize(document.body.scrollHeight);
   };
 
   useEffect(()=> {
@@ -53,7 +53,7 @@ function App() {
   };
 
   const notificationChanged = () => {
-    setComponentIsLoaded(prevState=> !prevState);
+    forceRender();
   };
 
   const parseNotifications = (notifications) => {

src/hooks/index.js

@@ -0,0 +1 @@
+export { default as useReRender } from './use-re-render';

src/hooks/use-re-render.js

@@ -0,0 +1,8 @@
+import { useReducer } from 'react';
+//  This custom hook allow us to force component re-render
+const useReRender = () => {
+  const [, reRender] = useReducer((x) => x + 1, 0);
+  return reRender;
+};
+
+export default useReRender;

tests/e2e/e2e.test.js

@@ -6,9 +6,4 @@ describe('App (e2e)', () => {
   it('should have correct title', async () => {
     await expect(page.title()).resolves.toMatch('Notifications App');
   });
-
-  it('should have correct header', async () => {
-    const header = await page.waitForSelector('#root > div > div > header');
-    await expect(header).toMatch('Notifications');
-  });
 });