Fix: PR comments

delta10 · Nov 6, 2024 · 9216c1b · 9216c1b
1 parent d9924d1
commit 9216c1b
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 52 deletions.
diff --git a/config.json b/config.json
@@ -5,6 +5,7 @@
       "primaryColor": "#24578f"
     },
     "map": {
+      "find_address_in_distance": 30,
       "center": [
         52.3731081,
         4.8932945

diff --git a/src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx b/src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx
@@ -12,6 +12,7 @@ import { Paragraph } from '@/components/index'
 import { RenderSingleField } from '@/app/[locale]/incident/add/components/questions/RenderSingleField'
 import { LocationSelect } from '@/app/[locale]/incident/add/components/questions/LocationSelect'
 import { useTranslations } from 'next-intl'
+import { isCoordinates } from '@/lib/utils/map'
 
 export const IncidentQuestionsLocationForm = () => {
   const { formState: formStoreState, updateForm } = useFormStore()
@@ -36,12 +37,6 @@ export const IncidentQuestionsLocationForm = () => {
           formStoreState.sub_category
         )
 
-        console.log(
-          additionalQuestions,
-          formStoreState.main_category,
-          formStoreState.sub_category
-        )
-
         setAdditionalQuestions(additionalQuestions)
 
         setLoading(false)
@@ -56,7 +51,7 @@ export const IncidentQuestionsLocationForm = () => {
 
   useEffect(() => {
     if (
-      formStoreState.coordinates &&
+      isCoordinates(formStoreState.coordinates) &&
       formStoreState.coordinates[0] === 0 &&
       formStoreState.coordinates[1] === 0
     ) {

diff --git a/src/app/[locale]/incident/add/components/MapDialog.tsx b/src/app/[locale]/incident/add/components/MapDialog.tsx
@@ -9,7 +9,7 @@ import Map, {
 import { useTranslations } from 'next-intl'
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
 import { useFormStore } from '@/store/form_store'
-import { Heading } from '@/components/index'
+import { Heading, Icon } from '@/components/index'
 import { useConfig } from '@/hooks/useConfig'
 import { Button } from '@/components/index'
 import { IconMapPinFilled } from '@tabler/icons-react'
@@ -110,18 +110,19 @@ const MapDialog = ({ trigger }: MapDialogProps) => {
                 id="dialogMap"
                 onClick={(e) => handleMapClick(e)}
                 onMove={(evt) => setViewState(evt.viewState)}
-                style={{ width: '100%', height: '100%' }}
+                style={{ blockSize: '100%', inlineSize: '100%' }}
                 mapStyle={`${process.env.NEXT_PUBLIC_MAPTILER_MAP}/style.json?key=${process.env.NEXT_PUBLIC_MAPTILER_API_KEY}`}
                 attributionControl={false}
                 maxBounds={config.base.map.maxBounds}
               >
                 {marker.length && (
                   <Marker latitude={marker[0]} longitude={marker[1]}>
-                    <IconMapPinFilled
-                      size={42}
-                      className="-translate-y-1/2"
-                      color={config.base.style.primaryColor}
-                    />
+                    <Icon className="map-marker-icon">
+                      <IconMapPinFilled
+                        className="-translate-y-1/2"
+                        color={config.base.style.primaryColor}
+                      />
+                    </Icon>
                   </Marker>
                 )}
               </Map>

diff --git a/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx b/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx
@@ -7,6 +7,10 @@ import React, { useEffect, useState } from 'react'
 import { Button, Paragraph } from '@/components/index'
 import { useFormStore } from '@/store/form_store'
 import { getNearestAddressByCoordinate } from '@/services/location/address'
+import { useConfig } from '@/hooks/useConfig'
+import { isCoordinates } from '@/lib/utils/map'
+import { Alert } from '@utrecht/component-library-react/dist/css-module'
+import { LinkButton } from '@utrecht/component-library-react'
 
 export interface LocationSelectProps {
   field?: PublicQuestion
@@ -19,13 +23,14 @@ export const LocationSelect = ({ field }: LocationSelectProps) => {
   const errorMessage = errors['location']?.message as string
   const { formState: formStoreState } = useFormStore()
   const [address, setAddress] = useState<string | null>(null)
+  const { config } = useConfig()
 
   useEffect(() => {
     const getAddress = async () => {
       const result = await getNearestAddressByCoordinate(
         formStoreState.coordinates[0],
         formStoreState.coordinates[1],
-        10
+        config ? config.base.map.find_address_in_distance : 30
       )
 
       if (result) {
@@ -39,41 +44,36 @@ export const LocationSelect = ({ field }: LocationSelectProps) => {
   }, [formStoreState.coordinates])
 
   return (
-    <div className="relative w-full">
-      {errorMessage && (
-        <Paragraph
-          id="location-error"
-          aria-live="assertive"
-          style={{ color: 'red' }}
-        >
-          {errorMessage}
-        </Paragraph>
-      )}
+    <div className="w-full">
+      {errorMessage && <Alert type="error">{errorMessage}</Alert>}
       <label htmlFor="location-button">
         {field ? field.meta.label : 'Waar is het?'}
       </label>
-      <LocationMap />
-      <Paragraph>{address}</Paragraph>
-      <MapProvider>
-        <MapDialog
-          trigger={
-            formStoreState.coordinates[0] === 0 &&
-            formStoreState.coordinates[1] === 0 ? (
-              <Button
-                id="location-button"
-                className="absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 border-none"
-                type="button"
-              >
-                Kies locatie
-              </Button>
-            ) : (
-              <button id="location-button" type="button">
-                Wijzig locatie
-              </button>
-            )
-          }
-        />
-      </MapProvider>
+      <div className="relative w-full">
+        <LocationMap />
+        <Paragraph>{address}</Paragraph>
+        <MapProvider>
+          <MapDialog
+            trigger={
+              isCoordinates(formStoreState.coordinates) &&
+              formStoreState.coordinates[0] === 0 &&
+              formStoreState.coordinates[1] === 0 ? (
+                <Button
+                  id="location-button"
+                  className="absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 border-none"
+                  type="button"
+                >
+                  Kies locatie
+                </Button>
+              ) : (
+                <LinkButton inline={true} id="location-button" type="button">
+                  Wijzig locatie
+                </LinkButton>
+              )
+            }
+          />
+        </MapProvider>
+      </div>
       {/* TODO: toon locatie, straatnaam bijv. */}
     </div>
   )

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -68,4 +68,9 @@
     left: 29px;
     border-radius: 50%;
     border: 1px solid rgb(0, 32, 92);
+}
+
+/* map */
+.map-marker-icon {
+    --utrecht-icon-size: 42px;
 }
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -11,4 +11,5 @@ export {
   Link,
   Paragraph,
   PreHeading,
+  Icon,
 } from '@utrecht/component-library-react/dist/css-module'
diff --git a/src/components/ui/LocationMap.tsx b/src/components/ui/LocationMap.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { useFormStore } from '@/store/form_store'
 import { useConfig } from '@/hooks/useConfig'
 import { IconMapPinFilled } from '@tabler/icons-react'
+import { Icon } from '@/components/index'
 
 const LocationMap = () => {
   const { formState } = useFormStore()
@@ -69,11 +70,12 @@ const LocationMap = () => {
         attributionControl={false}
       >
         <Marker latitude={marker[0]} longitude={marker[1]}>
-          <IconMapPinFilled
-            size={42}
-            className="-translate-y-1/2"
-            color={config.base.style.primaryColor}
-          />
+          <Icon className="map-marker-icon">
+            <IconMapPinFilled
+              className="-translate-y-1/2"
+              color={config.base.style.primaryColor}
+            />
+          </Icon>
         </Marker>
       </Map>
     )

diff --git a/src/lib/utils/map.ts b/src/lib/utils/map.ts
@@ -0,0 +1,8 @@
+export const isCoordinates = (arg: unknown): arg is [number, number] => {
+  return (
+    Array.isArray(arg) &&
+    arg.length === 2 &&
+    typeof arg[0] === 'number' &&
+    typeof arg[1] === 'number'
+  )
+}
diff --git a/src/types/config.ts b/src/types/config.ts
@@ -5,6 +5,7 @@ export type AppConfig = {
       primaryColor: string
     }
     map: {
+      find_address_in_distance: number
       center: [number, number]
       maxBounds: [[number, number], [number, number]]
     }