Add accept and discard actions for proposal

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 }/>
 }

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>
 }

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)) {
+                    if (format === "humanize") {
                         return value.locale(lng || "pl").humanize();
+                    } else {
+                        return Math.floor(value.locale(lng || "pl").as(format as unitOfTime.Base));
+                    }
                 }
 
                 return value;

src/pages/internship/proposal.tsx

@@ -1,6 +1,6 @@
 import { Page } from "@/pages/base";
-import { Container, Link, Typography } from "@material-ui/core";
+import { Button, Container, Link, Typography } from "@material-ui/core";
-import { Link as RouterLink } from "react-router-dom";
+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>
 }

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: