feat: add pagination

Informasjonsforvaltning · Oct 19, 2023 · 26b9feb · 26b9feb
1 parent 8cf12e9
commit 26b9feb
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 60 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/api/community-api/search.ts b/src/api/community-api/search.ts
@@ -42,18 +42,19 @@ export const extractTopicsFromSearch = (
 
 export const searchCommunityRequests = (
   queryTerm: string,
+  page: number,
   sortOption?: string
 ) => {
   if (queryTerm.length > 0) {
     return axios
       .get(
-        `${FDK_COMMUNITY_BASE_URI}/api/search?term=${queryTerm}&in=titles&matchWords=all&categories[]=6&sortBy=${sortOption}&sortDirection=desc`
+        `${FDK_COMMUNITY_BASE_URI}/api/search?term=${queryTerm}&in=titles&matchWords=all&categories[]=6&sortBy=${sortOption}&sortDirection=desc&page=${page}`
       )
       .then(({ data }) => data);
   }
   return axios
     .get(
-      `${FDK_COMMUNITY_BASE_URI}/api/search?&categories[]=6&sortBy=${sortOption}&sortDirection=desc`
+      `${FDK_COMMUNITY_BASE_URI}/api/search?&categories[]=6&sortBy=${sortOption}&sortDirection=desc&page=${page}`
     )
     .then(({ data }) => data);
 };

diff --git a/src/components/with-community/index.tsx b/src/components/with-community/index.tsx
@@ -4,18 +4,15 @@ import { connect } from 'react-redux';
 
 import * as actions from './redux/actions';
 
-import type {
-  CommunityPost,
-  CommunityRequestCategory,
-  CommunityTopic
-} from '../../types';
+import type { CommunityPost, CommunityTopic, Pagination } from '../../types';
 
 export interface Props {
   topics: CommunityTopic[];
   multiplePages: boolean;
   posts: CommunityPost[];
   communityActions: typeof actions;
-  requests: CommunityRequestCategory;
+  requests: CommunityTopic[];
+  pagination: Pagination;
 }
 
 const withCommunity = (Component: ComponentType<any>) => {
@@ -25,7 +22,8 @@ const withCommunity = (Component: ComponentType<any>) => {
     topics: state.CommunityReducer.get('topics').toJS(),
     multiplePages: state.CommunityReducer.get('multiplePages'),
     posts: state.CommunityReducer.get('posts').toJS(),
-    requests: state.CommunityReducer.get('requests').toJS()
+    requests: state.CommunityReducer.get('requests').toJS(),
+    pagination: state.CommunityReducer.get('pagination').toJS()
   });
 
   const mapDispatchToProps = (dispatch: Dispatch) => ({

diff --git a/src/components/with-community/redux/actions.ts b/src/components/with-community/redux/actions.ts
@@ -12,7 +12,7 @@ import {
   SEARCH_REQUESTS_FAILED
 } from './action-types';
 
-import type { CommunityPost, CommunityTopic } from '../../../types';
+import type { CommunityPost, CommunityTopic, Pagination } from '../../../types';
 import { CommunityTerm } from '../../../types/enums';
 
 export function searchTopicsRequested(queryTerm: string) {
@@ -48,26 +48,28 @@ export function searchTopicsFailed(message: string) {
 
 export function searchRequestsRequested(
   queryTerm: string,
+  page: number,
   sortOption?: string
 ) {
   return {
     type: SEARCH_REQUESTS_REQUESTED,
     payload: {
       queryTerm,
-      sortOption
+      sortOption,
+      page
     }
   };
 }
 
 export function searchRequestsSucceeded(
-  topics: CommunityTopic[],
-  multiplePages: boolean
+  requests: CommunityTopic[],
+  pagination: Pagination
 ) {
   return {
     type: SEARCH_REQUESTS_SUCCEEDED,
     payload: {
-      topics,
-      multiplePages
+      requests,
+      pagination
     }
   };
 }

diff --git a/src/components/with-community/redux/reducer.ts b/src/components/with-community/redux/reducer.ts
@@ -21,7 +21,8 @@ const initialState = fromJS({
   topics: [],
   multiplePages: false,
   posts: [],
-  requests: {}
+  requests: [],
+  pagination: {}
 });
 
 export default function reducer(
@@ -49,8 +50,8 @@ export default function reducer(
       return state.set('topics', fromJS([]));
     case SEARCH_REQUESTS_SUCCEEDED:
       return state
-        .set('topics', fromJS(action.payload.topics))
-        .set('multiplePages', fromJS(action.payload.multiplePages));
+        .set('requests', fromJS(action.payload.requests))
+        .set('pagination', fromJS(action.payload.pagination));
     case SEARCH_REQUESTS_FAILED:
     default:
       return state;

diff --git a/src/components/with-community/redux/saga.ts b/src/components/with-community/redux/saga.ts
@@ -43,30 +43,31 @@ function* searchTopicsRequested({
 }
 
 function* searchRequestsRequested({
-  payload: { queryTerm, sortOption }
+  payload: { queryTerm, sortOption, page }
 }: ReturnType<typeof actions.searchRequestsRequested>) {
   try {
     const postHits: CommunityPost = yield call(
       searchCommunityRequests,
       queryTerm,
+      page,
       sortOption
     );
-    const { multiplePages } = postHits;
-    const topics: CommunityTopic[] = (
+    const { pagination } = postHits;
+    const requests: CommunityTopic[] = (
       (yield all(
         extractTopicsFromSearch(postHits).map(({ tid }) =>
           call(getTopicById, tid)
         )
       )) as CommunityTopic[]
     ).filter(Boolean);
 
-    if (topics.length > 0) {
-      yield put(actions.searchTopicsSucceeded(topics, multiplePages));
+    if (requests.length > 0) {
+      yield put(actions.searchRequestsSucceeded(requests, pagination));
     } else {
       yield put(actions.searchTopicsFailed(''));
     }
   } catch (e: any) {
-    yield put(actions.searchTopicsFailed(e.message));
+    yield put(actions.searchRequestsFailed(e.message));
   }
 }
 

diff --git a/src/pages/requests/index.tsx b/src/pages/requests/index.tsx
@@ -12,19 +12,21 @@ import { formatDate } from '../../lib/date-utils';
 import Banner from '../../components/banner';
 import localization from '../../lib/localization';
 import env from '../../env';
+import ReactPaginate from 'react-paginate';
 
 const { FDK_COMMUNITY_BASE_URI } = env;
 interface Props extends CommunityProps {}
 
 const RequestsPage: FC<Props> = ({
-  topics,
+  requests,
+  pagination,
   communityActions: { searchRequestsRequested }
 }) => {
   useEffect(() => {
-    searchRequestsRequested('');
+    searchRequestsRequested('', 1);
   }, []);
 
-  const notDeletedRequests = topics?.filter(topic => topic.deleted === 0);
+  const notDeletedRequests = requests?.filter(topic => topic.deleted === 0);
   const [search, setSearch] = useState('');
 
   return (
@@ -56,15 +58,19 @@ const RequestsPage: FC<Props> = ({
         <SC.FirstRow>
           <SC.Row>
             <Button
-              onClick={() => searchRequestsRequested(search, 'timestamp')}
+              onClick={() => searchRequestsRequested(search, 1, 'timestamp')}
             >
               {localization.requestsPage.newestToOldest}
             </Button>
-            <Button onClick={() => searchRequestsRequested(search, 'upvotes')}>
+            <Button
+              onClick={() => searchRequestsRequested(search, 1, 'upvotes')}
+            >
               {localization.requestsPage.mostVotes}
             </Button>
             <Button
-              onClick={() => searchRequestsRequested(search, 'topic.viewcount')}
+              onClick={() =>
+                searchRequestsRequested(search, 1, 'topic.viewcount')
+              }
             >
               {localization.requestsPage.mostViews}
             </Button>
@@ -74,7 +80,9 @@ const RequestsPage: FC<Props> = ({
               type='text'
               onChange={event => setSearch(event.target.value)}
             />
-            <Button onClick={() => searchRequestsRequested(search)}>Søk</Button>
+            <Button onClick={() => searchRequestsRequested(search, 1)}>
+              Søk
+            </Button>
           </SC.Row>
         </SC.FirstRow>
         <SC.RequestsTitleRow>
@@ -100,6 +108,28 @@ const RequestsPage: FC<Props> = ({
               <SC.RequestInfo>{topic.viewcount}</SC.RequestInfo>
             </SC.RequestRow>
           ))}
+        <SC.Pagination>
+          <ReactPaginate
+            pageCount={pagination.pageCount}
+            activeClassName='active'
+            onPageChange={data => {
+              searchRequestsRequested(search, data.selected + 1);
+            }}
+            previousLabel={
+              <>
+                <SC.ArrowLeftIcon />
+                {localization.page.prev}
+              </>
+            }
+            nextLabel={
+              <>
+                {localization.page.next}
+                <SC.ArrowRightIcon />
+              </>
+            }
+          />
+        </SC.Pagination>
+
         <SC.InfoBox>
           <SC.Text>
             <h3>{localization.requestsPage.requestData}</h3>

diff --git a/src/pages/requests/styled.ts b/src/pages/requests/styled.ts
@@ -1,4 +1,6 @@
 import styled from 'styled-components';
+import ArrowRightIconBase from '@fellesdatakatalog/icons/assets/svg/arrow-right-stroke.svg';
+import ArrowLeftIconBase from '@fellesdatakatalog/icons/assets/svg/arrow-left-stroke.svg';
 
 const RequestRow = styled.div`
   display: flex;
@@ -77,6 +79,36 @@ const Text = styled.div`
   }
 `;
 
+const ArrowRightIcon = styled(ArrowRightIconBase)`
+  width: 16px;
+  height: 16px;
+  margin-left: 0.25em;
+  & * {
+    stroke: #0069a5;
+  }
+`;
+
+const ArrowLeftIcon = styled(ArrowLeftIconBase)`
+  width: 16px;
+  height: 16px;
+  margin-right: 0.25em;
+  & * {
+    stroke: #0069a5;
+  }
+`;
+
+const Pagination = styled.div`
+  & > ul {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  & > ul > li {
+    padding: 10px;
+  }
+`;
+
 export default {
   RequestRow,
   RequestsTitleRow,
@@ -88,5 +120,8 @@ export default {
   Button,
   InfoBox,
   Text,
-  FirstRow
+  FirstRow,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  Pagination
 };