Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
E
ESYTD
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Дияр Амангельды
ESYTD
Commits
b2e00aca
Commit
b2e00aca
authored
Jul 24, 2024
by
Merekeyev Dias
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
added pagination
parent
68ea51f6
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
20 additions
and
5 deletions
+20
-5
src/pages/HomePage/HomePage.tsx
src/pages/HomePage/HomePage.tsx
+20
-5
No files found.
src/pages/HomePage/HomePage.tsx
View file @
b2e00aca
import
React
,
{
useState
}
from
'
react
'
;
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
useNavigate
}
from
'
react-router
'
;
import
{
useNavigate
}
from
'
react-router
'
;
import
{
MaterialSymbol
}
from
'
react-material-symbols
'
;
import
{
MaterialSymbol
}
from
'
react-material-symbols
'
;
import
{
Button
,
Pagination
,
Space
,
Spin
,
Table
,
Tag
,
Modal
}
from
'
antd
'
;
import
{
Button
,
Pagination
,
Space
,
Spin
,
Table
,
Tag
,
Modal
}
from
'
antd
'
;
...
@@ -110,16 +110,25 @@ const ActionColumn: React.FC<{ data: any }> = ({ data }) => {
...
@@ -110,16 +110,25 @@ const ActionColumn: React.FC<{ data: any }> = ({ data }) => {
}
}
const
HomePage
:
React
.
FC
=
()
=>
{
const
HomePage
:
React
.
FC
=
()
=>
{
const
[
totalOrgNumber
,
setTotalOrgNumber
]
=
useState
(
0
);
const
[
currentPage
,
setCurrentPage
]
=
useState
(
1
);
const
ORG_NUMBER_PER_PAGE
=
15
;
const
navigate
=
useNavigate
();
const
navigate
=
useNavigate
();
const
handleAddClick
=
()
=>
{
const
handleAddClick
=
()
=>
{
navigate
(
"
/add
"
);
navigate
(
"
/add
"
);
};
};
const
handlePaginationChange
=
(
page
:
number
|
string
|
null
)
=>
{
const
handlePaginationChange
=
(
page
:
React
.
SetStateAction
<
number
>
)
=>
{
console
.
log
(
"
Current page:
"
,
page
);
setCurrentPage
(
page
);
};
};
const
paginatedData
=
(
dataSource
:
DataType
[])
=>
{
const
startIndex
=
(
currentPage
-
1
)
*
ORG_NUMBER_PER_PAGE
;
const
endIndex
=
Math
.
min
(
startIndex
+
ORG_NUMBER_PER_PAGE
,
totalOrgNumber
);
return
dataSource
.
slice
(
startIndex
,
endIndex
);
}
const
{
const
{
data
:
orgs
=
[],
data
:
orgs
=
[],
isLoading
,
isLoading
,
...
@@ -134,11 +143,17 @@ const HomePage: React.FC = () => {
...
@@ -134,11 +143,17 @@ const HomePage: React.FC = () => {
table
=
<
Spin
/>
table
=
<
Spin
/>
}
else
if
(
isSuccess
)
{
}
else
if
(
isSuccess
)
{
const
dataSource
=
orgs
.
map
((
org
)
=>
({
...
org
,
key
:
org
.
id
}));
const
dataSource
=
orgs
.
map
((
org
)
=>
({
...
org
,
key
:
org
.
id
}));
table
=
<
Table
dataSource=
{
dataSource
}
columns=
{
columns
}
pagination=
{
false
}
/>
table
=
<
Table
dataSource=
{
paginatedData
(
dataSource
)
}
columns=
{
columns
}
pagination=
{
false
}
/>
}
else
if
(
isError
)
{
}
else
if
(
isError
)
{
table
=
<
div
>
{
error
.
toString
()
}
</
div
>
table
=
<
div
>
{
error
.
toString
()
}
</
div
>
}
}
useEffect
(()
=>
{
if
(
isSuccess
)
{
setTotalOrgNumber
(
orgs
.
length
);
}
},
[
isSuccess
,
orgs
]);
return
(
return
(
<
div
className=
"container"
>
<
div
className=
"container"
>
<
section
className=
'section'
>
<
section
className=
'section'
>
...
@@ -151,7 +166,7 @@ const HomePage: React.FC = () => {
...
@@ -151,7 +166,7 @@ const HomePage: React.FC = () => {
{
table
}
{
table
}
</
div
>
</
div
>
<
div
className=
'pagination-container'
>
<
div
className=
'pagination-container'
>
<
Pagination
current=
{
1
}
defaultCurrent=
{
1
}
pageSize=
{
1
}
total=
{
10
}
onChange=
{
handlePaginationChange
}
/>
<
Pagination
current=
{
currentPage
}
defaultCurrent=
{
1
}
pageSize=
{
ORG_NUMBER_PER_PAGE
}
total=
{
totalOrgNumber
}
onChange=
{
handlePaginationChange
}
/>
</
div
>
</
div
>
</
section
>
</
section
>
</
div
>
</
div
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment