From fb03b892a2f22f1d2b49193cb7d4021a8a3a76b6 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Mon, 10 Aug 2020 20:11:30 +0200 Subject: [PATCH] polish up internship proposal preview --- src/components/actions.tsx | 10 +---- src/components/proposalPreview.tsx | 68 +++++++++++++++++++----------- src/forms/internship.tsx | 8 ++-- src/hooks/useProxyState.ts | 9 ++-- src/serialization/internship.ts | 5 ++- src/styles/index.ts | 1 + src/styles/page.scss | 4 ++ src/styles/spacing.ts | 19 +++++++++ translations/pl.yaml | 3 +- 9 files changed, 84 insertions(+), 43 deletions(-) create mode 100644 src/styles/index.ts create mode 100644 src/styles/spacing.ts diff --git a/src/components/actions.tsx b/src/components/actions.tsx index 5fdb03d..34357c3 100644 --- a/src/components/actions.tsx +++ b/src/components/actions.tsx @@ -1,14 +1,8 @@ import React, { HTMLProps } from "react"; -import { makeStyles } from "@material-ui/core/styles"; +import { useHorizontalSpacing } from "@/styles"; export const Actions = (props: HTMLProps) => { - const classes = makeStyles(theme => ({ - root: { - "& > *": { - marginRight: theme.spacing(1) - } - } - }))(); + const classes = useHorizontalSpacing(1); return
} diff --git a/src/components/proposalPreview.tsx b/src/components/proposalPreview.tsx index 96a5d9b..d0b8870 100644 --- a/src/components/proposalPreview.tsx +++ b/src/components/proposalPreview.tsx @@ -1,9 +1,14 @@ -import { Internship } from "@/data"; +import { Internship, internshipTypeLabels } from "@/data"; import React from "react"; -import { Paper, PaperProps, Typography, TypographyProps } from "@material-ui/core"; +import { Button, 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"; export type ProposalPreviewProps = { proposal: Internship; @@ -16,7 +21,6 @@ const Label = ({ children }: TypographyProps) => { const useSectionStyles = makeStyles(theme => createStyles({ root: { padding: theme.spacing(2), - marginTop: theme.spacing(3) } })) @@ -31,30 +35,19 @@ const Section = ({ children, ...props }: PaperProps) => { export const ProposalPreview = ({ proposal }: ProposalPreviewProps) => { const { t } = useTranslation(); - return
- { proposal.intern.name } { proposal.intern.surname } - - { t('internship.intern.semester', { semester: proposal.intern.semester }) } - { ", " } - { t('internship.intern.album', { album: proposal.intern.albumNumber }) } - + const classes = useVerticalSpacing(3); -
- - { proposal.type } -
+ const duration = moment.duration(proposal.endDate.diff(proposal.startDate)); -
- - - { t('internship.date-range', { start: proposal.startDate, end: proposal.endDate }) } - + return
+
+ { proposal.intern.name } { proposal.intern.surname } - { t('internship.duration', { duration: 0 })} + { t('internship.intern.semester', { semester: proposal.intern.semester }) } { ", " } - { t('internship.hours', { hours: proposal.hours })} + { t('internship.intern.album', { album: proposal.intern.albumNumber }) } -
+
@@ -64,12 +57,39 @@ export const ProposalPreview = ({ proposal }: ProposalPreviewProps) => { NIP: { proposal.company.nip } -
-
{ t('internship.address.city', proposal.office.address) } { t('internship.address.street', proposal.office.address) }
+ +
+ + { internshipTypeLabels[proposal.type].label } +
+ +
+ + + { t('internship.date-range', { start: proposal.startDate, end: proposal.endDate }) } + + + { t('internship.duration', { duration }) } + { ", " } + { t('internship.hours', { hours: proposal.hours }) } + +
+ +
+ + { proposal.mentor.name } { proposal.mentor.surname } + { proposal.mentor.email }, { proposal.mentor.phone } +
+ + + +
} diff --git a/src/forms/internship.tsx b/src/forms/internship.tsx index fb5b9ca..f4d2324 100644 --- a/src/forms/internship.tsx +++ b/src/forms/internship.tsx @@ -182,13 +182,13 @@ export const InternshipForm: React.FunctionComponent = prop return (
- { t('internship.intern-info') } + { t('internship.sections.intern-info') } - { t('internship.kind' )} + { t('internship.sections.kind' )} - { t('internship.duration') } + { t('internship.sections.duration') } - { t('internship.place') } + { t('internship.sections.place') } diff --git a/src/hooks/useProxyState.ts b/src/hooks/useProxyState.ts index 3dd51fa..87b7945 100644 --- a/src/hooks/useProxyState.ts +++ b/src/hooks/useProxyState.ts @@ -1,9 +1,10 @@ -import { Dispatch, SetStateAction, useEffect, useState } from "react"; +import { Dispatch, SetStateAction, useState } from "react"; export function useProxyState(initial: T, setter: (value: T) => void): [T, Dispatch>] { const [value, proxy] = useState(initial); - useEffect(() => setter(value), [ value ]); - - return [value, proxy]; + return [value, (newValue: SetStateAction) => { + proxy(newValue); + setter(typeof newValue === "function" ? (newValue as any)(value) : newValue); + }]; } diff --git a/src/serialization/internship.ts b/src/serialization/internship.ts index be27ddf..9a9f628 100644 --- a/src/serialization/internship.ts +++ b/src/serialization/internship.ts @@ -1,6 +1,7 @@ import { Internship, InternshipType } from "@/data"; import { Serializable, SerializationTransformer } from "@/serialization/types"; import { momentSerializationTransformer } from "@/serialization/moment"; +import { Moment } from "moment"; export const internshipSerializationTransformer: SerializationTransformer = { transform: (internship: Internship): Serializable => ({ @@ -10,8 +11,8 @@ export const internshipSerializationTransformer: SerializationTransformer): Internship => ({ ...serialized, - startDate: momentSerializationTransformer.reverseTransform(serialized.startDate), - endDate: momentSerializationTransformer.reverseTransform(serialized.endDate), + startDate: momentSerializationTransformer.reverseTransform(serialized.startDate) as Moment, + endDate: momentSerializationTransformer.reverseTransform(serialized.endDate) as Moment, type: serialized.type as InternshipType, }), } diff --git a/src/styles/index.ts b/src/styles/index.ts new file mode 100644 index 0000000..c7b6bdf --- /dev/null +++ b/src/styles/index.ts @@ -0,0 +1 @@ +export * from "./spacing" diff --git a/src/styles/page.scss b/src/styles/page.scss index f81763a..f6a1b68 100644 --- a/src/styles/page.scss +++ b/src/styles/page.scss @@ -16,3 +16,7 @@ .proposal__primary { font-size: 1.675rem; } + +.proposal__header:not(:first-child) { + margin-top: 1rem; +} diff --git a/src/styles/spacing.ts b/src/styles/spacing.ts new file mode 100644 index 0000000..dc8863d --- /dev/null +++ b/src/styles/spacing.ts @@ -0,0 +1,19 @@ +import { createStyles, makeStyles } from "@material-ui/core/styles"; + +const defaultSpacing: number = 3; + +export const useVerticalSpacing = makeStyles(theme => createStyles({ + root: { + "& > *:not(:last-child)": { + marginBottom: (spacing: number = defaultSpacing) => theme.spacing(spacing) + } + } +})) + +export const useHorizontalSpacing = makeStyles(theme => createStyles({ + root: { + "& > *:not(:last-child)": { + marginRight: (spacing: number = defaultSpacing) => theme.spacing(spacing) + } + } +})) diff --git a/translations/pl.yaml b/translations/pl.yaml index ac7d8dd..c52c43d 100644 --- a/translations/pl.yaml +++ b/translations/pl.yaml @@ -57,7 +57,7 @@ internship: semester: semestr {{ semester, roman }} album: "numer albumu {{ album }}" date-range: "{{ start, DD MMMM YYYY }} - {{ end, DD MMMM YYYY }}" - duration: "{{ duration, humanize }} tygodni" + duration: "{{ duration, humanize }}" hours: "{{ hours }} godzin" office: "Oddział / adres" address: @@ -68,6 +68,7 @@ internship: duration: "Czas trwania praktyki" place: "Miejsce odbywania praktyki" kind: "Rodzaj i program praktyki" + mentor: "Zakładowy opiekun praktyki" steps: