Feat/add pagination (#1795)

src/api/community-api/search.ts

@@ -40,23 +40,38 @@ export const extractTopicsFromSearch = (
   return uniqueTopics;
 };
 
-export const searchCommunityRequests = (
-  queryTerm: string,
-  sortOption?: string
+const buildCommunityRequestsQueryParams = (
+  queryTerm: string | undefined,
+  page: string | undefined,
+  sortOption: string | undefined
 ) => {
-  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`
-      )
-      .then(({ data }) => data);
-  }
-  return axios
+  const params = new URLSearchParams();
+
+  if (queryTerm) params.append('term', queryTerm);
+  if (page) params.append('page', page);
+  if (sortOption) params.append('sortBy', sortOption);
+
+  return params.toString();
+};
+export const searchCommunityRequests = (
+  queryTerm: string | undefined,
+  page: string | undefined,
+  sortOption: string | undefined
+) =>
+  axios
     .get(
-      `${FDK_COMMUNITY_BASE_URI}/api/search?&categories[]=6&sortBy=${sortOption}&sortDirection=desc`
+      `${FDK_COMMUNITY_BASE_URI}/api/search?categories[]=6&sortDirection=desc&in=titles&matchWords=all&showAs=topics&${buildCommunityRequestsQueryParams(
+        queryTerm,
+        page,
+        sortOption
+      )}`
     )
     .then(({ data }) => data);
-};
+
+export const getAllRequests = () =>
+  axios
+    .get(`${FDK_COMMUNITY_BASE_URI}/api/category/6`)
+    .then(({ data }) => data);
 
 export const pruneNodebbTemplateTags = (raw_text: string) =>
   raw_text.replace(

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) => ({

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) {
@@ -47,27 +47,29 @@ export function searchTopicsFailed(message: string) {
 }
 
 export function searchRequestsRequested(
-  queryTerm: string,
-  sortOption?: string
+  queryTerm: string | undefined,
+  page: string | undefined,
+  sortOption: string | undefined
 ) {
   return {
     type: SEARCH_REQUESTS_REQUESTED,
     payload: {
       queryTerm,
+      page,
       sortOption
     }
   };
 }
 
 export function searchRequestsSucceeded(
-  topics: CommunityTopic[],
-  multiplePages: boolean
+  requests: CommunityTopic[],
+  pagination: Pagination
 ) {
   return {
     type: SEARCH_REQUESTS_SUCCEEDED,
     payload: {
-      topics,
-      multiplePages
+      requests,
+      pagination
     }
   };
 }

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;

src/components/with-community/redux/saga.ts

@@ -9,14 +9,19 @@ import * as actions from './actions';
 
 import {
   extractTopicsFromSearch,
+  getAllRequests,
   getRecentPosts,
   getTopicById,
   pruneNodebbTemplateTags,
   searchCommunity,
   searchCommunityRequests
 } from '../../../api/community-api/search';
 
-import type { CommunityPost, CommunityTopic } from '../../../types';
+import type {
+  CommunityCategory,
+  CommunityPost,
+  CommunityTopic
+} from '../../../types';
 
 function* searchTopicsRequested({
   payload: { queryTerm }
@@ -43,30 +48,37 @@ 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 allRequestTopics: CommunityCategory = yield call(getAllRequests);
+    const { topics } = allRequestTopics;
+
+    const requests: CommunityTopic[] = (
       (yield all(
-        extractTopicsFromSearch(postHits).map(({ tid }) =>
-          call(getTopicById, tid)
+        postHits.posts.map(({ tid }) =>
+          topics.filter(topic => topic.tid === tid)
         )
       )) as CommunityTopic[]
-    ).filter(Boolean);
+    )
+      .filter(Boolean)
+      .flat();
 
-    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));
   }
 }
 

src/pages/requests/index.tsx

@@ -3,6 +3,7 @@ import { compose } from 'redux';
 import Link from '@fellesdatakatalog/link';
 import Button from '@fellesdatakatalog/button';
 import Select from 'react-select';
+import ReactPaginate from 'react-paginate';
 import withCommunity, {
   Props as CommunityProps
 } from '../../components/with-community';
@@ -19,15 +20,17 @@ const { FDK_COMMUNITY_BASE_URI } = env;
 interface Props extends CommunityProps {}
 
 const RequestsPage: FC<Props> = ({
-  topics,
+  requests,
+  pagination,
   communityActions: { searchRequestsRequested }
 }) => {
   useEffect(() => {
-    searchRequestsRequested('');
+    searchRequestsRequested(undefined, '1', undefined);
   }, []);
 
-  const notDeletedRequests = topics?.filter(topic => topic.deleted === 0);
-  const [search, setSearch] = useState('');
+  const notDeletedRequests = requests?.filter(topic => topic.deleted === 0);
+  const [search, setSearch] = useState<string>();
+  const [sortOption, setSortOption] = useState<string>();
 
   const sortOptions: SelectOption[] = [
     {
@@ -75,7 +78,10 @@ const RequestsPage: FC<Props> = ({
             <p>{localization.requestsPage.view}</p>
             <Select
               options={sortOptions}
-              onChange={value => searchRequestsRequested(search, value?.value)}
+              onChange={value => {
+                searchRequestsRequested(search, undefined, value?.value);
+                setSortOption(value?.value);
+              }}
               defaultValue={sortOptions[0]}
             />
           </div>
@@ -86,7 +92,11 @@ const RequestsPage: FC<Props> = ({
                 type='text'
                 onChange={event => setSearch(event.target.value)}
               />
-              <Button onClick={() => searchRequestsRequested(search)}>
+              <Button
+                onClick={() =>
+                  searchRequestsRequested(search, undefined, undefined)
+                }
+              >
                 Søk
               </Button>
             </SC.Row>
@@ -115,6 +125,32 @@ const RequestsPage: FC<Props> = ({
               <SC.RequestInfo>{topic.viewcount}</SC.RequestInfo>
             </SC.RequestRow>
           ))}
+        <SC.Pagination>
+          <ReactPaginate
+            pageCount={pagination.pageCount ? pagination.pageCount : 0}
+            activeClassName='active'
+            onPageChange={data => {
+              searchRequestsRequested(
+                search,
+                (data.selected + 1).toString(),
+                sortOption
+              );
+            }}
+            previousLabel={
+              <>
+                <SC.ArrowLeftIcon />
+                {localization.page.prev}
+              </>
+            }
+            nextLabel={
+              <>
+                {localization.page.next}
+                <SC.ArrowRightIcon />
+              </>
+            }
+          />
+        </SC.Pagination>
+
         <SC.InfoBox>
           <SC.Text>
             <h3>{localization.requestsPage.requestData}</h3>

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
 };