From 2e80c387e6c722b14b7b6515042e0cdd1663dbc8 Mon Sep 17 00:00:00 2001 From: Hege Aalvik Date: Thu, 19 Oct 2023 14:17:44 +0200 Subject: [PATCH] feat: add pagination --- src/api/community-api/search.ts | 44 +++++++++++++------ .../with-community/redux/actions.ts | 6 +-- src/components/with-community/redux/saga.ts | 19 ++++++-- src/pages/requests/index.tsx | 32 +++++++++----- src/types/domain.d.ts | 22 ++-------- 5 files changed, 74 insertions(+), 49 deletions(-) diff --git a/src/api/community-api/search.ts b/src/api/community-api/search.ts index 50fa234bb..e20a65154 100644 --- a/src/api/community-api/search.ts +++ b/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( diff --git a/src/components/with-community/redux/actions.ts b/src/components/with-community/redux/actions.ts index 3209643c3..d6fdd51ab 100644 --- a/src/components/with-community/redux/actions.ts +++ b/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, diff --git a/src/components/with-community/redux/saga.ts b/src/components/with-community/redux/saga.ts index 6caeff590..ba02ab502 100644 --- a/src/components/with-community/redux/saga.ts +++ b/src/components/with-community/redux/saga.ts @@ -9,6 +9,7 @@ import * as actions from './actions'; import { extractTopicsFromSearch, + getAllRequests, getRecentPosts, getTopicById, pruneNodebbTemplateTags, @@ -16,7 +17,11 @@ import { 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)); diff --git a/src/pages/requests/index.tsx b/src/pages/requests/index.tsx index fc7202ece..851219e9d 100644 --- a/src/pages/requests/index.tsx +++ b/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 = ({ communityActions: { searchRequestsRequested } }) => { useEffect(() => { - searchRequestsRequested('', 1); + searchRequestsRequested('', 1, ''); }, []); const notDeletedRequests = requests?.filter(topic => topic.deleted === 0); - const [search, setSearch] = useState(''); + const [search, setSearch] = useState(); + const [sortOption, setSortOption] = useState(); return ( <> @@ -58,19 +59,26 @@ const RequestsPage: FC = ({ @@ -80,7 +88,11 @@ const RequestsPage: FC = ({ type='text' onChange={event => setSearch(event.target.value)} /> - @@ -113,7 +125,7 @@ const RequestsPage: FC = ({ pageCount={pagination.pageCount} activeClassName='active' onPageChange={data => { - searchRequestsRequested(search, data.selected + 1); + searchRequestsRequested(search, data.selected + 1, sortOption); }} previousLabel={ <> diff --git a/src/types/domain.d.ts b/src/types/domain.d.ts index 36f119b82..bdb96c83c 100644 --- a/src/types/domain.d.ts +++ b/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,6 +1019,7 @@ export interface CommunityPost { page?: number; multiplePages: boolean; pagination: Pagination; + posts: CommunityPost[]; } export interface Pagination { @@ -1025,22 +1027,6 @@ export interface Pagination { 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;