ProfileControlledInputs improved

Author: olafch

src/components/screens/profile/ProfileControlledInput.tsx

@@ -1,32 +1,19 @@
 import { ControlledField } from '@baca/components'
 import { isWeb } from '@baca/constants'
 import { Text, Box } from '@baca/design-system'
-import { useTranslation, useWeb } from '@baca/hooks'
-import { I18nKeys } from '@baca/types/i18next'
-import { Control, FieldErrors } from 'react-hook-form'
-
-interface ProfileControlledInputProps {
-  labelTx: I18nKeys
-  name: string
-  placeholderTx: I18nKeys
-  control: Control
-  errors: FieldErrors
-  isDisabled?: boolean
-  onFocus?: () => void
-  onSubmitEditing?: () => void
-}
+import { useWeb } from '@baca/hooks'
+import { ProfileControlledInputProps } from '@baca/types/ProfileInputProps'
 
 export const ProfileControlledInput = ({
-  labelTx,
+  label,
   name,
-  placeholderTx,
+  placeholder,
   control,
   errors,
   isDisabled = false,
   onFocus,
   onSubmitEditing,
 }: ProfileControlledInputProps) => {
-  const { t } = useTranslation()
   const { shouldApplyMobileStyles } = useWeb()
 
   return (
@@ -36,20 +23,20 @@ export const ProfileControlledInput = ({
       mb={isWeb ? 10 : 0}
       maxW={800}
     >
-      <Text.SmBold flex={1}>{t(labelTx)}</Text.SmBold>
+      <Text.SmBold flex={1}>{label}</Text.SmBold>
       <Box flex={isWeb ? 2 : 0}>
         <ControlledField.Input
           control={control}
           errors={errors}
           autoCapitalize="none"
           inputMode={name === 'email' ? 'email' : 'text'}
           name={name}
-          placeholder={t(placeholderTx)}
+          placeholder={placeholder}
           testID={`${name}Input`}
           isDisabled={isDisabled}
           onFocus={onFocus}
           onSubmitEditing={onSubmitEditing}
-          {...(!isWeb && { label: t(labelTx) })}
+          {...(!isWeb && { label })}
         />
       </Box>
     </Box>

src/components/screens/profile/ProfileDetailsForm.tsx

@@ -17,24 +17,24 @@ export const ProfileDetailsForm = () => {
     <Box>
       <Box borderColor="border.secondary" borderTopWidth={1} py={6}>
         <ProfileControlledInput
-          labelTx="form.labels.first_name"
+          label={t('form.labels.first_name')}
           name="firstName"
-          placeholderTx="form.placeholders.first_name"
+          placeholder={t('form.placeholders.first_name')}
           control={control}
           errors={errors}
           onFocus={focusLastNameInput}
         />
         <ProfileControlledInput
-          labelTx="form.labels.last_name"
+          label={t('form.labels.last_name')}
           name="lastName"
-          placeholderTx="form.placeholders.last_name"
+          placeholder={t('form.placeholders.last_name')}
           control={control}
           errors={errors}
         />
         <ProfileControlledInput
-          labelTx="form.labels.email"
+          label={t('form.labels.email')}
           name="email"
-          placeholderTx="form.placeholders.email"
+          placeholder={t('form.placeholders.email')}
           control={control}
           errors={errors}
           isDisabled

src/types/ProfileInputProps.ts

@@ -0,0 +1,12 @@
+import { Control, FieldErrors } from 'react-hook-form'
+
+export type ProfileControlledInputProps = {
+  label: string
+  name: string
+  placeholder: string
+  control: Control
+  errors: FieldErrors
+  isDisabled?: boolean
+  onFocus?: () => void
+  onSubmitEditing?: () => void
+}