fix: #WB-3198 add click on text, images and header to go to post detail

edificeio · Jul 11, 2024 · dbcaaf0 · dbcaaf0
1 parent 765dde1
commit dbcaaf0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git a/frontend/src/components/PostPreview/PostPreview.tsx b/frontend/src/components/PostPreview/PostPreview.tsx
@@ -5,6 +5,7 @@ import { Editor, EditorRef } from "@edifice-ui/editor";
 import { Card, Image, getThumbnail } from "@edifice-ui/react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 
 import { PostPreviewActionBar } from "./PostPreviewActionBar";
 import { PostPreviewFooter } from "./PostPreviewFooter";
@@ -26,6 +27,7 @@ export type PostPreviewProps = {
 
 export const PostPreview = ({ post, index }: PostPreviewProps) => {
   const { t } = useTranslation("blog");
+  const navigate = useNavigate();
 
   const { blog, publicView } = useBlog();
   const { setActionBarPostId } = useStoreUpdaters();
@@ -96,6 +98,10 @@ export const PostPreview = ({ post, index }: PostPreviewProps) => {
     }
   }, [editorRef, summaryContent]);
 
+  const handleClickGoDetail = () => {
+    navigate(`./post/${post?._id}`);
+  };
+
   const classes = clsx("p-24", {
     "blog-post-badge-highlight": post._id === sidebarHighlightedPost?._id,
   });
@@ -114,7 +120,7 @@ export const PostPreview = ({ post, index }: PostPreviewProps) => {
       >
         <PostPreviewHeader post={post} />
         <Card.Body space="0">
-          <div className="d-flex flex-fill flex-column gap-16 pt-16">
+          <div className="d-flex flex-fill flex-column">
             <div className="d-none">
               <Editor
                 ref={editorRef}
@@ -123,10 +129,20 @@ export const PostPreview = ({ post, index }: PostPreviewProps) => {
                 variant="ghost"
               />
             </div>
-            <div className="flex-fill text-truncate text-truncate-2 post-preview-content">
+            <div
+              onClick={handleClickGoDetail}
+              tabIndex={-1}
+              role="button"
+              className="flex-fill text-truncate text-truncate-2 post-preview-content py-16"
+            >
               {summaryContentPlain}
             </div>
-            <div className="d-flex align-items-center justify-content-center gap-24 mx-32">
+            <div
+              onClick={handleClickGoDetail}
+              tabIndex={-1}
+              role="button"
+              className="d-flex align-items-center justify-content-center gap-24 mx-32 pb-16"
+            >
               {mediaURLs
                 .slice(0, MAX_NUMBER_MEDIA_DISPLAY)
                 .map((url, index) => (

diff --git a/frontend/src/components/PostPreview/PostPreviewFooter.tsx b/frontend/src/components/PostPreview/PostPreviewFooter.tsx
@@ -111,11 +111,16 @@ export const PostPreviewFooter = ({ post }: PostPreviewFooterProps) => {
             )}
           </div>
         )}
-
         {!!post.nbComments && (
-          <div className="text-gray-700 d-flex align-items-center gap-8 p-8 post-preview-comment-icon post-footer-element">
-            <span>{post.nbComments}</span>
-            <MessageInfo />
+          <div className="post-footer-element">
+            <Button
+              onClick={handleClickGoDetail}
+              variant="ghost"
+              className="text-gray-700 fw-normal py-4 px-8 btn-icon"
+            >
+              <span>{post.nbComments}</span>
+              <MessageInfo />
+            </Button>
           </div>
         )}
       </div>

diff --git a/frontend/src/components/PostPreview/PostPreviewHeader.tsx b/frontend/src/components/PostPreview/PostPreviewHeader.tsx
@@ -2,6 +2,7 @@
 
 import { Avatar, Badge } from "@edifice-ui/react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 
 import { useActionDefinitions } from "~/features/ActionBar/useActionDefinitions";
 import { PostDate } from "~/features/Post/PostDate";
@@ -17,11 +18,20 @@ export type PostPreviewHeaderProps = {
 
 export const PostPreviewHeader = ({ post }: PostPreviewHeaderProps) => {
   const { t } = useTranslation("blog");
+  const navigate = useNavigate();
 
   const { contrib, manager, creator } = useActionDefinitions([]);
+  const handleClickGoDetail = () => {
+    navigate(`./post/${post?._id}`);
+  };
 
   return (
-    <div className="d-flex gap-12">
+    <div
+      className="d-flex gap-12"
+      onClick={handleClickGoDetail}
+      tabIndex={-1}
+      role="button"
+    >
       <div className="blog-post-user-image">
         <Avatar
           alt={t("blog.author.avatar")}