Fix select content (#2342)

bcgov · Nov 22, 2024 · 1f1e680 · 1f1e680
1 parent f4ac25c
commit 1f1e680
Show file tree

Hide file tree

Showing 13 changed files with 101 additions and 21 deletions.
diff --git a/app/subscriber/src/components/content-list/ContentList.tsx b/app/subscriber/src/components/content-list/ContentList.tsx
@@ -1,7 +1,6 @@
 import { AxiosError } from 'axios';
 import { castToSearchResult } from 'features/utils';
 import { IContentSearchResult } from 'features/utils/interfaces';
-import _ from 'lodash';
 import React from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { useNavigate } from 'react-router-dom';
@@ -135,11 +134,9 @@ export const ContentList: React.FC<IContentListProps> = ({
       array = [];
     }
     if (array.length !== selected?.length) {
-      array = _.uniq([...array, ...selected.map((i) => i.id)]);
-      localStorage.setItem('selected', JSON.stringify(array));
-    } else if (!existing) {
-      localStorage.setItem('selected', JSON.stringify(array));
+      array = selected.map((i) => i.id);
     }
+    localStorage.setItem('selected', JSON.stringify(array));
     // only want to fire when selected changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selected]);

diff --git a/app/subscriber/src/components/tool-bar/ContentActionBar.tsx b/app/subscriber/src/components/tool-bar/ContentActionBar.tsx
@@ -91,7 +91,7 @@ export const ContentActionBar: React.FC<IContentActionBarProps> = ({
       </Show>
       {showActionsItems && (
         <div className="content-buttons">
-          <Row>
+          <Row flex="1">
             {onReset && <ResetFilters onReset={onReset} />}
             <ShareMenu content={content} />
             {disableAddToFolder ? null : <AddToFolderMenu onClear={onClear} content={content} />}

diff --git a/app/subscriber/src/components/tool-bar/styled/ContentActionBar.tsx b/app/subscriber/src/components/tool-bar/styled/ContentActionBar.tsx
@@ -44,14 +44,17 @@ export const ContentActionBar = styled(Row)<{ viewingContent?: boolean }>`
   }
 
   .content-buttons {
+    flex: 1;
     color: ${(props) => props.theme.css.btnBkPrimary};
     width: ${(props) => (props.viewingContent ? '100%' : 'auto')};
+    animation: fade-in 0.5s linear;
+    margin-right: 1rem;
+
     @media (max-width: 768px) {
       span {
         display: none;
       }
     }
-    animation: fade-in 0.5s linear;
   }
   .editor-button {
     margin-left: auto;

diff --git a/app/subscriber/src/features/manage-folder/ManageFolder.tsx b/app/subscriber/src/features/manage-folder/ManageFolder.tsx
@@ -142,7 +142,11 @@ export const ManageFolder: React.FC = () => {
         <div className="main-manage">
           <ContentListActionBar
             content={selected}
-            onSelectAll={(e) => (e.target.checked ? setSelected(items) : setSelected([]))}
+            onSelectAll={(e) => {
+              const values = items.map((c) => c.id);
+              const oldSelected = selected.filter((s) => !values.includes(s.id));
+              e.target.checked ? setSelected([...selected, ...items]) : setSelected(oldSelected);
+            }}
             onClear={() => setSelected([])}
             removeFolderItem={() => removeItems(selected)}
             disableAddToFolder={true}

diff --git a/app/subscriber/src/features/my-minister/MyMinister.tsx b/app/subscriber/src/features/my-minister/MyMinister.tsx
@@ -191,7 +191,11 @@ export const MyMinister: React.FC = () => {
       <ContentListActionBar
         content={selected}
         onClear={() => setSelected([])}
-        onSelectAll={(e) => (e.target.checked ? setSelected(content) : setSelected([]))}
+        onSelectAll={(e) => {
+          const values = content.map((c) => c.id);
+          const oldSelected = selected.filter((s) => !values.includes(s.id));
+          e.target.checked ? setSelected([...selected, ...content]) : setSelected(oldSelected);
+        }}
       />
       <DateFilter
         date={filter.startDate}

diff --git a/app/subscriber/src/features/press-gallery/PressGallery.tsx b/app/subscriber/src/features/press-gallery/PressGallery.tsx
@@ -114,7 +114,11 @@ export const PressGallery: React.FC = () => {
       <ContentListActionBar
         content={selected}
         onClear={() => setSelected([])}
-        onSelectAll={(e) => (e.target.checked ? setSelected(content) : setSelected([]))}
+        onSelectAll={(e) => {
+          const values = content.map((c) => c.id);
+          const oldSelected = selected.filter((s) => !values.includes(s.id));
+          e.target.checked ? setSelected([...selected, ...content]) : setSelected(oldSelected);
+        }}
       />
       <Row className="tool-bar">
         <Select

diff --git a/app/subscriber/src/features/search-page/SearchPage.tsx b/app/subscriber/src/features/search-page/SearchPage.tsx
@@ -10,7 +10,7 @@ import { castToSearchResult } from 'features/utils';
 import { IContentSearchResult } from 'features/utils/interfaces';
 import moment, { Moment } from 'moment';
 import React from 'react';
-import { FaBookmark } from 'react-icons/fa6';
+import { FaBookmark, FaCaretLeft, FaCaretRight } from 'react-icons/fa6';
 import { useLocation, useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { useApp, useContent, useFilters, useLookup } from 'store/hooks';
@@ -50,15 +50,14 @@ export const SearchPage: React.FC<ISearchType> = ({ showAdvanced, showDate: init
   const { width } = useWindowSize();
   const genQuery = useElastic();
   const [, { getFilter }] = useFilters();
-  const [{ filter: activeFilter }, { storeFilter }] = useProfileStore();
+  const [{ from, filter: activeFilter }, { storeFrom, storeFilter }] = useProfileStore();
   const { pathname } = useLocation();
   const [{ requests }] = useApp();
 
   const [init, setInit] = React.useState(true); // React hooks are horrible...
   const [currDateResults, setCurrDateResults] = React.useState<IContentSearchResult[]>([]);
   const [prevDateResults, setPrevDateResults] = React.useState<IContentSearchResult[]>([]);
   const [selected, setSelected] = React.useState<IContentModel[]>([]);
-  const [totalResults, setTotalResults] = React.useState(0);
   const { expanded } = useSearchPageContext();
   const [startDate, setStartDate] = React.useState<Moment>(moment());
   const [filterId, setFilterId] = React.useState(0);
@@ -106,7 +105,6 @@ export const SearchPage: React.FC<ISearchType> = ({ showAdvanced, showDate: init
       });
       setCurrDateResults(currDateResults);
       setPrevDateResults(prevDateResults);
-      setTotalResults(currDateResults.length);
       if (!groupStoredContent) {
         if (
           (typeof res.hits.total === 'number' && res.hits.total === 0) ||
@@ -203,6 +201,7 @@ export const SearchPage: React.FC<ISearchType> = ({ showAdvanced, showDate: init
         let res;
         let groupStoredContent = false;
         if (!storedContent) {
+          storeFrom(query.from ?? 0);
           res = await findContentWithElasticsearch(query, filter.searchUnpublished, 'search');
         } else {
           res = storedContent;
@@ -268,18 +267,53 @@ export const SearchPage: React.FC<ISearchType> = ({ showAdvanced, showDate: init
                   <FilterOptions filterStoreName={'searchResults'} />
                   <ViewOptions />
                 </Row>
-                {!!totalResults && (
-                  <p className="result-total">{`${totalResults} stories found`}</p>
-                )}
+                <Row gap="1rem" className="search-results">
+                  {!!currDateResults.length && (
+                    <p className="result-total">{`${currDateResults.length} stories found`}</p>
+                  )}
+                  <Row className="search-results-paging">
+                    {!!from && (
+                      <FaCaretLeft
+                        className="btn"
+                        title="Previous Page"
+                        onClick={() => {
+                          const position = from ? from - filter.size : 0;
+                          const newFilter = {
+                            ...filter,
+                            from: position > 0 ? position : undefined,
+                          };
+                          fetchResults(newFilter);
+                        }}
+                      />
+                    )}
+                    p.
+                    {from >= filter.size ? Math.floor(from / filter.size) + 1 : 1}
+                    {filter.size === currDateResults.length && (
+                      <FaCaretRight
+                        className="btn"
+                        title="Next Page"
+                        onClick={() => {
+                          const position = from + filter.size;
+                          const newFilter = { ...filter, from: position };
+                          fetchResults(newFilter);
+                        }}
+                      />
+                    )}
+                  </Row>
+                </Row>
               </Col>
             }
           >
             <ContentListActionBar
               content={selected}
               onClear={() => setSelected([])}
-              onSelectAll={(e) =>
-                e.target.checked ? setSelected(currDateResults) : setSelected([])
-              }
+              onSelectAll={(e) => {
+                const values = currDateResults.map((c) => c.id);
+                const oldSelected = selected.filter((s) => !values.includes(s.id));
+                e.target.checked
+                  ? setSelected([...selected, ...currDateResults])
+                  : setSelected(oldSelected);
+              }}
               className="search"
             />
             <Show visible={dateVisible}>

diff --git a/app/subscriber/src/features/search-page/styled/SearchPage.tsx b/app/subscriber/src/features/search-page/styled/SearchPage.tsx
@@ -12,6 +12,24 @@ export const SearchPage = styled.div<{ expanded: boolean }>`
 
   .header-col {
     width: 100%;
+
+    .search-results {
+      gap: 1rem;
+      align-items: center;
+
+      .search-results-paging {
+        font-size: 1rem;
+        color: ${(props) => props.theme.css.fPrimaryColor};
+        align-items: center;
+
+        svg.btn {
+          color: ${(props) => props.theme.css.iconPrimaryColor};
+          width: 16px;
+          height: 16px;
+          cursor: pointer;
+        }
+      }
+    }
   }
   .header-row {
     width: 100%;

diff --git a/app/subscriber/src/features/search-page/utils/filterFormat.ts b/app/subscriber/src/features/search-page/utils/filterFormat.ts
@@ -12,7 +12,6 @@ export const filterFormat = (filter: IFilterSettingsModel) => {
     dateOffset: filter.dateOffset,
     edition: filter.edition ?? '',
     featured: filter.featured ?? false,
-    from: 0,
     inByline: filter.inByline ?? false,
     inHeadline: filter.inHeadline ?? false,
     inProgram: filter.inProgram ?? false,
@@ -24,6 +23,7 @@ export const filterFormat = (filter: IFilterSettingsModel) => {
     section: filter.section ?? '',
     sentiment: filter.sentiment ?? [],
     seriesIds: filter.seriesIds ?? [],
+    from: filter.from,
     size: filter.size,
     sourceIds: filter.sourceIds ?? [],
     startDate: !!filter.startDate ? filter.startDate : undefined,

diff --git a/app/subscriber/src/features/top-stories/TopStories.tsx b/app/subscriber/src/features/top-stories/TopStories.tsx
@@ -100,6 +100,7 @@ export const TopStories: React.FC = () => {
   const handleSelectAll = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const dateKey = filter.startDate || moment().startOf('day').toISOString();
+
       setStateByDate((prevState) => ({
         ...prevState,
         [dateKey]: {

diff --git a/app/subscriber/src/store/slices/profile/interfaces/IProfileState.ts b/app/subscriber/src/store/slices/profile/interfaces/IProfileState.ts
@@ -13,6 +13,8 @@ import {
 export interface IProfileState {
   impersonate?: ISubscriberUserModel;
   profile?: ISubscriberUserModel;
+  /** Paging position for filter. */
+  from: number;
   filter?: IFilterModel;
   myFilters: IFilterModel[];
   myFolders: IFolderModel[];

diff --git a/app/subscriber/src/store/slices/profile/profileSlice.ts b/app/subscriber/src/store/slices/profile/profileSlice.ts
@@ -14,6 +14,7 @@ import {
 import { IProfileState } from './interfaces';
 
 export const initialProfileState: IProfileState = {
+  from: 0,
   contributors: [],
   myFilters: [],
   myFolders: [],
@@ -45,6 +46,9 @@ export const profileSlice = createSlice({
     ) {
       state.impersonate = action.payload;
     },
+    storeFrom(state: IProfileState, action: PayloadAction<number>) {
+      state.from = action.payload;
+    },
     storeFilter(state: IProfileState, action: PayloadAction<IFilterModel | undefined>) {
       state.filter = action.payload;
     },
@@ -92,6 +96,7 @@ export const profileSlice = createSlice({
 export const {
   storeMyProfile,
   storeImpersonate,
+  storeFrom,
   storeFilter,
   storeMyFilters,
   storeMyFolders,

diff --git a/app/subscriber/src/store/slices/profile/useProfileStore.ts b/app/subscriber/src/store/slices/profile/useProfileStore.ts
@@ -15,6 +15,7 @@ import {
 import { storeContributors } from '../lookup';
 import {
   storeFilter,
+  storeFrom,
   storeImpersonate,
   storeMyColleagues,
   storeMyFilters,
@@ -39,6 +40,7 @@ export interface IProfileStore {
   storeContributors: (
     contributors: IContributorModel[] | ActionDelegate<IContributorModel[]>,
   ) => void;
+  storeFrom: (from: number | ActionDelegate<number>) => void;
   storeFilter: (filter: IFilterModel | ActionDelegate<IFilterModel | undefined>) => void;
   storeMyFilters: (filters: IFilterModel[] | ActionDelegate<IFilterModel[]>) => void;
   storeMyFolders: (folders: IFolderModel[] | ActionDelegate<IFolderModel[]>) => void;
@@ -79,6 +81,11 @@ export const useProfileStore = (): [IProfileState, IProfileStore] => {
           dispatch(storeImpersonate(user(state.impersonate)));
         } else dispatch(storeImpersonate(user));
       },
+      storeFrom: (from: number | ActionDelegate<number>) => {
+        if (typeof from === 'function') {
+          dispatch(storeFrom(from(state.from)));
+        } else dispatch(storeFrom(from));
+      },
       storeFilter: (filter: IFilterModel | ActionDelegate<IFilterModel | undefined>) => {
         if (typeof filter === 'function') {
           dispatch(storeFilter(filter(state.filter)));
@@ -156,6 +163,7 @@ export const useProfileStore = (): [IProfileState, IProfileStore] => {
       dispatch,
       state.profile,
       state.impersonate,
+      state.from,
       state.filter,
       state.myFilters,
       state.myFolders,