Merge pull request #596 from johanbook/nav

feat(web-ui): add navigations

Author: johanbook

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

@@ -15,5 +15,8 @@
     }
   },
   "description": "By creating a new group you can organize friends and content in one place",
-  "header": "Create a new group"
+  "header": "Create a new group",
+  "links": {
+    "back": "Back"
+  }
 }

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

@@ -1,5 +1,8 @@
 {
   "header": "Group",
+  "links": {
+    "back": "Back"
+  },
   "members": {
     "error": "Unable to retrieve organization members",
     "header": "Members",

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

@@ -15,5 +15,8 @@
     }
   },
   "description": "Genom att skapa ny grupp kan du samla vänner och innehåll på en plats",
-  "header": "Skapa ny grupp"
+  "header": "Skapa ny grupp",
+  "links": {
+    "back": "Tillbaka"
+  }
 }

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

@@ -1,5 +1,8 @@
 {
   "header": "Grupp",
+  "links": {
+    "back": "Tillbaka"
+  },
   "members": {
     "error": "Fel vid hämtning av gruppmedlemmar",
     "header": "Medlemmar",

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

@@ -5,7 +5,7 @@
       "create-organization": "Skapa ny grupp",
       "current-organization": "Nuvarande grupp",
       "journal": "Journal",
-      "list-organizations": "Tillgängliga grupper",
+      "list-organizations": "Dina grupper",
       "new-organization": "Skapa ny grupp"
     }
   },

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

@@ -6,6 +6,7 @@ import { Box } from "@mui/material";
 
 import { CreateOrganizationCommand } from "src/api";
 import { organizationsApi } from "src/apis";
+import { NavLayout } from "src/components/layout";
 import { Button, TextField, Typography } from "src/components/ui";
 import { useForm, validators } from "src/core/forms";
 import { useTranslation } from "src/core/i18n";
@@ -55,11 +56,7 @@ export function CreateOrganizationPageContainer(): ReactElement {
   }
 
   return (
-    <>
-      <Typography gutterBottom sx={{ paddingTop: 2 }} variant="h5">
-        {t("header")}
-      </Typography>
-
+    <NavLayout header={t("header")} linkText={t("links.back")} to="/profile">
       <Typography color="textSecondary" sx={{ paddingBottom: 3 }}>
         {t("description")}
       </Typography>
@@ -91,6 +88,6 @@ export function CreateOrganizationPageContainer(): ReactElement {
           </Button>
         </Box>
       </form>
-    </>
+    </NavLayout>
   );
 }

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

@@ -1,7 +1,6 @@
-import React, { ReactNode } from "react";
-
-import { Typography } from "@mui/material";
+import { ReactElement, ReactNode } from "react";
 
+import { NavLayout } from "src/components/layout";
 import { useTranslation } from "src/core/i18n";
 
 interface CurrentOrganizationPageNavProps {
@@ -10,16 +9,12 @@ interface CurrentOrganizationPageNavProps {
 
 export function CurrentOrganizationPageNav({
   children,
-}: CurrentOrganizationPageNavProps): React.ReactElement {
+}: CurrentOrganizationPageNavProps): ReactElement {
   const { t } = useTranslation("organization");
 
   return (
-    <>
-      <Typography gutterBottom sx={{ paddingTop: 2 }} variant="h5">
-        {t("header")}
-      </Typography>
-
+    <NavLayout header={t("header")} linkText={t("links.back")} to="/profile">
       {children}
-    </>
+    </NavLayout>
   );
 }