request to dictionary/update

src/features/api/manualApiSlice.ts

@@ -6,7 +6,7 @@ export const manualApiSlice = apiSlice.injectEndpoints({
             query: (codes) => ({
                 url: 'dictionary/update',
                 method: 'POST',
-                body: codes,
+                body: codes
             }), invalidatesTags: ['manuals']
         })
     })

src/features/sync_btn/syncBtn.ts

@@ -14,17 +14,20 @@ const syncBtnSlice = createSlice({
     name: 'syncBtn',
     initialState,
     reducers: {
-        addCheckedCodes: (state, action) => {
+        addCheckedCode: (state, action) => {
             state.checkedCodes.push(action.payload);
         },
-        removeCheckedCodes: (state, action) => {
+        removeCheckedCode: (state, action) => {
             state.checkedCodes = state.checkedCodes.filter(code => code !== action.payload);
         },
+        clearCheckedCodes: (state) => {
+            state.checkedCodes = [];
+        },
         setDisabled: (state, action) => {
             state.disabled = action.payload;
         }
     }
 });
 
-export const { addCheckedCodes, removeCheckedCodes, setDisabled } = syncBtnSlice.actions;
+export const { addCheckedCode, removeCheckedCode, clearCheckedCodes, setDisabled } = syncBtnSlice.actions;
 export default syncBtnSlice.reducer;
\ No newline at end of file

src/pages/HomePage/Columns.tsx

@@ -5,10 +5,9 @@ import { Button, Space, Tag, Modal, Checkbox, message } from 'antd';
 import type { TableProps } from 'antd';
 
 import { useDeleteOrganizationMutation } from '../../features/api/organizationApiSlice';
-import { addCheckedCodes, removeCheckedCodes } from '../../features/sync_btn/syncBtn';
-import { setCurrentPage, setTotalOrgNumber } from '../../features/pagination/mainPagination';
+import { addCheckedCode, removeCheckedCode } from '../../features/sync_btn/syncBtn';
+import { setCurrentPage } from '../../features/pagination/mainPagination';
 import { getStatusText, getStatusColor } from './utils';
-import { current } from '@reduxjs/toolkit';
 
 export interface DataType {
     id: number;
@@ -68,15 +67,20 @@ export const columns: TableProps<DataType>['columns'] = [
 
 export const CheckboxColumn: React.FC<{ data: DataType }> = ({ data }) => {
     const dispatch = useDispatch();
+    const checkedCodes = useSelector((state: any) => state.syncBtn.checkedCodes);
     const [checked, setChecked] = useState(false);
 
-    const handleCheck = (e: { target: { checked: any; }; }) => {
+    useEffect(() => {
+        setChecked(checkedCodes.includes(data.code));
+    }, [checkedCodes, data.code]);
+
+    const handleCheck = (e: { target: { checked: any } }) => {
         const isChecked = e.target.checked;
         setChecked(isChecked);
         if (isChecked) {
-            dispatch(addCheckedCodes(data.code));
+            dispatch(addCheckedCode(data.code));
         } else {
-            dispatch(removeCheckedCodes(data.code));
+            dispatch(removeCheckedCode(data.code));
         }
     };
 

src/pages/HomePage/HomePage.tsx

@@ -4,9 +4,10 @@ import { useSelector, useDispatch } from 'react-redux';
 import { Button, message, Pagination, Space, Spin, Table } from 'antd';
 import { TableRef } from 'antd/es/table';
 
-import { useDeleteOrganizationMutation, useGetOrganizationsQuery } from '../../features/api/organizationApiSlice';
+import { useGetOrganizationsQuery } from '../../features/api/organizationApiSlice';
+import { useUpdateDictionaryMutation } from '../../features/api/manualApiSlice';
 import { setCurrentPage, setTotalOrgNumber } from '../../features/pagination/mainPagination';
-import { setDisabled } from '../../features/sync_btn/syncBtn';
+import { setDisabled, clearCheckedCodes } from '../../features/sync_btn/syncBtn';
 import { DataType, columns } from './Columns';
 import './Homepage.css';
 
@@ -19,7 +20,7 @@ const HomePage: React.FC = () => {
     const ORG_NUMBER_PER_PAGE = useSelector((state: any) => state.mainPagination.ORG_NUMBER_PER_PAGE);
     const syncBtnState = useSelector((state: any) => state.syncBtn.disabled);
     const checkedCodes = useSelector((state: any) => state.syncBtn.checkedCodes);
-    const [updateDictionary] = useDeleteOrganizationMutation();
+    const [updateDictionary] = useUpdateDictionaryMutation();
 
     const handleAddClick = () => {
         navigate("/add");
@@ -27,8 +28,8 @@ const HomePage: React.FC = () => {
 
     const handleSyncClick = async () => {
         try {
-            console.log(checkedCodes);
-            await updateDictionary(JSON.stringify(checkedCodes)).unwrap();
+            await updateDictionary(checkedCodes);
+            dispatch(clearCheckedCodes());
             message.success('Организации успешны синхронизированы!')
         } catch (err) {
             message.error('Произошла ошибка при синхронизации организации!')