fix(web): Change form field value to unique value (#15612)

* Change form field value to unique value * Handle recipient form field decider * Add again ts ignore for web build --------- Co-authored-by: runarvestmann <[email protected]>
island-is · Aug 9, 2024 · 61ba7e9 · 61ba7e9
1 parent 0b21114
commit 61ba7e9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/apps/web/components/Form/Form.tsx b/apps/web/components/Form/Form.tsx
@@ -43,6 +43,9 @@ const CREATE_UPLOAD_URL = gql`
     }
   }
 `
+const getUniqueFormFieldValue = (field: FormFieldProps['field']) => {
+  return slugify(field.title + '-' + field.id)
+}
 
 export enum FormFieldType {
   CHECKBOXES = 'checkboxes',
@@ -257,7 +260,7 @@ export const Form = ({ form }: FormProps) => {
   const [data, setData] = useState<Record<string, string>>(() => {
     const fields = form.fields
       .filter((field) => field.type !== FormFieldType.INFORMATION)
-      .map((field): [string, string] => [slugify(field.title), ''])
+      .map((field): [string, string] => [getUniqueFormFieldValue(field), ''])
 
     if (defaultNameFieldIsShown) {
       fields.push(['name', ''])
@@ -273,7 +276,7 @@ export const Form = ({ form }: FormProps) => {
     Object.fromEntries(
       form.fields
         .filter((field) => field.type === FormFieldType.FILE)
-        .map((field) => [slugify(field.title), []]),
+        .map((field) => [getUniqueFormFieldValue(field), []]),
     ),
   )
   const [errors, setErrors] = useState<ErrorData[]>([])
@@ -331,7 +334,9 @@ export const Form = ({ form }: FormProps) => {
   const validate = () => {
     const err = Object.keys(data)
       .map((slug) => {
-        const field = form.fields.find((f) => slugify(f.title) === slug)
+        const field = form.fields.find(
+          (f) => getUniqueFormFieldValue(f) === slug,
+        )
 
         // Handle name and email
         if (!field) {
@@ -438,7 +443,7 @@ export const Form = ({ form }: FormProps) => {
       form.fields
         .filter((field) => field.type !== FormFieldType.INFORMATION)
         .map((field) => {
-          const value = data[slugify(field.title)]
+          const value = data[getUniqueFormFieldValue(field)]
           if (field.type === FormFieldType.ACCEPT_TERMS) {
             return `${field.title}\nSvar: ${
               value === 'true'
@@ -469,8 +474,8 @@ export const Form = ({ form }: FormProps) => {
 
   /** Returns the value for the form field that decides what email the form will be sent to */
   const getRecipientFormFieldDeciderValue = (): string | undefined => {
-    if (!form?.recipientFormFieldDecider?.title) return undefined
-    return data[slugify(form.recipientFormFieldDecider.title)]
+    if (!form?.recipientFormFieldDecider?.id) return undefined
+    return data[getUniqueFormFieldValue(form.recipientFormFieldDecider)]
   }
 
   const uploadFile = async (
@@ -545,7 +550,7 @@ export const Form = ({ form }: FormProps) => {
             .map((field) => {
               return new Promise((resolve, reject) => {
                 Promise.all(
-                  fileList[slugify(field.title)].map((file) => {
+                  fileList[getUniqueFormFieldValue(field)].map((file) => {
                     return new Promise((resolve, reject) => {
                       createUploadUrl({
                         variables: {
@@ -557,7 +562,7 @@ export const Form = ({ form }: FormProps) => {
                             uploadFile(
                               file,
                               response.data.createUploadUrl,
-                              slugify(field.title),
+                              getUniqueFormFieldValue(field),
                             ).then(() =>
                               resolve(
                                 response.data?.createUploadUrl.fields.key,
@@ -572,7 +577,7 @@ export const Form = ({ form }: FormProps) => {
                   }),
                 )
                   .then((fileNames) =>
-                    resolve([slugify(field.title), fileNames]),
+                    resolve([getUniqueFormFieldValue(field), fileNames]),
                   )
                   .catch(() => reject())
               })
@@ -585,10 +590,10 @@ export const Form = ({ form }: FormProps) => {
             form.fields
               .filter((field) => field.type === FormFieldType.FILE)
               .map((field) => [
-                slugify(field.title),
+                getUniqueFormFieldValue(field),
                 JSON.stringify(
                   (files as string[][]).find(
-                    (file) => file[0] === slugify(field.title),
+                    (file) => file[0] === getUniqueFormFieldValue(field),
                   )?.[1],
                 ),
               ]),
@@ -729,7 +734,7 @@ export const Form = ({ form }: FormProps) => {
             {form.fields
               .filter((field) => field.type !== FormFieldType.FILE)
               .map((field) => {
-                const slug = slugify(field.title)
+                const slug = getUniqueFormFieldValue(field)
                 return (
                   <FormField
                     key={field.id}
@@ -760,7 +765,7 @@ export const Form = ({ form }: FormProps) => {
             {form.fields
               .filter((field) => field.type === FormFieldType.FILE)
               .map((field) => {
-                const slug = slugify(field.title)
+                const slug = getUniqueFormFieldValue(field)
                 return (
                   <InputFileUpload
                     key={slug}

diff --git a/apps/web/screens/queries/fragments.ts b/apps/web/screens/queries/fragments.ts
@@ -535,6 +535,7 @@ export const slices = gql`
     intro
     defaultFieldNamespace
     fields {
+      id
       title
       name
       placeholder
@@ -547,6 +548,7 @@ export const slices = gql`
     aboutYouHeadingText
     questionsHeadingText
     recipientFormFieldDecider {
+      id
       title
       placeholder
       type