feat(tile): set offset based on walking distance (#1583)

* feat(tile): set offset based on walking distance * style(tilecard): add punctuation and gap * fix(tilecard): refactor logic * chore(tilecard): rename function * chore(): delete unused code * feat(offset): add tracking on btn * fix(offset): use ref to get dom element * chore(offset): include dependency in array * fix(offset): not possible to be undefined in controlled input * fix(offset): fallback to null * chore(offset): move logic to onchange * chore(offset): simplify logic
entur · Aug 6, 2024 · aa88824 · aa88824
1 parent b3d8f31
commit aa88824
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 62 deletions.
diff --git a/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx b/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
@@ -8,7 +8,6 @@ import {
     SecondarySquareButton,
 } from '@entur/button'
 import { FilterChip } from '@entur/chip'
-import { Switch, TextField } from '@entur/form'
 import {
     CloseIcon,
     DeleteIcon,
@@ -17,6 +16,7 @@ import {
     QuestionIcon,
     UpwardIcon,
 } from '@entur/icons'
+import { Checkbox, Switch, TextField } from '@entur/form'
 import { Modal } from '@entur/modal'
 import {
     Heading3,
@@ -32,7 +32,7 @@ import { TransportIcon } from 'components/TransportIcon'
 import { isArray, uniqBy } from 'lodash'
 import Image from 'next/image'
 import { usePostHog } from 'posthog-js/react'
-import { Dispatch, SetStateAction, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 import { Columns, TColumn } from 'types/column'
 import { TBoard, TBoardID } from 'types/settings'
 import { getBoard, getWalkingDistanceTile } from '../../actions'
@@ -69,6 +69,20 @@ function TileCard({
     const [confirmOpen, setConfirmOpen] = useState(false)
     const [isColumnModalOpen, setIsColumnModalOpen] = useState(false)
 
+    const walkingDistanceInMinutes = Math.ceil(
+        (tile.walkingDistance?.distance ?? 0) / 60,
+    )
+    const [offsetBasedOnWalkingDistance, setOffsetBasedOnWalkingDistance] =
+        useState(walkingDistanceInMinutes === tile.offset)
+
+    const [offset, setOffset] = useState(tile.offset ?? '')
+
+    useEffect(() => {
+        if (!address) {
+            setOffsetBasedOnWalkingDistance(false)
+        }
+    }, [address])
+
     const reset = () => {
         setConfirmOpen(false)
         setIsOpen(false)
@@ -226,7 +240,7 @@ function TileCard({
                                     visible: distance === 'on',
                                     distance: tile.walkingDistance?.distance,
                                 },
-                                offset: Number(offset),
+                                offset: Number(offset) || undefined,
                             } as TTile
 
                             if (distance === 'on' && !tile.walkingDistance) {
@@ -247,48 +261,74 @@ function TileCard({
                         onSubmit={reset}
                         onInput={() => setChanged(true)}
                     >
-                        <Heading4 margin="none">Gåavstand</Heading4>
+                        <Heading4 margin="bottom">Gåavstand</Heading4>
                         <SubParagraph>
                             Vis gåavstand fra lokasjonen til Tavla til
-                            stoppestedet
+                            stoppestedet.
                         </SubParagraph>
-                        <div className="flex flex-col">
-                            {!address?.name && (
-                                <Label className="!text-error">
-                                    {demoBoard
-                                        ? 'Logg inn for å få tilgang til funksjonaliteten'
-                                        : 'Du må legge til en lokasjon for å kunne skru på gåavstand'}
-                                </Label>
+                        {!address && (
+                            <Label className="!text-error">
+                                {demoBoard
+                                    ? 'Logg inn for å få tilgang til funksjonaliteten.'
+                                    : 'Du må legge til en lokasjon for å kunne skru på gåavstand.'}
+                            </Label>
+                        )}
+                        <Switch
+                            name="showDistance"
+                            disabled={!address}
+                            defaultChecked={
+                                tile.walkingDistance?.visible ?? false
+                            }
+                        >
+                            Vis gåavstand
+                        </Switch>
+
+                        <Heading4>Forskyv avgangstid</Heading4>
+                        <div className="flex flex-col gap-2">
+                            <SubParagraph>
+                                Vis kun avganger som går om mer enn et valgt
+                                antall minutter.
+                            </SubParagraph>
+                            <TextField
+                                label="Antall minutter"
+                                name="offset"
+                                id="offset"
+                                type="number"
+                                min={0}
+                                className="!w-2/5"
+                                value={offset}
+                                onChange={(e) => {
+                                    setOffset(e.target.valueAsNumber || '')
+                                }}
+                                readOnly={offsetBasedOnWalkingDistance}
+                            />
+                            {address && (
+                                <Checkbox
+                                    checked={offsetBasedOnWalkingDistance}
+                                    onChange={() => {
+                                        if (!offsetBasedOnWalkingDistance)
+                                            setOffset(walkingDistanceInMinutes)
+                                        else setOffset(tile.offset ?? '')
+
+                                        setOffsetBasedOnWalkingDistance(
+                                            !offsetBasedOnWalkingDistance,
+                                        )
+
+                                        posthog.capture(
+                                            'OFFSET_BASED_ON_WALKING_DISTANCE_BTN_CLICK',
+                                        )
+                                    }}
+                                >
+                                    Forskyv basert på gåavstand
+                                </Checkbox>
                             )}
-                            <Switch
-                                name="showDistance"
-                                disabled={address ? false : true}
-                                defaultChecked={
-                                    tile.walkingDistance?.visible ?? false
-                                }
-                            >
-                                Vis gåavstand
-                            </Switch>
                         </div>
-                        <Heading4>Avganger frem i tid</Heading4>
-                        <SubParagraph>
-                            Vis kun avganger som går om mer enn valgt antall
-                            minutter
-                        </SubParagraph>
-                        <TextField
-                            label="Antall minutter"
-                            name="offset"
-                            type="number"
-                            min={0}
-                            className="w-full sm:w-1/3"
-                            defaultValue={tile.offset ? tile.offset : undefined}
-                        />
 
                         <Heading4>Kolonner</Heading4>
                         <div className="flex flex-row items-center gap-2">
                             <SubParagraph>
                                 Her bestemmer du hvilke kolonner som skal vises
-                                i tavlen
+                                i tavlen.
                             </SubParagraph>
                             <Tooltip
                                 aria-hidden
@@ -329,6 +369,7 @@ function TileCard({
                                 )
                             })}
                         </div>
+
                         <Heading4>Transportmidler og linjer</Heading4>
                         <div className="flex flex-row gap-4">
                             {linesByModeSorted.map(

diff --git a/next-tavla/app/(admin)/edit/[id]/components/TileCard/utils.ts b/next-tavla/app/(admin)/edit/[id]/components/TileCard/utils.ts
@@ -1,32 +1,6 @@
-import { GRAPHQL_ENDPOINTS } from 'assets/env'
-import { QuayEditQuery, StopPlaceEditQuery } from 'graphql/index'
-import { TQuay, TTransportMode } from 'types/graphql-schema'
-import { TTile } from 'types/tile'
-import { fieldsNotNull } from 'utils/typeguards'
+import { TTransportMode } from 'types/graphql-schema'
 import { TLineFragment } from './types'
 
-export async function fetchLines(tile: TTile) {
-    const res = await fetch(GRAPHQL_ENDPOINTS['journey-planner'], {
-        headers: {
-            'Content-Type': 'application/json',
-            'ET-Client-Name': 'tavla-test',
-        },
-        body: JSON.stringify({
-            query: tile.type === 'quay' ? QuayEditQuery : StopPlaceEditQuery,
-            variables: { placeId: tile.placeId },
-        }),
-        method: 'POST',
-    })
-    const data = await res.json()
-    if (tile.type === 'quay')
-        return data.data?.quay?.lines.filter(fieldsNotNull) ?? []
-    return (
-        data.data?.stopPlace?.quays
-            ?.flatMap((q: TQuay) => q?.lines)
-            .filter(fieldsNotNull) || []
-    )
-}
-
 export function sortLineByPublicCode(a: TLineFragment, b: TLineFragment) {
     if (!a || !a.publicCode || !b || !b.publicCode) return 1