TNO-2784: Stories on Press Gallery landing page are not written by Pr…

…ess Gallery members. (#2020)

* Load Press Members in initial load.
Filter Press Members by Press Member/Date
Highlight Press Members in header, byline, body.

* Add files after running make pack n=editor and make pack n=subscriber

* publish tno-core 0.1.99

app/editor/package.json

@@ -59,7 +59,7 @@
     "redux-logger": "3.0.6",
     "styled-components": "6.1.11",
     "stylis": "4.3.2",
-    "tno-core": "0.1.98"
+    "tno-core": "0.1.99"
   },
   "devDependencies": {
     "@simbathesailor/use-what-changed": "2.0.0",

app/editor/yarn.lock

@@ -10998,7 +10998,7 @@ __metadata:
     sass-extract-loader: 1.1.0
     styled-components: 6.1.11
     stylis: 4.3.2
-    tno-core: 0.1.98
+    tno-core: 0.1.99
     typescript: 4.9.5
   languageName: unknown
   linkType: soft
@@ -15136,9 +15136,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tno-core@npm:0.1.98":
-  version: 0.1.98
-  resolution: "tno-core@npm:0.1.98"
+"tno-core@npm:0.1.99":
+  version: 0.1.99
+  resolution: "tno-core@npm:0.1.99"
   dependencies:
     "@elastic/elasticsearch": ^8.13.1
     "@fortawesome/free-solid-svg-icons": ^6.4.2
@@ -15171,7 +15171,7 @@ __metadata:
     styled-components: ^6.1.11
     stylis: ^4.3.2
     yup: ^1.1.1
-  checksum: 76a0edb9a415e0e3bc49891f836444f766345e5484a95d397da068bfbf3c345f7e01e16c93d0d642a182d3ce2c68cd6f8417a7353c9ebfa454093b40b16cb12c
+  checksum: b4013a47bb3268f93512aa016432fa0fcc77bdc66e37dcc2c67beda86eadedc2545f90cd47740fde1aa4d316a1ac3f7eee6ce84bc08bf2bca32e444be5792a96
   languageName: node
   linkType: hard
 

app/subscriber/package.json

@@ -42,7 +42,7 @@
     "sheetjs": "file:packages/xlsx-0.20.1.tgz",
     "styled-components": "6.1.11",
     "stylis": "4.3.2",
-    "tno-core": "0.1.98"
+    "tno-core": "0.1.99"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "6.4.5",

app/subscriber/src/components/content-list/Attributes.tsx

@@ -4,9 +4,13 @@ import * as React from 'react';
 import { useLookup, useSettings } from 'store/hooks';
 import { ContentTypeName, IContentModel, Row, Show } from 'tno-core';
 
+import { highlightTerms } from './utils/highlightTerms';
+
 export interface IAttributesProps {
   /** The content item */
   item: IContentModel;
+  /** List of terms to be highlighted */
+  highlighTerms: string[];
   /** Whether to show the date */
   showDate?: boolean;
   /** Whether to show the time */
@@ -22,6 +26,7 @@ export interface IAttributesProps {
 }
 export const Attributes: React.FC<IAttributesProps> = ({
   item,
+  highlighTerms,
   showDate,
   showTime,
   showSeries,
@@ -30,6 +35,7 @@ export const Attributes: React.FC<IAttributesProps> = ({
 }) => {
   const [{ mediaTypes }] = useLookup();
   const { excludeBylineIds, excludeSourceIds } = useSettings();
+  const bylineTermHighlighted = highlightTerms(item.byline as string, highlighTerms ?? []);
   return (
     <Row className={`${mobile && 'mobile add-margin'} attributes`}>
       {showDate && <div className="date attr">{formatDate(item.publishedOn)}</div>}
@@ -46,7 +52,19 @@ export const Attributes: React.FC<IAttributesProps> = ({
         !excludeBylineIds?.some((mt) => {
           const mediaTypeObj = mediaTypes.find((m) => m.id === mt);
           return item.mediaTypeId === mediaTypeObj?.id;
-        }) && <div className={`byline attr`}>{`${item.byline}`}</div>}
+        }) && (
+          <div className={`byline attr`}>
+            <>
+              {bylineTermHighlighted.length > 0 ? (
+                bylineTermHighlighted.map((part, index) => (
+                  <React.Fragment key={index}>{part}</React.Fragment>
+                ))
+              ) : (
+                <div>{item.byline}</div>
+              )}
+            </>
+          </div>
+        )}
       {/* show series when source not shown and the show series flag is disabled */}
       {item.series &&
         !showSeries &&

app/subscriber/src/components/content-list/ContentList.tsx

@@ -13,6 +13,8 @@ import { groupContent } from './utils';
 export interface IContentListProps {
   /** content is an array of content objects to be displayed and manipulated by the content list*/
   content: IContentSearchResult[];
+  /** array of terms to be highlighted in body */
+  highlighTerms?: string[];
   /** array of selected content */
   selected: IContentModel[];
   /** prop to determine whether to style the content based on user settings */
@@ -39,6 +41,7 @@ export interface IContentListProps {
 
 export const ContentList: React.FC<IContentListProps> = ({
   content,
+  highlighTerms,
   selected,
   showDate = false,
   handleDrop,
@@ -137,6 +140,7 @@ export const ContentList: React.FC<IContentListProps> = ({
                     showDate={showDate}
                     showTime={showTime}
                     item={item}
+                    highlighTerms={highlighTerms || []}
                     onCheckboxChange={handleCheckboxChange}
                     filter={filter}
                   />

app/subscriber/src/components/content-list/ContentRow.tsx

@@ -9,10 +9,12 @@ import { ContentListContext } from './ContentListContext';
 import { ContentReportPin } from './ContentReportPin';
 import * as styled from './styled';
 import { determineToneIcon, truncateTeaser } from './utils';
+import { highlightTerms } from './utils/highlightTerms';
 
 export interface IContentRowProps extends IColProps {
   selected: IContentModel[];
   item: IContentModel;
+  highlighTerms?: string[];
   canDrag?: boolean;
   showDate?: boolean;
   popOutIds?: string;
@@ -26,6 +28,7 @@ export interface IContentRowProps extends IColProps {
 export const ContentRow: React.FC<IContentRowProps> = ({
   selected,
   item,
+  highlighTerms,
   canDrag,
   showDate,
   showSeries,
@@ -52,6 +55,9 @@ export const ContentRow: React.FC<IContentRowProps> = ({
     return formatSearch(item.headline, filter);
   }, [filter, item.headline]);
 
+  const bodyTermHighlighted = highlightTerms(body as string, highlighTerms ?? []);
+  const headerTermHighlighted = highlightTerms(headline as string, highlighTerms ?? []);
+
   return (
     <styled.ContentRow {...rest}>
       <Row className="parent-row">
@@ -76,10 +82,19 @@ export const ContentRow: React.FC<IContentRowProps> = ({
           />
         )}
         <Link to={`/view/${item.id}`} className="headline">
-          <div>{headline}</div>
+          <>
+            {headerTermHighlighted.length > 0 ? (
+              headerTermHighlighted.map((part, index) => (
+                <React.Fragment key={index}>{part}</React.Fragment>
+              ))
+            ) : (
+              <div>{headline}</div>
+            )}
+          </>
         </Link>
         <Attributes
           item={item}
+          highlighTerms={highlighTerms ?? []}
           showDate={showDate}
           showTime={showTime}
           showSeries={showSeries}
@@ -149,14 +164,23 @@ export const ContentRow: React.FC<IContentRowProps> = ({
       <Attributes
         mobile
         item={item}
+        highlighTerms={highlighTerms ?? []}
         showDate={showDate}
         showTime={showTime}
         showSeries={showSeries}
         viewOptions={viewOptions}
       />
       <Row>
         {viewOptions.teaser && !!item.body && (
-          <div className={`teaser ${canDrag && 'with-grip'}`}>{body}</div>
+          <>
+            {bodyTermHighlighted.length > 0 ? (
+              bodyTermHighlighted.map((part, index) => (
+                <React.Fragment key={index}>{part}</React.Fragment>
+              ))
+            ) : (
+              <div className="teaser-content">{item.body}</div>
+            )}
+          </>
         )}
         <Show visible={!!activeStream?.source && activeStream.id === item.id}>
           <Col className="media-playback">

app/subscriber/src/components/content-list/utils/highlightTerms.tsx

@@ -0,0 +1,27 @@
+export const highlightTerms = (
+  body: string,
+  highlightedVals: string[],
+): (string | JSX.Element)[] => {
+  const regex = new RegExp(
+    `(${highlightedVals.map((term) => escapeRegExp(term)).join('|')})`,
+    'gi',
+  );
+
+  // Function to escape special characters in a string for regex
+  function escapeRegExp(str: string) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  // Split the body into segments based on the regex
+  const segments = body.split(regex);
+
+  const result: (string | JSX.Element)[] = segments.map((segment, index) => {
+    if (highlightedVals.some((term) => segment.toLowerCase().includes(term.toLowerCase()))) {
+      return <b key={`highlighted_${index}`}>{segment}</b>;
+    } else {
+      return segment;
+    }
+  });
+
+  return result;
+};

app/subscriber/src/features/press-gallery/PressGallery.tsx

@@ -21,7 +21,7 @@ import {
 
 import { IDateOptions, IGroupedDates, IPressMember } from './interfaces';
 import * as styled from './styled';
-import { generateDates, separateAlias } from './utils';
+import { generateDates } from './utils';
 
 export const PressGallery: React.FC = () => {
   const [, api] = useContributors();
@@ -36,7 +36,7 @@ export const PressGallery: React.FC = () => {
   const [initialLoad, setInitialLoad] = React.useState(false);
   const [selected, setSelected] = React.useState<IContentModel[]>([]);
   const [dateOptions, setDateOptions] = React.useState<IDateOptions[]>([]);
-  const [aliases, setAliases] = React.useState<string[]>([]);
+  const [pressMemberNames, setPressMembersNames] = React.useState<string[]>([]);
   const [loading, setLoading] = React.useState(false);
   const [contentByDate, setContentByDate] = React.useState<IGroupedDates | undefined>();
   const [pressSettings] = React.useState<IFilterSettingsModel>(
@@ -89,17 +89,12 @@ export const PressGallery: React.FC = () => {
   React.useEffect(() => {
     api.findAllContributors().then((contributors) => {
       setPressMembers(contributors.filter((contributor) => contributor.isPress));
-      const allAliases = contributors
+      const names = contributors
         .filter((c) => c.isPress)
         .map((contributor) => {
-          if (!!contributor.aliases) {
-            return contributor.aliases;
-          } else {
-            return contributor.name;
-          }
+          return contributor.name;
         });
-      const formattedAliases = separateAlias(allAliases);
-      setAliases(formattedAliases);
+      setPressMembersNames(names);
     });
     // run on init
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -113,26 +108,27 @@ export const PressGallery: React.FC = () => {
       startDate = `${moment(pressGalleryFilter.dateFilter.value).startOf('day')}`;
       endDate = `${moment(pressGalleryFilter.dateFilter.value).endOf('day')}`;
     }
-    // only fetch once the aliases are ready
-    if (!!aliases.length && !initialLoad) {
-      var aliasesFilter = aliases.toString();
-      if (!!pressGalleryFilter.pressFilter) {
-        aliasesFilter =
-          pressMembers.find((c) => c.aliases === pressGalleryFilter.pressFilter?.value)?.aliases ??
-          '';
-      }
+    // only fetch once the Press Members are ready
+    if (!!pressMemberNames.length && !initialLoad) {
       fetchResults(
         generateQuery({
           ...pressSettings,
           defaultSearchOperator: 'or',
-          search: aliasesFilter,
+          pressMembers: pressMemberNames,
           startDate,
           endDate,
         }),
       );
       setInitialLoad(true);
     }
-  }, [aliases, pressSettings, initialLoad, fetchResults, pressGalleryFilter, pressMembers]);
+  }, [
+    pressMemberNames,
+    pressSettings,
+    initialLoad,
+    fetchResults,
+    pressGalleryFilter,
+    pressMembers,
+  ]);
 
   const handleContentSelected = React.useCallback((content: IContentModel[]) => {
     setSelected(content);
@@ -159,7 +155,15 @@ export const PressGallery: React.FC = () => {
               generateQuery({
                 ...pressSettings,
                 defaultSearchOperator: 'or',
-                search: pressMembers.find((c) => c.aliases === e.value)?.aliases ?? '',
+                pressMembers: [
+                  pressMemberNames.find(
+                    (pm) =>
+                      pm ===
+                      (e.value?.trim().startsWith('"') && e.value.trim().endsWith('"')
+                        ? e.value.trim().slice(1, -1)
+                        : e.value.trim()),
+                  ) ?? '',
+                ],
                 startDate: pressGalleryFilter.dateFilter
                   ? `${moment(pressGalleryFilter.dateFilter.value).startOf('day')}`
                   : `${moment().subtract(2, 'weeks')}`,
@@ -199,10 +203,18 @@ export const PressGallery: React.FC = () => {
                 generateQuery({
                   ...pressSettings,
                   defaultSearchOperator: 'or',
-                  search: pressGalleryFilter.pressFilter?.value
-                    ? pressMembers.find((c) => c.aliases === pressGalleryFilter.pressFilter?.value)
-                        ?.aliases ?? ''
-                    : aliases.toString().split(',').join(' '),
+                  pressMembers: pressGalleryFilter.pressFilter?.value
+                    ? [
+                        pressMemberNames.find(
+                          (pm) =>
+                            pm ===
+                            (pressGalleryFilter.pressFilter?.value as string).replace(
+                              /^"+|"+$/g,
+                              '',
+                            ),
+                        ) ?? '',
+                      ]
+                    : pressMemberNames ?? [],
                   startDate: `${moment(e.value).startOf('day')}`,
                   endDate: `${moment(e.value).endOf('day')}`,
                 }),
@@ -221,7 +233,7 @@ export const PressGallery: React.FC = () => {
               generateQuery({
                 ...pressSettings,
                 defaultSearchOperator: 'or',
-                search: aliases.toString(),
+                pressMembers: pressMemberNames,
                 startDate: `${moment().subtract(2, 'weeks')}`,
                 endDate: `${moment()}`,
               }),
@@ -239,6 +251,7 @@ export const PressGallery: React.FC = () => {
         showTime
         showSeries
         selected={selected}
+        highlighTerms={pressMemberNames}
       />
     </styled.PressGallery>
   );

app/subscriber/yarn.lock

@@ -10689,7 +10689,7 @@ __metadata:
     sheetjs: "file:packages/xlsx-0.20.1.tgz"
     styled-components: 6.1.11
     stylis: 4.3.2
-    tno-core: 0.1.98
+    tno-core: 0.1.99
     typescript: 4.9.5
   languageName: unknown
   linkType: soft
@@ -14721,9 +14721,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tno-core@npm:0.1.98":
-  version: 0.1.98
-  resolution: "tno-core@npm:0.1.98"
+"tno-core@npm:0.1.99":
+  version: 0.1.99
+  resolution: "tno-core@npm:0.1.99"
   dependencies:
     "@elastic/elasticsearch": ^8.13.1
     "@fortawesome/free-solid-svg-icons": ^6.4.2
@@ -14756,7 +14756,7 @@ __metadata:
     styled-components: ^6.1.11
     stylis: ^4.3.2
     yup: ^1.1.1
-  checksum: 76a0edb9a415e0e3bc49891f836444f766345e5484a95d397da068bfbf3c345f7e01e16c93d0d642a182d3ce2c68cd6f8417a7353c9ebfa454093b40b16cb12c
+  checksum: b4013a47bb3268f93512aa016432fa0fcc77bdc66e37dcc2c67beda86eadedc2545f90cd47740fde1aa4d316a1ac3f7eee6ce84bc08bf2bca32e444be5792a96
   languageName: node
   linkType: hard