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

6
src/Component/Layout.js
View file

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

2
src/Component/SearchBar.js
View file

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