From 6da208b8df7f2674c81a6b9ac747c14701034b9d Mon Sep 17 00:00:00 2001 From: Hege Aalvik Date: Wed, 18 Oct 2023 13:52:46 +0200 Subject: [PATCH 1/2] feat: add pagination --- src/api/community-api/search.ts | 5 ++- src/components/with-community/index.tsx | 12 +++--- .../with-community/redux/actions.ts | 14 ++++--- .../with-community/redux/reducer.ts | 7 ++-- src/components/with-community/redux/saga.ts | 13 +++--- src/pages/requests/index.tsx | 40 ++++++++++++++++--- src/pages/requests/styled.ts | 37 ++++++++++++++++- src/types/domain.d.ts | 9 ++--- 8 files changed, 102 insertions(+), 35 deletions(-) diff --git a/src/api/community-api/search.ts b/src/api/community-api/search.ts index 2a448818b..50fa234bb 100644 --- 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 index 1f60cb002..a2b5ce95b 100644 --- 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) => { @@ -25,7 +22,8 @@ const withCommunity = (Component: ComponentType) => { 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 index e92c0ec61..8a3b7e0a4 100644 --- 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: string | undefined, 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 index 2fe42147a..50705140b 100644 --- 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 index 5a97a9cf7..6caeff590 100644 --- a/src/components/with-community/redux/saga.ts +++ b/src/components/with-community/redux/saga.ts @@ -43,16 +43,17 @@ function* searchTopicsRequested({ } function* searchRequestsRequested({ - payload: { queryTerm, sortOption } + payload: { queryTerm, sortOption, page } }: ReturnType) { 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) @@ -60,13 +61,13 @@ function* searchRequestsRequested({ )) 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 index 51e45a96d..5b5f91f91 100644 --- a/src/pages/requests/index.tsx +++ b/src/pages/requests/index.tsx @@ -14,19 +14,21 @@ import Banner from '../../components/banner'; import localization from '../../lib/localization'; import env from '../../env'; import { SelectOption } from '../../types'; +import ReactPaginate from 'react-paginate'; const { FDK_COMMUNITY_BASE_URI } = env; interface Props extends CommunityProps {} const RequestsPage: FC = ({ - topics, + requests, + pagination, communityActions: { searchRequestsRequested } }) => { useEffect(() => { - searchRequestsRequested(''); + searchRequestsRequested('', '1', undefined); }, []); - const notDeletedRequests = topics?.filter(topic => topic.deleted === 0); + const notDeletedRequests = requests?.filter(topic => topic.deleted === 0); const [search, setSearch] = useState(''); const sortOptions: SelectOption[] = [ @@ -75,7 +77,9 @@ const RequestsPage: FC = ({

{localization.requestsPage.view}

- searchRequestsRequested(search, value?.value, undefined) - } + onChange={value => { + searchRequestsRequested(search, undefined, value?.value); + setSortOption(value?.value); + }} defaultValue={sortOptions[0]} /> @@ -125,10 +127,14 @@ const RequestsPage: FC = ({ ))} { - searchRequestsRequested(search, (data.selected + 1).toString()); + searchRequestsRequested( + search, + (data.selected + 1).toString(), + sortOption + ); }} previousLabel={ <> diff --git a/src/types/domain.d.ts b/src/types/domain.d.ts index 7ca699549..d9b161d67 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;