feat(web-ui): allow clicking blog photo (#974)

* feat(web-ui): allow clicking blog photo * feat(web-ui): clean up blog post page --------- Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>
johanbook · Nov 24, 2024 · 1149cc6 · 1149cc6
1 parent 3a6bb5c
commit 1149cc6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/services/web-ui/src/features/blogs/pages/BlogPhotoListPage/BlogPhotoListPage.component.tsx b/services/web-ui/src/features/blogs/pages/BlogPhotoListPage/BlogPhotoListPage.component.tsx
@@ -1,4 +1,5 @@
 import { Fragment, ReactElement } from "react";
+import { useNavigate } from "react-router";
 
 import { ImageList, ImageListItem, Typography } from "@mui/material";
 
@@ -28,6 +29,7 @@ interface GroupProps {
 
 function Group({ data }: GroupProps): ReactElement {
   const groupedData = groupDataByDate(data);
+  const navigate = useNavigate();
 
   return (
     <>
@@ -40,7 +42,11 @@ function Group({ data }: GroupProps): ReactElement {
           <ImageList cols={3} gap={8} sx={{ m: 0 }} variant="masonry">
             {entries.map((item) => (
               <ImageListItem key={item.id}>
-                <img src={item.url} loading="lazy" />
+                <img
+                  src={item.url}
+                  loading="lazy"
+                  onClick={() => navigate(`/blog/${item.blogId}`)}
+                />
               </ImageListItem>
             ))}
           </ImageList>

diff --git a/services/web-ui/src/features/blogs/pages/BlogPostPage/BlogPostPage.nav.tsx b/services/web-ui/src/features/blogs/pages/BlogPostPage/BlogPostPage.nav.tsx
@@ -1,8 +1,10 @@
 import { ReactElement, ReactNode } from "react";
+import { Link as ReactRouterLink } from "react-router-dom";
+
+import { ArrowBack } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
 
-import { NavLayout } from "src/components/layout";
 import { Nav } from "src/components/nav";
-import { useTranslation } from "src/core/i18n";
 
 interface BlogPostPageNavProps {
   children: ReactNode;
@@ -11,13 +13,19 @@ interface BlogPostPageNavProps {
 export function BlogPostPageNav({
   children,
 }: BlogPostPageNavProps): ReactElement {
-  const { t } = useTranslation("blog");
-
-  return (
-    <Nav>
-      <NavLayout linkText={t("links.back")} to="/">
-        {children}
-      </NavLayout>
-    </Nav>
+  const appBarContent = (
+    <>
+      <IconButton
+        component={ReactRouterLink}
+        sx={{
+          mr: 2,
+        }}
+        to="/"
+      >
+        <ArrowBack />
+      </IconButton>
+    </>
   );
+
+  return <Nav appBarContent={appBarContent}>{children}</Nav>;
 }