fix(tileselector): bug where airplane lines not shown on platform sel…

…ect (#1633)

* fix(admin): quays with only airplane lines show up as only one airplane icon in the platform select dropdown

* fix(admin): move quays into useCallback

* fix(admin): resize plane icon and remove unused code

tavla/app/(admin)/hooks/useQuaySearch.ts

@@ -1,6 +1,5 @@
 import { QuaysSearchQuery } from 'graphql/index'
 import { isNotNullOrUndefined } from 'utils/typeguards'
-import { hasDuplicateInArrayByKey } from 'utils/filters'
 import { TDirectionType } from 'types/graphql-schema'
 import { NormalizedDropdownItemType } from '@entur/dropdown'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -41,10 +40,13 @@ function useQuaySearch(stopPlaceId: string, icons = true) {
 
     useEffect(() => setSelectedQuay(null), [stopPlaceId])
 
-    const quays = useMemo(
+    const nonAirQuays = useMemo(
         () =>
             data?.stopPlace?.quays
                 ?.filter(isNotNullOrUndefined)
+                .filter((quay) =>
+                    quay.lines.some((line) => line.transportMode !== 'air'),
+                )
                 .map((quay, index) => ({
                     value: quay.id,
                     label: getPlatformLabel(
@@ -83,26 +85,35 @@ function useQuaySearch(stopPlaceId: string, icons = true) {
                     return a.label.localeCompare(b.label, 'no-NB', {
                         numeric: true,
                     })
-                })
-                .map((item, index, array) => {
-                    if (!hasDuplicateInArrayByKey(array, item, 'label')) {
-                        return item
-                    } else {
-                        return {
-                            ...item,
-                            label: item.label,
-                            icons: item.icons,
-                        }
-                    }
                 }) || [],
         [data, icons],
     )
 
-    const getQuays = useCallback(
-        () => [{ value: stopPlaceId, label: 'Vis alle' }, ...quays],
-        [quays, stopPlaceId],
+    const airQuays = useMemo(
+        () =>
+            data?.stopPlace?.quays
+                ?.filter(isNotNullOrUndefined)
+                .filter((quay) =>
+                    quay.lines.some((line) => line.transportMode === 'air'),
+                )
+                .map((quay) => ({
+                    value: quay.id,
+                    label: 'Terminal',
+                    icons: [
+                        () =>
+                            SmallTravelTag({
+                                transportMode: 'air',
+                            }),
+                    ],
+                })) || [],
+        [data],
     )
 
+    const getQuays = useCallback(() => {
+        const quays = [...nonAirQuays, ...airQuays]
+        return [{ value: stopPlaceId, label: 'Vis alle' }, ...quays]
+    }, [nonAirQuays, airQuays, stopPlaceId])
+
     return { quays: getQuays, selectedQuay, setSelectedQuay }
 }
 

tavla/src/Shared/components/TravelTag/index.tsx

@@ -55,7 +55,7 @@ function SmallTravelTag({
     publicCode?: string | null
     icons?: boolean
 }) {
-    if (!transportMode || !publicCode) return null
+    if (!transportMode || (!publicCode && transportMode !== 'air')) return null
     return (
         <div
             aria-label={`${transportModeNames[transportMode]} - linje ${publicCode}`}
@@ -66,13 +66,17 @@ function SmallTravelTag({
         >
             {icons && (
                 <TransportIcon
-                    className="hidden lg:block w-6 h-6 fill-background"
+                    className={`block h-6 fill-background ${
+                        transportMode === 'air' ? 'w-4' : 'w-6'
+                    }`}
                     transportMode={transportMode}
                 />
             )}
-            <div className="text-[0.65rem] w-full flex justify-center align-center">
-                {publicCode}
-            </div>
+            {transportMode !== 'air' && (
+                <div className="text-[0.65rem] w-full flex justify-center align-center">
+                    {publicCode}
+                </div>
+            )}
         </div>
     )
 }