Changes that allow for dismiss via time or via "revision" number (#119)

currently it is just using the title of the article but intended to be the an plugin option later on so user can choose to show both or none.
the expand option is also prepared to be an option
using react for each "component/feature"

Author: Morten Hundevad

src/main.ts

@@ -196,10 +196,16 @@ export class Main {
         const page: INotificationsFilter = {
             timestamp: 0,
             pageId: pageId,
+            revision: 0,
         };
         if (action == 'mute') {
             page.timestamp = Date.now();
         }
+
+        // TODO: to be changed to a "revision based dismiss" curently just pernanentm type may need to be changed to a string instead of a number
+        if (action == 'hide') {
+            page.revision = pageId;
+        }
         NotificationsFilter.update(page);
     }
 

src/ui/inpagenotification/Inspagenotification.tsx

@@ -6,14 +6,76 @@ import { IIncidentPage, IncidentPage } from '@/models/incident';
 import { IProductPage, ProductPage } from '@/models/product';
 import { IProductLinePage, ProductLinePage } from '@/models/product-line';
 
-export interface IInpagenotificationPage {
+export interface IInPageNotificationPage {
     page: Page;
 }
 
-const InpagenotificationPage = ({ page }: IInpagenotificationPage) => {
-    const componentReferance = React.createRef<HTMLParagraphElement>();
+export interface IInPageNotificationPageMenu {
+    pageReferance: React.RefObject<HTMLParagraphElement | null>;
+}
+
+export interface IInPageNotificationPageOptions {
+    showMore: boolean;
+    showMute: boolean;
+    showHide: boolean;
+}
+
+export interface IInPageNotificationMessage {
+    message: string;
+}
+
+export interface IInPageNotificationCategory {
+    pages: [string, Page[]];
+}
+
+export interface IInPageNotification {
+    containerId: string;
+    message: string;
+    pages: IPage[];
+}
+
+const InPageNotificationPageMenu = ({
+    page,
+    pageReferance,
+    showMore,
+    showMute,
+    showHide,
+}: IInPageNotificationPage & IInPageNotificationPageMenu & IInPageNotificationPageOptions) => {
+    return (
+        <>
+            <div className="page-menu">
+                {showMore && <InPageNotificationPageMore />}
+                {showMute && <InPageNotificationPageMute page={page} pageReferance={pageReferance} />}
+                {showHide && <InPageNotificationPageHide page={page} pageReferance={pageReferance} />}
+            </div>
+        </>
+    );
+};
+
+const InPageNotificationPageMore = () => {
+    const seeMore = (event: React.MouseEvent<HTMLElement>) => {
+        event.preventDefault();
+        const categoryHeader = event.currentTarget as HTMLElement;
+        if (categoryHeader) {
+            const categoryContent = categoryHeader.parentElement?.parentElement?.querySelector('.page-info');
+            if (categoryContent) {
+                categoryContent.classList.toggle('hidden');
+
+                categoryHeader.textContent = categoryContent.classList.contains('hidden') ? '⯈' : '▼';
+            }
+        }
+    };
+    return (
+        <>
+            <span className="page-more" onClick={seeMore}>
+                ⯈
+            </span>
+        </>
+    );
+};
 
-    const closePage = () => {
+const InPageNotificationPageMute = ({ page, pageReferance }: IInPageNotificationPage & IInPageNotificationPageMenu) => {
+    const mutePage = () => {
         const notifyUpdatePayload = {
             pageId: page.pageId,
             action: 'mute',
@@ -24,49 +86,87 @@ const InpagenotificationPage = ({ page }: IInpagenotificationPage) => {
             payload: notifyUpdatePayload,
         });
 
-        if (componentReferance) {
-            componentReferance.current?.remove();
+        if (pageReferance) {
+            pageReferance.current?.remove();
         }
     };
+    return (
+        <>
+            <span className="page-mute" onClick={mutePage}>
+                🕑
+            </span>
+        </>
+    );
+};
 
-    const seeMore = (event: React.MouseEvent<HTMLElement>) => {
-        event.preventDefault();
-        const categoryHeader = event.currentTarget as HTMLElement;
-        if (categoryHeader) {
-            const categoryContent = categoryHeader.parentElement?.parentElement?.querySelector('.page-info');
-            if (categoryContent) {
-                categoryContent.classList.toggle('hidden');
+const InPageNotificationPageHide = ({ page, pageReferance }: IInPageNotificationPage & IInPageNotificationPageMenu) => {
+    const hidePage = () => {
+        const notifyUpdatePayload = {
+            pageId: page.pageId,
+            action: 'hide',
+        };
 
-                categoryHeader.textContent = categoryContent.classList.contains('hidden') ? '⯈' : '▼';
-            }
+        void browser.runtime.sendMessage({
+            type: 'notifyUpdate',
+            payload: notifyUpdatePayload,
+        });
+
+        if (pageReferance) {
+            pageReferance.current?.remove();
         }
     };
+    return (
+        <>
+            <span className="page-hide" onClick={hidePage}>
+                ✖
+            </span>
+        </>
+    );
+};
+
+const InPageNotificationPageInfo = ({ page }: IInPageNotificationPage) => {
+    return (
+        <>
+            <div className="page-info hidden">{page.description}</div>
+        </>
+    );
+};
+
+const InPageNotificationPageLink = ({ page }: IInPageNotificationPage) => {
+    return (
+        <>
+            <a href={page.url()} target="_blank">
+                {page.pageName}
+            </a>
+        </>
+    );
+};
+
+const InPageNotificationPage = ({ page }: IInPageNotificationPage) => {
+    const componentReferance = React.createRef<HTMLParagraphElement>();
+
+    const showMore = true; // TODO, should come from an option?
+    const showMute = true; // TODO, should come from an option?
+    const showHide = true; // TODO, should come from an option?
 
     return (
         <>
             <div className="page" ref={componentReferance}>
-                <div className="page-menu">
-                    <span className="page-more" onClick={seeMore}>
-                        ⯈
-                    </span>
-                    <span className="page-close" onClick={closePage}>
-                        ✖
-                    </span>
-                </div>
-                <a href={page.url()} target="_blank">
-                    {page.pageName}
-                </a>
-                <div className="page-info hidden">{page.description}</div>
+                <InPageNotificationPageMenu
+                    page={page}
+                    showMore={showMore}
+                    showMute={showMute}
+                    showHide={showHide}
+                    pageReferance={componentReferance}
+                />
+                <InPageNotificationPageLink page={page} />
+                {showMore && <InPageNotificationPageInfo page={page} />}
             </div>
         </>
     );
 };
 
-export interface IInpagenotificationMessage {
-    message: string;
-}
-
-const InpagenotificationMessage = ({ message }: IInpagenotificationMessage) => {
+const InPageNotificationMessage = ({ message }: IInPageNotificationMessage) => {
     if (message && message.length > 0) {
         return (
             <>
@@ -78,16 +178,12 @@ const InpagenotificationMessage = ({ message }: IInpagenotificationMessage) => {
     }
 };
 
-export interface IInpagenotificationCategory {
-    pages: [string, Page[]];
-}
-
-const InpagenotificationCategory = ({ pages }: IInpagenotificationCategory) => {
+const InPageNotificationCategory = ({ pages }: IInPageNotificationCategory) => {
     const categoryTitle = pages[0];
     const pagesList = pages[1];
 
     if (categoryTitle && pagesList) {
-        const cattegoryPages = pagesList.map((page, index) => <InpagenotificationPage key={index} page={page} />);
+        const cattegoryPages = pagesList.map((page, index) => <InPageNotificationPage key={index} page={page} />);
 
         const toggleCategory = (event: React.MouseEvent<HTMLElement>) => {
             event.preventDefault();
@@ -118,13 +214,7 @@ const InpagenotificationCategory = ({ pages }: IInpagenotificationCategory) => {
     }
 };
 
-export interface IInpagenotification {
-    containerId: string;
-    message: string;
-    pages: IPage[];
-}
-
-const Inpagenotification = ({ containerId, message, pages }: IInpagenotification) => {
+const InPageNotification = ({ containerId, message, pages }: IInPageNotification) => {
     /**
      * timeout even for hiding the notification after a set time
      *
@@ -189,8 +279,8 @@ const Inpagenotification = ({ containerId, message, pages }: IInpagenotification
         }
     });
 
-    const inpagenotificationCategorysPages = Object.entries(_pages).map(([category, categoryPages], index) => {
-        if (categoryPages.length) return <InpagenotificationCategory key={index} pages={[category, categoryPages]} />;
+    const InPageNotificationCategorysPages = Object.entries(_pages).map(([category, categoryPages], index) => {
+        if (categoryPages.length) return <InPageNotificationCategory key={index} pages={[category, categoryPages]} />;
     });
 
     return (
@@ -280,16 +370,23 @@ const Inpagenotification = ({ containerId, message, pages }: IInpagenotification
                     cursor: pointer;
                     font-weight:
                     bold;
-                 
+                }
+
+                .page-menu > * {
                     margin-left: 10px;
                 }
 
+                .page-close {
+                }
+
                 .page-more {
-                    margin-right: 10px;
                 }
 
-                .page-close {
-                }                    
+                .page-mute {
+                }
+                
+                .page-hide {
+                }
 
                 .wikilink {
                     height: 100%;
@@ -379,12 +476,12 @@ const Inpagenotification = ({ containerId, message, pages }: IInpagenotification
                             <strong>Consumer Rights Wiki</strong>
                         </span>
                     </a>
-                    <InpagenotificationMessage message={message} />
-                    <div className="categorys">{inpagenotificationCategorysPages}</div>
+                    <InPageNotificationMessage message={message} />
+                    <div className="categorys">{InPageNotificationCategorysPages}</div>
                 </div>
             </div>
         </>
     );
 };
 
-export default Inpagenotification;
+export default InPageNotification;

src/utils/helpers/local-storage.ts

@@ -6,6 +6,7 @@
 export interface ILocalStoragePage {
     timestamp: number;
     pageId: number;
+    dismissed: string;
 }
 
 class LocalStorage {
@@ -45,6 +46,7 @@ class LocalStorage {
         const page: ILocalStoragePage = {
             timestamp: 0,
             pageId: pageId,
+            dismissed: '',
         };
 
         const pages = LocalStorage.read();

src/utils/helpers/notification-filter.ts

@@ -5,6 +5,7 @@ import { Page } from '@/models/page';
 export interface INotificationsFilter {
     timestamp: number;
     pageId: number;
+    revision: number;
 }
 
 class NotificationsFilter {
@@ -35,6 +36,11 @@ class NotificationsFilter {
 
             if (!existingPage) return true;
 
+            // TODO: revision based finter curently just permanent using page id.
+            if (existingPage.revision == entry.pageId) {
+                return false;
+            }
+
             return existingPage.timestamp + muteTime < now;
         });
     }