[READY] TNO-2987: Rearragne View Content Header (#2244)

* tno-2896 * cleanup * fixes
bcgov · Sep 3, 2024 · f52609b · f52609b
1 parent 33fe820
commit f52609b
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 42 deletions.
diff --git a/app/subscriber/src/components/section/PageSection.tsx b/app/subscriber/src/components/section/PageSection.tsx
@@ -1,5 +1,4 @@
 import { navbarOptions } from 'components/navbar/NavbarItems';
-import { ContentActionBar } from 'components/tool-bar';
 import { useLocation } from 'react-router-dom';
 import { IContentModel, Row } from 'tno-core';
 
@@ -54,10 +53,6 @@ export const PageSection: React.FC<IPageSectionProps> = ({
       onKeyDownCapture={onKeyDownCapture}
       {...rest}
     >
-      {/* TODO: This component is polluting the generic implementation.  It should be a separate component which include content related functionality */}
-      {includeContentActions && !!activeContent && (
-        <ContentActionBar className="content-actions" content={activeContent} viewingContent />
-      )}
       {header && (
         <Row className="page-section-title">
           {includeHeaderIcon && icon && <div className="page-icon">{icon}</div>}

diff --git a/app/subscriber/src/components/section/styled/PageSection.tsx b/app/subscriber/src/components/section/styled/PageSection.tsx
@@ -8,6 +8,17 @@ export const PageSection = styled.div<{ $ignoreMinWidth?: boolean; $ignoreLastCh
   align-self: stretch;
   min-width: ${(props) => (props.$ignoreMinWidth ? 'unset' : 'fit-content')};
 
+  .back-button {
+    margin-right: 1rem;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .content-headline {
+    margin-bottom: 0.25rem;
+  }
+
   @media (min-width: 500px) {
     margin: 0 0.75rem 0.75rem 0.75rem;
   }

diff --git a/app/subscriber/src/components/tool-bar/ContentActionBar.tsx b/app/subscriber/src/components/tool-bar/ContentActionBar.tsx
@@ -1,9 +1,7 @@
 import { ShareMenu } from 'components/share-menu';
 import React, { useState } from 'react';
 import { FaArrowUpRightFromSquare } from 'react-icons/fa6';
-import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { Tooltip } from 'react-tooltip';
 import { useLookup, useSettings } from 'store/hooks';
 import { useAppStore } from 'store/slices';
 import { Checkbox, Claim, IContentModel, Row, Settings, Show } from 'tno-core';
@@ -41,15 +39,13 @@ export const ContentActionBar: React.FC<IContentActionBarProps> = ({
   className,
   content,
   viewingContent,
-  onBack,
   onSelectAll,
   isSelectAllChecked,
   onClear,
   onReset,
   removeFolderItem,
   disableAddToFolder,
 }) => {
-  const navigate = useNavigate();
   const [{ frontPageImagesMediaTypeId, settings, isReady }] = useLookup();
   const { editorUrl } = useSettings();
   const [{ userInfo }] = useAppStore();
@@ -79,26 +75,7 @@ export const ContentActionBar: React.FC<IContentActionBarProps> = ({
   }, [frontPageImagesMediaTypeId, settings, isReady, content]);
 
   return (
-    <styled.ContentActionBar className={className}>
-      <Show visible={viewingContent}>
-        <div className="action left-side-items" onClick={() => (onBack ? onBack() : navigate(-1))}>
-          <img
-            className="back-button"
-            src={'/assets/back-button.svg'}
-            alt="Back"
-            data-tooltip-id="back-button"
-          />
-          <Tooltip
-            clickable={false}
-            className="back-tooltip"
-            classNameArrow="back-tooltip-arrow"
-            id="back-button"
-            place="top"
-            noArrow={false}
-            content="Back"
-          />
-        </div>
-      </Show>
+    <styled.ContentActionBar viewingContent={viewingContent} className={className}>
       <Show visible={!!onSelectAll}>
         <Row className="select-all">
           <div className="check-area">
@@ -113,7 +90,7 @@ export const ContentActionBar: React.FC<IContentActionBarProps> = ({
         <div className="arrow" />
       </Show>
       {showActionsItems && (
-        <div className="right-side-items">
+        <div className="content-buttons">
           <Row>
             {onReset && <ResetFilters onReset={onReset} />}
             <ShareMenu content={content} />

diff --git a/app/subscriber/src/components/tool-bar/styled/ContentActionBar.tsx b/app/subscriber/src/components/tool-bar/styled/ContentActionBar.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Row } from 'tno-core';
 
-export const ContentActionBar = styled(Row)`
+export const ContentActionBar = styled(Row)<{ viewingContent?: boolean }>`
   &.search {
     .check-area {
       margin-left: 1em;
@@ -43,8 +43,9 @@ export const ContentActionBar = styled(Row)`
     }
   }
 
-  .right-side-items {
+  .content-buttons {
     color: ${(props) => props.theme.css.btnBkPrimary};
+    width: ${(props) => (props.viewingContent ? '100%' : 'auto')};
     @media (max-width: 768px) {
       span {
         display: none;
@@ -53,13 +54,13 @@ export const ContentActionBar = styled(Row)`
     animation: fade-in 0.5s linear;
   }
   .editor-button {
+    margin-left: auto;
     display: flex;
     svg {
       height: 12px;
       width: 12px;
     }
     align-items: center;
-    margin-right: 1em;
     svg {
       margin-right: 0.25em;
     }

diff --git a/app/subscriber/src/features/content/view-content/ViewContent.tsx b/app/subscriber/src/features/content/view-content/ViewContent.tsx
@@ -267,10 +267,6 @@ export const ViewContent: React.FC<IViewContentProps> = ({ setActiveContent, act
   //Remove HTML tags, square brackets and line breaks before comparison.
   const cleanString = (str: string | undefined) => str?.replace(/<[^>]*>?|\[|\]|\n/gm, '').trim();
 
-  const formattedHeadline = React.useMemo(
-    () => formatSearch(content?.headline ?? '', filter),
-    [content?.headline, filter],
-  );
   const formattedBody = React.useMemo(
     () => formatSearch(content?.body?.replace(/\n+/g, '<br><br>') ?? '', filter),
     [content?.body, filter],
@@ -294,7 +290,6 @@ export const ViewContent: React.FC<IViewContentProps> = ({ setActiveContent, act
 
   return (
     <styled.ViewContent className={`${!!popout && 'popout'}`}>
-      <div className="headline">{formattedHeadline}</div>
       <Bar className="info-bar" vanilla>
         <Show visible={!!content?.byline}>
           <div className="byline">{`BY ${content?.byline}`}</div>
@@ -324,6 +319,7 @@ export const ViewContent: React.FC<IViewContentProps> = ({ setActiveContent, act
           )}
         </Row>
       </Bar>
+      {!!content && <ContentActionBar className="actions" content={[content]} viewingContent />}
       <Show visible={!!avStream && isAV}>
         <Row justifyContent="center">
           <Show visible={isProcessing}>

diff --git a/app/subscriber/src/features/content/view-content/styled/ViewContent.tsx b/app/subscriber/src/features/content/view-content/styled/ViewContent.tsx
@@ -44,9 +44,6 @@ export const ViewContent = styled.div`
     }
   }
   .info-bar {
-    /* negative margins to bypass parent padding (PageSection) */
-    margin-left: -1.25em;
-    margin-right: -1.25em;
     padding-left: 1.25em;
     padding-right: 1.25em;
     font-size: 0.9rem;

diff --git a/app/subscriber/src/features/landing/Landing.tsx b/app/subscriber/src/features/landing/Landing.tsx
@@ -13,12 +13,14 @@ import { MyMinister } from 'features/my-minister/MyMinister';
 import { MyProducts } from 'features/my-products';
 import { MySearches } from 'features/my-searches';
 import { PressGallery } from 'features/press-gallery';
+import { formatSearch } from 'features/search-page/utils';
 import { MyMinisterSettings } from 'features/settings';
 import { TodaysCommentary } from 'features/todays-commentary';
 import { TodaysFrontPages } from 'features/todays-front-pages';
 import { TopStories } from 'features/top-stories';
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useContent } from 'store/hooks';
 import useMobile from 'store/hooks/app/useMobile';
 import { Col, IContentModel, Row, Show } from 'tno-core';
 
@@ -33,7 +35,13 @@ export const Landing: React.FC = () => {
   const [activeItem, setActiveItem] = React.useState<INavbarOptionItem | undefined>(
     NavbarOptions.home,
   );
+  const [
+    {
+      search: { filter },
+    },
+  ] = useContent();
   const isMobile = useMobile();
+  const navigate = useNavigate();
   /* active content will be stored from this context in order to inject into subsequent components */
   const [activeContent, setActiveContent] = React.useState<IContentModel[]>();
   const [isFullScreen, setIsFullScreen] = React.useState(false);
@@ -89,6 +97,20 @@ export const Landing: React.FC = () => {
                       ? 'Settings | My Minister'
                       : activeItem?.label}
                   </Show>
+                  <Show visible={!activeItem && !!activeContent}>
+                    <Row>
+                      <img
+                        className="back-button"
+                        src={'/assets/back-button.svg'}
+                        alt="Back"
+                        data-tooltip-id="back-button"
+                        onClick={() => navigate(-1)}
+                      />
+                      <span className="content-headline">
+                        {activeContent && formatSearch(activeContent[0].headline, filter)}
+                      </span>
+                    </Row>
+                  </Show>
                   {!!activeItem?.reduxFilterStore && (
                     <>
                       <FilterOptions filterStoreName={activeItem?.reduxFilterStore} />