Add X username to personal data (#882)

musidlo · web-flow · commit f839300df588 · 2024-11-25T09:58:14.000+01:00
diff --git a/packages/app/components/FormFields/TextField.tsx b/packages/app/components/FormFields/TextField.tsx
@@ -39,7 +39,7 @@ export const TextField = (
     },
   } = useTsController<string>()
 
-  const { label, placeholder, isOptional, maxLength, isEmail } = useStringFieldInfo()
+  const { label, placeholder, maxLength, isEmail } = useStringFieldInfo()
   const themeName = useThemeName()
   const id = useId()
   const disabled = isSubmitting
@@ -57,7 +57,7 @@ export const TextField = (
             color={props.labelProps?.color ?? '$olive'}
             {...props.labelProps}
           >
-            {label} {isOptional && '(Optional)'}
+            {label}
           </Label>
         )}
         <Shake shakeKey={error?.errorMessage}>
diff --git a/packages/app/features/account/settings/personal-info.tsx b/packages/app/features/account/settings/personal-info.tsx
@@ -1,4 +1,13 @@
-import { SubmitButton, YStack, isWeb, useToastController, XStack, Button, H1 } from '@my/ui'
+import {
+  SubmitButton,
+  YStack,
+  isWeb,
+  useToastController,
+  XStack,
+  Button,
+  Text,
+  Paragraph,
+} from '@my/ui'
 import { SchemaForm } from 'app/utils/SchemaForm'
 import { useSupabase } from 'app/utils/supabase/useSupabase'
 import { useUser } from 'app/utils/useUser'
@@ -7,89 +16,139 @@ import type { z } from 'zod'
 import { FormProvider, useForm } from 'react-hook-form'
 import { VerifyCode } from 'app/features/auth/components/VerifyCode'
 import { AuthUserSchema, useAuthUserMutation } from 'app/utils/useAuthUserMutation'
+import { useEffect, useState } from 'react'
+import { useProfileMutation } from 'app/utils/useUserPersonalDataMutation'
+
+enum FormState {
+  PersonalInfoForm = 'PersonalInfoForm',
+  VerificationCode = 'VerificationCode',
+}
 
 export const PersonalInfoScreen = () => {
-  const { user } = useUser()
+  const { user, profile } = useUser()
+
   const supabase = useSupabase()
   const toast = useToastController()
   const router = useRouter()
   const form = useForm<z.infer<typeof AuthUserSchema>>() // Using react-hook-form
-  const mutation = useAuthUserMutation()
+  const { mutateAsync: mutateAuthAsync } = useAuthUserMutation()
+  const { mutateAsync: mutateProfileAsync } = useProfileMutation()
+  const [formState, setFormState] = useState<FormState>(FormState.PersonalInfoForm)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  function handleSuccessAuthUpdate() {
+    setFormState(FormState.VerificationCode)
+  }
+
+  async function handleSubmit() {
+    setErrorMessage(null)
+    const values = form.getValues()
+
+    try {
+      if (profile && profile.x_username !== values.xUsername) {
+        await mutateProfileAsync(values)
+      }
+
+      if (user && user.phone !== values.phone) {
+        await mutateAuthAsync(values)
+        handleSuccessAuthUpdate()
+      }
+    } catch (error) {
+      console.error(error)
 
-  if (mutation.isError) {
-    form.setError('phone', { type: 'custom', message: mutation.error.message })
+      if (error?.message) {
+        setErrorMessage(error.message)
+      }
+    }
   }
 
+  useEffect(() => {
+    form.reset({ phone: user?.phone ?? '', xUsername: profile?.x_username ?? '' })
+  }, [profile?.x_username, user?.phone, form.reset])
+
+  const verificationCode = (
+    <VerifyCode
+      type={'phone_change'}
+      phone={form.getValues().phone}
+      onSuccess={async () => {
+        toast.show('Phone number updated')
+        router.back()
+        if (!isWeb) {
+          await supabase.auth.refreshSession()
+        }
+      }}
+    />
+  )
+
+  const personalInfoForm = (
+    <SchemaForm
+      form={form}
+      schema={AuthUserSchema}
+      onSubmit={handleSubmit}
+      props={{
+        phone: {
+          'aria-label': 'Phone number',
+          autoComplete: 'tel',
+          keyboardType: 'phone-pad',
+          autoCapitalize: 'none',
+          bc: '$color0',
+          labelProps: {
+            color: '$color10',
+          },
+        },
+        xUsername: {
+          'aria-label': 'X username',
+          labelProps: {
+            color: '$color10',
+          },
+          bc: '$color0',
+          pl: '$8',
+          iconBefore: (
+            <Text color="$color10" userSelect={'none'} lineHeight={8}>
+              @
+            </Text>
+          ),
+        },
+      }}
+      renderAfter={({ submit }) => (
+        <YStack ai={'flex-start'}>
+          <SubmitButton
+            f={1}
+            marginTop={'$5'}
+            fontWeight={'500'}
+            onPress={() => submit()}
+            theme="green"
+            borderRadius={'$3'}
+            px={'$size.1.5'}
+          >
+            <Button.Text ff={'$mono'} fontWeight={'600'} tt="uppercase" size={'$5'}>
+              SAVE
+            </Button.Text>
+          </SubmitButton>
+          {errorMessage && (
+            <Paragraph marginTop={'$5'} theme="red" color="$color9">
+              {errorMessage}
+            </Paragraph>
+          )}
+        </YStack>
+      )}
+    >
+      {(fields) => <>{Object.values(fields)}</>}
+    </SchemaForm>
+  )
+
   return (
     <YStack w={'100%'} als={'center'}>
-      <XStack w={'100%'}>
-        <H1 size={'$9'} fontWeight={'600'} color="$color12">
-          Personal Information
-        </H1>
-      </XStack>
       <XStack w={'100%'} $gtLg={{ paddingTop: '$6' }} $lg={{ jc: 'center' }}>
         <FormProvider {...form}>
-          {form.formState.isSubmitSuccessful ? (
-            <VerifyCode
-              type={'phone_change'}
-              phone={form.getValues().phone}
-              onSuccess={async () => {
-                toast.show('Phone number updated')
-                router.back()
-                if (!isWeb) {
-                  await supabase.auth.refreshSession()
-                }
-              }}
-            />
-          ) : (
-            <SchemaForm
-              form={form}
-              schema={AuthUserSchema}
-              onSubmit={(values) => mutation.mutate(values)}
-              props={{
-                phone: {
-                  'aria-label': 'Phone number',
-                  autoComplete: 'tel',
-                  keyboardType: 'phone-pad',
-                  autoCapitalize: 'none',
-                  bc: '$color0',
-                  labelProps: {
-                    color: '$color10',
-                  },
-                },
-                // email: {
-                //   'aria-label': 'Email',
-                // },
-                // address: {
-                //   'aria-label': 'Address',
-                // },
-              }}
-              defaultValues={{
-                phone: user?.phone ?? '',
-                // email: user?.email ?? '',
-                // address: '',
-              }}
-              renderAfter={({ submit }) => (
-                <YStack ai={'flex-start'}>
-                  <SubmitButton
-                    f={1}
-                    marginTop={'$5'}
-                    fontWeight={'500'}
-                    onPress={() => submit()}
-                    theme="green"
-                    borderRadius={'$3'}
-                    px={'$size.1.5'}
-                  >
-                    <Button.Text ff={'$mono'} fontWeight={'600'} tt="uppercase" size={'$5'}>
-                      SAVE
-                    </Button.Text>
-                  </SubmitButton>
-                </YStack>
-              )}
-            >
-              {(fields) => <>{Object.values(fields)}</>}
-            </SchemaForm>
-          )}
+          {(() => {
+            switch (formState) {
+              case FormState.PersonalInfoForm:
+                return personalInfoForm
+              case FormState.VerificationCode:
+                return verificationCode
+            }
+          })()}
         </FormProvider>
       </XStack>
     </YStack>
diff --git a/packages/app/utils/useAuthUserMutation.ts b/packages/app/utils/useAuthUserMutation.ts
@@ -6,6 +6,7 @@ import { useToastController } from '@my/ui'
 
 export const AuthUserSchema = z.object({
   phone: formFields.text.describe('Phone'),
+  xUsername: formFields.text.optional().describe('X'),
   // email: formFields.text.describe('Email'),
   // address: formFields.text.describe('Address'),
 })
diff --git a/packages/app/utils/useUserPersonalDataMutation.ts b/packages/app/utils/useUserPersonalDataMutation.ts
@@ -0,0 +1,36 @@
+import { useSupabase } from 'app/utils/supabase/useSupabase'
+import { useUser } from 'app/utils/useUser'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useToastController } from '@my/ui'
+import type { z } from 'zod'
+import type { AuthUserSchema } from 'app/utils/useAuthUserMutation'
+
+export const useProfileMutation = () => {
+  const supabase = useSupabase()
+  const { user } = useUser()
+  const queryClient = useQueryClient()
+  const toast = useToastController()
+
+  return useMutation({
+    async mutationFn(data: z.infer<typeof AuthUserSchema>) {
+      if (!user) {
+        return
+      }
+
+      const xUsernameToUpdate = data.xUsername || null
+
+      const { error: profileUpdateError } = await supabase
+        .from('profiles')
+        .update({ x_username: xUsernameToUpdate })
+        .eq('id', user?.id)
+
+      if (profileUpdateError) {
+        throw new Error(profileUpdateError.message)
+      }
+    },
+    async onSuccess() {
+      await queryClient.invalidateQueries({ queryKey: ['profile'] })
+      toast.show('Personal data updated')
+    },
+  })
+}
diff --git a/supabase/database-generated.types.ts b/supabase/database-generated.types.ts
@@ -345,6 +345,7 @@ export type Database = {
           name: string | null
           referral_code: string | null
           send_id: number
+          x_username: string | null
         }
         Insert: {
           about?: string | null
@@ -354,6 +355,7 @@ export type Database = {
           name?: string | null
           referral_code?: string | null
           send_id?: number
+          x_username?: string | null
         }
         Update: {
           about?: string | null
@@ -363,6 +365,7 @@ export type Database = {
           name?: string | null
           referral_code?: string | null
           send_id?: number
+          x_username?: string | null
         }
         Relationships: [
           {
diff --git a/supabase/migrations/20241125092207_add_x_username_to_profile.sql b/supabase/migrations/20241125092207_add_x_username_to_profile.sql
@@ -0,0 +1,7 @@
+alter table "public"."profiles" add column "x_username" text;
+
+alter table "public"."profiles" add constraint "profiles_x_username_update" CHECK ((length(x_username) <= 64)) not valid;
+
+alter table "public"."profiles" validate constraint "profiles_x_username_update";
+
+

Original file line number	Diff line number	Diff line change
`@@ -345,6 +345,7 @@ export type Database = {`
`345`	`345`	`name: string \| null`
`346`	`346`	`referral_code: string \| null`
`347`	`347`	`send_id: number`
	`348`	`+ x_username: string \| null`
`348`	`349`	`}`
`349`	`350`	`Insert: {`
`350`	`351`	`about?: string \| null`
`@@ -354,6 +355,7 @@ export type Database = {`
`354`	`355`	`name?: string \| null`
`355`	`356`	`referral_code?: string \| null`
`356`	`357`	`send_id?: number`
	`358`	`+ x_username?: string \| null`
`357`	`359`	`}`
`358`	`360`	`Update: {`
`359`	`361`	`about?: string \| null`
`@@ -363,6 +365,7 @@ export type Database = {`
`363`	`365`	`name?: string \| null`
`364`	`366`	`referral_code?: string \| null`
`365`	`367`	`send_id?: number`
	`368`	`+ x_username?: string \| null`
`366`	`369`	`}`
`367`	`370`	`Relationships: [`
`368`	`371`	`{`