fix: not all contributors are displayed in contributor merge form gf-550 (#551)

* feat: add separate handling for contributors table and contributor merge gf-550

* fix: remove is loading from contributor merge form gf-550

Author: s1rserg

apps/backend/src/modules/contributors/contributor.controller.ts

@@ -186,17 +186,24 @@ class ContributorController extends BaseController {
 			query: { projectId?: string } & PaginationQueryParameters;
 		}>,
 	): Promise<APIHandlerResponse> {
-		if (options.query.projectId) {
-			const projectId = Number(options.query.projectId);
+		const { page, pageSize, projectId } = options.query;
 
+		if (projectId) {
 			return {
 				payload: await this.contributorService.findAllByProjectId({
-					projectId,
+					projectId: Number(projectId),
 				}),
 				status: HTTPCode.OK,
 			};
 		}
 
+		if (!page || !pageSize) {
+			return {
+				payload: await this.contributorService.findAllWithoutPagination({}),
+				status: HTTPCode.OK,
+			};
+		}
+
 		return {
 			payload: await this.contributorService.findAll(options.query),
 			status: HTTPCode.OK,

apps/frontend/src/modules/contributors/contributors-api.ts

@@ -60,6 +60,18 @@ class ContributorApi extends BaseHTTPApi {
 		return await response.json<ContributorGetAllResponseDto>();
 	}
 
+	public async getAllWithoutPagination(): Promise<ContributorGetAllResponseDto> {
+		const response = await this.load(
+			this.getFullEndpoint(ContributorsApiPath.ROOT, {}),
+			{
+				hasAuth: true,
+				method: "GET",
+			},
+		);
+
+		return await response.json<ContributorGetAllResponseDto>();
+	}
+
 	public async merge(
 		id: number,
 		payload: ContributorMergeRequestDto,

apps/frontend/src/modules/contributors/slices/actions.ts

@@ -27,6 +27,16 @@ const loadAll = createAsyncThunk<
 	return await contributorApi.getAll(query);
 });
 
+const loadAllWithoutPagination = createAsyncThunk<
+	ContributorGetAllResponseDto,
+	undefined,
+	AsyncThunkConfig
+>(`${sliceName}/load-all-without-pagination`, async (_payload, { extra }) => {
+	const { contributorApi } = extra;
+
+	return await contributorApi.getAllWithoutPagination();
+});
+
 const merge = createAsyncThunk<
 	ContributorGetAllItemResponseDto,
 	{ id: number; payload: ContributorMergeRequestDto },
@@ -71,4 +81,4 @@ const patch = createAsyncThunk<
 	},
 );
 
-export { loadAll, merge, patch, split };
+export { loadAll, loadAllWithoutPagination, merge, patch, split };

apps/frontend/src/modules/contributors/slices/contributor.slice.ts

@@ -5,9 +5,18 @@ import { DataStatus } from "~/libs/enums/enums.js";
 import { type ValueOf } from "~/libs/types/types.js";
 
 import { type ContributorGetAllItemResponseDto } from "../libs/types/types.js";
-import { loadAll, merge, patch, split } from "./actions.js";
+import {
+	loadAll,
+	loadAllWithoutPagination,
+	merge,
+	patch,
+	split,
+} from "./actions.js";
 
 type State = {
+	allContributors: ContributorGetAllItemResponseDto[];
+	allContributorsStatus: ValueOf<typeof DataStatus>;
+	allContributorsTotalCount: number;
 	contributors: ContributorGetAllItemResponseDto[];
 	dataStatus: ValueOf<typeof DataStatus>;
 	mergeContributorsStatus: ValueOf<typeof DataStatus>;
@@ -17,6 +26,9 @@ type State = {
 };
 
 const initialState: State = {
+	allContributors: [],
+	allContributorsStatus: DataStatus.IDLE,
+	allContributorsTotalCount: 0,
 	contributors: [],
 	dataStatus: DataStatus.IDLE,
 	mergeContributorsStatus: DataStatus.IDLE,
@@ -39,6 +51,18 @@ const { actions, name, reducer } = createSlice({
 			state.contributors = [];
 			state.dataStatus = DataStatus.REJECTED;
 		});
+		builder.addCase(loadAllWithoutPagination.pending, (state) => {
+			state.allContributorsStatus = DataStatus.PENDING;
+		});
+		builder.addCase(loadAllWithoutPagination.fulfilled, (state, action) => {
+			state.allContributors = action.payload.items;
+			state.allContributorsStatus = DataStatus.FULFILLED;
+			state.allContributorsTotalCount = action.payload.totalItems;
+		});
+		builder.addCase(loadAllWithoutPagination.rejected, (state) => {
+			state.allContributors = [];
+			state.allContributorsStatus = DataStatus.REJECTED;
+		});
 
 		builder.addCase(merge.pending, (state) => {
 			state.mergeContributorsStatus = DataStatus.PENDING;
@@ -69,6 +93,7 @@ const { actions, name, reducer } = createSlice({
 					(contributor) => contributor.id !== removedContributorId,
 				);
 				state.totalCount -= ITEMS_CHANGED_COUNT;
+				state.allContributorsTotalCount -= ITEMS_CHANGED_COUNT;
 			}
 
 			state.contributors = state.contributors.map((contributor) =>

apps/frontend/src/modules/contributors/slices/contributors.ts

@@ -1,9 +1,16 @@
-import { loadAll, merge, patch, split } from "./actions.js";
+import {
+	loadAll,
+	loadAllWithoutPagination,
+	merge,
+	patch,
+	split,
+} from "./actions.js";
 import { actions } from "./contributor.slice.js";
 
 const allActions = {
 	...actions,
 	loadAll,
+	loadAllWithoutPagination,
 	merge,
 	patch,
 	split,

apps/frontend/src/pages/contributors/contributors.tsx

@@ -1,4 +1,5 @@
 import {
+	Loader,
 	Modal,
 	PageLayout,
 	Table,
@@ -39,6 +40,8 @@ const Contributors = (): JSX.Element => {
 	const dispatch = useAppDispatch();
 
 	const {
+		allContributors,
+		allContributorsStatus,
 		contributors,
 		dataStatus,
 		mergeContributorsStatus,
@@ -93,10 +96,11 @@ const Contributors = (): JSX.Element => {
 
 	const openMergeModal = useCallback(
 		(contributor: ContributorGetAllItemResponseDto | null) => {
+			void dispatch(contributorActions.loadAllWithoutPagination());
 			setContributorToMerge(contributor);
 			onMergeModalOpen();
 		},
-		[setContributorToMerge, onMergeModalOpen],
+		[dispatch, setContributorToMerge, onMergeModalOpen],
 	);
 
 	const openSplitModal = useCallback(
@@ -218,6 +222,10 @@ const Contributors = (): JSX.Element => {
 	const isLoading =
 		dataStatus === DataStatus.IDLE || dataStatus === DataStatus.PENDING;
 
+	const isLoadingAllContributors =
+		allContributorsStatus === DataStatus.IDLE ||
+		allContributorsStatus === DataStatus.PENDING;
+
 	return (
 		<PageLayout isLoading={isLoading}>
 			<h1 className={styles["title"]}>Contributors</h1>
@@ -254,11 +262,15 @@ const Contributors = (): JSX.Element => {
 					onClose={onMergeModalClose}
 					title="Merge contributors"
 				>
-					<ContributorMergeForm
-						allContributors={contributors}
-						currentContributor={contributorToMerge}
-						onSubmit={handleContributorMergeSubmit}
-					/>
+					{isLoadingAllContributors ? (
+						<Loader />
+					) : (
+						<ContributorMergeForm
+							allContributors={allContributors}
+							currentContributor={contributorToMerge}
+							onSubmit={handleContributorMergeSubmit}
+						/>
+					)}
 				</Modal>
 			)}
 			{contributorToSplit && (