68 lines
2.7 KiB
TypeScript
68 lines
2.7 KiB
TypeScript
import React, { useEffect, useMemo } from "react";
|
|
import { Page } from "@/pages/base";
|
|
import { Button, Container, Stepper, Typography } from "@material-ui/core";
|
|
import { Link as RouterLink, Redirect } from "react-router-dom";
|
|
import { route } from "@/routing";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useSelector } from "react-redux";
|
|
import { AppState } from "@/state/reducer";
|
|
import { getMissingStudentData, Student } from "@/data";
|
|
import { Deadlines, Edition, getEditionDeadlines } from "@/data/edition";
|
|
import { Step } from "@/components";
|
|
import { ProposalStep } from "@/pages/steps/proposal";
|
|
import { PlanStep } from "@/pages/steps/plan";
|
|
import { InsuranceState } from "@/state/reducer/insurance";
|
|
import { InsuranceStep } from "@/pages/steps/insurance";
|
|
import api from "@/api";
|
|
|
|
export const MainPage = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const student = useSelector<AppState, Student | null>(state => state.student);
|
|
|
|
const deadlines = useSelector<AppState, Deadlines>(state => getEditionDeadlines(state.edition as Edition)); // edition cannot be null at this point
|
|
const insurance = useSelector<AppState, InsuranceState>(root => root.insurance);
|
|
|
|
const missingStudentData = useMemo(() => student ? getMissingStudentData(student) : [], [student]);
|
|
|
|
useEffect(() => void api.edition.available())
|
|
|
|
if (!student) {
|
|
return <Redirect to={ route("user_login") }/>;
|
|
}
|
|
|
|
function *getSteps() {
|
|
yield <Step label={ t('steps.personal-data.header') } completed={ missingStudentData.length === 0 } until={ deadlines.personalData } key="personal-data">
|
|
{ missingStudentData.length > 0 && <>
|
|
<p>{ t('steps.personal-data.info') }</p>
|
|
|
|
<ul>
|
|
{ missingStudentData.map(field => <li key={ field }>{ t(`student.${ field }`) }</li>) }
|
|
</ul>
|
|
|
|
<Button to={ route("internship_proposal") } variant="contained" color="primary" component={ RouterLink }>
|
|
{ t('steps.personal-data.form') }
|
|
</Button>
|
|
</> }
|
|
</Step>;
|
|
|
|
yield <ProposalStep key="proposal"/>;
|
|
yield <PlanStep key="plan"/>;
|
|
|
|
if (insurance.required)
|
|
yield <InsuranceStep key="insurance"/>;
|
|
|
|
yield <Step label={ t('steps.report.header') } until={ deadlines.report } key="report"/>
|
|
yield <Step label={ t('steps.grade.header') } key="grade"/>
|
|
}
|
|
|
|
return <Page my={ 6 }>
|
|
<Container>
|
|
<Typography variant="h2">{ t("pages.my-internship.header") }</Typography>
|
|
<Stepper orientation="vertical" nonLinear>
|
|
{ Array.from(getSteps()) }
|
|
</Stepper>
|
|
</Container>
|
|
</Page>
|
|
}
|