57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
import {Link, useParams} from 'react-router-dom';
|
||
import { Institution, Profession, Specialty } from '../../types/survey.ts';
|
||
import ReactMarkdown from 'react-markdown';
|
||
import { LoadingData } from '../../components/LoadingData.tsx';
|
||
import { LoadingList } from '../../components/LoadingList.tsx';
|
||
import {useCachedData, useData, useDataPage} from "../../API/hooks.ts";
|
||
|
||
|
||
|
||
export function ProfessionPage() {
|
||
const { professionId } = useParams<{ professionId: string }>();
|
||
const profession = useData<Profession>('surveys', 'professions', professionId || 0);
|
||
const specialties = useDataPage<Specialty>('surveys', 'specialties', { profession: professionId || 0 }, !!profession);
|
||
|
||
const institutions = useCachedData<Institution>("surveys", "institutions");
|
||
|
||
return (
|
||
<div>
|
||
<LoadingData data={profession}>
|
||
<h1>{profession?.name}</h1>
|
||
<div className="description">
|
||
<ReactMarkdown>{profession?.description || ''}</ReactMarkdown>
|
||
</div>
|
||
<div className="specialties-block">
|
||
{specialties.items != null ? <h2>Где можно обучиться</h2>:null}
|
||
<LoadingList
|
||
data={specialties.items}
|
||
listElement={specialty => (
|
||
<SpecialtyBlock
|
||
key={specialty.id}
|
||
specialty={specialty as Specialty}
|
||
institution={institutions.get((specialty as Specialty).institution)}
|
||
/>
|
||
)}
|
||
/>
|
||
</div>
|
||
</LoadingData>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SpecialtyBlock({
|
||
specialty,
|
||
institution,
|
||
}: {
|
||
specialty: Specialty;
|
||
institution: Institution | undefined | null;
|
||
}) {
|
||
return (
|
||
<div className="specialty-block">
|
||
<h3>Учебное заведение: {institution?.name || 'Загрузка...'}</h3>
|
||
<p className={"specialty-name"}>{specialty.name}</p>
|
||
{specialty.link?<Link to={specialty.link} className={"site"}>Открыть сайт</Link>:null}
|
||
|
||
</div>
|
||
);
|
||
} |