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); 
+    setFilteredData(updatedData);
   };
 
-
   const handleDeletePost = (id) => {
     const updatedData = filteredData?.filter((post) => post?.id !== id);
-    setFilteredData(updatedData); 
+    setFilteredData(updatedData);
   };
 
-  
   const indexOfLastPost = currentPage * postsPerPage;
   const indexOfFirstPost = indexOfLastPost - postsPerPage;
   const currentPosts = filteredData?.slice(indexOfFirstPost, indexOfLastPost);
@@ -28,24 +25,25 @@ 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>
           ))
         ) : (
-          <li>No posts found</li> 
+          <li>No posts found</li>
         )}
       </ul>
       <AddPostForm onAddPost={handleAddPost} />
       <Pagination
         currentPage={currentPage}
         totalPages={totalPages}
-        onPageChange={(page) => setCurrentPage(page)} 
+        onPageChange={(page) => setCurrentPage(page)}
       />
     </div>
   );

src/Component/DarkMode.js

@@ -1,21 +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>
-    );
+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;
+export default DarkMode;

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); 
+      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); 
+      setCurrentPage(1);
     }
   };
 
-  useEffect(() => {
-    fetchData(); 
-  }, []);
-
+  if (loading) {
+    return <div>Loading....</div>;
+  }
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
   return (
     <div className="contentPage">
       <div className="header">
@@ -52,7 +51,7 @@ const Layout = () => {
       <div className="body">
         <Body
           filteredData={filteredData}
-          setFilteredData={setFilteredData} 
+          setFilteredData={setFilteredData}
           currentPage={currentPage}
           setCurrentPage={setCurrentPage}
         />

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,13 +1,13 @@
-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;
     setSearchTerm(value);
-    onSearch(value); 
+    onSearch(value);
   };
 
   return (

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: '' }); 
+      onAddPost(newPost);
+      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 {
-    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 ;
-    
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 20px 0;
 }
 
-  
+.search {
+  padding: 10px;
+  font-size: 1.2em;
+  width: 300px;
+  border: 1px solid var(--borderColor);
+  border-radius: 4px;
+  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 {
-    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;
-  }
-  
+  display: flex;
+  flex-direction: column;
+  margin: 20px 0;
+}
+
+.addPostForm input,
+.addPostForm textarea {
+  padding: 12px;
+  margin-bottom: 15px;
+  border: 1px solid var(--borderColor);
+  border-radius: 4px;
+  font-size: 1.1em;
+  width: 100%;
+}
+
+.addPostForm button {
+  padding: 12px;
+  background-color: var(--bgCol);
+  color: var(--bgColor);
+  font-size: 1.1em;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.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 {
+  list-style-type: none;
+  display: grid;
+  grid-template-columns: auto auto auto;
+  gap: 20px;
+ 
+}
+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;
 
-   
 
 }
-ul{
-    list-style-type: none;
-    display: grid;
-    grid-template-columns: auto auto auto;
-    gap: 20px; 
-
-}
-li{
-    border: 2px solid black;
-}
+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)) ;
-    height: auto;
-    width: 100%;
-    padding: 5px;
-    margin-top: -16px;
+:root {
+  --imgBG_LG1: skyblue;
+  --imgBG_LG2: rgb(230, 116, 116);
+  --headingColor: black;
 }
-.heading{
-    text-align: center;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: xx-large;
-    color: black;
+.header {
+  background-image: linear-gradient(var(--imgBG_LG1), var(--imgBG_LG2));
+  height: auto;
+  width: 100%;
+  padding: 5px;
+  margin-top: -16px;
+}
+.heading {
+  text-align: center;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: xx-large;
+  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 {
-    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;
-  }
-  
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.pagination button {
+  padding: 8px 12px;
+  margin: 0 5px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background-color: var(--bgColor);
+  cursor: pointer;
+}
+
+.pagination button:hover {
+  background-color: var(--bgHover);
+}
+
+.pagination .active {
+  background-color: var(--paginationBG);
+  color: var(--paginationCol);
+}
+
+.pagination .disabled {
+  background-color: var(--bgColor);
+  cursor: not-allowed;
+}