feat(web-ui): improve profile page

Author: Johan Book

services/web-ui/public/locales/en/profile.json

@@ -11,6 +11,9 @@
     "placeholder": "Describe yourself in a few words"
   },
   "header": "Profile",
+  "links": {
+    "blog": "Blog"
+  },
   "save": "Save",
   "update": {
     "error": "There was an error when trying to update your profile",

services/web-ui/public/locales/sv/profile.json

@@ -11,6 +11,9 @@
     "placeholder": "Beskriv dig i ord"
   },
   "header": "Profil",
+  "links": {
+    "blog": "Blog"
+  },
   "save": "Spara",
   "update": {
     "error": "Något gick fel när din profil skulle uppdateras",

services/web-ui/public/locales/zh/profile.json

@@ -11,6 +11,9 @@
     "placeholder": "简单描述一下自己"
   },
   "header": "个人资料",
+  "links": {
+    "blog": "博客"
+  },
   "save": "保存",
   "update": {
     "error": "尝试更新您的个人资料时出错",

services/web-ui/src/pages/ProfilePage/ProfilePage.component.tsx

@@ -4,7 +4,6 @@ import { Avatar, Typography } from "@mui/material";
 
 import { ProfileDetails } from "src/api";
 import { Center } from "src/components/ui/Center";
-import { useTranslation } from "src/core/i18n";
 
 export interface ProfilePageComponentProps {
   profile: ProfileDetails;
@@ -13,19 +12,21 @@ export interface ProfilePageComponentProps {
 export function ProfilePageComponent({
   profile,
 }: ProfilePageComponentProps): ReactElement {
-  const { t } = useTranslation("profile");
-
   return (
     <>
       <Center>
         <Avatar src={profile.photo?.url} sx={{ height: 150, width: 150 }} />
       </Center>
 
-      <Typography gutterBottom sx={{ paddingTop: 2 }} variant="h5">
-        {t("description.title")}
-      </Typography>
+      <Center>
+        <Typography gutterBottom sx={{ paddingTop: 2 }} variant="h5">
+          {profile.name}
+        </Typography>
+      </Center>
 
-      <Typography>{profile.description}</Typography>
+      <Center>
+        <Typography>{profile.description}</Typography>
+      </Center>
     </>
   );
 }

services/web-ui/src/pages/ProfilePage/ProfilePage.container.tsx

@@ -8,7 +8,7 @@ import { CacheKeysConstants, useQuery } from "src/core/query";
 import { ErrorView } from "src/views/ErrorView";
 
 import { ProfilePageComponent } from "./ProfilePage.component";
-import { ProfilePageHeader } from "./ProfilePage.header";
+import { ProfilePageNav } from "./ProfilePage.nav";
 import { ProfilePageSkeleton } from "./ProfilePage.skeleton";
 
 export function ProfilePageContainer(): ReactElement {
@@ -21,37 +21,31 @@ export function ProfilePageContainer(): ReactElement {
 
   if (error) {
     return (
-      <>
-        <ProfilePageHeader />
+      <ProfilePageNav>
         <ErrorView error={error} />
-      </>
+      </ProfilePageNav>
     );
   }
 
   if (isPending) {
     return (
-      <>
-        <ProfilePageHeader />
+      <ProfilePageNav>
         <ProfilePageSkeleton />
-      </>
+      </ProfilePageNav>
     );
   }
 
   if (!data) {
     return (
-      <>
-        <ProfilePageHeader />
-
+      <ProfilePageNav>
         <Typography>Nothing found</Typography>
-      </>
+      </ProfilePageNav>
     );
   }
 
   return (
-    <>
-      <ProfilePageHeader />
-
+    <ProfilePageNav>
       <ProfilePageComponent profile={data} />
-    </>
+    </ProfilePageNav>
   );
 }

services/web-ui/src/pages/ProfilePage/ProfilePage.header.tsx

@@ -0,0 +1,22 @@
+import { ReactElement } from "react";
+
+import { Box } from "@mui/material";
+
+import { NavLayout } from "src/components/layout";
+import { useTranslation } from "src/core/i18n";
+
+interface ProfilePageNavProps {
+  children: ReactElement;
+}
+
+export function ProfilePageNav({
+  children,
+}: ProfilePageNavProps): ReactElement {
+  const { t } = useTranslation("profile");
+
+  return (
+    <NavLayout linkText={t("links.blog")} to="/">
+      <Box sx={{ pt: 1 }}>{children}</Box>
+    </NavLayout>
+  );
+}