veerjot_dml/BlogPost
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

update pagination

Browse source
This commit is contained in:
veerjot_dm 2025-01-07 12:17:41 +05:30
parent 0147c13674
commit f1038b42c7
3 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/Component/Body.js
View file

@ -15,25 +15,25 @@ function Body({ filteredData, setFilteredData, currentPage, setCurrentPage }) {
const handleDeletePost = (id) => {
const updatedData = filteredData.filter((post) => post.id !== id);
const updatedData = filteredData?.filter((post) => post?.id !== id);
setFilteredData(updatedData);
};
const indexOfLastPost = currentPage * postsPerPage;
const indexOfFirstPost = indexOfLastPost - postsPerPage;
const currentPosts = filteredData.slice(indexOfFirstPost, indexOfLastPost);
const totalPages = Math.ceil(filteredData.length / postsPerPage);
const currentPosts = filteredData?.slice(indexOfFirstPost, indexOfLastPost);
const totalPages = Math.ceil(filteredData?.length / postsPerPage);
return (
<div className="App">
<ul>
{filteredData.length > 0 ? (
filteredData.map((post) => (
<li key={post.id}>
<h1>Title: {post.title}</h1>
<p><b>Content:</b> {post.body}</p>
currentPosts.map((post) => (
<li key={post?.id}>
<h1>Title: {post?.title}</h1>
<p><b>Content:</b> {post?.body}</p>
<button onClick={() => handleDeletePost(post.id)}>Delete</button>
</li>
))

6
src/Component/Layout.js
View file

@ -12,7 +12,7 @@ const Layout = () => {
const fetchData = async () => {
try {
const res = await fetch(api_url);
const fetchedData = await res.json();
const fetchedData = await res?.json();
setData(fetchedData);
setFilteredData(fetchedData);
} catch (error) {
@ -27,8 +27,8 @@ const Layout = () => {
} else {
const filtered = data.filter(
(post) =>
post?.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
post?.body.toLowerCase().includes(searchTerm.toLowerCase())
post?.title.toLowerCase().includes(searchTerm?.toLowerCase()) ||
post?.body.toLowerCase().includes(searchTerm?.toLowerCase())
);
if(filtered.length>0){
setFilteredData([filtered[0]]);

2
src/Component/SearchBar.js
View file

@ -5,7 +5,7 @@ const SearchBar = ({ onSearch }) => {
const [searchTerm, setSearchTerm] = useState('');
const handleInputChange = (event) => {
const value = event.target.value;
const value = event?.target?.value;
setSearchTerm(value);
onSearch(value);
};