Created PageLayout and wrapped Project/User/TicketPages

client/src/layouts/PageLayout.tsx

@@ -0,0 +1,43 @@
+import React, { FC, ReactNode } from "react";
+import { makeStyles, Theme, Container } from "@material-ui/core";
+
+/**
+ * @function useStyles creates the css styles used in the following component.
+ */
+const useStyles = makeStyles((theme: Theme) => ({
+  // root style allow for fixed footer
+  header: {
+    margin: theme.spacing(1),
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    flexGrow: 1,
+  },
+  content: {
+    margin: theme.spacing(1),
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+  },
+}));
+
+interface IProps {
+  header: ReactNode;
+  content: ReactNode;
+}
+
+/**
+ * PageLayout divide the page in 2 parts: Header and Content, to ensure cohesion.
+ *
+ * @param Header - The encapsulated component.
+ * @param Content - The encapsulated component.
+ */
+const PageLayout: FC<IProps> = ({ header, content }) => {
+  const classes = useStyles();
+  return (
+    <Container maxWidth="md">
+      <div className={classes.header}>{header}</div>
+      <div className={classes.content}>{content}</div>
+    </Container>
+  );
+};
+
+export default PageLayout;

client/src/pages/NotFoundPage.tsx

@@ -1,10 +1,13 @@
 import React, { FC } from "react";
+import PageLayout from "../layouts/PageLayout";
+import { Header } from "../components/Header";
 
 interface IProps {}
 export const NotFoundPage: FC<IProps> = () => {
   return (
-    <div className="section">
+    <PageLayout
-      <p>error</p>
+      header={<Header title="Error page" description="Something went wrong" />}
-    </div>
+      content={<p>error</p>}
+    />
   );
 };

client/src/pages/ProjectPage.tsx

@@ -1,12 +1,13 @@
 import React, { FC, useState } from "react";
-import ProjectVM from "../VM/ProjectVM";
+import { Container, Grid, makeStyles, Theme } from "@material-ui/core";
 import { Header } from "../components/Header";
 import { AvatarList } from "../components/AvatarList";
 import { ProgressBar } from "../components/ProgressBar";
 import { FloatingButton } from "../components/FloatingButton";
 import { UsersModal } from "../components/UsersModal";
-import { Container, Grid, makeStyles, Theme } from "@material-ui/core";
 import { ProjectTabPanel } from "../components/ProjectTabPanel";
+import ProjectVM from "../VM/ProjectVM";
+import PageLayout from "../layouts/PageLayout";
 
 interface IProps {
   viewModel: ProjectVM;
@@ -15,8 +16,8 @@ interface IProps {
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
     margin: theme.spacing(1),
-    flexGrow: 1
+    flexGrow: 1,
-  }
+  },
 }));
 
 export const ProjectPage: FC<IProps> = ({ viewModel }) => {
@@ -33,7 +34,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
     remainingDays,
     files,
     // activities,
-    allProjects
+    allProjects,
   } = viewModel;
 
   const tabNames: string[] = ["Tickets", "Files"]; //, "Activity"];
@@ -41,11 +42,9 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
 
   const classes = useStyles();
 
+  const Content: FC = () => {
     return (
-    <Container maxWidth="md">
+      <>
-      <div className={classes.root}>
-        <Header title={title} description={description} />
-      </div>
         <UsersModal
           show={showModal}
           users={users}
@@ -82,6 +81,14 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
           // activities={activities}
           allProjects={allProjects}
         />
-    </Container>
+      </>
+    );
+  };
+
+  return (
+    <PageLayout
+      header={<Header title={title} description={description} />}
+      content={<Content />}
+    />
   );
 };

client/src/pages/TicketPage.tsx

@@ -17,9 +17,10 @@ import {
   makeStyles,
   Theme,
   Grid,
-  Typography
+  Typography,
 } from "@material-ui/core";
 import { Timer } from "@material-ui/icons";
+import PageLayout from "../layouts/PageLayout";
 
 interface IProps {
   viewModel: TicketVM;
@@ -28,11 +29,11 @@ interface IProps {
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
     margin: theme.spacing(1),
-    flexGrow: 1
+    flexGrow: 1,
   },
   table: {
-    minWidth: 650
+    minWidth: 650,
-  }
+  },
 }));
 
 export const TicketPage: FC<IProps> = ({ viewModel }) => {
@@ -45,17 +46,15 @@ export const TicketPage: FC<IProps> = ({ viewModel }) => {
     status,
     category,
     impact,
-    difficulty
+    difficulty,
   } = viewModel;
   const daysToEnd: number = getRemainingdays(endingDate);
   // let notes: string = "";
   const classes = useStyles();
 
+  const Content: FC = () => {
     return (
-    <Container maxWidth="md">
+      <>
-      <div className={classes.root}>
-        <Header title={title} description={description} />
-      </div>
         <AvatarList users={users} />
 
         <div className={classes.root}>
@@ -88,7 +87,14 @@ export const TicketPage: FC<IProps> = ({ viewModel }) => {
       // }
     ></textarea> */}
         </div>
-    </Container>
+      </>
+    );
+  };
+  return (
+    <PageLayout
+      header={<Header title={title} description={description} />}
+      content={<Content />}
+    />
   );
 };
 

client/src/pages/UserPage.tsx

@@ -3,6 +3,7 @@ import { UserVM } from "../VM/UserVM";
 import { UserHeader } from "../components/UserHeader";
 import { UserTabPanel } from "../components/UserTabPanel";
 import { Container } from "@material-ui/core";
+import PageLayout from "../layouts/PageLayout";
 
 interface IProps {
   viewModel: UserVM;
@@ -13,13 +14,21 @@ export const UserPage: FC<IProps> = ({ viewModel }) => {
   const tabNames: string[] = ["Projects", "Tickets"];
 
   return (
-    <Container maxWidth="md">
+    <PageLayout
+      header={
         <UserHeader
           picture={picture}
           fullName={fullName}
           presentation={presentation}
         />
-      <UserTabPanel tabNames={tabNames} projects={projects} tickets={tickets} />
+      }
-    </Container>
+      content={
+        <UserTabPanel
+          tabNames={tabNames}
+          projects={projects}
+          tickets={tickets}
+        />
+      }
+    />
   );
 };