fix(v2): remove invalid regex route path for public forms

frontend/src/app/AppRouter.tsx

@@ -6,7 +6,7 @@ import {
   ADMINFORM_ROUTE,
   ADMINFORM_SETTINGS_SUBROUTE,
   LOGIN_ROUTE,
-  PUBLIC_FORM_REGEX,
+  PUBLICFORM_ROUTE,
   ROOT_ROUTE,
 } from '~constants/routes'
 
@@ -37,7 +37,7 @@ export const AppRouter = (): JSX.Element => {
           element={<PublicElement strict element={<LoginPage />} />}
         />
         <Route
-          path={PUBLIC_FORM_REGEX}
+          path={PUBLICFORM_ROUTE}
           element={<PublicElement element={<PublicFormPage />} />}
         />
         <Route

frontend/src/constants/routes.ts

@@ -3,11 +3,10 @@ export const LANDING_ROUTE = '/'
 export const ROOT_ROUTE = '/'
 export const LOGIN_ROUTE = '/login'
 
-const PUBLIC_FORM_PARAM = 'formId'
-/** Used for typing useParams in PublicFormPage. */
-export type PublicFormParam = { [PUBLIC_FORM_PARAM]: string }
-export const PUBLIC_FORM_REGEX =
-  `/:${PUBLIC_FORM_PARAM}([a-fA-F0-9]{24})` as const
+// Cannot use regex match in react-router@6, which means we need to validate
+// the regex in PublicFormPage.
+export const PUBLICFORM_ROUTE = '/:formId'
+export const PUBLICFORM_REGEX = /^([a-fA-F0-9]{24})$/
 
 export const ADMINFORM_ROUTE = '/admin/form'
 /** Build tab has no subroute, its the index admin form route. */

frontend/src/features/public-form/PublicFormPage.stories.tsx

@@ -11,7 +11,7 @@ export default {
   component: PublicFormPage,
   decorators: [
     StoryRouter({
-      initialEntries: ['/12345'],
+      initialEntries: ['/61540ece3d4a6e50ac0cc6ff'],
       path: '/:formId',
     }),
   ],

frontend/src/features/public-form/PublicFormPage.tsx

@@ -1,5 +1,7 @@
+import { useParams } from 'react-router-dom'
 import { Flex } from '@chakra-ui/react'
 
+import { PUBLICFORM_REGEX } from '~constants/routes'
 import { HttpError } from '~services/ApiService'
 
 import FormFields from './components/FormFields'
@@ -8,9 +10,14 @@ import { PublicFormProvider } from './PublicFormContext'
 import { usePublicFormView } from './queries'
 
 export const PublicFormPage = (): JSX.Element => {
+  const { formId } = useParams()
   const { error } = usePublicFormView()
 
-  if (error instanceof HttpError && error.code === 404) {
+  if (
+    !formId ||
+    !PUBLICFORM_REGEX.test(formId) ||
+    (error instanceof HttpError && error.code === 404)
+  ) {
     return <div>404</div>
   }
 

frontend/src/features/public-form/components/FormStartPage/FormStartPage.stories.tsx

@@ -24,7 +24,7 @@ export default {
   component: FormStartPage,
   decorators: [
     StoryRouter({
-      initialEntries: ['/12345'],
+      initialEntries: ['/61540ece3d4a6e50ac0cc6ff'],
       path: '/:formId',
     }),
     (storyFn) => <PublicFormProvider>{storyFn()}</PublicFormProvider>,

frontend/src/features/public-form/queries.ts

@@ -5,6 +5,8 @@ import { PublicFormViewDto } from '~shared/types/form/form'
 
 import { ApiError } from '~typings/core'
 
+import { PUBLICFORM_REGEX } from '~constants/routes'
+
 import { getPublicFormView } from './PublicFormService'
 
 const publicFormKeys = {
@@ -21,8 +23,12 @@ export const usePublicFormView = (): UseQueryResult<
   const { formId } = useParams()
   if (!formId) throw new Error('No formId provided')
 
-  return useQuery<PublicFormViewDto, ApiError>(publicFormKeys.id(formId), () =>
-    getPublicFormView(formId),
+  return useQuery<PublicFormViewDto, ApiError>(
+    publicFormKeys.id(formId),
+    () => getPublicFormView(formId),
+    {
+      enabled: PUBLICFORM_REGEX.test(formId),
+    },
   )
 }