chore: use @ariakit/react for new country picker (#306)

navikt · Aug 26, 2024 · 4d4bc12 · 4d4bc12
1 parent 33045e6
commit 4d4bc12
Show file tree

Hide file tree

Showing 12 changed files with 107 additions and 129 deletions.
diff --git a/src/app/api/country/_types.ts b/src/app/api/country/_types.ts
diff --git a/src/app/api/country/route.ts b/src/app/api/country/route.ts
@@ -5,14 +5,16 @@
 import { NextResponse } from 'next/server'
 
 import { isUserLoggedIn } from '../../../auth/rsc'
+import { countries } from '../../../utils/countries'
 
-import { countriesResponse } from './_countries'
-
+/**
+ * @Deprecated Will be removed in a different deploy for zero downtime
+ */
 export async function GET(): Promise<NextResponse> {
     const authed = await isUserLoggedIn()
     if (!authed) {
         return NextResponse.json({ message: 'Not logged in' }, { status: 401 })
     }
 
-    return NextResponse.json(countriesResponse)
+    return NextResponse.json(countries)
 }
diff --git a/src/components/FormComponents/CountryPicker/CountryCombobox/CountryCombobox.tsx b/src/components/FormComponents/CountryPicker/CountryCombobox/CountryCombobox.tsx
diff --git a/src/components/FormComponents/CountryPicker/CountryPicker.tsx b/src/components/FormComponents/CountryPicker/CountryPicker.tsx
@@ -4,7 +4,7 @@ import { useController } from 'react-hook-form'
 import { UtenlanskFormValues } from '../../Sykmelding/SykmeldingForm'
 import FieldError from '../FieldError/FieldError'
 
-import CountryCombobox from './CountryCombobox/CountryCombobox'
+import CountryCombobox from './country-combobox/CountryCombobox'
 import styles from './CountryPicker.module.css'
 
 interface Props {

diff --git a/.../CountryCombobox/CountryCombobox.test.tsx → ...country-combobox/CountryCombobox.test.tsx b/.../CountryCombobox/CountryCombobox.test.tsx → ...country-combobox/CountryCombobox.test.tsx
@@ -13,7 +13,6 @@ describe('CountryTypeahead', () => {
             <CountryCombobox onSelect={mockSelect} initialValue={null} onChange={() => void 0} />,
         )
 
-        await waitForPickerToBeLoaded()
         await userEvent.type(screen.getByRole('combobox', { name: 'Landet sykmeldingen ble skrevet' }), 'Zim')
         await userEvent.click(screen.getByRole('option', { name: 'Zimbabwe' }))
 
@@ -24,7 +23,6 @@ describe('CountryTypeahead', () => {
         const mockSelect = vi.fn()
         render(<CountryCombobox onSelect={mockSelect} initialValue={null} onChange={() => void 0} />)
 
-        await waitForPickerToBeLoaded()
         await userEvent.type(screen.getByRole('combobox', { name: 'Landet sykmeldingen ble skrevet' }), 'Zim')
         await userEvent.click(screen.getByRole('option', { name: 'Zimbabwe' }))
 
@@ -35,17 +33,16 @@ describe('CountryTypeahead', () => {
         const mockSelect = vi.fn()
         render(<CountryCombobox onSelect={mockSelect} initialValue={null} onChange={() => void 0} />)
 
-        await waitForPickerToBeLoaded()
         await userEvent.type(screen.getByRole('combobox', { name: 'Landet sykmeldingen ble skrevet' }), 'No')
         const results = screen.getAllByRole('option')
 
         expect(results).toHaveLength(4)
-        expect(results[0]).toHaveTextContent('Nord-Korea')
-        expect(results[1]).toHaveTextContent('Norge')
-        expect(results[2]).toHaveTextContent('Libanon')
+        expect(results[0]).toHaveTextContent('Libanon')
+        expect(results[1]).toHaveTextContent('Nord-Korea')
+        expect(results[2]).toHaveTextContent('Norge')
         expect(results[3]).toHaveTextContent('San Marino')
 
-        await userEvent.click(results[1])
+        await userEvent.click(results[2])
 
         expect(mockSelect).toHaveBeenCalledWith('NOR')
     })
@@ -54,7 +51,6 @@ describe('CountryTypeahead', () => {
         const mockSelect = vi.fn()
         render(<CountryCombobox onSelect={mockSelect} initialValue="NOR" onChange={() => void 0} />)
 
-        await waitForPickerToBeLoaded()
         await waitFor(() =>
             expect(screen.getByRole('combobox', { name: 'Landet sykmeldingen ble skrevet' })).toHaveValue('Norge'),
         )
@@ -65,16 +61,9 @@ describe('CountryTypeahead', () => {
         const mockSelect = vi.fn()
         render(<CountryCombobox onSelect={mockSelect} initialValue={null} onChange={() => void 0} />)
 
-        await waitForPickerToBeLoaded()
         await userEvent.type(screen.getByRole('combobox', { name: 'Landet sykmeldingen ble skrevet' }), 'IkkeEtLand')
 
-        expect(screen.getByText('Ingen treff')).toBeInTheDocument()
+        expect(screen.getByText('Fant ingen land med navn eller kode "IkkeEtLand"')).toBeInTheDocument()
         expect(mockSelect).not.toHaveBeenCalled()
     })
 })
-
-async function waitForPickerToBeLoaded(): Promise<void> {
-    await waitFor(() =>
-        expect(screen.getByRole('combobox', { name: 'Landet sykmeldingen ble skrevet' })).not.toBeDisabled(),
-    )
-}
diff --git a/src/components/FormComponents/CountryPicker/country-combobox/CountryCombobox.tsx b/src/components/FormComponents/CountryPicker/country-combobox/CountryCombobox.tsx
@@ -0,0 +1,73 @@
+import React, { ReactElement, startTransition, useState } from 'react'
+
+import {
+    AkselifiedCombobox,
+    AkselifiedComboboxDisclosure,
+    AkselifiedComboboxItem,
+    AkselifiedComboboxNonInteractiveFeedbackItem,
+    AkselifiedComboboxNonSelectables,
+    AkselifiedComboboxPopover,
+    AkselifiedComboboxWrapper,
+} from '../../combobox/AkselifiedCombobox'
+import { countries } from '../../../../utils/countries'
+
+type Props = {
+    id?: string
+    onSelect: (countryCode: string | null) => void
+    onChange: () => void
+    initialValue: string | null
+}
+
+function CountryCombobox({ id, onChange, onSelect, initialValue }: Props): ReactElement {
+    const defaultCountry = countries.find((country) => country.code === initialValue)?.name
+    const [searchValue, setSearchValue] = useState(defaultCountry ?? '')
+    const suggestions = !searchValue.trim()
+        ? countries
+        : countries.filter(
+              (country) =>
+                  country.name.toLowerCase().includes(searchValue.toLowerCase()) ||
+                  country.code.toLowerCase().includes(searchValue.toLowerCase()),
+          )
+
+    return (
+        <AkselifiedComboboxWrapper
+            defaultValue={defaultCountry ?? undefined}
+            labelId="country-typeahead-label"
+            label="Landet sykmeldingen ble skrevet"
+            setValue={(value) => {
+                const country = countries.find((country) => country.name === value)
+
+                startTransition(() => {
+                    if (country) {
+                        onSelect(country.code)
+                        setSearchValue(country.name)
+                    } else {
+                        onChange()
+                        setSearchValue(value)
+                    }
+                })
+            }}
+        >
+            <AkselifiedCombobox id={id} aria-labelledby="country-typeahead-label" placeholder="Søk etter land">
+                <AkselifiedComboboxDisclosure />
+            </AkselifiedCombobox>
+            <AkselifiedComboboxPopover>
+                <AkselifiedComboboxNonSelectables>
+                    {suggestions.length === 0 && (
+                        <AkselifiedComboboxNonInteractiveFeedbackItem>
+                            {`Fant ingen land med navn eller kode "${searchValue}"`}
+                        </AkselifiedComboboxNonInteractiveFeedbackItem>
+                    )}
+                </AkselifiedComboboxNonSelectables>
+                {suggestions.length > 0 &&
+                    suggestions.map((value) => (
+                        <AkselifiedComboboxItem key={value.code} value={value.name}>
+                            {value.name}
+                        </AkselifiedComboboxItem>
+                    ))}
+            </AkselifiedComboboxPopover>
+        </AkselifiedComboboxWrapper>
+    )
+}
+
+export default CountryCombobox
diff --git a/src/components/FormComponents/DiagnosePicker/diagnose-combobox/DiagnoseCombobox.tsx b/src/components/FormComponents/DiagnosePicker/diagnose-combobox/DiagnoseCombobox.tsx
@@ -9,6 +9,7 @@ import {
     AkselifiedComboboxItem,
     AkselifiedComboboxLoading,
     AkselifiedComboboxNonInteractiveFeedbackItem,
+    AkselifiedComboboxNonSelectables,
     AkselifiedComboboxPopover,
     AkselifiedComboboxWrapper,
 } from '../../combobox/AkselifiedCombobox'
@@ -79,7 +80,7 @@ function DiagnoseCombobox({
                 <AkselifiedComboboxDisclosure loading={data != null && isLoading} />
             </AkselifiedCombobox>
             <AkselifiedComboboxPopover>
-                <div className="navds-combobox__list_non-selectables" role="status">
+                <AkselifiedComboboxNonSelectables>
                     {data == null && isLoading && <AkselifiedComboboxLoading />}
                     {(searchValue.trim() === '' || (data == null && !isLoading)) && (
                         <AkselifiedComboboxNonInteractiveFeedbackItem>
@@ -96,7 +97,7 @@ function DiagnoseCombobox({
                             {`Feil ved henting av ${system}-kode. Prøv igjen senere.`}
                         </AkselifiedComboboxNonInteractiveFeedbackItem>
                     )}
-                </div>
+                </AkselifiedComboboxNonSelectables>
                 {searchValue &&
                     suggestions.length > 0 &&
                     suggestions.map((value) => (

diff --git a/src/components/FormComponents/Pasientopplysninger/Adresser/Utenlandskadresse.tsx b/src/components/FormComponents/Pasientopplysninger/Adresser/Utenlandskadresse.tsx
@@ -2,15 +2,13 @@ import { BodyShort } from '@navikt/ds-react'
 import { ReactElement } from 'react'
 
 import type { UtenlandskAdresse } from '../../../../graphql/queries/graphql.generated'
-import { useCountrySuggestions } from '../../CountryPicker/CountryCombobox/CountryCombobox'
-import { SmallTextSkeleton } from '../../../skeleton/Skeletons'
+import { countries } from '../../../../utils/countries'
 
 type UtenlandskAdresseProps = {
     utenlandskAdresse: UtenlandskAdresse
 }
 
 function UtenlandskAdresse({ utenlandskAdresse }: UtenlandskAdresseProps): ReactElement {
-    const [loadingCountries, countries] = useCountrySuggestions()
     const country = countries.find((country) => country.code === utenlandskAdresse.landkode)?.name
 
     return (
@@ -20,7 +18,6 @@ function UtenlandskAdresse({ utenlandskAdresse }: UtenlandskAdresseProps): React
             {utenlandskAdresse.postkode && (
                 <BodyShort>{`${utenlandskAdresse.postkode} ${utenlandskAdresse.bySted ?? ''}`}</BodyShort>
             )}
-            {loadingCountries && <SmallTextSkeleton />}
             {country && <BodyShort>{country}</BodyShort>}
         </>
     )

diff --git a/src/components/FormComponents/combobox/AkselifiedCombobox.tsx b/src/components/FormComponents/combobox/AkselifiedCombobox.tsx
@@ -32,7 +32,7 @@ export function AkselifiedComboboxWrapper({
     )
 }
 
-export function AkselifiedComboboxDisclosure({ loading }: { loading: boolean }): ReactElement {
+export function AkselifiedComboboxDisclosure({ loading }: { loading?: boolean }): ReactElement {
     return (
         <Combobox.ComboboxDisclosure
             className={styles.disclosure}
@@ -110,4 +110,12 @@ export function AkselifiedComboboxLoading(): ReactElement {
     )
 }
 
+export function AkselifiedComboboxNonSelectables({ children }: PropsWithChildren): ReactElement {
+    return (
+        <div className="navds-combobox__list_non-selectables" role="status">
+            {children}
+        </div>
+    )
+}
+
 export { useComboboxStore } from '@ariakit/react/combobox'
diff --git a/src/mocks/handlers-test.ts b/src/mocks/handlers-test.ts
@@ -3,8 +3,7 @@ import { HttpResponse, RequestHandler, http } from 'msw'
 import { api } from '../utils/apiUtils'
 import { searchSystem } from '../app/api/diagnose/[system]/_search-system'
 import { DiagnoseSearchResult } from '../app/api/diagnose/[system]/_types'
-import { countriesResponse } from '../app/api/country/_countries'
-import { Country } from '../app/api/country/_types'
+import { countries } from '../utils/countries'
 
 /**
  * These are only used in MSW during tests, normally we use the real API routes in next
@@ -21,6 +20,6 @@ export const handlers: RequestHandler[] = [
         return HttpResponse.json<DiagnoseSearchResult>({ suggestions: searchSystem(system, value) })
     }),
     http.get(api('/api/country'), async () => {
-        return HttpResponse.json<Country[]>(countriesResponse)
+        return HttpResponse.json(countries)
     }),
 ]
diff --git a/src/app/api/country/countries-norwegian.json → src/utils/countries/countries-norwegian.json b/src/app/api/country/countries-norwegian.json → src/utils/countries/countries-norwegian.json
diff --git a/src/app/api/country/_countries.ts → src/utils/countries/index.ts b/src/app/api/country/_countries.ts → src/utils/countries/index.ts
@@ -1,10 +1,14 @@
 import * as R from 'remeda'
 
-import countries from './countries-norwegian.json'
-import { Country } from './_types'
+import countriesJson from './countries-norwegian.json'
 
-export const countriesResponse: Country[] = R.pipe(
-    countries,
+export type Country = {
+    code: string
+    name: string
+}
+
+export const countries: Country[] = R.pipe(
+    countriesJson,
     R.map((country) => ({
         code: country.alpha3.toUpperCase(),
         name: country.name,