Commit 15c2b0eb authored by Merekeyev Dias's avatar Merekeyev Dias

fixed pagination problem after adding

parent ccd4dc57
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
currentPage: 1,
totalOrgNumber: 0,
ORG_NUMBER_PER_PAGE: 15
}
const mainPaginationSlice = createSlice({
name: 'pagination',
initialState,
reducers: {
setCurrentPage: (state, action) => {
state.currentPage = action.payload;
},
setTotalOrgNumber: (state, action) => {
state.totalOrgNumber = action.payload;
}
}
})
export const { setCurrentPage, setTotalOrgNumber } = mainPaginationSlice.actions;
export default mainPaginationSlice.reducer;
\ No newline at end of file
...@@ -2,6 +2,8 @@ import React from 'react'; ...@@ -2,6 +2,8 @@ import React from 'react';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
import { Form, Input, Button, Select, message } from 'antd'; import { Form, Input, Button, Select, message } from 'antd';
import { useAddNewOrganizationMutation } from '../../features/api/apiSlice'; import { useAddNewOrganizationMutation } from '../../features/api/apiSlice';
import { setTotalOrgNumber, setCurrentPage } from '../../features/pagination/mainPagination';
import { useSelector, useDispatch } from 'react-redux';
import './style.css'; import './style.css';
interface AddValues{ interface AddValues{
...@@ -19,6 +21,9 @@ const { Option } = Select; ...@@ -19,6 +21,9 @@ const { Option } = Select;
const AddPage: React.FC = () => { const AddPage: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch();
const totalOrgNumber = useSelector((state: any) => state.mainPagination.totalOrgNumber);
const ORG_NUMBER_PER_PAGE = useSelector((state: any) => state.mainPagination.ORG_NUMBER_PER_PAGE);
const [addNewOrganization] = useAddNewOrganizationMutation(); const [addNewOrganization] = useAddNewOrganizationMutation();
const onFinish = async (values: AddValues) => { const onFinish = async (values: AddValues) => {
...@@ -32,7 +37,9 @@ const AddPage: React.FC = () => { ...@@ -32,7 +37,9 @@ const AddPage: React.FC = () => {
try { try {
await addNewOrganization(newValues).unwrap(); // get data from promise await addNewOrganization(newValues).unwrap(); // get data from promise
message.success('Организация успешно добавлена!'); message.success('Организация успешно добавлена!');
// console.log('Add values: ', values); dispatch(setTotalOrgNumber(totalOrgNumber + 1));
const newTotalPages = Math.ceil((totalOrgNumber + 1) / ORG_NUMBER_PER_PAGE);
dispatch(setCurrentPage(newTotalPages));
navigate('/'); navigate('/');
} catch (err) { } catch (err) {
message.error('Произошла ошибка при добавлении организации!'); message.error('Произошла ошибка при добавлении организации!');
......
import React, { useState, useEffect } from 'react'; import React, { useEffect } from 'react';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
import { useSelector, useDispatch } from 'react-redux';
import { MaterialSymbol } from 'react-material-symbols'; import { MaterialSymbol } from 'react-material-symbols';
import { Button, Pagination, Spin, Table } from 'antd'; import { Button, Pagination, Spin, Table } from 'antd';
import './Homepage.css';
import { useGetOrganizationsQuery, } from '../../features/api/apiSlice'; import { useGetOrganizationsQuery, } from '../../features/api/apiSlice';
import { setCurrentPage, setTotalOrgNumber } from '../../features/pagination/mainPagination';
import { DataType, columns } from './Columns'; import { DataType, columns } from './Columns';
import './Homepage.css';
const HomePage: React.FC = () => { const HomePage: React.FC = () => {
const [totalOrgNumber, setTotalOrgNumber] = useState<number>(0);
const [currentPage, setCurrentPage] = useState<number>(1);
const ORG_NUMBER_PER_PAGE: number = 15;
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch();
const totalOrgNumber = useSelector((state: any) => state.mainPagination.totalOrgNumber);
const currentPage = useSelector((state: any) => state.mainPagination.currentPage);
const ORG_NUMBER_PER_PAGE = useSelector((state: any) => state.mainPagination.ORG_NUMBER_PER_PAGE);
const handleAddClick = () => { const handleAddClick = () => {
navigate("/add"); navigate("/add");
}; };
const handlePaginationChange = (page: number) => { const handlePaginationChange = (page: number) => {
setCurrentPage(page); dispatch(setCurrentPage(page));
}; };
const paginatedData = (dataSource: DataType[]) => { const paginatedData = (dataSource: DataType[]) => {
...@@ -47,7 +50,7 @@ const HomePage: React.FC = () => { ...@@ -47,7 +50,7 @@ const HomePage: React.FC = () => {
useEffect(() => { useEffect(() => {
if (isSuccess) { if (isSuccess) {
setTotalOrgNumber(orgs.length); dispatch(setTotalOrgNumber(orgs.length));
} }
}, [isSuccess, orgs]); }, [isSuccess, orgs]);
......
import { configureStore, Store } from '@reduxjs/toolkit'; import { configureStore, Store } from '@reduxjs/toolkit';
import { apiSlice } from '../features/api/apiSlice'; import { apiSlice } from '../features/api/apiSlice';
import mainPaginationReducer from '../features/pagination/mainPagination';
const store: Store = configureStore({ const store: Store = configureStore({
reducer: { reducer: {
mainPagination: mainPaginationReducer,
[apiSlice.reducerPath]: apiSlice.reducer, [apiSlice.reducerPath]: apiSlice.reducer,
}, },
middleware: (getDefaultMiddleware) => middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(apiSlice.middleware), getDefaultMiddleware().concat(apiSlice.middleware),
}) })
export default store; export default store;
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment