diff --git a/src/components/actions.tsx b/src/components/actions.tsx index 34357c3..b2e090e 100644 --- a/src/components/actions.tsx +++ b/src/components/actions.tsx @@ -2,7 +2,7 @@ import React, { HTMLProps } from "react"; import { useHorizontalSpacing } from "@/styles"; export const Actions = (props: HTMLProps<HTMLDivElement>) => { - const classes = useHorizontalSpacing(1); + const classes = useHorizontalSpacing(2); return <div className={ classes.root } { ...props }/> } diff --git a/src/components/proposalPreview.tsx b/src/components/proposalPreview.tsx index d0b8870..f57798f 100644 --- a/src/components/proposalPreview.tsx +++ b/src/components/proposalPreview.tsx @@ -1,12 +1,9 @@ import { Internship, internshipTypeLabels } from "@/data"; import React from "react"; -import { Button, Paper, PaperProps, Typography, TypographyProps } from "@material-ui/core"; +import { Paper, PaperProps, Typography, TypographyProps } from "@material-ui/core"; import { useTranslation } from "react-i18next"; import { createStyles, makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; -import { Link as RouterLink } from "react-router-dom"; -import { route } from "@/routing"; -import { Actions } from "@/components/actions"; import { useVerticalSpacing } from "@/styles"; import moment from "moment"; @@ -74,7 +71,7 @@ export const ProposalPreview = ({ proposal }: ProposalPreviewProps) => { { t('internship.date-range', { start: proposal.startDate, end: proposal.endDate }) } </Typography> <Typography className="proposal__secondary"> - { t('internship.duration', { duration }) } + { t('internship.duration', { duration, count: Math.floor(duration.asWeeks()) }) } { ", " } { t('internship.hours', { hours: proposal.hours }) } </Typography> @@ -85,11 +82,5 @@ export const ProposalPreview = ({ proposal }: ProposalPreviewProps) => { <Typography className="proposal__primary">{ proposal.mentor.name } { proposal.mentor.surname }</Typography> <Typography className="proposal__secondary">{ proposal.mentor.email }, { proposal.mentor.phone }</Typography> </Section> - - <Actions> - <Button component={ RouterLink } to={ route("home") } variant="contained" color="primary"> - { t('go-back') } - </Button> - </Actions> </div> } diff --git a/src/i18n.ts b/src/i18n.ts index c01bc57..84cc091 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -4,7 +4,7 @@ import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector"; import "moment/locale/pl" import "moment/locale/en-gb" -import moment, { isDuration, isMoment } from "moment"; +import moment, { isDuration, isMoment, unitOfTime } from "moment"; import { convertToRoman } from "@/utils/numbers"; const resources = { @@ -22,6 +22,7 @@ i18n .init({ resources, fallbackLng: "pl", + compatibilityJSON: "v3", interpolation: { escapeValue: false, format: (value, format, lng) => { @@ -34,7 +35,11 @@ i18n } if (isDuration(value)) { - return value.locale(lng || "pl").humanize(); + if (format === "humanize") { + return value.locale(lng || "pl").humanize(); + } else { + return Math.floor(value.locale(lng || "pl").as(format as unitOfTime.Base)); + } } return value; diff --git a/src/pages/internship/proposal.tsx b/src/pages/internship/proposal.tsx index 09b8ca8..3e92aea 100644 --- a/src/pages/internship/proposal.tsx +++ b/src/pages/internship/proposal.tsx @@ -1,6 +1,6 @@ import { Page } from "@/pages/base"; -import { Container, Link, Typography } from "@material-ui/core"; -import { Link as RouterLink } from "react-router-dom"; +import { Button, Container, Link, Typography } from "@material-ui/core"; +import { Link as RouterLink, useHistory } from "react-router-dom"; import { route } from "@/routing"; import { InternshipForm } from "@/forms/internship"; import React from "react"; @@ -11,6 +11,10 @@ import { useSelector } from "react-redux"; import { Internship } from "@/data"; import { AppState } from "@/state/reducer"; import { internshipSerializationTransformer } from "@/serialization"; +import { Actions } from "@/components"; +import { InternshipProposalActions, useDispatch } from "@/state/actions"; +import { StickerCheckOutline, StickerRemoveOutline } from "mdi-material-ui/index"; +import { useVerticalSpacing } from "@/styles"; export const InternshipProposalFormPage = () => { return <Page title="Zgłoszenie praktyki"> @@ -32,6 +36,21 @@ export const InternshipProposalPreviewPage = () => { const { t } = useTranslation(); const proposal = useSelector<AppState, Internship | null>(state => state.proposal.proposal && internshipSerializationTransformer.reverseTransform(state.proposal.proposal)); + const dispatch = useDispatch(); + const history = useHistory(); + + const handleAccept = () => { + dispatch({ type: InternshipProposalActions.Approve, comment: null }); + history.push(route("home")); + } + + const handleDiscard = () => { + dispatch({ type: InternshipProposalActions.Decline, comment: "Well..." }); + history.push(route("home")); + } + + const classes = useVerticalSpacing(3); + return <Page title={ t("") }> <Page.Header maxWidth="md"> <Page.Breadcrumbs> @@ -40,9 +59,23 @@ export const InternshipProposalPreviewPage = () => { </Page.Breadcrumbs> <Page.Title>Moje zgłoszenie</Page.Title> </Page.Header> - <Container maxWidth={ "md" }> + <Container maxWidth={ "md" } className={ classes.root }> <ProposalComment /> { proposal && <ProposalPreview proposal={ proposal } /> } + + <Actions> + <Button component={ RouterLink } to={ route("home") } variant="contained" color="primary"> + { t('go-back') } + </Button> + + <Button onClick={ handleAccept } color="primary" startIcon={ <StickerCheckOutline /> }> + { t('accept') } + </Button> + + <Button onClick={ handleDiscard } color="secondary" startIcon={ <StickerRemoveOutline /> }> + { t('discard') } + </Button> + </Actions> </Container> </Page> } diff --git a/translations/pl.yaml b/translations/pl.yaml index c52c43d..1f35c9d 100644 --- a/translations/pl.yaml +++ b/translations/pl.yaml @@ -57,7 +57,9 @@ internship: semester: semestr {{ semester, roman }} album: "numer albumu {{ album }}" date-range: "{{ start, DD MMMM YYYY }} - {{ end, DD MMMM YYYY }}" - duration: "{{ duration, humanize }}" + duration_2: "{{ duration, weeks }} tygodni" + duration_0: "{{ duration, weeks }} tydzień" + duration_1: "{{ count }} tygodnie" hours: "{{ hours }} godzin" office: "Oddział / adres" address: