From aa472e12379bc6ebc754de996955de204faf4fa3 Mon Sep 17 00:00:00 2001 From: Kacper Donat 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 = `

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bestiarum vero nullum iudicium puto. Quare ad ea primum, si videtur; Duo Reges: constructio interrete. Eam tum adesse, cum dolor omnis absit; Sed ad bona praeterita redeamus. Facillimum id quidem est, inquam. Apud ceteros autem philosophos, qui quaesivit aliquid, tacet;

+ +

Quorum altera prosunt, nocent altera. Eam stabilem appellas. Sed nimis multa. Quo plebiscito decreta a senatu est consuli quaestio Cn. Sin laboramus, quis est, qui alienae modum statuat industriae? Quod quidem nobis non saepe contingit. Si autem id non concedatur, non continuo vita beata tollitur. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Id est enim, de quo quaerimus.

+ +

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.

+` + +export async function get(slug: string): Promise { + 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() {
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 = { + 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; + content: Multilingual; +} 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 - - 404 - Strona nie została znaleziona - - - - - - - - -} - -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 + } + + if (error) { + return + + 404 + Strona nie została znaleziona + + + + + + + + + } + + if (value) { + return + + { value.title.pl } + + +
+ + + } + + return ; +} + +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: () => }, // fallback route for 404 pages - { name: "fallback", path: "*", content: () => } + { name: "fallback", path: "*", content: () => } ] const routeNameMap = new Map(routes.filter(({ name }) => !!name).map(({ name, path }) => [name, path instanceof Array ? path[0] : path])) as Map 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;