feat: add pagination

src/api/community-api/search.ts

@@ -40,24 +40,40 @@ export const extractTopicsFromSearch = (
   return uniqueTopics;
 };
 
-export const searchCommunityRequests = (
-  queryTerm: string,
-  page: number,
-  sortOption?: string
+const buildCommunityRequestsQueryParams = (
+  queryTerm: string | undefined,
+  page: number | 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&page=${page}`
-      )
-      .then(({ data }) => data);
-  }
-  return axios
+  const params = new URLSearchParams();
+
+  if (queryTerm) params.append('term', queryTerm);
+  if (page) params.append('page', page.toString());
+  if (sortOption) params.append('sortBy', sortOption);
+
+  console.log(params.toString());
+
+  return params.toString();
+};
+export const searchCommunityRequests = (
+  queryTerm: string | undefined,
+  page: number | undefined,
+  sortOption: string | undefined
+) =>
+  axios
     .get(
-      `${FDK_COMMUNITY_BASE_URI}/api/search?&categories[]=6&sortBy=${sortOption}&sortDirection=desc&page=${page}`
+      `${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/redux/actions.ts

@@ -47,9 +47,9 @@ export function searchTopicsFailed(message: string) {
 }
 
 export function searchRequestsRequested(
-  queryTerm: string,
-  page: number,
-  sortOption?: string
+  queryTerm: string | undefined,
+  page: number | undefined,
+  sortOption: string | undefined
 ) {
   return {
     type: SEARCH_REQUESTS_REQUESTED,

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 }
@@ -53,13 +58,19 @@ function* searchRequestsRequested({
       sortOption
     );
     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 (requests.length > 0) {
       yield put(actions.searchRequestsSucceeded(requests, pagination));

src/pages/requests/index.tsx

@@ -2,6 +2,7 @@ import React, { FC, useEffect, useState } from 'react';
 import { compose } from 'redux';
 import Link from '@fellesdatakatalog/link';
 import Button from '@fellesdatakatalog/button';
+import ReactPaginate from 'react-paginate';
 import withCommunity, {
   Props as CommunityProps
 } from '../../components/with-community';
@@ -12,7 +13,6 @@ 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 {}
@@ -23,11 +23,12 @@ const RequestsPage: FC<Props> = ({
   communityActions: { searchRequestsRequested }
 }) => {
   useEffect(() => {
-    searchRequestsRequested('', 1);
+    searchRequestsRequested('', 1, '');
   }, []);
 
   const notDeletedRequests = requests?.filter(topic => topic.deleted === 0);
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useState<string>();
+  const [sortOption, setSortOption] = useState<string>();
 
   return (
     <>
@@ -58,19 +59,26 @@ const RequestsPage: FC<Props> = ({
         <SC.FirstRow>
           <SC.Row>
             <Button
-              onClick={() => searchRequestsRequested(search, 1, 'timestamp')}
+              onClick={() => {
+                searchRequestsRequested(search, undefined, 'timestamp');
+                setSortOption('timestamp');
+              }}
             >
               {localization.requestsPage.newestToOldest}
             </Button>
             <Button
-              onClick={() => searchRequestsRequested(search, 1, 'upvotes')}
+              onClick={() => {
+                searchRequestsRequested(search, undefined, 'upvotes');
+                setSortOption('upvotes');
+              }}
             >
               {localization.requestsPage.mostVotes}
             </Button>
             <Button
-              onClick={() =>
-                searchRequestsRequested(search, 1, 'topic.viewcount')
-              }
+              onClick={() => {
+                searchRequestsRequested(search, undefined, 'topic.viewcount');
+                setSortOption('topic.viewcount');
+              }}
             >
               {localization.requestsPage.mostViews}
             </Button>
@@ -80,7 +88,11 @@ const RequestsPage: FC<Props> = ({
               type='text'
               onChange={event => setSearch(event.target.value)}
             />
-            <Button onClick={() => searchRequestsRequested(search, 1)}>
+            <Button
+              onClick={() =>
+                searchRequestsRequested(search, undefined, undefined)
+              }
+            >
               Søk
             </Button>
           </SC.Row>
@@ -113,7 +125,7 @@ const RequestsPage: FC<Props> = ({
             pageCount={pagination.pageCount}
             activeClassName='active'
             onPageChange={data => {
-              searchRequestsRequested(search, data.selected + 1);
+              searchRequestsRequested(search, data.selected + 1, sortOption);
             }}
             previousLabel={
               <>

src/types/domain.d.ts

@@ -929,6 +929,7 @@ export interface CommunityCategory {
   bgColor: string;
   color: string;
   disabled: number;
+  topics: CommunityTopic[];
 }
 
 export interface UserFeedbackPagination {
@@ -949,7 +950,7 @@ export interface CommunityTopic {
   viewcount: number;
   postercount: number;
   scheduled: number;
-  deleted: number;
+  deleted: 1 | 0;
   deleterUid: number;
   titleRaw: string;
   locked: number;
@@ -999,7 +1000,7 @@ export interface CommunityUser {
 
 export interface CommunityPost {
   pid: string;
-  tid: string;
+  tid: number;
   toPid?: string;
   content: string;
   uid: string | number;
@@ -1018,29 +1019,14 @@ export interface CommunityPost {
   page?: number;
   multiplePages: boolean;
   pagination: Pagination;
+  posts: CommunityPost[];
 }
 
 export interface Pagination {
   currentPage: number;
   pageCount: number;
 }
 
-export interface CommunityRequest {
-  cid: number;
-  timestamp: number;
-  lastposttime: number;
-  lastposttimeISO: Date;
-  timestampISO: Date;
-  postcount: number;
-  title: string;
-  viewcount: number;
-  postercount: number;
-  downvotes: number;
-  upvotes: number;
-  deleted: 1 | 0;
-  slug: string;
-}
-
 export interface CommunityTeaser {
   pid: number;
   uid: number;