update feedback changes

.gitignore

@@ -17,7 +17,10 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+App.css

package-lock.json

@@ -14,6 +14,9 @@
         "react-router-dom": "^7.1.1",
         "react-scripts": "5.0.1",
         "web-vitals": "^4.2.4"
+      },
+      "devDependencies": {
+        "prettier": "3.4.2"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -13314,6 +13317,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

package.json

@@ -33,5 +33,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "3.4.2"
   }
 }

src/App.css

@@ -1 +0,0 @@
-

src/Component/Body.js

@@ -1,25 +1,22 @@
-import React from 'react';
+import React from "react";
 import "../styleing/body.css";
-import Pagination from './Pagination';
-import AddPostForm from './addPost';
+import Pagination from "./Pagination";
+import AddPostForm from "./addPost";
 
 function Body({ filteredData, setFilteredData, currentPage, setCurrentPage }) {
   const postsPerPage = 6;
 
-
   const handleAddPost = (newPost) => {
     const postWithId = { ...newPost, id: Date.now() };
     const updatedData = [postWithId, ...filteredData];
     setFilteredData(updatedData);
   };
 
-
   const handleDeletePost = (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);
@@ -28,13 +25,14 @@ function Body({ filteredData, setFilteredData, currentPage, setCurrentPage }) {
   return (
     <div className="App">
       <ul>
-    
-      {filteredData.length > 0 ? (
-          currentPosts.map((post) => (
+        {filteredData?.length > 0 ? (
+          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>
+              <p>
+                <b>Content:</b> {post?.body}
+              </p>
+              <button onClick={() => handleDeletePost(post?.id)} >Delete</button>
             </li>
           ))
         ) : (

src/Component/DarkMode.js

@@ -1,7 +1,7 @@
-import React,{useState} from "react";
-function DarkMode(){
-    const [theme,setTheme] = useState("light");
-    const toggleTheme = ()=>{
+import React, { useState } from "react";
+function DarkMode() {
+  const [theme, setTheme] = useState("light");
+  const toggleTheme = () => {
     setTheme(theme === "light" ? "dark" : "light");
   };
   return (
@@ -13,7 +13,7 @@ function DarkMode(){
         transition: "background-color 0.3s",
       }}
     >
-            <h1>{theme.charAt(0).toUpperCase()+theme.slice(1)}Mode</h1>
+      <h1>{theme.charAt(0).toUpperCase() + theme.slice(1)}Mode</h1>
       <button onClick={toggleTheme}> Toggle Theme</button>
     </div>
   );

src/Component/Layout.js

@@ -1,48 +1,47 @@
 import React, { useState, useEffect } from "react";
 import Body from "./Body";
 import SearchBar from "./SearchBar";
+import useFetch from "../hooks/useFetch";
 import "../styleing/layout.css";
-import { api_url } from "../env";
+
+const my_key = process.env.REACT_APP_API_KEY;
 
 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 { data, loading, error } = useFetch(my_key);
 
+  useEffect(() => {
+    if (data) {
+      setFilteredData(data);
+    }
+  }, [data]);
 
   const handleSearch = (searchTerm) => {
     if (!searchTerm) {
       setFilteredData(data);
     } else {
-      const filtered = data.filter(
+      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]]); 
-      }else{
+      if (filtered?.length > 0) {
+        setFilteredData(filtered);
+      } else {
         setFilteredData([]);
       }
       setCurrentPage(1);
     }
   };
 
-  useEffect(() => {
-    fetchData(); 
-  }, []);
-
+  if (loading) {
+    return <div>Loading....</div>;
+  }
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
   return (
     <div className="contentPage">
       <div className="header">

src/Component/Pagination.js

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

src/Component/SearchBar.js

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
-import '../styleing/SearchBar.css';
+import React, { useState } from "react";
+import "../styleing/SearchBar.css";
 
 const SearchBar = ({ onSearch }) => {
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
 
   const handleInputChange = (event) => {
     const value = event?.target?.value;

src/Component/addPost.js

@@ -1,32 +1,34 @@
-
-import React, { useState } from 'react';
-import "../styleing/addPost.css"
+import React, { useState } from "react";
+import "../styleing/addPost.css";
 const AddPostForm = ({ onAddPost }) => {
-  const [newPost, setNewPost] = useState({ title: '', body: '' });
+  const [newPost, setNewPost] = useState({ title: "", body: "" });
 
   const handleSubmit = (e) => {
     e.preventDefault();
     if (newPost.title && newPost.body) {
       onAddPost(newPost);
-      setNewPost({ title: '', body: '' }); 
+      setNewPost({ title: "", body: "" });
     } else {
-      alert('Title and Body are required!');
+      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 })}
+        onChange={(e) => setNewPost((prevState)=>({ ...prevState, 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>
   );

src/env.js

@@ -1 +0,0 @@
-export const api_url = "https://jsonplaceholder.typicode.com/posts";

src/hooks/useFetch.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from "react";
+
+const useFetch = (url) => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      try {
+        const res = await fetch(url);
+        if (!res.ok) {
+          throw new Error("Failed to fetch data");
+        }
+        const result = await res.json();
+        setData(result);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, [url]);
+  return { data, loading, error };
+};
+export default useFetch;

src/styleing/SearchBar.css

@@ -1,31 +1,32 @@
-
+:root {
+  --borderColor: #ccc;
+  --bgColor: #f9f9f9;
+  --bFocus: #4caf50;
+}
 .searchBar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 20px 0;
-  }
+}
 
-  .search {
+.search {
   padding: 10px;
   font-size: 1.2em;
   width: 300px;
-    border: 1px solid #ccc;
+  border: 1px solid var(--borderColor);
   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 ;
-    
+  background-color: var(--bgColor);
 }
 
-  
+.search:focus {
+  border-color: var(--bFocus);
+  outline: none;
+}
+.search {
+  position: absolute;
+  margin-left: 50cap;
+  padding: 10px;
+  border: 1px solid var(black);
+  border-radius: 10px;
+}

src/styleing/addPost.css

@@ -1,36 +1,40 @@
-
+:root {
+  --borderColor: #ccc;
+  --bgColor: #f9f9f9;
+  --bgCol: #4caf50;
+  --bgColHover: #45a049;
+}
 .addPostForm {
   display: flex;
   flex-direction: column;
   margin: 20px 0;
-  }
+}
 
-  .addPostForm input,
-  .addPostForm textarea {
+.addPostForm input,
+.addPostForm textarea {
   padding: 12px;
   margin-bottom: 15px;
-    border: 1px solid #ccc;
+  border: 1px solid var(--borderColor);
   border-radius: 4px;
   font-size: 1.1em;
   width: 100%;
-  }
+}
 
-  .addPostForm button {
+.addPostForm button {
   padding: 12px;
-    background-color: #4CAF50;
-    color: white;
+  background-color: var(--bgCol);
+  color: var(--bgColor);
   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;
-  }
+.addPostForm button:hover {
+  background-color: var(--bgColHover);
+}
 
+.addPostForm input:focus,
+.addPostForm textarea:focus {
+  border-color: var(--bgCol);
+}

src/styleing/body.css

@@ -1,17 +1,27 @@
-.App{
-    
-    /* background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255, 0, 0, 0.163)); */
-
-   
-
+:root {
+  --borderColor: black;
 }
-ul{
+ul {
   list-style-type: none;
   display: grid;
   grid-template-columns: auto auto auto;
   gap: 20px;
  
 }
-li{
-    border: 2px solid black;
+li {
+  border: 2px solid var(--borderColor);
+  background-image: linear-gradient(rgba(135, 207, 235, 0.588),rgba(230, 116, 116, 0.295));
+  font-family: Georgia, 'Times New Roman', Times, serif;
+  border-radius: 15px;
+  padding: 5px;
+  
+}
+button{
+  background-color: skyblue;
+  border-radius: 10px;
+
+
+}
+button:hover{
+  background-color: rgba(230, 116, 116, 0.632);
 }

src/styleing/layout.css

@@ -1,13 +1,18 @@
-.header{
-    background-image:linear-gradient(skyblue,rgb(230, 116, 116)) ;
+:root {
+  --imgBG_LG1: skyblue;
+  --imgBG_LG2: rgb(230, 116, 116);
+  --headingColor: black;
+}
+.header {
+  background-image: linear-gradient(var(--imgBG_LG1), var(--imgBG_LG2));
   height: auto;
   width: 100%;
   padding: 5px;
   margin-top: -16px;
 }
-.heading{
+.heading {
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
   font-size: xx-large;
-    color: black;
+  color: var(--headingColor);
 }

src/styleing/pagination.css

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