added requests in apislice

src/features/api/apiSlice.tsx

@@ -3,20 +3,48 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 interface Organizations {
     id: number;
     bin: string;
-    code: string;
-    name: string;
+    organization_code: string;
+    organization_name: string;
     status: string;
-    host: string;
+    login: string;
 }
 
 export const apiSlice = createApi({
     reducerPath: 'api',
     baseQuery: fetchBaseQuery({ baseUrl: "https://669f8d88b132e2c136fe5106.mockapi.io/api/v1" }),
     endpoints: (builder) => ({
-        getOrganization: builder.query<Organizations[], void>({
+        getOrganizations: builder.query<Organizations[], void>({
             query: () => '/organizations'
+        }),
+        getOrganization: builder.query({
+            query: orgId => `/organizations/${orgId}`
+        }),
+        addNewOrganization: builder.query({
+            query: initialOrg => ({
+                url: '/organizations',
+                method: 'POST',
+                body: initialOrg
+            })
+        }),
+        editOrganization: builder.query({
+            query: org => ({
+                url: `/organizations/${org.id}`,
+                method: 'PUT',
+                body: org
+            })
+        }),
+        deleteOrganization: builder.query({
+            query: orgId => ({
+                url: `organizations/${orgId}`,
+                method: "DELETE",
+            })
         })
     })
 })
 
-export const { useGetOrganizationQuery } = apiSlice;
\ No newline at end of file
+export const { 
+    useGetOrganizationsQuery, 
+    useGetOrganizationQuery, 
+    useAddNewOrganizationQuery, 
+    useEditOrganizationQuery, 
+    useDeleteOrganizationQuery } = apiSlice;
\ No newline at end of file

src/pages/HomePage/HomePage.tsx

 import React from 'react';
 import { useNavigate } from 'react-router';
 import { MaterialSymbol } from 'react-material-symbols';
-import { Button, Pagination, Spin, Table } from 'antd';
+import { Button, Pagination, Space, Spin, Table } from 'antd';
 import type { TableProps } from 'antd';
 import './Homepage.css';
-import { useGetOrganizationQuery } from '../../features/api/apiSlice';
+import { useGetOrganizationsQuery } from '../../features/api/apiSlice';
 
 interface DataType {
     id: number;
     bin: string;
-    code: string;
-    name: string;
+    organization_code: string;
+    organization_name: string;
     status: string;
-    host: string;
+    login: string;
 }
 
 const columns: TableProps<DataType>['columns'] = [
@@ -28,17 +28,17 @@ const columns: TableProps<DataType>['columns'] = [
     },
     {
         title: "Код организации",
-        dataIndex: "code",
+        dataIndex: "organization_code",
         key: "code"
     },
     {
         title: "Наименование организации",
-        dataIndex: "name",
+        dataIndex: "organization_name",
         key: "name"
     },
     {
         title: "Адрес системы/хост",
-        dataIndex: "host",
+        dataIndex: "",
         key: "host"
     },
     {
@@ -54,11 +54,14 @@ const columns: TableProps<DataType>['columns'] = [
         }
     },
     {
-        title: "act",
+        title: "Действия",
         width: 60,
         render: (value ) => {
             return (
-                <Button onClick={() => console.log(value)} icon={<MaterialSymbol>delete</MaterialSymbol>}  />
+                <Space>
+                    <Button onClick={() => console.log(value)} icon={<MaterialSymbol icon='visibility' size={22} />}  />
+                    <Button onClick={() => console.log(value)} icon={<MaterialSymbol icon='delete' size={22} />}  />
+                </Space>
             )
         }
     }
@@ -81,7 +84,7 @@ const HomePage: React.FC = () => {
         isSuccess,
         isError,
         error
-    } = useGetOrganizationQuery();
+    } = useGetOrganizationsQuery();
 
     let table;
 
@@ -89,7 +92,7 @@ const HomePage: React.FC = () => {
         table = <Spin />
     } else if (isSuccess) {
         const dataSource = orgs.map((org) => ({ ...org, key: org.id }));
-        table = <Table dataSource={dataSource} columns={columns} />
+        table = <Table dataSource={dataSource} columns={columns} pagination={false} />
     } else if (isError) {
         table = <div>{error.toString()}</div>
     }
@@ -105,9 +108,9 @@ const HomePage: React.FC = () => {
                 <div className="data">
                     {table}
                 </div>
-                {/* <div className='pagination-container'>
+                <div className='pagination-container'>
                     <Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} />
-                </div> */}
+                </div>
             </section>
         </div>
     );

src/pages/HomePage/Homepage.css

@@ -45,6 +45,7 @@
 .data {
     flex: 1;
     overflow-y: auto;
+    margin-bottom: 75px;
 }
 
 .data-table {