Fix number inputs

opportunity-hack · Jan 5, 2024 · 3021af6 · 3021af6
1 parent b14a846
commit 3021af6
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 75 deletions.
diff --git a/app/routes/settings+/profile.tsx b/app/routes/settings+/profile.tsx
@@ -31,10 +31,12 @@ import { StatusButton } from '~/components/ui/status-button.tsx'
 import { getUserImgSrc } from '~/utils/misc.ts'
 import {
 	emailSchema,
+	heightSchema,
 	nameSchema,
 	passwordSchema,
 	phoneSchema,
 	usernameSchema,
+	yearsOfExperienceSchema,
 } from '~/utils/user-validation.ts'
 import { twoFAVerificationType } from './profile.two-factor.tsx'
 import { Icon } from '~/components/ui/icon.tsx'
@@ -43,10 +45,7 @@ import {
 	checkboxSchema,
 	optionalDateTimeZoneSchema,
 } from '~/utils/zod-extensions.ts'
-import {
-	convertFeetInchesIntoInches,
-	convertInchesToHeightObj,
-} from '~/utils/length-conversions.ts'
+import { convertInchesToHeightObj } from '~/utils/length-conversions.ts'
 
 const profileFormSchema = z.object({
 	name: nameSchema.optional(),
@@ -55,40 +54,12 @@ const profileFormSchema = z.object({
 	mailingList: checkboxSchema(),
 	birthdate: optionalDateTimeZoneSchema.optional(),
 	phone: phoneSchema,
-	yearsOfExperience: z.coerce.number().int().min(0).optional(),
+	yearsOfExperience: yearsOfExperienceSchema,
 	currentPassword: z
 		.union([passwordSchema, z.string().min(0).max(0)])
 		.optional(),
 	newPassword: z.union([passwordSchema, z.string().min(0).max(0)]).optional(),
-	height: z
-		.object({
-			heightFeet: z.coerce
-				.number({ invalid_type_error: 'Feet must be a number' })
-				.int({ message: 'Feet must be an integer' })
-				.min(0, { message: 'Feet must be between 0 and 8' })
-				.max(8, { message: 'Feet must be between 0 and 8' })
-				.optional(),
-			heightInches: z.coerce
-				.number({ invalid_type_error: 'Inches must be a number' })
-				.int({ message: 'Inches must be an integer' })
-				.min(0, { message: 'Inches must be between 0 and 12' })
-				.max(12, { message: 'Inches must be between 0 and 12' })
-				.optional(),
-		})
-		.refine(
-			obj => {
-				return (
-					(obj.heightFeet && obj.heightInches) ||
-					(!obj.heightFeet && !obj.heightInches)
-				)
-			},
-			{ message: 'You must enter both feet and inches for height' },
-		)
-		.transform(val => {
-			if (val.heightFeet && val.heightInches) {
-				return convertFeetInchesIntoInches(val.heightFeet, val.heightInches)
-			} else return null
-		}),
+	height: heightSchema,
 })
 
 export async function loader({ request }: DataFunctionArgs) {
@@ -144,8 +115,8 @@ export async function action({ request }: DataFunctionArgs) {
 				}
 			},
 		),
-		acceptMultipleErrors: () => true,
 	})
+	console.log('submission', submission)
 	if (submission.intent !== 'submit') {
 		return json({ status: 'idle', submission } as const)
 	}
@@ -224,6 +195,7 @@ export default function EditUserProfile() {
 		constraint: getFieldsetConstraint(profileFormSchema),
 		lastSubmission: actionData?.submission,
 		onValidate({ formData }) {
+			console.log('formData', formData)
 			return parse(formData, { schema: profileFormSchema })
 		},
 		defaultValue: {
@@ -368,7 +340,7 @@ export default function EditUserProfile() {
 									}}
 									inputProps={{
 										...conform.input(heightFeet),
-										type: 'number',
+										type: 'text',
 										className: 'heightField',
 									}}
 									errors={heightFeet.errors}
@@ -382,7 +354,7 @@ export default function EditUserProfile() {
 									}}
 									inputProps={{
 										...conform.input(heightInches),
-										type: 'number',
+										type: 'text',
 										className: 'heightField',
 									}}
 									errors={heightInches.errors}
@@ -414,7 +386,7 @@ export default function EditUserProfile() {
 							}}
 							inputProps={{
 								...conform.input(fields.yearsOfExperience),
-								type: 'number',
+								type: 'text',
 							}}
 							errors={fields.yearsOfExperience.errors}
 						/>

diff --git a/app/utils/user-validation.ts b/app/utils/user-validation.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod'
+import { convertFeetInchesIntoInches } from './length-conversions.ts'
 
 export const usernameSchema = z
 	.string()
@@ -31,3 +32,53 @@ export const phoneSchema = z
 		message: 'Phone number must be ten digits',
 	})
 	.transform(phone => phone.replaceAll(/\D/g, ''))
+
+export const yearsOfExperienceSchema = z
+	.number({ invalid_type_error: 'Must input valid number' })
+	.int({ message: 'must be integer' })
+	.min(0)
+	.nullish()
+	.transform(value => (value === undefined ? null : value))
+
+export const heightSchema = z
+	.object({
+		heightFeet: z
+			.number({ invalid_type_error: 'Feet must be a number' })
+			.int({ message: 'Feet must be an integer' })
+			.min(0, { message: 'Feet must be between 0 and 8' })
+			.max(8, { message: 'Feet must be between 0 and 8' })
+			.optional()
+			.transform(val => {
+				if (val === undefined) return null
+				else return val
+			}),
+		heightInches: z
+			.number({ invalid_type_error: 'Inches must be a number' })
+			.int({ message: 'Inches must be an integer' })
+			.min(0, { message: 'Inches must be between 0 and 12' })
+			.max(12, { message: 'Inches must be between 0 and 12' })
+			.optional()
+			.transform(val => {
+				if (val === undefined) return null
+				else return val
+			}),
+	})
+	.refine(
+		obj => {
+			console.log('refine', obj.heightFeet, obj.heightInches)
+			return (
+				(typeof obj.heightFeet === 'number' &&
+					typeof obj.heightInches === 'number') ||
+				(!obj.heightFeet && !obj.heightInches)
+			)
+		},
+		{ message: 'You must enter both feet and inches for height' },
+	)
+	.transform(val => {
+		if (
+			typeof val.heightFeet === 'number' &&
+			typeof val.heightInches === 'number'
+		) {
+			return convertFeetInchesIntoInches(val.heightFeet, val.heightInches)
+		} else return null
+	})
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,8 +34,8 @@
     "/server-build"
   ],
   "dependencies": {
-    "@conform-to/react": "^0.7.0",
-    "@conform-to/zod": "^0.7.0",
+    "@conform-to/react": "^0.9.1",
+    "@conform-to/zod": "^0.9.1",
     "@headlessui/react": "^1.7.15",
     "@prisma/client": "^4.16.0",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -102,7 +102,7 @@
     "tailwindcss-radix": "^2.8.0",
     "thirty-two": "^1.0.2",
     "tiny-invariant": "^1.3.1",
-    "zod": "^3.21.4"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",