Merge pull request #595 from johanbook/nav-layout

refactor(web-ui): rename nav-layout

Author: johanbook

services/web-ui/public/locales/en/organization-list.json

@@ -6,5 +6,8 @@
     }
   },
   "description": "These are the groups you are a member of",
-  "header": "Groups"
+  "header": "Groups",
+  "links": {
+    "back": "Back"
+  }
 }

services/web-ui/public/locales/sv/organization-list.json

@@ -6,5 +6,8 @@
     }
   },
   "description": "De här är de grupper som du är medlem i",
-  "header": "Grupper"
+  "header": "Grupper",
+  "links": {
+    "back": "Tillbaka"
+  }
 }

services/web-ui/src/components/layout/PageWithNav.tsx renamed to services/web-ui/src/components/layout/NavLayout.tsx

@@ -4,19 +4,19 @@ import { Link as ReactRouterLink } from "react-router-dom";
 import { ArrowBackIosNew } from "@mui/icons-material";
 import { Link as MuiLink, Typography } from "@mui/material";
 
-interface PageWithNavProps {
+interface NavLayoutProps {
   children: ReactNode;
   header?: string | null;
   linkText: string;
   to: string;
 }
 
-export function PageWithNav({
+export function NavLayout({
   children,
   header,
   linkText,
   to,
-}: PageWithNavProps): ReactElement {
+}: NavLayoutProps): ReactElement {
   return (
     <>
       <MuiLink

services/web-ui/src/components/layout/index.ts

@@ -1,2 +1,2 @@
 export { Page } from "./Page";
-export { PageWithNav } from "./PageWithNav";
+export { NavLayout } from "./NavLayout";

services/web-ui/src/pages/BlogPostPage/BlogPostPage.nav.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from "react";
 
-import { PageWithNav } from "src/components/layout";
+import { NavLayout } from "src/components/layout";
 import { useTranslation } from "src/core/i18n";
 
 interface BlogPostPageNavProps {
@@ -13,8 +13,8 @@ export function BlogPostPageNav({
   const { t } = useTranslation("blog");
 
   return (
-    <PageWithNav linkText={t("links.back")} to="/">
+    <NavLayout linkText={t("links.back")} to="/">
       {children}
-    </PageWithNav>
+    </NavLayout>
   );
 }

services/web-ui/src/pages/JournalPage/JournalPage.nav.tsx

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from "react";
 
 import { Grid, Typography } from "@mui/material";
 
-import { PageWithNav } from "src/components/layout";
+import { NavLayout } from "src/components/layout";
 import { DatePicker } from "src/components/ui/DatePicker";
 import { useTranslation } from "src/core/i18n";
 
@@ -25,7 +25,7 @@ export function JournalPageNav({
   const { t } = useTranslation("journal");
 
   return (
-    <PageWithNav header={t("header")} linkText={t("links.back")} to="/profile">
+    <NavLayout header={t("header")} linkText={t("links.back")} to="/profile">
       <Typography color="textSecondary" sx={{ paddingBottom: 3 }}>
         {t("description")}
       </Typography>
@@ -51,6 +51,6 @@ export function JournalPageNav({
       </Grid>
 
       {children}
-    </PageWithNav>
+    </NavLayout>
   );
 }

services/web-ui/src/pages/OrganizationListPage/OrganizationListPage.nav.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode } from "react";
 
 import { Typography } from "@mui/material";
 
+import { NavLayout } from "src/components/layout";
 import { useTranslation } from "src/core/i18n";
 
 interface OrganizationListPageNavProps {
@@ -14,14 +15,10 @@ export function OrganizationListPageNav({
   const { t } = useTranslation("organization-list");
 
   return (
-    <>
-      <Typography gutterBottom sx={{ paddingTop: 2 }} variant="h5">
-        {t("header")}
-      </Typography>
-
+    <NavLayout header={t("header")} linkText={t("links.back")} to="/profile">
       <Typography color="textSecondary">{t("description")}</Typography>
 
       {children}
-    </>
+    </NavLayout>
   );
 }