import React, { useState } from "react";
import { Pagination, Form, Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
function App() {
const maxLimit = 10;
const [curr, setCurr] = useState(1);
const [goto, setgoTo] = useState(1);
const [valid, setValid] = useState(true);
const pageChangeFunction = (p) => {
if (p >= 1 && p <= maxLimit) {
setCurr(p);
}
};
const showPageItemsFunction = () => {
const data = [];
const numPage = 5;
let leftSide = curr - numPage / 2 > 1;
let rightSide = curr + numPage / 2 < maxLimit;
if (leftSide && rightSide) {
leftSide = curr - numPage / 2 > 2;
rightSide = curr + numPage / 2 < maxLimit - 1;
}
data.push(
<Pagination.First
key="first"
onClick={() => pageChangeFunction(1)}
/>
);
data.push(
<Pagination.Prev
key="prev"
onClick={() => pageChangeFunction(curr - 1)}
/>
);
if (leftSide) {
data.push(
<Pagination.Ellipsis
key="leftEllipsis"
className="ellipsis"
onClick={() => pageChangeFunction(curr - numPage)}
/>
);
}
const str = Math.max(1, Math.round(curr - numPage / 2));
const end = Math.min(maxLimit, Math.round(curr + numPage / 2));
for (let i = str; i <= end; i++) {
data.push(
<Pagination.Item
key={i}
active={i === curr}
onClick={() => pageChangeFunction(i)}
>
{i}
</Pagination.Item>
);
}
if (rightSide) {
data.push(
<Pagination.Ellipsis
key="rightEllipsis"
className="ellipsis"
onClick={() => pageChangeFunction(curr + numPage)}
/>
);
}
data.push(
<Pagination.Next
key="next"
onClick={() => pageChangeFunction(curr + 1)}
/>
);
data.push(
<Pagination.Last
key="last"
onClick={() => pageChangeFunction(maxLimit)}
/>
);
return data;
};
const gotoFunction = () => {
if (goto >= 1 && goto <= maxLimit) {
setCurr(goto);
setValid(true);
} else {
setValid(false);
}
};
return (
<div className="app-container">
<h1 className="header">GeeksforGeeks</h1>
<Pagination className="pagination">
{showPageItemsFunction()}
</Pagination>
<div className="jump-to-page">
<Form.Control
type="number"
min="1"
max={maxLimit}
value={goto}
onChange={(e) => {
setgoTo(parseInt(e.target.value));
setValid(true);
}}
isInvalid={!valid}
/>
<Button variant="primary" onClick={gotoFunction}>
Go
</Button>
</div>
<p className="page-info">
GFG Page: {curr} of {maxLimit}
</p>
</div>
);
}
export default App;