Skip to content

E
ESYTD
Commit 976ce41c authored by Merekeyev Dias's avatar Merekeyev Dias
Browse files
Options

added rtx query with api

parent 3c9e76f3
Hide whitespace changes
Inline Side-by-side
Showing with 210 additions and 85 deletions
package-lock.json
View file @ 976ce41c
......@@ -9,17 +9,18 @@
"version": "0.0.0",
"dependencies": {
"@ant-design/icons": "^5.4.0",
"@reduxjs/toolkit": "^2.2.6",
"@types/react-router-dom": "^5.3.3",
"antd": "^5.19.3",
"dayjs": "^1.11.12",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-material-symbols": "^4.4.0",
"react-redux": "^9.1.2",
"react-router": "^6.25.1",
"react-router-dom": "^6.25.1"
},
"devDependencies": {
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.15.0",
"@typescript-eslint/parser": "^7.15.0",
......@@ -1229,6 +1230,29 @@
"react-dom": ">=16.9.0"
}
},
"node_modules/@reduxjs/toolkit": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.6.tgz",
"integrity": "sha512-kH0r495c5z1t0g796eDQAkYbEQ3a1OLYN9o8jQQVZyKyw367pfRGS+qZLkHYvFHiUUdafpoSlQ2QYObIApjPWA==",
"dependencies": {
"immer": "^10.0.3",
"redux": "^5.0.1",
"redux-thunk": "^3.1.0",
"reselect": "^5.1.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17.0.0 || ^18",
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"react-redux": {
"optional": true
}
}
},
"node_modules/@remix-run/router": {
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.18.0.tgz",
......@@ -1539,6 +1563,11 @@
"@types/react-router": "*"
}
},
"node_modules/@types/use-sync-external-store": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "7.16.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.16.1.tgz",
......@@ -2704,6 +2733,15 @@
"node": ">= 4"
}
},
"node_modules/immer": {
"version": "10.1.1",
"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
"integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
}
},
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
......@@ -3794,6 +3832,28 @@
"react-dom": "^18.2.0"
}
},
"node_modules/react-redux": {
"version": "9.1.2",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
"integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
"dependencies": {
"@types/use-sync-external-store": "^0.0.3",
"use-sync-external-store": "^1.0.0"
},
"peerDependencies": {
"@types/react": "^18.2.25",
"react": "^18.0",
"redux": "^5.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"redux": {
"optional": true
}
}
},
"node_modules/react-refresh": {
"version": "0.14.2",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
......@@ -3833,11 +3893,29 @@
"react-dom": ">=16.8"
}
},
"node_modules/redux": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
},
"node_modules/redux-thunk": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
"peerDependencies": {
"redux": "^5.0.0"
}
},
"node_modules/regenerator-runtime": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
},
"node_modules/reselect": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
},
"node_modules/resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
......@@ -4177,6 +4255,14 @@
"punycode": "^2.1.0"
}
},
"node_modules/use-sync-external-store": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
"integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/vite": {
"version": "5.3.4",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.3.4.tgz",
......
src/features/api/apiSlice.tsx 0 → 100644
View file @ 976ce41c
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
interface Organizations {
id: number;
bin: string;
code: string;
name: string;
status: string;
host: string;
}
export const apiSlice = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseUrl: "https://669f8d88b132e2c136fe5106.mockapi.io/api/v1" }),
endpoints: (builder) => ({
getOrganization: builder.query<Organizations[], void>({
query: () => '/organizations'
})
})
})
export const { useGetOrganizationQuery } = apiSlice;
\ No newline at end of file
src/main.tsx
View file @ 976ce41c
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { Provider } from 'react-redux';
import './index.css'
import store from './store.tsx';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
)
src/pages/AuthPage/AuthPage.module.css → src/pages/AuthPage/AuthPage.css
View file @ 976ce41c
......@@ -4,7 +4,9 @@
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 24px;
background-color: rgba(204, 204, 204, 1);
border-radius: 8px;
}
......
src/pages/AuthPage/AuthPage.tsx
View file @ 976ce41c
import { Input, Typography, Button } from 'antd';
import React from 'react';
import styles from './AuthPage.module.css';
import './AuthPage.css';
const AuthPage: React.FC = () => {
return (
<div className={styles.wrapper}>
<div className={styles.form}>
<div className="wrapper">
<div className="form">
<Typography.Title level={5}>Токен</Typography.Title>
<Input
placeholder='введите токен'
className={styles.input_controller}
placeholder="введите токен"
className="input_controller"
/>
<Button className={styles.form_btn} type="primary">Войти</Button>
<Button className="form_btn" type="primary">Войти</Button>
</div>
</div>
);
......
src/pages/HomePage/HomePage.tsx
View file @ 976ce41c
import React from 'react';
import { useNavigate } from 'react-router';
import { MaterialSymbol } from 'react-material-symbols';
import { Button, Pagination } from 'antd';
import { Button, Pagination, Spin, Table } from 'antd';
import type { TableProps } from 'antd';
import './Homepage.css';
import { useGetOrganizationQuery } from '../../features/api/apiSlice';
interface DataType {
id: number;
bin: string;
code: string;
name: string;
status: string;
host: string;
}
const columns: TableProps<DataType>['columns'] = [
{
title: "ID",
dataIndex: "id",
key: "id"
},
{
title: "БИН",
dataIndex: "bin",
key: "bin"
},
{
title: "Код организации",
dataIndex: "code",
key: "code"
},
{
title: "Наименование организации",
dataIndex: "name",
key: "name"
},
{
title: "Адрес системы/хост",
dataIndex: "host",
key: "host"
},
{
title: "Статус",
dataIndex: "status",
key: "status",
render: (_, record) => {
return (
<p>
{record.status == '0' ? 'удален' : record.status == '1' ? 'заблокирован' : 'активен'}
</p>
)
}
}
]
const HomePage: React.FC = () => {
const navigate = useNavigate();
......@@ -15,6 +66,25 @@ const HomePage: React.FC = () => {
console.log("Current page:", page);
};
const {
data: orgs = [],
isLoading,
isSuccess,
isError,
error
} = useGetOrganizationQuery();
let table;
if (isLoading) {
table = <Spin />
} else if (isSuccess) {
const dataSource = orgs.map((org) => ({ ...org, key: org.id }));
table = <Table dataSource={dataSource} columns={columns} />
} else if (isError) {
table = <div>{error.toString()}</div>
}
return (
<div className="container">
<section className='section'>
......@@ -24,76 +94,7 @@ const HomePage: React.FC = () => {
</Button>
</div>
<div className="data">
<table className="data-table">
<thead>
<tr>
<th>ID</th>
<th>БИН</th>
<th>Код организации</th>
<th>Наименование организации</th>
<th>Адрес системы/хост</th>
<th>Статус</th>
<th>Действие</th>
<th>Действие</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>050940002848</td>
<td>organization_code_1</td>
<td>ТОО “Рога и Копыта”</td>
<td>esutd-dev.arta.kz</td>
<td>активен</td>
<td>
<button className="view-btn" onClick={() => navigate("/edit")}>
<MaterialSymbol icon='visibility' size={20} color='#0E2B52' />
</button>
</td>
<td>
<button className="delete-btn">
<MaterialSymbol icon='delete' size={22} color='#0E2B52' />
</button>
</td>
</tr>
<tr>
<td>2</td>
<td>050940002848</td>
<td>organization_code_2</td>
<td>ТОО “Рога и Копыта”</td>
<td>techreg.gov.kz</td>
<td>заблокирован</td>
<td>
<button className="view-btn" onClick={() => navigate("/edit")}>
<MaterialSymbol icon='visibility' size={20} color='#0E2B52' />
</button>
</td>
<td>
<button className="delete-btn">
<MaterialSymbol icon='delete' size={22} color='#0E2B52' />
</button>
</td>
</tr>
<tr>
<td>3</td>
<td>050940002848</td>
<td>organization_code_3</td>
<td>ТОО “Рога и Копыта”</td>
<td>kaspi.kz</td>
<td>удален</td>
<td>
<button className="view-btn" onClick={() => navigate("/edit")}>
<MaterialSymbol icon='visibility' size={20} color='#0E2B52' />
</button>
</td>
<td>
<button className="delete-btn">
<MaterialSymbol icon='delete' size={22} color='#0E2B52' />
</button>
</td>
</tr>
</tbody>
</table>
{table}
</div>
<div className='pagination-container'>
<Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} />
......@@ -101,6 +102,6 @@ const HomePage: React.FC = () => {
</section>
</div>
);
};
}
export default HomePage;
src/pages/RequestPage/RequestPage.css
View file @ 976ce41c
.container {
/* min-width: 1440px; */
}
.filter {
margin: 1rem 1rem .5rem;
......
src/store.tsx 0 → 100644
View file @ 976ce41c
import { configureStore, Store } from '@reduxjs/toolkit';
import { apiSlice } from './features/api/apiSlice';
const store: Store = configureStore({
reducer: {
[apiSlice.reducerPath]: apiSlice.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(apiSlice.middleware),
})
export default store;
\ No newline at end of file
tsconfig.app.json
View file @ 976ce41c
{
"compilerOptions": {
"baseUrl": ".", // This must be specified if "paths" is.
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
......
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