DBC22-6585: highlighted advisory for new updates

DBC22-6585: highlighted advisory for new updates 2

DBC22-6585: highlighted bulletin for new updates

Author: bcgov-brwang

src/frontend/src/Components/advisories/AdvisoriesList.js

@@ -1,5 +1,5 @@
 // React
-import React, { useContext } from 'react';
+import React, { useContext, useRef } from 'react';
 
 // Navigation
 import { useNavigate } from 'react-router-dom';
@@ -30,7 +30,8 @@ export default function AdvisoriesList(props) {
   const navigate = useNavigate();
 
   // Props
-  const { advisories, showDescription, showTimestamp, showPublished, isAdvisoriesListPage, showLoader } = props;
+  const { advisories, showDescription, showTimestamp, showPublished, isAdvisoriesListPage, showLoader, trackedAdvisories = {}, advisoryRefs } = props;
+  const { dismissHighlight } = props;
 
   function handleClick(advisory, keyEvent) {
     // Ignore key presses that aren't enter or space
@@ -39,6 +40,12 @@ export default function AdvisoriesList(props) {
     }
 
     trackEvent('click', 'advisories-list', 'Advisory', advisory.title, advisory.teaser);
+    // dismissedHighlightsRef.current.add(advisory.id);
+    // sessionStorage.setItem(
+    //   'dismissedHighlights',
+    //   JSON.stringify([...dismissedHighlightsRef.current])
+    // );
+    dismissHighlight(advisory.id);  // use parent's function
     navigate(`/advisories/${advisory.slug}`);
   }
 
@@ -50,7 +57,12 @@ export default function AdvisoriesList(props) {
       {!!sortedAdvisories && sortedAdvisories.map((advisory, index) => {
         if (isAdvisoriesListPage) {
           return (
-            <div className="advisory-li" key={advisory.id}>
+            <div
+              className={`advisory-li${trackedAdvisories[advisory.id]?.highlight ? ' highlighted' : ''}`}
+              key={advisory.id}
+              data-key={advisory.id}
+              ref={(el) => { if (advisoryRefs) advisoryRefs.current[advisory.id] = el; }}
+            >
               <div className="advisory-li__content">
                 <div className="advisory-li__content__partition advisory-li-title-container">
                   <div className="advisory-li-title link-div"
@@ -67,6 +79,9 @@ export default function AdvisoriesList(props) {
                     <div className="timestamp-container">
                       <span className="advisory-li-state">{advisory.first_published_at != advisory.last_published_at ? "Updated" : "Published" }</span>
                       <FriendlyTime date={advisory.latest_revision_created_at} />
+                      {trackedAdvisories[advisory.id]?.highlight &&
+                        <div className="updated-pill">Updated</div>
+                      }
                     </div>
                   }
                 </div>
@@ -97,6 +112,9 @@ export default function AdvisoriesList(props) {
                   <div className="advisory-li__content__partition timestamp-container timestamp-container--mobile">
                     <span className="advisory-li-state">{advisory.first_published_at != advisory.last_published_at ? "Updated" : "Published"}</span>
                     <FriendlyTime date={advisory.latest_revision_created_at}/>
+                    {trackedAdvisories[advisory.id]?.highlight &&
+                        <div className="updated-pill">Updated</div>
+                      }
                   </div>
                 }
 
@@ -141,6 +159,9 @@ export default function AdvisoriesList(props) {
                       {!cmsContext.readAdvisories.includes(advisory.id.toString() + '-' + advisory.live_revision.toString()) && <div className="unread-display"></div>}
                       <span className="advisory-li-state">{advisory.first_published_at != advisory.last_published_at ? "Updated" : "Published" }</span>
                       <FriendlyTime date={advisory.latest_revision_created_at} />
+                      {trackedAdvisories[advisory.id]?.highlight &&
+                        <div className="updated-pill">Updated</div>
+                      }
                     </div>
                   }
 
@@ -166,6 +187,9 @@ export default function AdvisoriesList(props) {
                   <div className="timestamp-container timestamp-container--mobile">
                     <span className="advisory-li-state">{advisory.first_published_at != advisory.last_published_at ? "Updated" : "Published" }</span>
                     <FriendlyTime date={advisory.latest_revision_created_at} />
+                    {trackedAdvisories[advisory.id]?.highlight &&
+                        <div className="updated-pill">Updated</div>
+                      }
                   </div>
                 }
               </div>

src/frontend/src/Components/bulletins/BulletinsList.js

@@ -16,15 +16,16 @@ import Skeleton from 'react-loading-skeleton';
 // Static files
 import logo from '../../images/dbc-logo--white.svg';
 
-export default function Bulletins(props) {
-  // State, props and context
-  const { bulletins, showLoader } = props;
+export default function BulletinsList(props) {
+  // Props
+  const { bulletins, showLoader, trackedBulletins = {}, bulletinRefs, dismissHighlight } = props;
 
   // Navigation
   const navigate = useNavigate();
 
   function handleClick(bulletin) {
     trackEvent('click', 'bulletins-list', 'Bulletin', bulletin.title, bulletin.teaser);
+    if (dismissHighlight) dismissHighlight(bulletin.id);
     navigate(`/bulletins/${bulletin.slug}`);
   }
 
@@ -33,9 +34,14 @@ export default function Bulletins(props) {
   // Rendering
   return (
     <ul className='bulletins-list'>
-      {!!sortedBulletins && sortedBulletins.map((bulletin, index) => {
+      {!!sortedBulletins && sortedBulletins.map((bulletin) => {
         return (
-          <li className='bulletin-li' key={bulletin.id} onClick={() => handleClick(bulletin)}
+          <li
+            className={`bulletin-li${trackedBulletins[bulletin.id]?.highlight ? ' highlighted' : ''}`}
+            key={bulletin.id}
+            data-key={bulletin.id}
+            ref={(el) => { if (bulletinRefs) bulletinRefs.current[bulletin.id] = el; }}
+            onClick={() => handleClick(bulletin)}
             onKeyDown={(keyEvent) => {
               if (['Enter', 'NumpadEnter'].includes(keyEvent.key)) {
                 handleClick(bulletin);
@@ -45,7 +51,6 @@ export default function Bulletins(props) {
             <div className='bulletin-li-title-container' tabIndex={0}>
               {showLoader ?
                 <p><Skeleton height={30} /></p> :
-
                 <h2 className='bulletin-li-title'>{bulletin.title}</h2>
               }
 
@@ -54,18 +59,21 @@ export default function Bulletins(props) {
                   <Skeleton height={10} />
                   <Skeleton height={10} />
                 </p> :
-
                 (bulletin.teaser &&
                   <div className="bulletin-li-body">{bulletin.teaser}</div>
                 )
               }
 
               {showLoader ?
                 <p><Skeleton width={150} height={10} /></p> :
-
                 <div className='timestamp-container'>
-                  <span className='bulletin-li-state'>{bulletin.first_published_at != bulletin.last_published_at ? 'Updated' : 'Published' }</span>
+                  <span className='bulletin-li-state'>
+                    {bulletin.first_published_at != bulletin.last_published_at ? 'Updated' : 'Published'}
+                  </span>
                   <FriendlyTime date={bulletin.latest_revision_created_at} />
+                  {trackedBulletins[bulletin.id]?.highlight &&
+                    <div className="updated-pill">Updated</div>
+                  }
                 </div>
               }
             </div>
@@ -74,7 +82,6 @@ export default function Bulletins(props) {
               <div className={bulletin.image_url ? 'bulletin-li-thumbnail' : 'bulletin-li-thumbnail-default'}>
                 {showLoader ?
                   <Skeleton width={320} height={200} /> :
-
                   <img className='thumbnail-logo' src={bulletin.image_url ? bulletin.image_url : logo} alt={bulletin.image_alt_text} />
                 }
               </div>