From 71fc9dce44aa59ad191d609e871c95e86db81299 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Thu, 13 May 2021 08:34:06 +0200
Subject: [PATCH] Create home and 404 route

---
 src/ui/routes/HomeRoute.tsx     |  3 +++
 src/ui/routes/MainRoute.tsx     | 29 +++++++++++++----------------
 src/ui/routes/NotFoundRoute.tsx | 24 ++++++++++++++++++++++++
 3 files changed, 40 insertions(+), 16 deletions(-)
 create mode 100644 src/ui/routes/HomeRoute.tsx
 create mode 100644 src/ui/routes/NotFoundRoute.tsx

diff --git a/src/ui/routes/HomeRoute.tsx b/src/ui/routes/HomeRoute.tsx
new file mode 100644
index 0000000..a7ad111
--- /dev/null
+++ b/src/ui/routes/HomeRoute.tsx
@@ -0,0 +1,3 @@
+export function HomeRoute() {
+	return <p style={{ color: "white" }}>Welcome to Comunic Console!</p>;
+}
diff --git a/src/ui/routes/MainRoute.tsx b/src/ui/routes/MainRoute.tsx
index 0d93c4f..8f0cdd5 100644
--- a/src/ui/routes/MainRoute.tsx
+++ b/src/ui/routes/MainRoute.tsx
@@ -25,6 +25,9 @@ import React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { AccountHelper } from "../../helpers/AccountHelper";
 import CloseSharpIcon from "@material-ui/icons/CloseSharp";
+import { NotFoundRoute } from "./NotFoundRoute";
+import { HomeRoute } from "./HomeRoute";
+import { Home, Person } from "@material-ui/icons";
 
 const useStyles = makeStyles((theme) => ({
 	root: {
@@ -83,21 +86,15 @@ function Menu() {
 			<List component="nav" aria-label="main mailbox folders">
 				<ListItem button>
 					<ListItemIcon>
-						<InboxIcon />
+						<Home />
 					</ListItemIcon>
-					<ListItemText primary="Inbox" />
+					<ListItemText primary="Home" />
 				</ListItem>
 				<ListItem button>
 					<ListItemIcon>
-						<DraftsIcon />
+						<Person />
 					</ListItemIcon>
-					<ListItemText primary="Drafts" />
-				</ListItem>
-			</List>
-			<Divider />
-			<List component="nav" aria-label="secondary mailbox folders">
-				<ListItem button>
-					<ListItemText primary="Trash" />
+					<ListItemText primary="My account" />
 				</ListItem>
 			</List>
 		</div>
@@ -153,14 +150,14 @@ export function MainRoute() {
 					<Menu></Menu>
 				</Paper>
 
-				<div>
+				<div style={{ flex: "1", padding: "50px" }}>
 					<Switch>
+						<Route exact path="/">
+							<HomeRoute></HomeRoute>
+						</Route>
+
 						<Route path="*">
-							<p>yes</p>
-							<p>yes</p>
-							<p>yes</p>
-							<p>yes</p>
-							<p>yes</p>Not found
+							<NotFoundRoute></NotFoundRoute>
 						</Route>
 					</Switch>
 				</div>
diff --git a/src/ui/routes/NotFoundRoute.tsx b/src/ui/routes/NotFoundRoute.tsx
new file mode 100644
index 0000000..0dd4972
--- /dev/null
+++ b/src/ui/routes/NotFoundRoute.tsx
@@ -0,0 +1,24 @@
+/**
+ * 404 Error page
+ *
+ * @author Pierre Hubert
+ */
+
+import { Typography } from "@material-ui/core";
+
+export function NotFoundRoute() {
+	return (
+		<div
+			style={{
+				height: "100%",
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+			}}
+		>
+			<Typography variant="h3" color="primary">
+				404 Not found
+			</Typography>
+		</div>
+	);
+}