fix(edit): display name error handling (#1632)

* fix(edit): display name error handling * chore(edit): refactor tilecard error handling * chore(edit): refactor * fix(edit): error handling in server
entur · Sep 5, 2024 · 4ddb2bb · 4ddb2bb
1 parent 83bd687
commit 4ddb2bb
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 51 deletions.
diff --git a/tavla/app/(admin)/edit/[id]/components/MetaSettings/actions.ts b/tavla/app/(admin)/edit/[id]/components/MetaSettings/actions.ts
@@ -24,7 +24,7 @@ export async function saveTitle(bid: TBoardID, name: string) {
         .collection('boards')
         .doc(bid)
         .update({
-            'meta.title': name.substring(0, 30),
+            'meta.title': name.substring(0, 50),
             'meta.dateModified': Date.now(),
         })
     revalidatePath(`/edit/${bid}`)

diff --git a/tavla/app/(admin)/edit/[id]/components/TileCard/actions.ts b/tavla/app/(admin)/edit/[id]/components/TileCard/actions.ts
@@ -39,7 +39,16 @@ export async function saveTile(bid: TBoardID, tile: TTile) {
             'meta.dateModified': Date.now(),
         })
     const index = doc.tiles.indexOf(oldTile)
-    doc.tiles[index] = tile
+
+    if (tile.displayName !== undefined) {
+        doc.tiles[index] = {
+            ...tile,
+            displayName: tile.displayName?.substring(0, 50),
+        }
+    } else {
+        doc.tiles[index] = tile
+    }
+
     docRef.update({ tiles: doc.tiles, 'meta.dateModified': Date.now() })
 
     revalidatePath(`/edit/${bid}`)

diff --git a/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx b/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
@@ -43,6 +43,13 @@ import { TransportModeAndLines } from './TransportModeAndLines'
 import { deleteTile, getOrganizationForBoard, saveTile } from './actions'
 import { useLines } from './useLines'
 import { sortLineByPublicCode } from './utils'
+import { isOnlyWhiteSpace } from 'app/(admin)/edit/utils'
+import {
+    TFormFeedback,
+    getFormFeedbackForError,
+    getFormFeedbackForField,
+} from 'app/(admin)/utils'
+import { useFormState } from 'react-dom'
 
 function TileCard({
     bid,
@@ -78,6 +85,49 @@ function TileCard({
 
     const [offset, setOffset] = useState(tile.offset ?? '')
 
+    const submit = async (
+        prevState: TFormFeedback | undefined,
+        data: FormData,
+    ) => {
+        const columns = data.getAll('columns') as TColumn[]
+        data.delete('columns')
+        const count = data.get('count') as number | null
+        data.delete('count')
+        const distance = data.get('showDistance') as string
+        data.delete('showDistance')
+        const offset = data.get('offset') as number | null
+        data.delete('offset')
+        const displayName = data.get('displayName') as string
+        data.delete('displayName')
+        if (isOnlyWhiteSpace(displayName)) {
+            return getFormFeedbackForError('board/tiles-name-missing')
+        }
+
+        let lines: string[] = []
+        for (const line of data.values()) {
+            lines.push(line as string)
+        }
+        // If the length of lines equals all the lines, we don't want to include any
+        lines = lines.length == count ? [] : lines
+
+        if (columns !== tile.columns) await captureColumnChangeEvent()
+
+        const newTile = {
+            ...tile,
+            columns: columns,
+            whitelistedLines: lines,
+            walkingDistance: {
+                visible: distance === 'on',
+                distance: tile.walkingDistance?.distance,
+            },
+            offset: Number(offset) || undefined,
+            displayName: displayName.substring(0, 50) || undefined,
+        } as TTile
+
+        bid === 'demo' ? saveTileToDemoBoard(newTile) : saveTile(bid, newTile)
+        reset()
+    }
+    const [state, action] = useFormState(submit, undefined)
     useEffect(() => {
         if (!address) {
             setOffsetBasedOnWalkingDistance(false)
@@ -86,8 +136,8 @@ function TileCard({
 
     const reset = () => {
         setConfirmOpen(false)
-        setIsOpen(false)
         setChanged(false)
+        setIsOpen(false)
     }
 
     const lines = useLines(tile)
@@ -213,47 +263,7 @@ function TileCard({
                 >
                     <form
                         id={tile.uuid}
-                        action={async (data: FormData) => {
-                            const columns = data.getAll('columns') as TColumn[]
-                            data.delete('columns')
-                            const count = data.get('count') as number | null
-                            data.delete('count')
-                            const distance = data.get('showDistance') as string
-                            data.delete('showDistance')
-                            const offset = data.get('offset') as number | null
-                            data.delete('offset')
-                            const displayName = data.get(
-                                'displayName',
-                            ) as string
-                            data.delete('displayName')
-
-                            let lines: string[] = []
-                            for (const line of data.values()) {
-                                lines.push(line as string)
-                            }
-                            // If the length of lines equals all the lines, we don't want to include any
-                            lines = lines.length == count ? [] : lines
-
-                            if (columns !== tile.columns)
-                                captureColumnChangeEvent()
-
-                            const newTile = {
-                                ...tile,
-                                columns: columns,
-                                whitelistedLines: lines,
-                                walkingDistance: {
-                                    visible: distance === 'on',
-                                    distance: tile.walkingDistance?.distance,
-                                },
-                                offset: Number(offset) || undefined,
-                                displayName: displayName || undefined,
-                            } as TTile
-
-                            bid === 'demo'
-                                ? saveTileToDemoBoard(newTile)
-                                : saveTile(bid, newTile)
-                        }}
-                        onSubmit={reset}
+                        action={action}
                         onInput={() => setChanged(true)}
                     >
                         <div className="flex flex-col gap-2">
@@ -268,6 +278,8 @@ function TileCard({
                                 className="!w-2/5"
                                 name="displayName"
                                 defaultValue={tile.displayName}
+                                maxLength={50}
+                                {...getFormFeedbackForField('name', state)}
                             />
                         </div>
                         <Heading4>Gåavstand</Heading4>

diff --git a/tavla/app/(admin)/edit/utils.ts b/tavla/app/(admin)/edit/utils.ts
@@ -105,3 +105,8 @@ export function getIcons(layer?: string, category?: TCategory[]) {
 export function isEmptyOrSpaces(str?: string) {
     return str === undefined || str.match(/^ *$/) !== null
 }
+export function isOnlyWhiteSpace(str: string) {
+    if (str === undefined || str === '') return false
+
+    return str.trim() === ''
+}
diff --git a/tavla/app/(admin)/utils/index.ts b/tavla/app/(admin)/utils/index.ts
@@ -22,6 +22,12 @@ export type TFormFeedback = {
 }
 
 export type TError = FirebaseError | string
+export function getFormFeedbackForField(
+    form_type: InputType,
+    feedback?: TFormFeedback,
+) {
+    if (form_type === feedback?.form_type) return feedback
+}
 
 export function getFormFeedbackForError(
     e?: TError,
@@ -230,13 +236,6 @@ export function getFormFeedbackForError(
     }
 }
 
-export function getFormFeedbackForField(
-    form_type: InputType,
-    feedback?: TFormFeedback,
-) {
-    if (form_type === feedback?.form_type) return feedback
-}
-
 export function userInOrganization(
     uid?: TUserID,
     organization?: TOrganization,