fix(portal): dietary restrictions, allergies, and graduation date not updating

Author: HasithDeAlwis

libs/db/collections/models/Users.ts

@@ -365,16 +365,16 @@ export const Users: CollectionConfig = {
         { label: '🕌 Halal', value: 'halal' },
         { label: '✡ Kosher', value: 'kosher' },
         { label: '🐟 Pescatarian', value: 'pescatarian' },
-        { label: '🥛 Dairy-Free', value: 'dairy-free' },
-        { label: '🌾 Gluten-Free', value: 'gluten-free' },
-        { label: '🍤 Shellfish-Free', value: 'shellfish-free' },
-        { label: '🥜 Nut-Free', value: 'nut-free' },
+        { label: '🥛 Dairy-Free', value: 'dairy_free' },
+        { label: '🌾 Gluten-Free', value: 'gluten_free' },
+        { label: '🍤 Shellfish-Free', value: 'shellfish_free' },
+        { label: '🥜 Nut-Free', value: 'nut_free' },
         { label: '🥩 Keto', value: 'keto' },
-        { label: '🧀 Low-Lactose', value: 'low-lactose' },
-        { label: '🍚 Low-Carb', value: 'low-carb' },
+        { label: '🧀 Low-Lactose', value: 'low_lactose' },
+        { label: '🍚 Low-Carb', value: 'low_carb' },
         { label: '🍖 Paleo', value: 'paleo' },
-        { label: '⚡ High-Protein', value: 'high-protein' },
-        { label: '🌿 Raw Vegan', value: 'raw-vegan' },
+        { label: '⚡ High-Protein', value: 'high_protein' },
+        { label: '🌿 Raw Vegan', value: 'raw_vegan' },
         { label: '🥒 Whole30', value: 'whole30' },
         { label: '🍵 Fasting', value: 'fasting' },
         { label: '❓ Other', value: 'other' },

libs/portal/features/profile/constants.ts

@@ -514,6 +514,7 @@ export const RESTRICTIONS = {
     { label: 'Paleo', value: 'paleo' },
     { label: 'Low-Carb', value: 'low_carb' },
     { label: 'Low-Sodium', value: 'low_sodium' },
+    { label: 'Fasting', value: 'fasting' },
     { label: 'Other', value: 'other' },
   ],
 

libs/portal/features/profile/hooks/use-profile-schema.ts

@@ -3,11 +3,38 @@ import { YearStandings } from '@cuhacking/portal/types/year-standings'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
+import { RESTRICTIONS } from '../constants'
 
+function refinedUserData(user: Partial<UserDetails>) {
+  let graduationDate
+  if (user.expectedGraduationDate) {
+    graduationDate = new Date(user.expectedGraduationDate)
+  }
+  let refinedAllergies
+  if (user.allergies) {
+    refinedAllergies = user.allergies
+      .map(value => RESTRICTIONS.ALLERGIES.find(
+        allergy => allergy.value === value,
+      ))
+      .filter(Boolean)
+  }
+
+  let refinedRestrictions
+  if (user.dietaryRestrictions) {
+    refinedRestrictions = user.dietaryRestrictions
+      .map(value => RESTRICTIONS.DIETARY.find(
+        restriction => restriction.value === value,
+      ))
+      .filter(Boolean)
+  }
+  return { ...user, dietaryRestrictions: refinedRestrictions, allergies: refinedAllergies, expectedGraduationDate: graduationDate }
+}
 export function useProfileSchema(
   user: Partial<UserDetails>,
   isStudent: boolean,
 ) {
+  const refinedUser = refinedUserData(user)
+
   const profileSchema = z.object({
     firstName: z
       .string()
@@ -132,7 +159,7 @@ export function useProfileSchema(
 
   const profile = useForm<UserDetails>({
     resolver: zodResolver(profileSchema),
-    defaultValues: user,
+    defaultValues: refinedUser,
     mode: 'onBlur',
   })
   return {

libs/portal/features/profile/ui/questions.tsx

@@ -37,7 +37,7 @@ import {
 
 interface ProfileFormProps {
   user: Partial<UserDetails>
-  status: boolean
+  isComplete: boolean
   onSubmit: (values: z.infer<any>, isComplete: boolean, cookie: string | null, apiUrl: string) => Promise<Response>
 }
 
@@ -48,8 +48,8 @@ const initialSocialMediaHandles = {
   behance: '',
 }
 
-export function Questions({ user, status, onSubmit }: ProfileFormProps) {
-  const [isStudent, setIsStudent] = useState<boolean>(false)
+export function Questions({ user, isComplete, onSubmit }: ProfileFormProps) {
+  const [isStudent, setIsStudent] = useState<boolean>(!!user.expectedGraduationDate)
   // will setup the social media handler once BE is up
   const [socialMediaHandles, _setSocialMediaHandles] = useState<
     typeof initialSocialMediaHandles
@@ -74,15 +74,23 @@ export function Questions({ user, status, onSubmit }: ProfileFormProps) {
 
   async function handleSubmit(values: z.infer<any>) {
     setIsLoading(true)
-    const res = await onSubmit(values, false, cookie, API_URL)
+    const refinedAllergies = values.allergies.map((allergy: { value: string, option: string }) =>
+      allergy.value,
+    )
+    const refinedDietaryRestrictions = values.dietaryRestrictions.map((restriction: { value: string, option: string }) =>
+      restriction.value,
+    )
+
+    const refinedValues = { ...values, dietaryRestrictions: refinedDietaryRestrictions, allergies: refinedAllergies }
+    const res = await onSubmit(refinedValues, false, cookie, API_URL)
     setIsLoading(false)
-    if (res.status === 200 && status) {
+    if (res.status === 200 && !isComplete) {
       navigate('/dashboard')
     }
   }
 
-  const buttonMessage = status ? 'Update Profile' : 'Create Profile'
-  const disabled = isValid || !isDirty || isLoading
+  const buttonMessage = isComplete ? 'Update Profile' : 'Create Profile'
+  const disabled = !isValid || isDirty || isLoading
 
   return (
     <Form {...profile}>

libs/portal/pages/profile/index.tsx

@@ -38,7 +38,7 @@ export function ProfilePage({ user }: { user: UserDetails }) {
           lastName={user.lastName || ''}
           avatarUrl={user.avatar?.url || ''}
         />
-        <Questions onSubmit={handleSubmit} status={status} user={user} />
+        <Questions onSubmit={handleSubmit} isComplete={status} user={user} />
       </div>
     </Layout>
   )

libs/portal/shared/features/form/ui/month-year-field.tsx

@@ -47,13 +47,8 @@ export function MonthYearField({
   isDisabled,
   info,
 }: DateFieldProps) {
-  // If there is an initial date value, extract its month and year.
-  const initialDate = form.getValues(name)
-  const initialMonth = initialDate ? (initialDate.getMonth() + 1).toString() : ''
-  const initialYear = initialDate ? initialDate.getFullYear().toString() : ''
-
-  const [selectedMonth, setSelectedMonth] = useState<string>(initialMonth)
-  const [selectedYear, setSelectedYear] = useState<string>(initialYear)
+  const [selectedMonth, setSelectedMonth] = useState<string>('')
+  const [selectedYear, setSelectedYear] = useState<string>('')
   const [monthOpen, setMonthOpen] = useState<boolean>(false)
   const [yearOpen, setYearOpen] = useState<boolean>(false)
   const [validInput, setValidInput] = useState<boolean>(false)
@@ -81,7 +76,6 @@ export function MonthYearField({
     return { value: year, label: year }
   })
 
-  // Update the form value when both month and year have been selected.
   const updateDate = (month: string, year: string) => {
     if (month && year) {
       const parsedMonth = Number.parseInt(month)
@@ -97,6 +91,19 @@ export function MonthYearField({
     }
   }, [selectedMonth, selectedYear])
 
+  useEffect(() => {
+    if (!form.getValues(name)) {
+      return
+    }
+    const initialDate = new Date(form.getValues(name))
+    const initialMonth = initialDate ? (initialDate.getMonth() + 1).toString() : ''
+    const initialYear = initialDate ? initialDate.getFullYear().toString() : ''
+    setSelectedMonth(initialMonth)
+    setSelectedYear(initialYear)
+    updateDate(initialMonth, initialYear)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []) // want this to run only on start
+
   return (
     <GlassmorphicCard
       className={cn(

libs/portal/types/user.ts

@@ -27,8 +27,8 @@ export interface UserDetails {
   emergencyContactRelationship: string
   middleName?: string
   gender: string
-  dietaryRestrictions?: { label: string, value: string }[]
-  allergies?: { label: string, value: string }[]
+  dietaryRestrictions?: { label: string, value: string }[] | string[]
+  allergies?: { label: string, value: string }[] | string[]
   discordHandle?: string
   githubHandle?: string
   instagramHandle?: string

libs/portal/ui/dashboard/user-status/user-status.tsx

@@ -27,7 +27,7 @@ export function UserStatus({ name, status = 'pending', className }: UserStatusPr
           <TerminalText>WE HOPE TO CUHACKING!</TerminalText>
           <Button
             className="w-full text-black"
-            onClick={() => {}}
+            type="button"
             variant="secondary"
           >
             RSVP