OPHJOD-1141: Add occupations in Interests

Opetushallitus · Dec 30, 2024 · 49e9c9b · 49e9c9b
1 parent 6544aa4
commit 49e9c9b
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 26 deletions.
diff --git a/src/api/osaamiset.test.ts b/src/api/osaamiset.test.ts
@@ -34,7 +34,7 @@ describe('osaamiset.combine', () => {
       id: object.id,
       osaaminen,
     });
-    const result = await osaamiset.combine('osaamiset', objects, key, combiner);
+    const result = await osaamiset.combine(objects, key, combiner);
     expect(result).toEqual([
       { id: 1, osaaminen: mockOsaaminen1 },
       { id: 2, osaaminen: mockOsaaminen1 },

diff --git a/src/api/osaamiset.ts b/src/api/osaamiset.ts
@@ -1,3 +1,4 @@
+import { ESCO_OCCUPATION_PREFIX } from '@/constants';
 import { client } from './client';
 import { combinerImpl } from './combinerImpl';
 import { components } from './schema';
@@ -17,7 +18,6 @@ export const osaamiset = {
    * Note: If the number of osaaminen to fetch is large, the requests are split into multiple chunks to avoid exceeding the maximum query length.
    */
   combine: async <T, R>(
-    mode: 'osaamiset' | 'kiinnostukset',
     objects: Iterable<T> | undefined,
     key: (o: T) => string,
     combiner: (object: T, osaaminen: OsaaminenDto) => R,
@@ -28,17 +28,15 @@ export const osaamiset = {
       key,
       combiner,
       async (chunk, signal) => {
-        // eslint-disable-next-line sonarjs/no-clear-text-protocols
-        const skills = chunk.filter((uri) => !uri.startsWith('http://data.europa.eu/esco/occupation/'));
+        const skills = chunk.filter((uri) => !uri.startsWith(ESCO_OCCUPATION_PREFIX));
         const skillsResult = await client.GET('/api/osaamiset', {
           signal,
           params: { query: { uri: skills, sivu: 0, koko: skills.length } },
         });
 
         let occupationsResult;
-        if (mode === 'kiinnostukset') {
-          // eslint-disable-next-line sonarjs/no-clear-text-protocols
-          const occupations = chunk.filter((uri) => uri.startsWith('http://data.europa.eu/esco/occupation/'));
+        const occupations = chunk.filter((uri) => uri.startsWith(ESCO_OCCUPATION_PREFIX));
+        if (occupations.length > 0) {
           occupationsResult = (
             await client.GET('/api/ammatit', {
               signal,
@@ -61,7 +59,6 @@ export const osaamiset = {
       return [];
     }
     return await osaamiset.combine(
-      'osaamiset',
       uris,
       (uri) => uri,
       (_, osaaminen) => osaaminen,

diff --git a/src/components/OsaamisSuosittelija/OsaamisSuosittelija.tsx b/src/components/OsaamisSuosittelija/OsaamisSuosittelija.tsx
@@ -1,7 +1,7 @@
 import { client } from '@/api/client';
 import { osaamiset } from '@/api/osaamiset';
 import { components } from '@/api/schema';
-import { OSAAMINEN_COLOR_MAP } from '@/constants';
+import { ESCO_SKILL_PREFIX, OSAAMINEN_COLOR_MAP } from '@/constants';
 import { useDebounceState } from '@/hooks/useDebounceState';
 import { getLocalizedText, removeDuplicates } from '@/utils';
 import { Tag, Textarea, useMediaQueries } from '@jod/design-system';
@@ -88,8 +88,7 @@ export const OsaamisSuosittelija = ({
         });
         setEhdotetutOsaamiset(
           await osaamiset.combine(
-            mode,
-            ehdotus.data,
+            mode === 'osaamiset' ? ehdotus.data?.filter((e) => e.uri.startsWith(ESCO_SKILL_PREFIX)) : ehdotus.data,
             (e) => e.uri,
             (e, o) => {
               return {

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-clear-text-protocols */
 import { OsaaminenLahdeTyyppi } from '@/components/OsaamisSuosittelija/OsaamisSuosittelija';
 import { Tag } from '@jod/design-system';
 
@@ -12,3 +13,6 @@ export const OSAAMINEN_COLOR_MAP: Record<OsaaminenLahdeTyyppi, NonNullable<TagPr
 };
 
 export const DEFAULT_PAGE_SIZE = 20;
+
+export const ESCO_SKILL_PREFIX = 'http://data.europa.eu/esco/skill/';
+export const ESCO_OCCUPATION_PREFIX = 'http://data.europa.eu/esco/occupation/';
diff --git a/src/i18n/fi/translation.json b/src/i18n/fi/translation.json
@@ -297,6 +297,7 @@
     "interests": {
       "description": "Lorem ipsum dolor sit amet, no vis verear commodo. Vix quot dicta phaedrum ad. Has eu invenire concludaturque, simul accusata no ius.",
       "edit-interests": "Muokkaa kiinnostuksen kohteita",
+      "occupations-that-interest-me": "Ammatit, jotka kiinnostavat minua",
       "skills-that-interest-me": "Osaamiset, jotka kiinnostavat minua",
       "title": "Kiinnostuksen kohteeni",
       "write-what-interests-you": "Kirjoita, mikä sinua kiinnostaa"

diff --git a/src/routes/Profile/Interests/Interests.tsx b/src/routes/Profile/Interests/Interests.tsx
@@ -6,6 +6,7 @@ import {
   Title,
   type RoutesNavigationListProps,
 } from '@/components';
+import { ESCO_OCCUPATION_PREFIX } from '@/constants';
 import EditKiinnostusModal from '@/routes/Profile/Interests/EditKiinnostusModal';
 import { getLocalizedText, sortByProperty } from '@/utils';
 import { Button, Tag } from '@jod/design-system';
@@ -30,6 +31,9 @@ const Interests = () => {
 
   const sortedData = React.useMemo(() => [...data].sort(sortByProperty(`nimi.${i18n.language}`)), [data, i18n]);
 
+  const sortedSkills = sortedData.filter((value) => !value.uri.startsWith(ESCO_OCCUPATION_PREFIX));
+  const sortedOccupations = sortedData.filter((value) => value.uri.startsWith(ESCO_OCCUPATION_PREFIX));
+
   return (
     <MainLayout
       navChildren={
@@ -44,22 +48,42 @@ const Interests = () => {
       <Title value={title} />
       <h1 className="text-heading-1 mb-5">{title}</h1>
       <p className="mb-8 text-body-lg text-todo">{t('profile.interests.description')}</p>
-      {data.length > 0 && (
-        <h2 className="mb-5 pb-3 text-heading-3 border-b border-border-gray">
-          {t('profile.interests.skills-that-interest-me')}
-        </h2>
+      {sortedSkills.length > 0 && (
+        <>
+          <h2 className="mb-5 pb-3 text-heading-3 border-b border-border-gray">
+            {t('profile.interests.skills-that-interest-me')}
+          </h2>
+          <div className="flex flex-wrap gap-3">
+            {sortedSkills.map((val) => (
+              <Tag
+                label={getLocalizedText(val.nimi)}
+                title={getLocalizedText(val.kuvaus)}
+                key={val.uri}
+                variant="presentation"
+                sourceType="kiinnostus"
+              />
+            ))}
+          </div>
+        </>
+      )}
+      {sortedOccupations.length > 0 && (
+        <>
+          <h2 className="mb-5 pb-3 text-heading-3 border-b border-border-gray mt-8">
+            {t('profile.interests.occupations-that-interest-me')}
+          </h2>
+          <div className="flex flex-wrap gap-3">
+            {sortedOccupations.map((val) => (
+              <Tag
+                label={getLocalizedText(val.nimi)}
+                title={getLocalizedText(val.kuvaus)}
+                key={val.uri}
+                variant="presentation"
+                sourceType="kiinnostus"
+              />
+            ))}
+          </div>
+        </>
       )}
-      <div className="flex flex-wrap gap-3">
-        {sortedData.map((val) => (
-          <Tag
-            label={getLocalizedText(val.nimi)}
-            title={getLocalizedText(val.kuvaus)}
-            key={val.uri}
-            variant="presentation"
-            sourceType="kiinnostus"
-          />
-        ))}
-      </div>
       <div className="flex pt-7">
         <Button
           variant="white"