From aa472e12379bc6ebc754de996955de204faf4fa3 Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Tue, 8 Sep 2020 21:39:00 +0200
Subject: [PATCH] Add page management
---
src/api/index.ts | 4 ++-
src/api/page.tsx | 27 ++++++++++++++++++
src/app.tsx | 8 ++++--
src/data/common.ts | 5 ++++
src/data/page.ts | 6 ++++
src/pages/errors/not-found.tsx | 22 ---------------
src/pages/fallback.tsx | 51 ++++++++++++++++++++++++++++++++++
src/pages/index.ts | 2 +-
src/routing.tsx | 4 +--
src/styles/header.scss | 44 +++++++++++++++++++++++++++++
10 files changed, 145 insertions(+), 28 deletions(-)
create mode 100644 src/api/page.tsx
create mode 100644 src/data/page.ts
delete mode 100644 src/pages/errors/not-found.tsx
create mode 100644 src/pages/fallback.tsx
diff --git a/src/api/index.ts b/src/api/index.ts
index 2fab26e..6d9942d 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -5,6 +5,7 @@ import { UserState } from "@/state/reducer/user";
import * as user from "./user";
import * as edition from "./edition";
+import * as page from "./page"
export const axios = Axios.create({
baseURL: process.env.API_BASE_URL || "https://system-praktyk.stg.kadet.net/api/",
@@ -29,7 +30,8 @@ axios.interceptors.request.use(config => {
const api = {
user,
- edition
+ edition,
+ page
}
export default api;
diff --git a/src/api/page.tsx b/src/api/page.tsx
new file mode 100644
index 0000000..f1c69ee
--- /dev/null
+++ b/src/api/page.tsx
@@ -0,0 +1,27 @@
+// MOCK
+import { Page } from "@/data/page";
+
+const tos = `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bestiarum vero nullum iudicium puto. Quare ad ea primum, si videtur; <b>Duo Reges: constructio interrete.</b> <i>Eam tum adesse, cum dolor omnis absit;</i> Sed ad bona praeterita redeamus. <mark>Facillimum id quidem est, inquam.</mark> Apud ceteros autem philosophos, qui quaesivit aliquid, tacet; </p>
+
+<p><a href="http://loripsum.net/" target="_blank">Quorum altera prosunt, nocent altera.</a> Eam stabilem appellas. <i>Sed nimis multa.</i> Quo plebiscito decreta a senatu est consuli quaestio Cn. Sin laboramus, quis est, qui alienae modum statuat industriae? <mark>Quod quidem nobis non saepe contingit.</mark> Si autem id non concedatur, non continuo vita beata tollitur. <a href="http://loripsum.net/" target="_blank">Illum mallem levares, quo optimum atque humanissimum virum, Cn.</a> <i>Id est enim, de quo quaerimus.</i> </p>
+
+<p>Ille vero, si insipiens-quo certe, quoniam tyrannus -, numquam beatus; Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Et quod est munus, quod opus sapientiae? Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. </p>
+`
+
+export async function get(slug: string): Promise<Page> {
+ if (slug === "/regulamin" || slug === "/rules") {
+ return {
+ id: "tak",
+ content: {
+ pl: tos,
+ en: tos,
+ },
+ title: {
+ pl: "Regulamin Praktyk",
+ en: "Terms of Internship",
+ },
+ }
+ }
+
+ throw new Error();
+}
diff --git a/src/app.tsx b/src/app.tsx
index d879206..c05b38c 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -91,13 +91,17 @@ function App() {
</div>
<div className="header__nav">
<nav className="header__top">
- <ul className="header__menu"></ul>
+ <ul className="header__menu">
+ </ul>
<UserMenu className="header__user"/>
<div className="header__divider"/>
<LanguageSwitcher className="header__language-switcher"/>
</nav>
<nav className="header__bottom">
- <ul className="header__menu header__menu--main"></ul>
+ <ul className="header__menu header__menu--main">
+ <li><Link to={ route("home") }>{ t("pages.my-internship.header") }</Link></li>
+ <li><Link to="/regulamin">Regulamin</Link></li>
+ </ul>
</nav>
</div>
</header>
diff --git a/src/data/common.ts b/src/data/common.ts
index 5a735c4..da78cf8 100644
--- a/src/data/common.ts
+++ b/src/data/common.ts
@@ -3,3 +3,8 @@ export type Identifier = string;
export interface Identifiable {
id?: Identifier
}
+
+export type Multilingual<T> = {
+ pl: T,
+ en: T
+}
diff --git a/src/data/page.ts b/src/data/page.ts
new file mode 100644
index 0000000..a474e82
--- /dev/null
+++ b/src/data/page.ts
@@ -0,0 +1,6 @@
+import { Identifiable, Multilingual } from "@/data/common";
+
+export interface Page extends Identifiable {
+ title: Multilingual<string>;
+ content: Multilingual<string>;
+}
diff --git a/src/pages/errors/not-found.tsx b/src/pages/errors/not-found.tsx
deleted file mode 100644
index 0f6456b..0000000
--- a/src/pages/errors/not-found.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Page } from "@/pages/base";
-import { Box, Button, Container, Divider, Typography } from "@material-ui/core";
-import { route } from "@/routing";
-import { Link as RouterLink } from "react-router-dom";
-import React from "react";
-
-export const NotFoundPage = () => {
- return <Page title="Strona nie została znaleziona">
- <Container>
- <Typography variant="h1">404</Typography>
- <Typography variant="h2">Strona nie została znaleziona</Typography>
-
- <Box my={ 4 }>
- <Divider variant="fullWidth"/>
- </Box>
-
- <Button to={ route("home") } color="primary" component={ RouterLink }>strona główna</Button>
- </Container>
- </Page>
-}
-
-export default NotFoundPage;
diff --git a/src/pages/fallback.tsx b/src/pages/fallback.tsx
new file mode 100644
index 0000000..ff1584f
--- /dev/null
+++ b/src/pages/fallback.tsx
@@ -0,0 +1,51 @@
+import { Page } from "@/pages/base";
+import { Box, Button, CircularProgress, Container, Divider, Typography } from "@material-ui/core";
+import { Link as RouterLink, useLocation } from "react-router-dom";
+import React, { useMemo } from "react";
+import { route } from "@/routing";
+import { useAsync } from "@/hooks";
+import api from "@/api";
+
+export const FallbackPage = () => {
+ const location = useLocation();
+
+ const promise = useMemo(() => api.page.get(location.pathname), [ location.pathname ]);
+
+ const { isLoading, value, error } = useAsync(promise);
+
+ console.log({ isLoading, value, error, location });
+
+ if (isLoading) {
+ return <CircularProgress />
+ }
+
+ if (error) {
+ return <Page title="Strona nie została znaleziona">
+ <Container>
+ <Typography variant="h1">404</Typography>
+ <Typography variant="h2">Strona nie została znaleziona</Typography>
+
+ <Box my={ 4 }>
+ <Divider variant="fullWidth"/>
+ </Box>
+
+ <Button to={ route("home") } color="primary" component={ RouterLink }>strona główna</Button>
+ </Container>
+ </Page>
+ }
+
+ if (value) {
+ return <Page title={ value.title.pl }>
+ <Page.Header maxWidth="md">
+ <Page.Title>{ value.title.pl }</Page.Title>
+ </Page.Header>
+ <Container>
+ <div dangerouslySetInnerHTML={{ __html: value.content.pl }} />
+ </Container>
+ </Page>
+ }
+
+ return <Page/>;
+}
+
+export default FallbackPage;
diff --git a/src/pages/index.ts b/src/pages/index.ts
index c5f71a3..b4836aa 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -1,3 +1,3 @@
export * from "./internship/proposal";
-export * from "./errors/not-found"
export * from "./main"
+export * from "./fallback"
diff --git a/src/routing.tsx b/src/routing.tsx
index 233b423..f57249d 100644
--- a/src/routing.tsx
+++ b/src/routing.tsx
@@ -2,7 +2,7 @@ import React, { ReactComponentElement } from "react";
import { MainPage } from "@/pages/main";
import { RouteProps } from "react-router-dom";
import { InternshipProposalFormPage, InternshipProposalPreviewPage } from "@/pages/internship/proposal";
-import { NotFoundPage } from "@/pages/errors/not-found";
+import { FallbackPage } from "@/pages/fallback";
import SubmitPlanPage from "@/pages/internship/plan";
import { UserLoginPage } from "@/pages/user/login";
import { RegisterEditionPage } from "@/pages/edition/register";
@@ -28,7 +28,7 @@ export const routes: Route[] = [
{ name: "user_login", path: "/user/login", exact: true, content: () => <UserLoginPage /> },
// fallback route for 404 pages
- { name: "fallback", path: "*", content: () => <NotFoundPage/> }
+ { name: "fallback", path: "*", content: () => <FallbackPage/> }
]
const routeNameMap = new Map(routes.filter(({ name }) => !!name).map(({ name, path }) => [name, path instanceof Array ? path[0] : path])) as Map<string, string>
diff --git a/src/styles/header.scss b/src/styles/header.scss
index 9750554..60f2400 100644
--- a/src/styles/header.scss
+++ b/src/styles/header.scss
@@ -45,12 +45,56 @@
.header__nav {
flex: 1 1 auto;
+ display: flex;
+ flex-direction: column;
}
.header__top .header__menu {
margin-right: auto;
}
+.header__bottom {
+ display: flex;
+ flex: 1 1 auto;
+}
+
+.header__menu--main {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ font-size: 1.25rem;
+ padding-left: 0.75rem;
+
+ > li {
+ display: flex;
+
+ > a {
+ padding: 16px;
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ position: relative;
+
+ &:hover {
+ background: $brand;
+
+ &::before {
+ display: block;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 4px;
+ position: absolute;
+ background: white;
+ content: '';
+ }
+ }
+ }
+ }
+}
+
.header__language-switcher {
padding: 0;
display: flex;