fix read more button redirection

mamadfar · Mar 15, 2023 · 41c8f67 · 41c8f67
1 parent c93f4fd
commit 41c8f67
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 9 deletions.
diff --git a/api/tmp/uploads/1678883222100js.png b/api/tmp/uploads/1678883222100js.png
diff --git a/api/tmp/uploads/1678883255710js.png b/api/tmp/uploads/1678883255710js.png
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
@@ -1,9 +1,9 @@
 import {FC} from 'react';
 import "./Button.scss";
 
-const Button:FC<{title: string}> = ({title}) => {
+const Button:FC<{title: string, handler?: () => void}> = ({title, handler}) => {
     return (
-        <button className="button">{title}</button>
+        <button className="button" onClick={handler}>{title}</button>
     );
 }
 

diff --git a/client/src/pages/Home.scss b/client/src/pages/Home.scss
@@ -9,6 +9,7 @@
 
 	.post {
 	  display: flex;
+	  align-items: center;
 	  gap: 100px;
 	  &:nth-child(2n+1) {
 		flex-direction: row-reverse;
@@ -17,6 +18,7 @@
 	  &__img {
 		flex: 2;
 		position: relative;
+		height: 100%;
 		&::after {
 		  content: "";
 		  width: 100%;

diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
@@ -1,5 +1,5 @@
 import "./Home.scss";
-import {Link, useLocation} from "react-router-dom";
+import {Link, useLocation, useNavigate} from "react-router-dom";
 import {Button} from "../components";
 import {useEffect, useState} from "react";
 import {IPost} from "../model/post.model";
@@ -9,7 +9,8 @@ import parse from "html-react-parser";
 const Home = () => {
     const [posts, setPosts] = useState<IPost[]>([]);
 
-    const {search} = useLocation()
+    const {search} = useLocation();
+    const navigation = useNavigate();
 
     const getPosts = async () => {
         try {
@@ -26,10 +27,6 @@ const Home = () => {
         getPosts();
     }, [search])
 
-    const getText = (html: string) => {
-
-    }
-
     return (
         <div className="home">
             <div className="posts">
@@ -43,7 +40,7 @@ const Home = () => {
                                 <h1>{post.title}</h1>
                             </Link>
                             <p>{parse(post.desc)}</p>
-                            <Button title="Read More"/>
+                            <Button title="Read More" handler={() => navigation(`/post/${post.id}`)}/>
                         </div>
                     </div>
                 ))}