From 12e5665a1cf0bdfa34cd3d676fbab7ef01da9909 Mon Sep 17 00:00:00 2001 From: David Katrinka Date: Thu, 24 Jul 2025 18:20:24 +0200 Subject: [PATCH] fixed filtering and moved refersh button into header, added css modules for components --- src/App.css | 50 ------------------------------ src/App.tsx | 44 +++++++++++++++++--------- src/components/Block.module.css | 8 +++++ src/components/Block.tsx | 7 +++-- src/components/Header.module.css | 22 +++++++++++++ src/components/Header.tsx | 8 ++--- src/components/PostItem.module.css | 25 +++++++++++++++ src/components/PostItem.tsx | 5 +-- src/components/RefreshButton.tsx | 9 ------ src/index.css | 2 ++ 10 files changed, 97 insertions(+), 83 deletions(-) create mode 100644 src/components/Block.module.css create mode 100644 src/components/Header.module.css create mode 100644 src/components/PostItem.module.css delete mode 100644 src/components/RefreshButton.tsx diff --git a/src/App.css b/src/App.css index 80b9fe6..f2270aa 100644 --- a/src/App.css +++ b/src/App.css @@ -5,61 +5,11 @@ box-sizing: border-box; } -.block{ - border-radius: 10px; - background-color: #ffffff; - border: 1px solid #000000; - width: 100%; - padding: 15px; - margin-bottom: 30px; -} -.refresh-btn{ - padding: 5px; - background-color: #0000ff; - color: #ffffff; - border-radius: 10px; -} -.refresh-btn:hover{ - opacity: 0.7; - cursor: pointer; -} -.post{ - display: flex; - border-bottom: 1px solid #b3b3b3; - border-radius: 10px; - margin-bottom: 5px; - cursor: pointer; -} -.post-id{ - padding: 5px; - font-size: 24px; -} -.post-body{ - padding: 5px; -} -.post:hover{ - background-color: #b3b3b3; -} -.post-title{ - font-size: 24px; - font-weight: 500; -} - -.refresh-and-search{ - display: flex; - justify-content: space-between; - align-items: center; -} - -.refresh-and-search input{ - border-radius: 10px; - padding: 5px; -} diff --git a/src/App.tsx b/src/App.tsx index cd9e875..fd25a87 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import './App.css' import Header from './components/Header' import PostList from './components/PostList' @@ -7,7 +7,7 @@ import axios from 'axios' function App() { - const [allPosts, setAllPosts] = useState([]); + const [posts, setPosts] = useState([]); const [searchTerm, setSearchTerm] = useState(""); @@ -16,7 +16,7 @@ function App() { const fetchPosts = async () => { const response = await axios.get("https://jsonplaceholder.typicode.com/posts"); - setAllPosts(response.data); + setPosts(response.data); console.log("Posts fetched:", response.data); @@ -29,20 +29,34 @@ function App() { }, []) - useEffect(() => { - - const normalize = (str: string) => str.replace(/\s+/g, " ").toLowerCase(); - if (searchTerm) { - const filteredPosts = allPosts.filter(post => - normalize(post.body).includes(searchTerm.toLowerCase()) || post.title.toLowerCase().includes(searchTerm.toLowerCase()) - ); - setPosts(filteredPosts); - } else { - setPosts(allPosts); + const normalize = (str: string) => str.replace(/\s+/g, " ").toLowerCase(); + + + const filteredPosts = useMemo(() => { + return posts.filter(post => { + if (searchTerm == "") { + return true; + } + + if (normalize(post.body).includes(searchTerm.toLowerCase()) || post.title.toLowerCase().includes(searchTerm.toLowerCase())) { + return true; + + } else { + return false; + } } - }, [searchTerm, allPosts]); + + ); + },[posts, searchTerm]); + + + + + + + @@ -51,7 +65,7 @@ function App() {
- + diff --git a/src/components/Block.module.css b/src/components/Block.module.css new file mode 100644 index 0000000..5a2d417 --- /dev/null +++ b/src/components/Block.module.css @@ -0,0 +1,8 @@ +.block { + border-radius: 10px; + background-color: #ffffff; + border: 1px solid #000000; + width: 100%; + padding: 15px; + margin-bottom: 30px; +} \ No newline at end of file diff --git a/src/components/Block.tsx b/src/components/Block.tsx index e9b4272..d6ad928 100644 --- a/src/components/Block.tsx +++ b/src/components/Block.tsx @@ -1,10 +1,11 @@ import type { BlockProps } from "./types"; +import styles from "./Block.module.css"; function Block({title, children}:BlockProps) { return ( -
-

{title}

-
+
+

{title}

+
{children}
diff --git a/src/components/Header.module.css b/src/components/Header.module.css new file mode 100644 index 0000000..0e28d15 --- /dev/null +++ b/src/components/Header.module.css @@ -0,0 +1,22 @@ +.refreshBtn { + padding: 5px; + background-color: #0000ff; + color: #ffffff; + border-radius: 10px; +} + +.refreshBtn:hover { + opacity: 0.7; + cursor: pointer; +} + +.refreshAndSearch { + display: flex; + justify-content: space-between; + align-items: center; +} + +.refreshAndSearch input { + border-radius: 10px; + padding: 5px; +} \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 6d90b3e..6cee6f8 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,15 +1,15 @@ import Block from "./Block"; -import RefreshButton from "./RefreshButton"; import type { HeaderProps } from "./types"; +import styles from "./Header.module.css"; function Header({setRefresh, searchTerm, setSearchTerm}:HeaderProps) { return ( - +
-
- +
+ setSearchTerm(e.target.value)} placeholder="search..."/>
diff --git a/src/components/PostItem.module.css b/src/components/PostItem.module.css new file mode 100644 index 0000000..fdc8144 --- /dev/null +++ b/src/components/PostItem.module.css @@ -0,0 +1,25 @@ +.post { + display: flex; + border-bottom: 1px solid #b3b3b3; + border-radius: 10px; + margin-bottom: 5px; + cursor: pointer; +} + +.postId { + padding: 5px; + font-size: 24px; +} + +.postBody { + padding: 5px; +} + +.post:hover { + background-color: #b3b3b3; +} + +.postTitle { + font-size: 24px; + font-weight: 500; +} \ No newline at end of file diff --git a/src/components/PostItem.tsx b/src/components/PostItem.tsx index 327a7ef..ac9764c 100644 --- a/src/components/PostItem.tsx +++ b/src/components/PostItem.tsx @@ -1,10 +1,11 @@ import type { postItemProps } from "./types"; +import styles from "./PostItem.module.css"; function PostItem({post}:postItemProps){ return ( -
-
{post.id}
alert("clicked on post: " + post.title)}> {post.title}

{post.body}
+
+
{post.id}
alert("clicked on post: " + post.title)}> {post.title}

{post.body}
) } diff --git a/src/components/RefreshButton.tsx b/src/components/RefreshButton.tsx deleted file mode 100644 index 8925dd9..0000000 --- a/src/components/RefreshButton.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import type { RefreshButtonProps } from "./types"; - -function RefreshButton({setRefresh}: RefreshButtonProps) { - return ( - - ) -} - -export default RefreshButton; \ No newline at end of file diff --git a/src/index.css b/src/index.css index 5f7b662..09d0afa 100644 --- a/src/index.css +++ b/src/index.css @@ -18,3 +18,5 @@ body { + +