system-praktyk/system-praktyk-front
2
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Add validation based on formik and Yup

Browse Source
This commit is contained in:
Kacper Donat 2020-08-17 23:19:56 +02:00
parent 99e12f7681
commit 1857785c84
11 changed files with 347 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/data/company.ts
View File

@ -12,10 +12,10 @@ export interface Company extends Identifiable {
name: string;
url?: string;
nip: string;
offices: BranchOffice[];
offices: Office[];
}
export interface BranchOffice extends Identifiable {
export interface Office extends Identifiable {
address: Address;
}
@ -34,7 +34,7 @@ export const emptyAddress: Address = {
building: ""
}
export const emptyBranchOffice: BranchOffice = {
export const emptyBranchOffice: Office = {
address: emptyAddress,
}

2
src/data/edition.ts
View File

@ -4,6 +4,8 @@ export type Edition = {
startDate: Moment;
endDate: Moment;
proposalDeadline: Moment;
minimumInternshipHours: number;
maximumInternshipHours?: number;
}
export type Deadlines = {

4
src/data/internship.ts
View File

@ -1,7 +1,7 @@
import { Moment } from "moment";
import { Identifiable } from "./common";
import { Student } from "@/data/student";
import { BranchOffice, Company } from "@/data/company";
import { Company, Office } from "@/data/company";
export enum InternshipType {
FreeInternship = "FreeInternship",
@ -64,7 +64,7 @@ export interface Internship extends Identifiable {
hours: number;
mentor: Mentor;
company: Company;
office: BranchOffice;
office: Office;
}
export interface Plan extends Identifiable {

173
src/forms/company.tsx
View File

@ -1,23 +1,13 @@
import React, { HTMLProps, useMemo } from "react";
import { BranchOffice, Company, emptyAddress, emptyBranchOffice, emptyCompany, formatAddress, Mentor } from "@/data";
import { Company, formatAddress, Office } from "@/data";
import { sampleCompanies } from "@/provider/dummy";
import { Autocomplete } from "@material-ui/lab";
import { Grid, TextField, Typography } from "@material-ui/core";
import { BoundProperty, formFieldProps } from "./helpers";
import { InternshipFormSectionProps } from "@/forms/internship";
import { emptyMentor } from "@/provider/dummy/internship";
import { useProxyState } from "@/hooks";
import { InternshipFormValues } from "@/forms/internship";
import { useTranslation } from "react-i18next";
import { Field } from "formik";
import { Field, useFormikContext } from "formik";
import { TextField as TextFieldFormik } from "formik-material-ui"
export type CompanyFormProps = {} & InternshipFormSectionProps;
export type BranchOfficeProps = {
disabled?: boolean;
offices?: BranchOffice[];
} & BoundProperty<BranchOffice, "onChange", "value">
export const CompanyItem = ({ company, ...props }: { company: Company } & HTMLProps<any>) => (
<div className="company-item" { ...props }>
<div>{ company.name }</div>
@ -25,43 +15,65 @@ export const CompanyItem = ({ company, ...props }: { company: Company } & HTMLPr
</div>
)
export const OfficeItem = ({ office, ...props }: { office: BranchOffice } & HTMLProps<any>) => (
export const OfficeItem = ({ office, ...props }: { office: Office } & HTMLProps<any>) => (
<div className="office-item" { ...props }>
<div>{ office.address.city }</div>
<Typography variant="caption">{ formatAddress(office.address) }</Typography>
</div>
)
export const BranchForm: React.FC<BranchOfficeProps> = ({ value: office, onChange: setOffice, offices = [], disabled = false }) => {
const canEdit = useMemo(() => !office.id && !disabled, [office.id, disabled]);
const fieldProps = formFieldProps(office.address, address => setOffice({ ...office, address }))
export const BranchForm: React.FC = () => {
const { values, errors, setValues, touched, setFieldTouched } = useFormikContext<InternshipFormValues>();
const { t } = useTranslation();
const handleCityChange = (event: any, value: BranchOffice | string | null) => {
const disabled = useMemo(() => !values.companyName, [values.companyName]);
const offices = useMemo(() => values.company?.offices || [], [values.company]);
const canEdit = useMemo(() => !values.office && !disabled, [values.office, disabled]);
const handleCityChange = (event: any, value: Office | string | null) => {
if (typeof value === "string") {
setOffice({
...emptyBranchOffice,
address: {
...emptyAddress,
city: value,
}
});
setValues({
...values,
office: null,
city: value,
}, true);
} else if (typeof value === "object" && value !== null) {
setOffice(value);
} else {
setOffice(emptyBranchOffice);
const office = value as Office;
setValues({
...values,
office,
city: office.address.city,
country: office.address.country,
street: office.address.street,
building: office.address.building,
postalCode: office.address.postalCode,
}, true)
} else { // null
setValues({
...values,
office: null,
city: "",
country: "",
street: "",
building: "",
postalCode: "",
}, true)
}
}
const handleCityInput = (event: any, value: string) => {
const base = office.id ? emptyBranchOffice : office;
setOffice({
...base,
address: {
...base.address,
city: value,
}
})
setValues( {
...values,
office: null,
...(values.office ? {
country: "",
street: "",
building: "",
postalCode: "",
} : { }),
city: value,
}, true);
}
return (
@ -72,25 +84,34 @@ export const BranchForm: React.FC<BranchOfficeProps> = ({ value: office, onChang
disabled={ disabled }
getOptionLabel={ office => typeof office == "string" ? office : office.address.city }
renderOption={ office => <OfficeItem office={ office }/> }
renderInput={ props => <TextField { ...props } label={ t("forms.internship.fields.city") } fullWidth/> }
renderInput={
props =>
<TextField { ...props }
label={ t("forms.internship.fields.city") }
fullWidth
error={ touched.city && !!errors.city }
helperText={ touched.city && errors.city }
/>
}
onChange={ handleCityChange }
onInputChange={ handleCityInput }
inputValue={ office.address.city }
value={ office.id ? office : null }
onBlur={ ev => setFieldTouched("city", true) }
inputValue={ values.city }
value={ values.office ? values.office : null }
freeSolo
/>
</Grid>
<Grid item md={ 2 }>
<TextField label={ t("forms.internship.fields.postal-code") } fullWidth disabled={ !canEdit } { ...fieldProps("postalCode") }/>
<Field label={ t("forms.internship.fields.postal-code") } name="postalCode" fullWidth disabled={ !canEdit } component={ TextFieldFormik }/>
</Grid>
<Grid item md={ 3 }>
<TextField label={ t("forms.internship.fields.country") } fullWidth disabled={ !canEdit } { ...fieldProps("country") }/>
<Field label={ t("forms.internship.fields.country") } name="country" fullWidth disabled={ !canEdit } component={ TextFieldFormik }/>
</Grid>
<Grid item md={ 10 }>
<TextField label={ t("forms.internship.fields.street") } fullWidth disabled={ !canEdit } { ...fieldProps("street") }/>
<Field label={ t("forms.internship.fields.street") } name="street" fullWidth disabled={ !canEdit } component={ TextFieldFormik }/>
</Grid>
<Grid item md={ 2 }>
<TextField label={ t("forms.internship.fields.building") } fullWidth disabled={ !canEdit } { ...fieldProps("building") }/>
<Field label={ t("forms.internship.fields.building") } name="building" fullWidth disabled={ !canEdit } component={ TextFieldFormik }/>
</Grid>
</Grid>
</div>
@ -102,42 +123,50 @@ export const MentorForm = () => {
return (
<Grid container>
<Grid item md={6}>
<Field name="mentorFirstName" label={ t("forms.internship.fields.first-name") } fullWidth component={ TextFieldFormik } />
<Grid item md={ 6 }>
<Field name="mentorFirstName" label={ t("forms.internship.fields.first-name") } fullWidth component={ TextFieldFormik }/>
</Grid>
<Grid item md={6}>
<Field name="mentorLastName" label={ t("forms.internship.fields.last-name") } fullWidth component={ TextFieldFormik } />
<Grid item md={ 6 }>
<Field name="mentorLastName" label={ t("forms.internship.fields.last-name") } fullWidth component={ TextFieldFormik }/>
</Grid>
<Grid item md={8}>
<Field name="mentorEmail" label={ t("forms.internship.fields.e-mail") } fullWidth component={ TextFieldFormik } />
<Grid item md={ 8 }>
<Field name="mentorEmail" label={ t("forms.internship.fields.e-mail") } fullWidth component={ TextFieldFormik }/>
</Grid>
<Grid item md={4}>
<Field name="mentorPhone" label={ t("forms.internship.fields.phone") } fullWidth component={ TextFieldFormik } />
<Grid item md={ 4 }>
<Field name="mentorPhone" label={ t("forms.internship.fields.phone") } fullWidth component={ TextFieldFormik }/>
</Grid>
</Grid>
);
}
export const CompanyForm: React.FunctionComponent<CompanyFormProps> = ({ internship, onChange }) => {
const [company, setCompany] = useProxyState<Company>(internship.company || emptyCompany, company => onChange({ ...internship, company }));
const [mentor, setMentor] = useProxyState<Mentor>(internship.mentor || emptyMentor, mentor => onChange({ ...internship, mentor }));
const [office, setOffice] = useProxyState<BranchOffice>(internship.office || emptyBranchOffice, office => onChange({ ...internship, office }));
export const CompanyForm: React.FunctionComponent = () => {
const { values, setValues, errors, touched, setFieldTouched } = useFormikContext<InternshipFormValues>();
const { t } = useTranslation();
const canEdit = useMemo(() => !company.id, [company.id]);
const fieldProps = formFieldProps(company, setCompany)
const canEdit = useMemo(() => !values.company, [values.company]);
const handleCompanyChange = (event: any, value: Company | string | null) => {
setFieldTouched("companyName", true);
if (typeof value === "string") {
setCompany({
...emptyCompany,
name: value,
});
setValues({
...values,
company: null,
companyName: value
}, true)
} else if (typeof value === "object" && value !== null) {
setCompany(value);
setValues({
...values,
company: value as Company,
companyName: value.name,
companyNip: value.nip,
}, true)
} else {
setCompany(emptyCompany);
setValues({
...values,
company: null,
companyName: "",
}, true);
}
}
@ -146,24 +175,22 @@ export const CompanyForm: React.FunctionComponent<CompanyFormProps> = ({ interns
<Grid container>
<Grid item>
<Autocomplete options={ sampleCompanies }
getOptionLabel={ option => option.name }
getOptionLabel={ option => typeof option === "string" ? option : option.name }
renderOption={ company => <CompanyItem company={ company }/> }
renderInput={ props => <TextField { ...props } label={ t("forms.internship.fields.company-name") } fullWidth/> }
onChange={ handleCompanyChange } value={ company }
renderInput={ props => <TextField { ...props } label={ t("forms.internship.fields.company-name") } fullWidth
error={ touched.companyName && !!errors.companyName } helperText={ touched.companyName && errors.companyName }/> }
onChange={ handleCompanyChange } value={ values.company || values.companyName }
freeSolo
/>
</Grid>
<Grid item md={ 4 }>
<TextField label={ t("forms.internship.fields.nip") } fullWidth { ...fieldProps("nip") } disabled={ !canEdit }/>
<Field label={ t("forms.internship.fields.nip") } fullWidth name="companyNip" disabled={ !canEdit } component={ TextFieldFormik }/>
</Grid>
{/*<Grid item md={ 8 }>*/}
{/* <TextField label={ "Url" } fullWidth { ...fieldProps("url") } disabled={ !canEdit }/>*/}
{/*</Grid>*/}
</Grid>
<Typography variant="subtitle1" className="subsection-header">{ t("internship.mentor") }</Typography>
<MentorForm />
<MentorForm/>
<Typography variant="subtitle1" className="subsection-header">{ t("internship.office") }</Typography>
<BranchForm value={ office } onChange={ setOffice } offices={ company.offices } />
<BranchForm/>
</>
)
}

315
src/forms/internship.tsx
View File

@ -1,15 +1,14 @@
import React, { HTMLProps, useEffect, useMemo, useState } from "react";
import React, { HTMLProps, useMemo, useState } from "react";
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, Grid, TextField, Typography } from "@material-ui/core";
import { KeyboardDatePicker as DatePicker } from "@material-ui/pickers";
import { CompanyForm } from "@/forms/company";
import { StudentForm } from "@/forms/student";
import { sampleStudent } from "@/provider/dummy/student";
import { BranchOffice, Company, Internship, InternshipType, internshipTypeLabels, Student } from "@/data";
import { Company, Internship, InternshipType, internshipTypeLabels, Office, Student } from "@/data";
import { Nullable } from "@/helpers";
import moment, { Moment } from "moment";
import { computeWorkingHours } from "@/utils/date";
import { Autocomplete } from "@material-ui/lab";
import { formFieldProps } from "@/forms/helpers";
import { emptyInternship } from "@/provider/dummy/internship";
import { InternshipProposalActions, useDispatch } from "@/state/actions";
import { useTranslation } from "react-i18next";
@ -17,28 +16,26 @@ import { useSelector } from "react-redux";
import { AppState } from "@/state/reducer";
import { Link as RouterLink, useHistory } from "react-router-dom";
import { route } from "@/routing";
import { useProxyState } from "@/hooks";
import { getInternshipProposal } from "@/state/reducer/proposal";
import { Actions } from "@/components";
import { Form, Formik } from "formik";
import { Field, Form, Formik, useFormikContext } from "formik";
import * as Yup from "yup";
import { Transformer } from "@/serialization";
import { TextField as TextFieldFormik } from "formik-material-ui"
import { Edition } from "@/data/edition";
import { useUpdateEffect } from "@/hooks";
export type InternshipFormProps = {}
export type InternshipFormSectionProps = {
internship: Nullable<Internship>,
onChange: (internship: Nullable<Internship>) => void,
}
export type InternshipFormState = {
export type InternshipFormValues = {
startDate: Moment | null;
endDate: Moment | null;
hours: number | null;
hours: number | "";
workingHours: number;
companyName: string;
companyNip: string;
city: string;
postalCode: string;
country: string;
street: string;
building: string;
mentorFirstName: string;
mentorLastName: string;
@ -49,19 +46,20 @@ export type InternshipFormState = {
// relations
kind: InternshipType | null;
company: Company | null;
office: BranchOffice | null;
student: Student | null;
office: Office | null;
student: Student;
}
const emptyInternshipValues: InternshipFormState = {
const emptyInternshipValues: InternshipFormValues = {
building: "",
city: "",
company: null,
companyName: "",
companyNip: "",
country: "",
street: "",
endDate: null,
hours: null,
hours: "",
kind: null,
kindOther: "",
mentorEmail: "",
@ -71,7 +69,8 @@ const emptyInternshipValues: InternshipFormState = {
office: null,
postalCode: "",
startDate: null,
student: null
student: sampleStudent,
workingHours: 40,
}
export const InternshipTypeItem = ({ type, ...props }: { type: InternshipType } & HTMLProps<any>) => {
@ -85,89 +84,94 @@ export const InternshipTypeItem = ({ type, ...props }: { type: InternshipType }
)
}
const InternshipProgramForm = ({ internship, onChange }: InternshipFormSectionProps) => {
const fieldProps = formFieldProps(internship, onChange);
const InternshipProgramForm = () => {
const { t } = useTranslation();
const { values, handleBlur, setFieldValue, errors } = useFormikContext<InternshipFormValues>();
return (
<Grid container>
<Grid item md={ 4 }>
<Autocomplete renderInput={ props => <TextField { ...props } label={ t("forms.internship.fields.kind") } fullWidth/> }
<Autocomplete renderInput={ props => <TextField { ...props } label={ t("forms.internship.fields.kind") } fullWidth error={ !!errors.kind } helperText={ errors.kind }/> }
getOptionLabel={ (option: InternshipType) => internshipTypeLabels[option].label }
renderOption={ (option: InternshipType) => <InternshipTypeItem type={ option }/> }
options={ Object.values(InternshipType) as InternshipType[] }
disableClearable
{ ...fieldProps("type", (event, value) => value) as any }
value={ values.kind || undefined }
onChange={ (_, value) => setFieldValue("kind", value) }
onBlur={ handleBlur }
/>
</Grid>
<Grid item md={ 8 }>
{ internship.type === InternshipType.Other && <TextField label={ t("forms.internship.fields.kind") } fullWidth/> }
{
values.kind === InternshipType.Other &&
<Field label={ t("forms.internship.fields.kind-other") } name="kindOther" fullWidth component={ TextFieldFormik } />
}
</Grid>
{/*<Grid item>*/ }
{/* <FormGroup>*/ }
{/* <FormLabel component="legend" className="subsection-header">Realizowane punkty programu praktyk (minimum 3)</FormLabel>*/ }
{/* { course.possibleProgramEntries.map(entry => {*/ }
{/* return (*/ }
{/* <FormControlLabel label={ entry.description } key={ entry.id }*/ }
{/* control={ <Checkbox /> }*/ }
{/* />*/ }
{/* )*/ }
{/* }) }*/ }
{/* </FormGroup>*/ }
{/*</Grid>*/ }
</Grid>
)
}
const InternshipDurationForm = ({ internship, onChange }: InternshipFormSectionProps) => {
const InternshipDurationForm = () => {
const { t } = useTranslation();
const [startDate, setStartDate] = useProxyState<Moment | null>(internship.startDate, value => onChange({ ...internship, startDate: value }));
const [endDate, setEndDate] = useProxyState<Moment | null>(internship.endDate, value => onChange({ ...internship, endDate: value }));
const {
values: { startDate, endDate, workingHours },
errors,
touched,
setFieldTouched,
setFieldValue
} = useFormikContext<InternshipFormValues>();
const [overrideHours, setHoursOverride] = useState<number | null>(null)
const [workingHours, setWorkingHours] = useState<number>(40)
const computedHours = useMemo(() => startDate && endDate && computeWorkingHours(startDate, endDate, workingHours / 5), [startDate, endDate, workingHours]);
const hours = useMemo(() => overrideHours !== null ? overrideHours : computedHours || null, [overrideHours, computedHours]);
const weeks = useMemo(() => hours !== null ? Math.floor(hours / 40) : null, [hours]);
const weeks = useMemo(() => hours !== null ? Math.floor(hours / workingHours) : null, [ hours ]);
useEffect(() => onChange({ ...internship, hours }), [hours])
useUpdateEffect(() => {
setFieldTouched("hours", true);
setFieldValue("hours", hours, true);
}, [ hours ]);
return (
<Grid container>
<Grid item md={ 6 }>
<DatePicker value={ startDate } onChange={ setStartDate }
<DatePicker value={ startDate } onChange={ value => setFieldValue("startDate", value) }
format="DD MMMM yyyy"
clearable disableToolbar fullWidth
disableToolbar fullWidth
variant="inline" label={ t("forms.internship.fields.start-date") }
minDate={ moment() }
/>
</Grid>
<Grid item md={ 6 }>
<DatePicker value={ endDate } onChange={ setEndDate }
<DatePicker value={ endDate } onChange={ value => setFieldValue("endDate", value) }
format="DD MMMM yyyy"
clearable disableToolbar fullWidth
disableToolbar fullWidth
variant="inline" label={ t("forms.internship.fields.end-date") }
minDate={ startDate || moment() }
/>
</Grid>
<Grid item md={ 4 }>
<TextField fullWidth label={ t("forms.internship.fields.working-hours") }
value={ workingHours } onChange={ ev => setWorkingHours(parseInt(ev.target.value) || 0) }
helperText={ t("forms.internship.help.working-hours") }
<Field component={ TextFieldFormik }
name="workingHours"
label={ t("forms.internship.fields.working-hours") }
helperText={ t("forms.internship.help.working-hours") }
fullWidth
/>
</Grid>
<Grid item md={ 4 }>
<TextField fullWidth label={ t("forms.internship.fields.total-hours") }
value={ hours } onChange={ ev => setHoursOverride(parseInt(ev.target.value) || 0) }
<TextField fullWidth
label={ t("forms.internship.fields.total-hours") }
error={ !!errors.hours && touched.hours }
helperText={ touched.hours && errors.hours }
value={ hours || "" }
onChange={ ev => setHoursOverride(parseInt(ev.target.value) || 0) }
/>
</Grid>
<Grid item md={ 4 }>
<TextField fullWidth label={ t("forms.internship.fields.weeks") }
value={ weeks } disabled
value={ weeks || "" }
disabled
helperText={ t("forms.internship.help.weeks") }
/>
</Grid>
@ -175,36 +179,86 @@ const InternshipDurationForm = ({ internship, onChange }: InternshipFormSectionP
);
}
export const InternshipForm: React.FunctionComponent<InternshipFormProps> = props => {
const initialInternshipState = useSelector<AppState, Nullable<Internship>>(state => getInternshipProposal(state.proposal) || {
type InternshipConverterContext = {
internship: Internship,
}
const converter: Transformer<Nullable<Internship>, InternshipFormValues, InternshipConverterContext> = {
transform(internship: Nullable<Internship>): InternshipFormValues {
return {
student: internship.intern as Student,
kind: internship.type,
kindOther: "",
startDate: internship.startDate,
endDate: internship.endDate,
hours: internship.hours || "",
building: internship.office?.address?.building || "",
office: internship.office,
city: internship.office?.address?.city || "",
postalCode: internship.office?.address?.postalCode || "",
street: internship.office?.address?.street || "",
country: internship.office?.address?.country || "",
company: internship.company,
companyName: internship.company?.name || "",
companyNip: internship.company?.nip || "",
mentorEmail: internship.mentor?.email || "",
mentorFirstName: internship.mentor?.name || "",
mentorLastName: internship.mentor?.surname || "",
mentorPhone: internship.mentor?.phone || "",
workingHours: 40,
}
},
reverseTransform(form: InternshipFormValues, context: InternshipConverterContext): Nullable<Internship> {
return {
...context.internship,
startDate: form.startDate as Moment,
endDate: form.endDate as Moment,
office: form.office || {
address: {
street: form.street,
postalCode: form.postalCode,
country: form.country,
city: form.city,
building: form.building,
}
},
mentor: {
surname: form.mentorLastName,
name: form.mentorFirstName,
email: form.mentorEmail,
phone: form.mentorPhone,
},
company: form.company || {
name: form.companyName,
nip: form.companyNip,
offices: [],
},
hours: form.hours as number,
type: form.kind as InternshipType,
}
}
}
export const InternshipForm: React.FunctionComponent = () => {
const initialInternship = useSelector<AppState, Nullable<Internship>>(state => getInternshipProposal(state.proposal) || {
...emptyInternship,
office: null,
company: null,
mentor: null,
intern: sampleStudent
});
const [internship, setInternship] = useState<Nullable<Internship>>(initialInternshipState)
const edition = useSelector<AppState, Edition>(state => state.edition as Edition);
const { t } = useTranslation();
const dispatch = useDispatch();
const history = useHistory();
const [confirmDialogOpen, setConfirmDialogOpen] = useState<boolean>(false);
const handleSubmit = () => {
setConfirmDialogOpen(false);
dispatch({ type: InternshipProposalActions.Send, internship: internship as Internship });
history.push(route("home"))
}
const handleSubmitConfirmation = () => {
setConfirmDialogOpen(true);
}
const handleCancel = () => {
setConfirmDialogOpen(false);
}
const validationSchema = Yup.object<Partial<InternshipFormState>>({
const validationSchema = Yup.object<Partial<InternshipFormValues>>({
mentorFirstName: Yup.string().required(t("validation.required")),
mentorLastName: Yup.string().required(t("validation.required")),
mentorEmail: Yup.string()
@ -214,39 +268,94 @@ export const InternshipForm: React.FunctionComponent<InternshipFormProps> = prop
.required(t("validation.required"))
.matches(/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/, t("validation.phone")),
hours: Yup.number()
.min(40, t("validation.internship.minimum-hours")) // todo: take it from edition
.min(edition.minimumInternshipHours, t("validation.internship.minimum-hours", { hours: edition.minimumInternshipHours })),
companyName: Yup.string().when("company", {
is: null,
then: Yup.string().required(t("validation.required"))
}),
companyNip: Yup.string().when("company", {
is: null,
then: Yup.string()
.required(t("validation.required"))
}),
street: Yup.string().required(t("validation.required")),
country: Yup.string().required(t("validation.required")),
city: Yup.string().required(t("validation.required")),
postalCode: Yup.string().required(t("validation.required")),
building: Yup.string().required(t("validation.required")),
kindOther: Yup.string().when("kind", {
is: (values: InternshipFormValues) => values?.kind !== InternshipType.Other,
then: Yup.string().required(t("validation.required"))
})
})
const values = converter.transform(initialInternship);
const handleSubmit = (values: InternshipFormValues) => {
setConfirmDialogOpen(false);
dispatch({
type: InternshipProposalActions.Send,
internship: converter.reverseTransform(values, {
internship: initialInternship as Internship,
}) as Internship
});
history.push(route("home"))
}
const InnerForm = () => {
const { submitForm, validateForm } = useFormikContext();
const handleSubmitConfirmation = async () => {
const errors = await validateForm();
if (Object.keys(errors).length == 0) {
setConfirmDialogOpen(true);
}
}
const handleCancel = () => {
setConfirmDialogOpen(false);
}
return <Form>
<Typography variant="h3" className="section-header">{ t('internship.sections.intern-info') }</Typography>
<StudentForm />
<Typography variant="h3" className="section-header">{ t('internship.sections.kind' )}</Typography>
<InternshipProgramForm />
<Typography variant="h3" className="section-header">{ t('internship.sections.duration') }</Typography>
<InternshipDurationForm />
<Typography variant="h3" className="section-header">{ t('internship.sections.place') }</Typography>
<CompanyForm />
<Actions>
<Button variant="contained" color="primary" onClick={ handleSubmitConfirmation }>{ t("confirm") }</Button>
<Button component={ RouterLink } to={ route("home") }>
{ t('go-back') }
</Button>
</Actions>
<Dialog open={ confirmDialogOpen } onClose={ handleCancel }>
<DialogContent>
<DialogContentText>{ t('forms.internship.send-confirmation') }</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={ handleCancel }>{ t('cancel') }</Button>
<Button color="primary" autoFocus onClick={ submitForm }>{ t('confirm') }</Button>
</DialogActions>
</Dialog>
</Form>
}
return (
<Formik initialValues={ emptyInternshipValues } onSubmit={ values => console.log(values) }
validationSchema={ validationSchema } validateOnChange={ false } validateOnBlur={ true }>
{ formik => <Form>
<Typography variant="h3" className="section-header">{ t('internship.sections.intern-info') }</Typography>
<StudentForm student={ sampleStudent }/>
<Typography variant="h3" className="section-header">{ t('internship.sections.kind' )}</Typography>
<InternshipProgramForm internship={ internship } onChange={ setInternship }/>
<Typography variant="h3" className="section-header">{ t('internship.sections.duration') }</Typography>
<InternshipDurationForm internship={ internship } onChange={ setInternship }/>
<Typography variant="h3" className="section-header">{ t('internship.sections.place') }</Typography>
<CompanyForm internship={ internship } onChange={ setInternship }/>
<Actions>
<Button variant="contained" color="primary" onClick={ () => formik.validateForm(formik.values) }>{ t("confirm") }</Button>
<Button component={ RouterLink } to={ route("home") }>
{ t('go-back') }
</Button>
</Actions>
<Dialog open={ confirmDialogOpen } onClose={ handleCancel }>
<DialogContent>
<DialogContentText>{ t('forms.internship.send-confirmation') }</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={ handleCancel }>{ t('cancel') }</Button>
<Button color="primary" autoFocus onClick={ formik.submitForm }>{ t('confirm') }</Button>
</DialogActions>
</Dialog>
</Form> }
<Formik initialValues={ values }
onSubmit={ handleSubmit }
validationSchema={ validationSchema }
validateOnChange={ false }
validateOnBlur={ true }
>
<InnerForm />
</Formik>
)
}

11
src/forms/student.tsx
View File

@ -1,16 +1,15 @@
import { Course, Student } from "@/data";
import { Course } from "@/data";
import { Button, Grid, TextField } from "@material-ui/core";
import { Alert, Autocomplete } from "@material-ui/lab";
import React from "react";
import { sampleCourse } from "@/provider/dummy/student";
import { useTranslation } from "react-i18next";
import { useFormikContext } from "formik";
import { InternshipFormValues } from "@/forms/internship";
type StudentFormProps = {
student: Student
}
export const StudentForm = ({ student }: StudentFormProps) => {
export const StudentForm = () => {
const { t } = useTranslation();
const { values: { student } } = useFormikContext<InternshipFormValues>();
return <>
<Grid container>

1
src/hooks/index.ts
View File

@ -1 +1,2 @@
export * from "./useProxyState"
export * from "./useUpdateEffect"

15
src/hooks/useUpdateEffect.ts Normal file
View File

@ -0,0 +1,15 @@
import { DependencyList, EffectCallback, useEffect, useRef } from "react";
export const useUpdateEffect = (effect: EffectCallback, dependencies: DependencyList) => {
const flag = useRef<boolean>(false);
useEffect(() => {
if (flag.current) {
effect();
} else {
flag.current = true;
}
}, dependencies)
}
export default useUpdateEffect;

3
src/provider/dummy/edition.ts
View File

@ -4,5 +4,6 @@ import moment from "moment";
export const sampleEdition: Edition = {
startDate: moment("2020-07-01"),
endDate: moment("2020-09-30"),
proposalDeadline: moment("2020-07-31")
proposalDeadline: moment("2020-07-31"),
minimumInternshipHours: 40,
}

6
src/serialization/types.ts
View File

@ -10,9 +10,9 @@ type Simplify<T> = string |
T extends Object ? Serializable<T> : any;
export type Serializable<T> = { [K in keyof T]: Simplify<T[K]> }
export type Transformer<TFrom, TResult> = {
transform(subject: TFrom): TResult;
reverseTransform(subject: TResult): TFrom;
export type Transformer<TFrom, TResult, TContext = never> = {
transform(subject: TFrom, context?: TContext): TResult;
reverseTransform(subject: TResult, context?: TContext): TFrom;
}
export type SerializationTransformer<T, TSerialized = Serializable<T>> = Transformer<T, TSerialized>

2
translations/pl.yaml
View File

@ -163,5 +163,7 @@ validation:
required: "To pole jest wymagane"
email: "Wprowadź poprawny adres e-mail"
phone: "Wprowadź poprawny numer telefonu"
internship:
minimum-hours: "Minimalna liczba godzin wynosi {{ hours }}"
contact-coordinator: "Skontaktuj się z koordynatorem"