From d0d757b5cb706b0a9750dc577124718744ec304d Mon Sep 17 00:00:00 2001 From: Arnaud Fauconnet Date: Thu, 20 Oct 2022 17:51:06 +0200 Subject: [PATCH] Added main page, metadata setter and AuthComponent so that titles and body classes are set, and auth checking can be done --- src/components/Main.tsx | 72 +++++++++++++++++++++++++++ src/components/index.tsx | 5 +- src/components/lib/AuthComponent.tsx | 20 ++++++++ src/components/lib/MetadataSetter.tsx | 18 +++++++ src/index.tsx | 27 +++++++--- src/scss/main.scss | 40 +++++++++++++++ 6 files changed, 175 insertions(+), 7 deletions(-) create mode 100644 src/components/Main.tsx create mode 100644 src/components/lib/AuthComponent.tsx create mode 100644 src/components/lib/MetadataSetter.tsx create mode 100644 src/scss/main.scss diff --git a/src/components/Main.tsx b/src/components/Main.tsx new file mode 100644 index 0000000..4533b09 --- /dev/null +++ b/src/components/Main.tsx @@ -0,0 +1,72 @@ +import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material"; +import React, { useEffect } from "react"; +import "@scss/main.scss"; + +function createData( + d: string, + description: string, + amount: number, + total: number +) { + const date: Date = new Date(d); + return { date, description, amount, total }; +} + +const rows = [ + createData("05.10.2022", "Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Curabitur scollicitudin", -123, 30), + createData("04.10.2022", "Cras sit amet justo eu dui mattis eleifen vulputate", 150, 153), + createData("30.09.2022", "Vivamus ipsum arcu, elememntum vitae lectus et, fermentum consequat urna", -3, 3), + createData("30.09.2022", "Fusce tempor varius tempus. Vivamus nec eros non tortor elementum.", -68, 6), + createData("15.08.2022", "Proin gravida suscipit convallis. Morbi lobortis aliquet erat, vitae ultrices.", -172, 74), + createData("12.08.2022", "Ut non purus auctor, convallis lorem a, venenatis metus. Praesent.", 200, 246), + createData("5.08.2022", "Fusce ultricies mauris non diam auctor ultricies. Nullam nec rutrum.", -13, 46), + createData("1.08.2022", "Ut id pulvinar libero. Duis lacinia sit amet lacus sit.", -27, 59), + createData("26.07.2022", "Mauris luctus cursus tincidunt. Suspendisse tempor scelerisque tristique. Morbi nulla.", -64, 86), + createData("20.07.2022", "Nulla consequat, sapien dignissim facilisis fringilla, nisl lacus commodo sapien.", 150, 150), +]; + + +export default function Main() { + return ( +
+
+ header +
+ +
+ + + + + Date + Description + Amount + Total + + + + {rows.map((row) => ( + + + {row.date.toDateString()} + + {row.description} + {row.amount} + {row.total} + + ))} + +
+ +
+
+ footer +
+
+ ); +} \ No newline at end of file diff --git a/src/components/index.tsx b/src/components/index.tsx index 5eb6190..af8186a 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -2,5 +2,8 @@ import Login from "@components/Login"; import ForgotPassword from "@components/ForgotPassword"; import Reset from "@components/Reset"; import ErrorPage from "@components/ErrorPage"; +import Main from "@components/Main"; +import MetadataSetter from "@components/lib/MetadataSetter"; +import AuthComponent from "@components/lib/AuthComponent"; -export { Login, ForgotPassword, Reset, ErrorPage }; \ No newline at end of file +export { Login, ForgotPassword, Reset, ErrorPage, Main, MetadataSetter, AuthComponent }; \ No newline at end of file diff --git a/src/components/lib/AuthComponent.tsx b/src/components/lib/AuthComponent.tsx new file mode 100644 index 0000000..63b9508 --- /dev/null +++ b/src/components/lib/AuthComponent.tsx @@ -0,0 +1,20 @@ +import React, { useEffect } from "react"; +import { useNavigate } from "react-router-dom"; + +type AuthProps = { + children: JSX.Element | JSX.Element[], +} +export default function AuthComponent({children} : AuthProps){ + const navigate = useNavigate(); + + const isLogged = true; + + useEffect(() => { + // navigate needs to be wrapped in a useEffect so that it gets executed after the component is mounted. Otherwise it doesn't redirect + if (!isLogged) + navigate("/login", { replace: true }); + }, [isLogged]) + + if (isLogged) + return <>{children}; +} \ No newline at end of file diff --git a/src/components/lib/MetadataSetter.tsx b/src/components/lib/MetadataSetter.tsx new file mode 100644 index 0000000..174ae61 --- /dev/null +++ b/src/components/lib/MetadataSetter.tsx @@ -0,0 +1,18 @@ +import React, { useEffect } from "react"; +import {AuthComponent} from "@components"; + +type MetadataProps = { + children: JSX.Element | JSX.Element[], + title: string, + bodyClass: string, + needsAuth? : boolean +} + +export default function MetadataSetter({children, title, bodyClass, needsAuth = false}: MetadataProps){ + useEffect(() => { + document.title= title; + document.body.classList.add(bodyClass); + }, [title]) + + return needsAuth ? {children} : <>{children}; +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 2b8d95d..395fca4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,26 +1,41 @@ import * as React from "react"; import { createRoot } from "react-dom/client"; import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom"; -import { ErrorPage, Login, ForgotPassword, Reset } from "@components"; +import { MetadataSetter, ErrorPage, Login, ForgotPassword, Reset, Main, AuthComponent } from "@components"; const router = createBrowserRouter([ { path: "/", - element: , - errorElement: , + element: + +
+ , + errorElement: + + + }, { path: "/login", - element: , + element: + + + }, { path: "/forgot", - element: , + element: + + + }, { path: "/reset", - element: , + element: + + + }, ]); diff --git a/src/scss/main.scss b/src/scss/main.scss new file mode 100644 index 0000000..7f64b85 --- /dev/null +++ b/src/scss/main.scss @@ -0,0 +1,40 @@ +@use "variables.module.scss"; +@use "style.scss"; + +div#tablePage { + color: black; + display: grid; + grid-template-columns: 1fr 6fr; + grid-template-rows: 1fr 10fr 1fr; + + width: 100vw; + height: 100vh; + + header, + footer { + grid-column: 1 / span 2; + } + + header { + grid-row: 1; + background: lightcyan; + } + + footer { + grid-row: 3; + background: lightcoral; + } + + main { + background-color: lightyellow; + grid-row: 2; + grid-column: 2; + } + + + aside { + grid-column: 1; + grid-row: 2; + background: lightgreen; + } +} \ No newline at end of file