Doc fetch

src/pages/surveys/ProfessionPage.tsx

@@ -0,0 +1,57 @@
+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>
+    );
+}