fix bug with phone number

colorstackorg · Aug 31, 2024 · 9bbdc0a · 9bbdc0a
1 parent 0ab2d0c
commit 9bbdc0a
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 8 deletions.
diff --git a/apps/member-profile/app/routes/_profile.profile.general.tsx b/apps/member-profile/app/routes/_profile.profile.general.tsx
@@ -177,12 +177,13 @@ export default function UpdateGeneralInformationSection() {
         />
 
         <InputField
-          defaultValue={student.phoneNumber?.toString() || undefined}
+          defaultValue={student.phoneNumber || undefined}
           description="Enter your 10-digit phone number below (no formatting characters e.g. '-' or '(')."
           error={errors.phoneNumber}
           label="Phone Number"
           name={keys.phoneNumber}
           placeholder="1234567890"
+          type="number"
         />
 
         <Button.Group>

diff --git a/packages/db/src/migrations/20240824172428_add_phone_number_field.ts b/packages/db/src/migrations/20240824172428_add_phone_number_field.ts
@@ -3,7 +3,7 @@ import { type Kysely } from 'kysely';
 export async function up(db: Kysely<any>) {
   await db.schema
     .alterTable('students')
-    .addColumn('phone_number', 'integer')
+    .addColumn('phone_number', 'text')
     .execute();
 }
 

diff --git a/packages/db/src/scripts/seed.ts b/packages/db/src/scripts/seed.ts
@@ -125,7 +125,6 @@ async function seed(trx: Transaction<DB>) {
         otherDemographics: [],
         race: [],
         schoolId: schoolId1,
-        phoneNumber: 1234567890,
       },
     ])
     .execute();

diff --git a/packages/types/src/domain/student.ts b/packages/types/src/domain/student.ts
@@ -135,10 +135,10 @@ export const Student = Entity.merge(StudentSocialLinks)
     joinedSlackAt: z.coerce.date().optional(),
     lastName: z.string().trim().min(1),
     phoneNumber: z
-      .number()
-      .int()
-      .gte(1000000000) // 10-digit numbers start from 1000000000
-      .lte(9999999999) // 10-digit numbers end at 9999999999
+      .string()
+      .trim()
+      .length(10, 'Phone Number must be a 10-digit number')
+      .regex(/^\d+$/, 'Phone Number must contain only digits')
       .optional(),
 
     /**

diff --git a/packages/ui/src/components/form.tsx b/packages/ui/src/components/form.tsx
@@ -71,7 +71,7 @@ Form.Field = function FormField({
 
 type InputFieldProps = FieldProps<string> &
   Pick<FormFieldProps, 'description' | 'label' | 'required'> &
-  Pick<InputProps, 'disabled' | 'placeholder'>;
+  Pick<InputProps, 'disabled' | 'placeholder' | 'type'>;
 
 export function InputField({
   defaultValue,
@@ -82,6 +82,7 @@ export function InputField({
   name,
   placeholder,
   required,
+  type = 'text',
 }: InputFieldProps) {
   return (
     <Form.Field
@@ -98,6 +99,7 @@ export function InputField({
         name={name}
         placeholder={placeholder}
         required={required}
+        type={type}
       />
     </Form.Field>
   );