Merge pull request #802 from navikt/typescript-searchresult-etc

Lager felles interface for SearchResult og Aggregations
navikt · Sep 24, 2024 · 42d27ba · 42d27ba
2 parents ac7c342 + 0c2343e
commit 42d27ba
Show file tree

Hide file tree

Showing 19 changed files with 268 additions and 289 deletions.
diff --git a/src/app/(sok)/_components/filters/DistanceOrLocation.tsx b/src/app/(sok)/_components/filters/DistanceOrLocation.tsx
@@ -5,15 +5,15 @@ import * as actions from "@/app/_common/actions";
 import { CarIcon, LocationPinIcon } from "@navikt/aksel-icons";
 import { Postcode } from "@/app/(sok)/_utils/fetchPostcodes";
 import { UserPreferencesContext } from "@/app/_common/user/UserPreferenceProvider";
+import SearchResult from "@/app/(sok)/_types/SearchResult";
 import Counties from "./Locations";
 
 // TODO: Fix disable no-explicit-any when new search field branch is merged
 interface DistanceOrLocationProps {
     postcodes: Postcode[];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     locations: any;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    searchResult: any;
+    searchResult: SearchResult;
 }
 
 function DistanceOrLocation({ postcodes, locations, searchResult }: DistanceOrLocationProps): ReactElement {
@@ -42,7 +42,9 @@ function DistanceOrLocation({ postcodes, locations, searchResult }: DistanceOrLo
                 />
             </ToggleGroup>
             {selectedOption === "distance" && <DrivingDistance postcodes={postcodes} />}
-            {selectedOption === "location" && <Counties locations={locations} updatedValues={searchResult} />}
+            {selectedOption === "location" && (
+                <Counties locations={locations} updatedValues={searchResult.aggregations} />
+            )}
         </>
     );
 }

diff --git a/...k)/_components/filters/DriversLicense.jsx → ...k)/_components/filters/DriversLicense.tsx b/...k)/_components/filters/DriversLicense.jsx → ...k)/_components/filters/DriversLicense.tsx
@@ -1,17 +1,22 @@
-import PropTypes from "prop-types";
-import React from "react";
+import React, { ReactElement } from "react";
 import { BodyShort, Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import mergeCount from "@/app/(sok)/_components/utils/mergeCount";
 import { logFilterChanged } from "@/app/_common/monitoring/amplitude";
 import { NEED_DRIVERS_LICENSE } from "@/app/(sok)/_components/searchParamNames";
 import useSearchQuery from "@/app/(sok)/_components/SearchQueryProvider";
+import { FilterAggregation } from "@/app/(sok)/_types/FilterAggregations";
 
-function DriversLicense({ initialValues, updatedValues }) {
+interface DriversLicenseProps {
+    initialValues: FilterAggregation[];
+    updatedValues: FilterAggregation[];
+}
+
+export default function DriversLicense({ initialValues, updatedValues }: DriversLicenseProps): ReactElement {
     const sortedValues = sortDriverLicenseValues(initialValues);
     const values = mergeCount(sortedValues, updatedValues);
     const searchQuery = useSearchQuery();
 
-    function handleClick(e) {
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
         const { value, checked } = e.target;
         if (checked) {
             searchQuery.append(NEED_DRIVERS_LICENSE, value);
@@ -34,25 +39,15 @@ function DriversLicense({ initialValues, updatedValues }) {
             }
         >
             {values.map((item) => (
-                <Checkbox name="needDriversLicense[]" key={item.key} value={item.key} onChange={handleClick}>
+                <Checkbox name="needDriversLicense[]" key={item.key} value={item.key} onChange={handleChange}>
                     {`${labelForNeedDriversLicense(item.key)} (${item.count})`}
                 </Checkbox>
             ))}
         </CheckboxGroup>
     );
 }
 
-DriversLicense.propTypes = {
-    initialValues: PropTypes.arrayOf(
-        PropTypes.shape({
-            key: PropTypes.string,
-            count: PropTypes.number,
-        }),
-    ).isRequired,
-    updatedValues: PropTypes.arrayOf(PropTypes.shape({})),
-};
-
-export const labelForNeedDriversLicense = (key) => {
+export const labelForNeedDriversLicense = (key: string): string => {
     switch (key) {
         case "true":
             return "Må ha førerkort";
@@ -63,12 +58,10 @@ export const labelForNeedDriversLicense = (key) => {
     }
 };
 
-function sortDriverLicenseValues(facets) {
+function sortDriverLicenseValues(facets: FilterAggregation[]): FilterAggregation[] {
     if (!facets) {
-        return undefined;
+        return [];
     }
     const sortedPublishedValues = ["false", "true", "Ikke oppgitt"];
     return facets.sort((a, b) => sortedPublishedValues.indexOf(a.key) - sortedPublishedValues.indexOf(b.key));
 }
-
-export default DriversLicense;
diff --git a/...p/(sok)/_components/filters/Education.jsx → ...p/(sok)/_components/filters/Education.tsx b/...p/(sok)/_components/filters/Education.jsx → ...p/(sok)/_components/filters/Education.tsx
@@ -1,20 +1,25 @@
-import PropTypes from "prop-types";
-import React from "react";
+import React, { ReactElement } from "react";
 import { BodyShort, Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import mergeCount from "@/app/(sok)/_components/utils/mergeCount";
 import { logFilterChanged } from "@/app/_common/monitoring/amplitude";
 import moveCriteriaToBottom from "@/app/(sok)/_components/utils/moveFacetToBottom";
 import sortEducationValues from "@/app/(sok)/_components/utils/sortEducationValues";
 import { EDUCATION } from "@/app/(sok)/_components/searchParamNames";
 import useSearchQuery from "@/app/(sok)/_components/SearchQueryProvider";
+import { FilterAggregation } from "@/app/(sok)/_types/FilterAggregations";
 
-function Education({ initialValues, updatedValues }) {
+interface EducationProps {
+    initialValues: FilterAggregation[];
+    updatedValues: FilterAggregation[];
+}
+
+export default function Education({ initialValues, updatedValues }: EducationProps): ReactElement {
     const sortedValuesByEducation = sortEducationValues(initialValues);
     const sortedValues = moveCriteriaToBottom(sortedValuesByEducation, "Ikke oppgitt");
     const values = mergeCount(sortedValues, updatedValues);
     const searchQuery = useSearchQuery();
 
-    function handleClick(e) {
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
         const { value, checked } = e.target;
         if (checked) {
             searchQuery.append(EDUCATION, value);
@@ -38,15 +43,15 @@ function Education({ initialValues, updatedValues }) {
             }
         >
             {values.map((item) => (
-                <Checkbox key={item.key} name="education[]" value={item.key} onChange={handleClick}>
+                <Checkbox key={item.key} name="education[]" value={item.key} onChange={handleChange}>
                     {`${labelForEducation(item.key)} (${item.count})`}
                 </Checkbox>
             ))}
         </CheckboxGroup>
     );
 }
 
-export const labelForEducation = (key) => {
+export const labelForEducation = (key: string): string => {
     switch (key) {
         case "Ingen krav":
             return "Ingen krav til utdanning";
@@ -64,15 +69,3 @@ export const labelForEducation = (key) => {
             return key;
     }
 };
-
-Education.propTypes = {
-    initialValues: PropTypes.arrayOf(
-        PropTypes.shape({
-            key: PropTypes.string,
-            count: PropTypes.number,
-        }),
-    ).isRequired,
-    updatedValues: PropTypes.arrayOf(PropTypes.shape({})),
-};
-
-export default Education;
diff --git a/.../(sok)/_components/filters/Engagement.jsx → .../(sok)/_components/filters/Engagement.tsx b/.../(sok)/_components/filters/Engagement.jsx → .../(sok)/_components/filters/Engagement.tsx
@@ -1,12 +1,12 @@
-import PropTypes from "prop-types";
-import React from "react";
+import React, { ReactElement } from "react";
 import { BodyShort, Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import moveCriteriaToBottom from "@/app/(sok)/_components/utils/moveFacetToBottom";
 import mergeCount from "@/app/(sok)/_components/utils/mergeCount";
 import sortValuesByFirstLetter from "@/app/(sok)/_components/utils/sortValuesByFirstLetter";
 import { logFilterChanged } from "@/app/_common/monitoring/amplitude";
 import { ENGAGEMENT_TYPE } from "@/app/(sok)/_components/searchParamNames";
 import useSearchQuery from "@/app/(sok)/_components/SearchQueryProvider";
+import { FilterAggregation } from "@/app/(sok)/_types/FilterAggregations";
 
 /**
  * This ensures that 'Annet' is displayed as 'Ikke oppgitt' in the search filters.
@@ -17,17 +17,22 @@ import useSearchQuery from "@/app/(sok)/_components/SearchQueryProvider";
  * @param key
  * @returns {string|*}
  */
-export function editedItemKey(key) {
+export function editedItemKey(key: string): string {
     return key === "Annet" ? "Ikke oppgitt" : key;
 }
 
-function Engagement({ initialValues, updatedValues }) {
+interface EngagementProps {
+    initialValues: FilterAggregation[];
+    updatedValues: FilterAggregation[];
+}
+
+export default function Engagement({ initialValues, updatedValues }: EngagementProps): ReactElement {
     const sortedValuesByFirstLetter = sortValuesByFirstLetter(initialValues);
     const sortedValues = moveCriteriaToBottom(sortedValuesByFirstLetter, "Annet");
     const values = mergeCount(sortedValues, updatedValues);
     const searchQuery = useSearchQuery();
 
-    function handleClick(e) {
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
         const { value, checked } = e.target;
         if (checked) {
             searchQuery.append(ENGAGEMENT_TYPE, value);
@@ -51,22 +56,15 @@ function Engagement({ initialValues, updatedValues }) {
             }
         >
             {values.map((item) => (
-                <Checkbox name="engagementType[]" key={editedItemKey(item.key)} value={item.key} onChange={handleClick}>
+                <Checkbox
+                    name="engagementType[]"
+                    key={editedItemKey(item.key)}
+                    value={item.key}
+                    onChange={handleChange}
+                >
                     {`${editedItemKey(item.key)} (${item.count})`}
                 </Checkbox>
             ))}
         </CheckboxGroup>
     );
 }
-
-Engagement.propTypes = {
-    initialValues: PropTypes.arrayOf(
-        PropTypes.shape({
-            key: PropTypes.string,
-            count: PropTypes.number,
-        }),
-    ).isRequired,
-    updatedValues: PropTypes.arrayOf(PropTypes.shape({})),
-};
-
-export default Engagement;
diff --git a/.../(sok)/_components/filters/Experience.jsx → .../(sok)/_components/filters/Experience.tsx b/.../(sok)/_components/filters/Experience.jsx → .../(sok)/_components/filters/Experience.tsx
@@ -1,17 +1,22 @@
-import PropTypes from "prop-types";
-import React from "react";
+import React, { ReactElement } from "react";
 import { BodyShort, Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import mergeCount from "@/app/(sok)/_components/utils/mergeCount";
 import { logFilterChanged } from "@/app/_common/monitoring/amplitude";
 import { EXPERIENCE } from "@/app/(sok)/_components/searchParamNames";
 import useSearchQuery from "@/app/(sok)/_components/SearchQueryProvider";
+import { FilterAggregation } from "@/app/(sok)/_types/FilterAggregations";
 
-function Experience({ initialValues, updatedValues }) {
+interface ExperienceProps {
+    initialValues: FilterAggregation[];
+    updatedValues: FilterAggregation[];
+}
+
+export default function Experience({ initialValues, updatedValues }: ExperienceProps): ReactElement {
     const sortedValues = sortExperienceValues(initialValues);
     const values = mergeCount(sortedValues, updatedValues);
     const searchQuery = useSearchQuery();
 
-    function handleClick(e) {
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
         const { value, checked } = e.target;
         if (checked) {
             searchQuery.append(EXPERIENCE, value);
@@ -35,15 +40,15 @@ function Experience({ initialValues, updatedValues }) {
             }
         >
             {values.map((item) => (
-                <Checkbox key={item.key} name="experience[]" value={item.key} onChange={handleClick}>
+                <Checkbox key={item.key} name="experience[]" value={item.key} onChange={handleChange}>
                     {`${labelForExperience(item.key)} (${item.count})`}
                 </Checkbox>
             ))}
         </CheckboxGroup>
     );
 }
 
-export const labelForExperience = (key) => {
+export const labelForExperience = (key: string): string => {
     switch (key) {
         case "Ingen":
             return "Ingen krav til arbeidserfaring";
@@ -56,22 +61,10 @@ export const labelForExperience = (key) => {
     }
 };
 
-function sortExperienceValues(facets) {
+function sortExperienceValues(facets: FilterAggregation[]): FilterAggregation[] {
     if (!facets) {
-        return undefined;
+        return [];
     }
     const sortedPublishedValues = ["Ingen", "Noe", "Mye", "Ikke oppgitt"];
     return facets.sort((a, b) => sortedPublishedValues.indexOf(a.key) - sortedPublishedValues.indexOf(b.key));
 }
-
-Experience.propTypes = {
-    initialValues: PropTypes.arrayOf(
-        PropTypes.shape({
-            key: PropTypes.string,
-            count: PropTypes.number,
-        }),
-    ).isRequired,
-    updatedValues: PropTypes.arrayOf(PropTypes.shape({})),
-};
-
-export default Experience;
diff --git a/src/app/(sok)/_components/filters/Extent.jsx → src/app/(sok)/_components/filters/Extent.tsx b/src/app/(sok)/_components/filters/Extent.jsx → src/app/(sok)/_components/filters/Extent.tsx
@@ -1,16 +1,21 @@
-import PropTypes from "prop-types";
-import React from "react";
+import React, { ReactElement } from "react";
 import { BodyShort, Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import mergeCount from "@/app/(sok)/_components/utils/mergeCount";
 import { logFilterChanged } from "@/app/_common/monitoring/amplitude";
 import { EXTENT } from "@/app/(sok)/_components/searchParamNames";
 import useSearchQuery from "@/app/(sok)/_components/SearchQueryProvider";
+import { FilterAggregation } from "@/app/(sok)/_types/FilterAggregations";
 
-function Extent({ initialValues, updatedValues }) {
+interface ExtentProps {
+    initialValues: FilterAggregation[];
+    updatedValues: FilterAggregation[];
+}
+
+export default function Extent({ initialValues, updatedValues }: ExtentProps): ReactElement {
     const values = mergeCount(initialValues, updatedValues);
     const searchQuery = useSearchQuery();
 
-    function handleClick(e) {
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
         const { value, checked } = e.target;
         if (checked) {
             searchQuery.append(EXTENT, value);
@@ -33,22 +38,10 @@ function Extent({ initialValues, updatedValues }) {
             }
         >
             {values.map((item) => (
-                <Checkbox name="extent[]" key={item.key} value={item.key} onChange={handleClick}>
+                <Checkbox name="extent[]" key={item.key} value={item.key} onChange={handleChange}>
                     {`${item.key} (${item.count})`}
                 </Checkbox>
             ))}
         </CheckboxGroup>
     );
 }
-
-Extent.propTypes = {
-    initialValues: PropTypes.arrayOf(
-        PropTypes.shape({
-            key: PropTypes.string,
-            count: PropTypes.number,
-        }),
-    ).isRequired,
-    updatedValues: PropTypes.arrayOf(PropTypes.shape({})),
-};
-
-export default Extent;