From a3db797a0606eac58d3454b080c805b48c4810d5 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Tue, 21 Jul 2020 22:19:52 +0200 Subject: [PATCH] Add more steps --- package.json | 1 + src/app.tsx | 7 +-- src/data/internship.ts | 1 - src/i18n.ts | 6 ++ src/pages/errors/not-found.tsx | 22 ++++++++ src/pages/index.ts | 3 + src/pages/internship/proposal.tsx | 23 ++++++++ src/pages/main.tsx | 91 ++++++++++++++----------------- src/routing.tsx | 16 +++--- translations/en.yaml | 6 +- translations/pl.yaml | 10 ++++ yarn.lock | 7 +++ 12 files changed, 129 insertions(+), 64 deletions(-) create mode 100644 src/pages/errors/not-found.tsx create mode 100644 src/pages/index.ts create mode 100644 src/pages/internship/proposal.tsx diff --git a/package.json b/package.json index 4557da7..5fe314f 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@babel/preset-typescript": "^7.10.1", "@date-io/moment": "^1.3.13", "@material-ui/core": "^4.10.1", + "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.55", "@material-ui/pickers": "^3.2.10", "@types/classnames": "^2.2.10", diff --git a/src/app.tsx b/src/app.tsx index d8bc08c..a334733 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -12,18 +12,12 @@ import { AppState } from "@/state/reducer"; import { StudentAction, StudentActions } from "@/state/actions/student"; import { sampleStudent } from "@/provider/dummy/student"; import { Trans, useTranslation } from "react-i18next"; -import { StudentState } from "@/state/reducer/student"; import { Student } from "@/data"; - -import "moment/locale/pl" import '@/styles/overrides.scss' import '@/styles/header.scss' import classNames from "classnames"; -import { Button } from "@material-ui/core"; import { PersistGate } from 'redux-persist/integration/react'; -moment.locale("pl") - class LocalizedMomentUtils extends MomentUtils { getDatePickerHeaderText(date: Moment): string { return this.format(date, "d MMM yyyy"); @@ -65,6 +59,7 @@ const LanguageSwitcher = ({ className, ...props }: HTMLProps) const handleLanguageChange = (language: string) => () => { i18n.changeLanguage(language); document.documentElement.lang = language; + moment.locale(language) } const isActive = (language: string) => language.toLowerCase() === i18n.language.toLowerCase(); diff --git a/src/data/internship.ts b/src/data/internship.ts index b80258f..4961e27 100644 --- a/src/data/internship.ts +++ b/src/data/internship.ts @@ -1,6 +1,5 @@ import { Moment } from "moment"; import { Identifiable } from "./common"; -import { countWorkingWeeksInRange } from "@/utils/date"; import { Student } from "@/data/student"; import { Company } from "@/data/company"; diff --git a/src/i18n.ts b/src/i18n.ts index 3dc605e..4f8c6a2 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -2,6 +2,11 @@ import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector"; +import moment from "moment"; + +import "moment/locale/pl" +import "moment/locale/en-gb" + const resources = { en: { translation: require('../translations/en.yaml'), @@ -23,5 +28,6 @@ i18n }) document.documentElement.lang = i18n.language; +moment.locale(i18n.language) export default i18n; diff --git a/src/pages/errors/not-found.tsx b/src/pages/errors/not-found.tsx new file mode 100644 index 0000000..0f6456b --- /dev/null +++ b/src/pages/errors/not-found.tsx @@ -0,0 +1,22 @@ +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/index.ts b/src/pages/index.ts new file mode 100644 index 0000000..c5f71a3 --- /dev/null +++ b/src/pages/index.ts @@ -0,0 +1,3 @@ +export * from "./internship/proposal"; +export * from "./errors/not-found" +export * from "./main" diff --git a/src/pages/internship/proposal.tsx b/src/pages/internship/proposal.tsx new file mode 100644 index 0000000..00e233c --- /dev/null +++ b/src/pages/internship/proposal.tsx @@ -0,0 +1,23 @@ +import { Page } from "@/pages/base"; +import { Container, Link, Typography } from "@material-ui/core"; +import { Link as RouterLink } from "react-router-dom"; +import { route } from "@/routing"; +import { InternshipForm } from "@/forms/Internship"; +import React from "react"; + +export const InternshipProposalPage = () => { + return + + + Moja praktyka + Zgłoszenie praktyki + + Zgłoszenie praktyki + + + + + +} + +export default InternshipProposalPage; diff --git a/src/pages/main.tsx b/src/pages/main.tsx index 9bf4978..a2c371f 100644 --- a/src/pages/main.tsx +++ b/src/pages/main.tsx @@ -1,65 +1,58 @@ -import React from "react"; +import React, { useMemo } from "react"; import { Page } from "@/pages/base"; -import { Container, Typography, Button, Divider, Box, Stepper, Step, StepLabel, StepContent, Link } from "@material-ui/core"; -import { InternshipForm } from "@/forms/Internship"; +import { Box, Button, Container, Step as StepperStep, StepContent, StepLabel, Stepper, StepProps as StepperStepProps, Typography } from "@material-ui/core"; import { Link as RouterLink } from "react-router-dom"; import { route } from "@/routing"; import { useTranslation } from "react-i18next"; +import moment, { Moment } from "moment"; + +type StepProps = StepperStepProps & { + until?: Moment; + completedOn?: Moment; + label: string; +} + +const now = moment(); + +const Step = ({ until, label, completedOn, children, completed, ...props }: StepProps) => { + const { t } = useTranslation(); + + const isLate = useMemo(() => until?.isBefore(completedOn || now), [completedOn, until]); + const left = useMemo(() => moment.duration(now.diff(until)), [until]); + + return + + { label } + { until && + + { t('until', { date: until.format("DD MMMM YYYY") }) } + { isLate && - { t('late', { by: moment.duration(now.diff(until)).humanize() }) } } + { !isLate && !completed && - { t('left', { left: left.humanize() }) } } + + } + + { children && { children } } + +} export const MainPage = () => { const { t } = useTranslation(); - return + return { t("sections.my-internship.header") } - - - { t('steps.personal-data.header') } - - { t('until', { date: '05.07.2020' }) } - - - - - { t('steps.internship-proposal.header')} - - - + + + + + + + } - -export const InternshipFormPage = () => { - return - - - Moja praktyka - Zgłoszenie praktyki - - Zgłoszenie praktyki - - - - - -} - -export const NotFoundPage = () => { - return - - 404 - Strona nie została znaleziona - - - - - - - - -} diff --git a/src/routing.tsx b/src/routing.tsx index 2137bfa..d2a2274 100644 --- a/src/routing.tsx +++ b/src/routing.tsx @@ -1,6 +1,8 @@ import React, { ReactComponentElement } from "react"; -import { InternshipFormPage, MainPage, NotFoundPage } from "@/pages/main"; +import { MainPage } from "@/pages/main"; import { RouteProps } from "react-router-dom"; +import { InternshipProposalPage } from "@/pages/internship/proposal"; +import { NotFoundPage } from "@/pages/errors/not-found"; type Route = { name?: string; @@ -8,18 +10,18 @@ type Route = { } & RouteProps; export const routes: Route[] = [ - { name: "home", path: "/", exact: true, content: () => }, + { name: "home", path: "/", exact: true, content: () => }, - { name: "internship_proposal", path: "/internship/proposal", exact: true, content: () => }, + { name: "internship_proposal", path: "/internship/proposal", exact: true, content: () => }, // fallback route for 404 pages - { 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 +const routeNameMap = new Map(routes.filter(({ name }) => !!name).map(({ name, path }) => [name, path instanceof Array ? path[0] : path])) as Map -export function route(name: string, params: { [param: string]: string } = { }) { +export function route(name: string, params: { [param: string]: string } = {}) { const url = routeNameMap.get(name) || ""; - return Object.entries(params).reduce((url, [name, value]) => url.replace(`:${name}`, value), url); + return Object.entries(params).reduce((url, [name, value]) => url.replace(`:${ name }`, value), url); } diff --git a/translations/en.yaml b/translations/en.yaml index cfec6f8..d0bc877 100644 --- a/translations/en.yaml +++ b/translations/en.yaml @@ -4,6 +4,8 @@ logout: logout logged-in-as: logged in as <1>{{ name }} until: until {{ date }} +late: late by {{ by }} +left: '{{ left }} left' sections: my-internship: @@ -11,7 +13,9 @@ sections: steps: personal-data: - header: "Personal data" + header: "Fill personal data" internship-proposal: header: "Internship proposal" form: "Internship proposal form" + plan: + header: "Individual Internship Plan" diff --git a/translations/pl.yaml b/translations/pl.yaml index 7c1bcbf..b931255 100644 --- a/translations/pl.yaml +++ b/translations/pl.yaml @@ -4,6 +4,8 @@ logout: wyloguj się logged-in-as: zalogowany jako <1>{{ name }} until: do {{ date }} +late: '{{ by }} spóźnienia' +left: jeszcze {{ left }} sections: my-internship: @@ -15,3 +17,11 @@ steps: internship-proposal: header: "Zgłoszenie praktyki" form: "Formularz zgłaszania praktyki" + plan: + header: "Indywidualny Program Praktyki" + report: + header: "Raport z praktyki" + grade: + header: "Ocena z praktyki" + insurance: + header: "Ubezpieczenie NWW" diff --git a/yarn.lock b/yarn.lock index 225a9da..a96ad63 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1043,6 +1043,13 @@ react-is "^16.8.0" react-transition-group "^4.4.0" +"@material-ui/icons@^4.9.1": + version "4.9.1" + resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.9.1.tgz#fdeadf8cb3d89208945b33dbc50c7c616d0bd665" + integrity sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/lab@^4.0.0-alpha.55": version "4.0.0-alpha.55" resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.55.tgz#82a850dc59654e04ee3a31be1b34eb3bf64d5585"