add pagination & add post

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

src/Component/Body.js

@@ -1,16 +1,23 @@
 import React, { useState, useEffect } from 'react';
 import { api_url } from '../env';  
-import "/Users/dml-veerjot/Documents/development/html/blog_app/src/styleing/body.css";
+import "../styleing/body.css";
+import Pagination from './Pagination';
+
+
+import AddPostForm from './addPost';
 
 function Body() { 
   const [data, setData] = useState([]);
   const [error, setError] = useState(null); 
-
+  const [filteredData, setFilteredData] = useState([]);
+  const [currentPage,setCurrentPage] = useState(1);
+  const postsPerPage = 6;
   const fetchData = async () => {
     try {
       const res = await fetch(api_url);
-      const d = await res.json();
+      const d = await res?.json();
       setData(d);
+      setFilteredData(d)
     } catch (e) {
       setError(e);
     }
@@ -20,6 +27,23 @@ function Body() {
     fetchData();
   }, []);
 
+  const handleAddPost = (newPost) => {
+    const postWithId = { ...newPost, id: Date.now() }; 
+    const updatedData = [postWithId,...data];
+    setData(updatedData);
+    setFilteredData(updatedData); 
+  };
+  const handleDeletePost = (id) => {
+    const updatedData = data?.filter((post) => post?.id !== id);
+    setData(updatedData);
+    setFilteredData(updatedData);
+  };
+  
+  const indexOfLastPost = currentPage * postsPerPage;
+  const indexOfFirstPost = indexOfLastPost-postsPerPage;
+  const currentPosts = filteredData.slice(indexOfFirstPost,indexOfLastPost);
+  const totalPages = Math.ceil(filteredData?.length/postsPerPage);
+
   if (error) {
     return <div>Error: {error.message}</div>;  
   }
@@ -27,14 +51,21 @@ function Body() {
   return (
     <div className="App">
         <ul>
-          {data.map((post) => (
+
+          {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>
           ))}
         </ul>
+        <AddPostForm onAddPost={handleAddPost} />
+        <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={(page)=>setCurrentPage(page)}></Pagination>
     </div>
   );
 }

src/Component/DarkMode.js

@@ -0,0 +1,21 @@
+import React,{useState} from "react";
+function DarkMode(){
+    const [theme,setTheme] = useState("light");
+    const toggleTheme = ()=>{
+        setTheme(theme === "light" ? "dark" : "light");
+    };
+    return (
+        <div
+        style={{
+            backgroundColor: theme === "light" ? "#fff" : "#333",
+            color: theme === "light" ? "#000" : "#fff",
+            height: "100vh",
+            transition: "background-color 0.3s",
+          }}
+        >
+            <h1>{theme.charAt(0).toUpperCase()+theme.slice(1)}Mode</h1>
+            <button onClick={toggleTheme}> Toggle Theme</button>
+        </div>
+    );
+}
+export default DarkMode;

src/Component/Layout.js

@@ -1,22 +1,60 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Body from "./Body";
-import "/Users/dml-veerjot/Documents/development/html/blog_app/src/styleing/layout.css";
+import SearchBar from "./SearchBar";
+import "../styleing/layout.css";
+import { api_url } from "../env";
+import DarkMode from "./DarkMode";
 
 const Layout = () => {
+  const [data, setData] = useState([]); 
+  const [filteredData, setFilteredData] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+
+ 
+  const fetchData = async () => {
+    try {
+      const res = await fetch(api_url);
+      const fetchedData = await res?.json();
+      setData(fetchedData);
+      setFilteredData(fetchedData); 
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  };
+
+  
+  const handleSearch = (searchTerm) => {
+    if(!searchTerm){
+      setFilteredData(data);
+    }
+    else{
+    const filtered = data.filter(
+      (post) =>
+        post?.title.toLowerCase().includes(searchTerm?.toLowerCase()) ||
+        post?.body.toLowerCase().includes(searchTerm?.toLowerCase())
+    );
+    setFilteredData(filtered);
+    setCurrentPage(1); 
+  }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   return (
     <div className="contentPage">
+      {/* <DarkMode/> */}
       <div className="header">
-        <h2 className="heading"> Latest Blogs</h2>
+        <h2 className="heading">Latest Blogs</h2>
-        <input
+        <SearchBar onSearch={handleSearch} />
-          className="search"
-          type="text"
-          name="searchBlog"
-          placeholder="Search Blog here"
-        />
       </div>
+     
       <div className="body">
-        <Body />
+ 
+        <Body data={filteredData} currentPage={currentPage} setCurrentPage={setCurrentPage} />
       </div>
+      
     </div>
   );
 };

src/Component/Pagination.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import "../styleing/pagination.css"
+const Pagination = ({ currentPage, totalPages, onPageChange }) => {
+  const handlePageChange = (page) => {
+    onPageChange(page);
+  };
+
+  return (
+    <div className="pagination">
+      <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
+        Previous
+      </button>
+      <span>Page {currentPage} of {totalPages}</span>
+      <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
+        Next
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;

src/Component/SearchBar.js

@@ -0,0 +1,27 @@
+
+import React, { useState } from 'react';
+import '../styleing/SearchBar.css';
+
+const SearchBar = ({ onSearch }) => {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const handleInputChange = (event) => {
+    const value = event.target.value;
+    setSearchTerm(value);
+    onSearch(value);  
+  };
+
+  return (
+    <div className="searchBar">
+      <input
+        type="text"
+        className="search"
+        value={searchTerm}
+        onChange={handleInputChange}  
+        placeholder="Search for posts..."
+      />
+    </div>
+  );
+};
+
+export default SearchBar;

src/Component/addPost.js

@@ -0,0 +1,35 @@
+
+import React, { useState } from 'react';
+import "../styleing/addPost.css"
+const AddPostForm = ({ onAddPost }) => {
+  const [newPost, setNewPost] = useState({ title: '', body: '' });
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (newPost.title && newPost.body) {
+      onAddPost(newPost); 
+      setNewPost({ title: '', body: '' }); 
+    } else {
+      alert('Title and Body are required!');
+    }
+  };
+
+  return (
+    <div className="addPostForm">
+      <input
+        type="text"
+        placeholder="Post Title"
+        value={newPost.title}
+        onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
+      />
+      <textarea
+        placeholder="Post Content"
+        value={newPost.body}
+        onChange={(e) => setNewPost({ ...newPost, body: e.target.value })}
+      />
+      <button onClick={handleSubmit}>Add Post</button>
+    </div>
+  );
+};
+
+export default AddPostForm;

src/styleing/SearchBar.css

@@ -0,0 +1,31 @@
+
+.searchBar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 20px 0;
+  }
+  
+  .search {
+    padding: 10px;
+    font-size: 1.2em;
+    width: 300px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #f9f9f9;
+  }
+  
+  .search:focus {
+    border-color: #4CAF50;
+    outline: none;
+  }
+  .search{
+    display: flex;
+    margin-left: 85cap;
+    padding: 10px;
+    border: 1px solid black;
+    border-radius: 10px ;
+    
+}
+
+  

src/styleing/addPost.css

@@ -0,0 +1,36 @@
+
+.addPostForm {
+    display: flex;
+    flex-direction: column;
+    margin: 20px 0;
+  }
+  
+  .addPostForm input,
+  .addPostForm textarea {
+    padding: 12px;
+    margin-bottom: 15px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 1.1em;
+    width: 100%;
+  }
+  
+  .addPostForm button {
+    padding: 12px;
+    background-color: #4CAF50;
+    color: white;
+    font-size: 1.1em;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .addPostForm button:hover {
+    background-color: #45a049;
+  }
+  
+  .addPostForm input:focus,
+  .addPostForm textarea:focus {
+    border-color: #4CAF50;
+  }
+  

src/styleing/layout.css

@@ -11,11 +11,3 @@
     font-size: xx-large;
     color: black;
 }
-.search{
-    display: flex;
-    margin-left: 125cap;
-    padding: 10px;
-    border: 1px solid black;
-    border-radius: 10px ;
-    
-}

src/styleing/pagination.css

@@ -0,0 +1,30 @@
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+  }
+  
+  .pagination button {
+    padding: 8px 12px;
+    margin: 0 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #f9f9f9;
+    cursor: pointer;
+  }
+  
+  .pagination button:hover {
+    background-color: #ddd;
+  }
+  
+  .pagination .active {
+    background-color: #4CAF50;
+    color: white;
+  }
+  
+  .pagination .disabled {
+    background-color: #f2f2f2;
+    cursor: not-allowed;
+  }
+