Use display name for optional committees

components/form/ApplicationForm.tsx

@@ -4,7 +4,7 @@ import TextAreaInput from "./TextAreaInput";
 import SelectInput from "./SelectInput";
 import Line from "./Line";
 import { DeepPartial, applicantType } from "../../lib/types/types";
-import { changeDisplayName } from "../../lib/utils/toString";
+import { revertDisplayName } from "../../lib/utils/toString";
 import { useEffect, useState } from "react";
 import CustomPhoneInput from "./CustomPhoneInput";
 import "react-phone-input-2/lib/bootstrap.css";
@@ -212,9 +212,9 @@ export const ApplicationForm = (props: Props) => {
                 ["Ja", "ja"],
                 ["Nei", "nei"],
               ]}
-              label={`Ønsker du å søke ${changeDisplayName(committee)} ${
-                availableCommittees.length > 1 ? "i tillegg?" : "?"
-              }`}
+              label={`Ønsker du å søke ${props.getCommitteeDisplayName(
+                revertDisplayName(committee)
+              )} ${availableCommittees.length > 1 ? "i tillegg?" : "?"}`}
               updateInputValues={(value: string) =>
                 addOptionalCommittee(committee, value)
               }

lib/utils/getCommitteeDisplayNameFactory.ts

@@ -16,7 +16,13 @@ export const getCommitteeDisplayNameFactory = async () => {
       ({ name_short }) => name_short == committee
     )?.name_long;
 
-    return name_long ? `${name_long} (${committee})` : committee;
+    if (!name_long) {
+      return committee;
+    } else if (name_long == committee) {
+      return committee;
+    } else {
+      return `${name_long} (${committee})`;
+    }
   };
 
   return getCommitteeDisplayName;

lib/utils/toString.ts

@@ -1,8 +1,17 @@
 export const changeDisplayName = (committee: string) => {
-  if (committee.toLowerCase() === "kjelleren") {
-    return "Realfagskjelleren";
-  }
-  return committee.charAt(0).toUpperCase() + committee.slice(1);
+  const apiName = revertDisplayName(committee);
+  return apiName === "Kjelleren" ? "Realfagskjelleren" : apiName;
+};
+
+/**
+ * Changes committeeName back to the capitalization used in the API.
+ *
+ * @param committee
+ */
+export const revertDisplayName = (committee: string) => {
+  // TODO: Don't do this reverse .toLowerCase(), but use the value given from the api along the whole path instead
+  const capitalized = committee.charAt(0).toUpperCase() + committee.slice(1);
+  return capitalized;
 };
 
 export function formatPhoneNumber(phoneNumber: string) {