non auth part

src/pages/ProfessionPage.tsx

@@ -1,9 +1,8 @@
-import { useParams } from 'react-router-dom';
-import { useData, useDataPage } from '../API/common';
+import {Link, useParams} from 'react-router-dom';
+import {useCachedData, useData, useDataPage} from '../API/common';
 import { Institution, Profession, Specialty } from '../types/survey';
 import ReactMarkdown from 'react-markdown';
 import { LoadingData } from '../components/LoadingData';
-import { useEffect, useMemo, useState } from 'react';
 import { LoadingList } from '../components/LoadingList';
 
 
@@ -13,29 +12,7 @@ export function ProfessionPage() {
     const profession = useData<Profession>('surveys', 'professions', professionId || 0);
     const specialties = useDataPage<Specialty>('surveys', 'specialties', { profession: professionId || 0 }, !!profession);
 
-    const [institutionCache, setInstitutionCache] = useState<Map<number, Institution>>(new Map()); // Кеширование учебных заведений
-    const institutionsToLoad = useMemo(() => {
-        if (!specialties.items) return [];
-        return specialties.items
-            .map(specialty => specialty.institution)
-            .filter(id => !institutionCache.has(id));
-    }, [specialties.items, institutionCache]);
-
-    useEffect(() => {
-        if (institutionsToLoad.length > 0) {
-            Promise.all(
-                institutionsToLoad.map(id =>
-                    useData<Institution>('surveys', 'institutions', id, true)
-                )
-            ).then(newInstitutions => {
-                setInstitutionCache(prev => {
-                    const newCache = new Map(prev);
-                    newInstitutions.forEach(institution => institution && newCache.set(institution.id, institution));
-                    return newCache;
-                });
-            });
-        }
-    }, [institutionsToLoad]);
+    const institutions = useCachedData<Institution>("surveys", "institutions");
 
     return (
         <div>
@@ -45,14 +22,14 @@ export function ProfessionPage() {
                     <ReactMarkdown>{profession?.description || ''}</ReactMarkdown>
                 </div>
                 <div className="specialties-block">
-                    <h2>Где можно обучиться</h2>
+                    {specialties.items != null ? <h2>Где можно обучиться</h2>:null}
                     <LoadingList
                         data={specialties.items}
-                        listElement={(specialty) => (
+                        listElement={specialty => (
                             <SpecialtyBlock
                                 key={specialty.id}
                                 specialty={specialty as Specialty}
-                                institution={institutionCache.get((specialty as Specialty).institution)}
+                                institution={institutions((specialty as Specialty).institution)}
                             />
                         )}
                     />
@@ -67,12 +44,14 @@ function SpecialtyBlock({
     institution,
 }: {
     specialty: Specialty;
-    institution: Institution | undefined;
+    institution: Institution | undefined | null;
 }) {
     return (
         <div className="specialty-block">
-            <h3>{specialty.name}</h3>
-            <p>Учебное заведение: {institution?.name || 'Загрузка...'}</p>
+            <h3>Учебное заведение: {institution?.name || 'Загрузка...'}</h3>
+            <p className={"specialty-name"}>{specialty.name}</p>
+            {specialty.link?<Link to={specialty.link} className={"site"}>Открыть сайт</Link>:null}
+
         </div>
     );
 }