Refactor types

src/client/config/menuItems.ts

@@ -1,10 +1,14 @@
-import { ThemaMenuItem, myThemasMenuItems } from './thema';
+import {
+  ThemaMenuItem,
+  ThemaMenuItemTransformed,
+  myThemasMenuItems,
+} from './thema';
 import { useAppStateGetter } from '../hooks/useAppState';
 import { termReplace } from '../hooks/useTermReplacement';
 
 export const themasByProfileType: (
   profileType: ProfileType
-) => ThemaMenuItem[] = (profileType) =>
+) => ThemaMenuItemTransformed[] = (profileType) =>
   ({
     private: myThemasMenuItems
       .filter((item) => item.profileTypes.includes('private'))
@@ -17,7 +21,6 @@ export const themasByProfileType: (
       .map((item) => buildThemaMenuItem(item, 'commercial')),
   })[profileType];
 
-
 function buildThemaMenuItem(item: ThemaMenuItem, profileType: ProfileType) {
   const appState = useAppStateGetter();
   return {

src/client/config/thema.ts

@@ -5,12 +5,12 @@ import { AppRoute, AppRoutes } from '../../universal/config/routes';
 import { Thema, Themas } from '../../universal/config/thema';
 import { AppState, BagThema, LinkProps } from '../../universal/types/App.types';
 import { DecosCaseType } from '../../universal/types/vergunningen';
-import { getThemaTitleWithAppState } from '../pages/HLI/helpers';
-import { PARKEER_CASE_TYPES } from '../pages/Parkeren/useParkerenData.hook';
 import {
   getThemaTitleBurgerzakenWithAppState,
   getThemaUrlBurgerzakenWithAppState,
 } from '../pages/Burgerzaken/helpers';
+import { getThemaTitleWithAppState } from '../pages/HLI/helpers';
+import { PARKEER_CASE_TYPES } from '../pages/Parkeren/useParkerenData.hook';
 
 export const BagThemas: Record<Thema, BagThema> = Object.fromEntries(
   Object.entries(Themas).map(([key, key2]) => {
@@ -193,6 +193,12 @@ export interface ThemaMenuItem extends Omit<LinkProps, 'title' | 'to'> {
   to: LinkProps['to'] | ((appState: AppState) => string);
 }
 
+export interface ThemaMenuItemTransformed
+  extends Omit<ThemaMenuItem, 'title' | 'to'> {
+  title: string;
+  to: string;
+}
+
 export const myThemasMenuItems: ThemaMenuItem[] = [
   {
     title: ThemaTitles.BRP,

src/client/hooks/useThemaMenuItems.ts

@@ -4,11 +4,11 @@ import { useAppStateGetter } from './useAppState';
 import { useProfileTypeValue } from './useProfileType';
 import { ApiResponse, isError, isLoading } from '../../universal/helpers/api';
 import { themasByProfileType } from '../config/menuItems';
-import { ThemaMenuItem } from '../config/thema';
+import { ThemaMenuItemTransformed } from '../config/thema';
 import { getThemaMenuItemsAppState, isThemaActive } from '../helpers/themas';
 
 export interface ThemasState {
-  items: ThemaMenuItem[];
+  items: ThemaMenuItemTransformed[];
   isLoading: boolean;
 }
 

src/client/pages/Profile/formatDataPrivate.tsx

@@ -6,6 +6,7 @@ import {
 } from '@amsterdam/design-system-react-icons';
 
 import { FeatureToggle } from '../../../universal/config/feature-toggles';
+import { Thema, Themas } from '../../../universal/config/thema';
 import {
   formatBirthdate,
   getFullAddress,
@@ -24,6 +25,7 @@ import {
 import { LinkdInline } from '../../components/Button/Button';
 import LoadingContent from '../../components/LoadingContent/LoadingContent';
 import { ThemaMenuItem } from '../../config/thema';
+import { useThemaMenuItems } from '../../hooks/useThemaMenuItems';
 /**
  * The functionality in this file transforms the data from the api into a structure which is fit for loading
  * into the Profile page data.
@@ -116,7 +118,6 @@ persoonSecundair.geboortelandnaam = 'Geboorteland';
 delete persoonSecundair.omschrijvingGeslachtsaanduiding;
 delete persoonSecundair.nationaliteiten;
 delete persoonSecundair.indicatieGeheim;
-
 const adres: ProfileLabels<Partial<Adres>> = {
   straatnaam: [
     'Straat',
@@ -199,28 +200,31 @@ const verbintenisHistorisch: ProfileLabels<
   ...verbintenis,
 };
 
-let myThemasMenuItems: ThemaMenuItem[] = [];
+const myThemasMenuItems = useThemaMenuItems();
 
 function getLinkToThemaPage(onderwerp: string) {
   const erfpachtV1ORV2 = FeatureToggle.erfpachtV2Active
-    ? 'ERFPACHTv2'
-    : 'ERFPACHT';
-
-  const SVWIv1ORv2 = FeatureToggle.svwiLinkActive ? 'SVWI' : 'INKOMEN';
-
-  const mapperContactmomentToMenuItem: { [key: string]: string } = {
-    ['Erfpacht']: erfpachtV1ORV2,
-    ['Parkeren']: 'PARKEREN',
-    ['Zorg']: 'WMO',
-    ['Werk en Inkomen']: SVWIv1ORv2,
-    ['Belastingen']: 'BELASTINGEN',
-    ['Geldzaken']: 'KREFIA',
-    ['Financieen']: 'AFIS',
-  };
+    ? Themas.ERFPACHTv2
+    : Themas.ERFPACHT;
+
+  const SVWIv1ORv2 = FeatureToggle.svwiLinkActive
+    ? Themas.SVWI
+    : Themas.INKOMEN;
+
+  const mapperContactmomentToMenuItem: Record<ContactMoment['kanaal'], Thema> =
+    {
+      Erfpacht: erfpachtV1ORV2,
+      Parkeren: Themas.PARKEREN,
+      Zorg: Themas.ZORG,
+      'Werk en Inkomen': SVWIv1ORv2,
+      Belastingen: Themas.BELASTINGEN,
+      Geldzaken: Themas.KREFIA,
+      Financieen: Themas.AFIS,
+    };
 
   // let result = [];
 
-  const menuItem = myThemasMenuItems.find(
+  const menuItem = myThemasMenuItems.items.find(
     (item) => item.id === mapperContactmomentToMenuItem[onderwerp as string]
   );
   // menuItem only exists in myThemasMenuItems if that thema is active through the toggle and this person  has products in that thema.

src/universal/config/thema.ts

@@ -28,8 +28,7 @@ export type Thema =
   | 'HORECA'
   | 'KREFIA'
   | 'AVG'
-  | 'BODEM'
-  | string;
+  | 'BODEM';
 
 export const Themas: Record<Thema, Thema> = {
   AFIS: 'AFIS',
@@ -61,4 +60,4 @@ export const Themas: Record<Thema, Thema> = {
   VAREN: 'VAREN',
   VERGUNNINGEN: 'VERGUNNINGEN',
   ZORG: 'ZORG',
-};
+} as const;