ProfileEditImage done without backend logic

Author: olafch

src/components/screens/profile/ProfileControlledInput.tsx

@@ -1,8 +1,9 @@
 import { ControlledField } from '@baca/components'
 import { isWeb } from '@baca/constants'
-import { Box } from '@baca/design-system'
+import { Box, Text } from '@baca/design-system'
 import { useWeb } from '@baca/hooks'
 import { ProfileControlledInputProps } from '@baca/types/ProfileInputProps'
+import { StyleSheet } from 'react-native'
 
 export const ProfileControlledInput = ({
   label,
@@ -23,9 +24,9 @@ export const ProfileControlledInput = ({
       mb={isWeb ? 10 : 0}
       maxW={800}
     >
-      {/* <Text.SmBold flex={1} color="text.primary">
+      <Text.SmBold flex={1} color="text.primary" style={s.labelMargin}>
         {label}
-      </Text.SmBold> */}
+      </Text.SmBold>
       <Box flex={isWeb ? 2 : 0}>
         <ControlledField.Input
           control={control}
@@ -38,9 +39,12 @@ export const ProfileControlledInput = ({
           isDisabled={isDisabled}
           onFocus={onFocus}
           onSubmitEditing={onSubmitEditing}
-          {...(!isWeb && { label })}
         />
       </Box>
     </Box>
   )
 }
+
+const s = StyleSheet.create({
+  labelMargin: { marginBottom: 10 },
+})

src/components/screens/profile/ProfileEditImage.tsx

@@ -1,8 +1,9 @@
-import { Box, Text, Button, Row } from '@baca/design-system'
+import { isWeb } from '@baca/constants'
+import { Box, Text, Button, Row, themeColors } from '@baca/design-system'
 import * as ImagePicker from 'expo-image-picker'
 import { t } from 'i18next'
 import React from 'react'
-import { View, Image, StyleSheet } from 'react-native'
+import { Image, StyleSheet } from 'react-native'
 
 export const ProfileEditImage: React.FC = () => {
   const [image, setImage] = React.useState<string | null>(null)
@@ -21,20 +22,20 @@ export const ProfileEditImage: React.FC = () => {
   }
 
   return (
-    <Box borderColor="border.secondary" borderTopWidth={1} py={6} /* mb={isWeb ? 10 : 4} */>
-      <Box style={styles.marginBottom}>
+    <Box borderColor="border.secondary" borderTopWidth={1} py={6}>
+      <Box style={s.marginBottom}>
         <Text.SmBold color="text.primary">{t('profile_screen.your_photo')}</Text.SmBold>
         <Text.SmRegular color="text.secondary">
           {t('profile_screen.your_photo_description')}
         </Text.SmRegular>
       </Box>
-      <Box style={styles.imageContainer}>
+      <Box style={s.imageContainer}>
         {image ? (
-          <Image source={{ uri: image }} style={styles.image} />
+          <Image source={{ uri: image }} style={s.image} />
         ) : (
-          <View style={styles.placeholder}>
-            <Text style={styles.placeholderText}>No Image</Text>
-          </View>
+          <Box style={s.placeholder}>
+            <Text color="Gray modern.600">{t('profile_screen.photo_innerText')}</Text>
+          </Box>
         )}
       </Box>
       <Row maxW={800} justifyContent="flex-end">
@@ -44,7 +45,7 @@ export const ProfileEditImage: React.FC = () => {
   )
 }
 
-const styles = StyleSheet.create({
+const s = StyleSheet.create({
   image: {
     height: '100%',
     width: '100%',
@@ -55,19 +56,17 @@ const styles = StyleSheet.create({
     height: 100,
     marginBottom: 10,
     overflow: 'hidden',
+    right: isWeb ? 150 : 0,
     width: 100,
   },
   marginBottom: {
     marginBottom: 10,
   },
   placeholder: {
     alignItems: 'center',
+    backgroundColor: themeColors.primitives['Gray neutral']['50'],
     height: '100%',
     justifyContent: 'center',
     width: '100%',
-    // backgroundColor: '#e0e0e0',
-  },
-  placeholderText: {
-    // color: '#888',
   },
 })

src/components/screens/profile/ProfilePasswordForm.tsx

@@ -1,6 +1,5 @@
 import { Box, Button, Row } from '@baca/design-system'
 import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm'
-import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { ProfileControlledInput } from './ProfileControlledInput'

src/hooks/forms/useUpdatePasswordForm 2.ts

@@ -0,0 +1,58 @@
+import { useAuthControllerUpdate } from '@baca/api/query/auth/auth'
+import { AuthUpdateDto } from '@baca/api/types'
+import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils'
+import { useMemo } from 'react'
+import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+
+export const useUpdatePasswordForm = () => {
+  const { t } = useTranslation()
+  const { mutate: updatePasswordMutation, isLoading } = useAuthControllerUpdate()
+
+  const defaultValues: AuthUpdateDto = useMemo(
+    () => ({
+      oldPassword: '',
+      password: '',
+    }),
+    []
+  )
+
+  const {
+    control,
+    formState: { errors },
+    handleSubmit,
+    reset,
+    setError: setFormError,
+  } = useForm<AuthUpdateDto>({
+    mode: 'onTouched',
+    defaultValues,
+  })
+
+  const onSubmit = (data: AuthUpdateDto) => {
+    updatePasswordMutation(
+      { data },
+      {
+        onSuccess: () => {
+          showSuccessToast({ description: t('toast.success.profile_updated') })
+          reset(defaultValues)
+        },
+        onError: (e) => {
+          handleFormError<keyof AuthUpdateDto>(
+            e as unknown as keyof AuthUpdateDto,
+            ({ field, description }) => {
+              setFormError(field, { message: description })
+            }
+          )
+          hapticImpact()
+        },
+      }
+    )
+  }
+
+  return {
+    control,
+    errors,
+    isSubmitting: isLoading,
+    submit: handleSubmit(onSubmit),
+  }
+}

src/hooks/forms/useUpdatePasswordForm 3.ts

@@ -0,0 +1,58 @@
+import { useAuthControllerUpdate } from '@baca/api/query/auth/auth'
+import { AuthUpdateDto } from '@baca/api/types'
+import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils'
+import { useMemo } from 'react'
+import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+
+export const useUpdatePasswordForm = () => {
+  const { t } = useTranslation()
+  const { mutate: updatePasswordMutation, isLoading } = useAuthControllerUpdate()
+
+  const defaultValues: AuthUpdateDto = useMemo(
+    () => ({
+      oldPassword: '',
+      password: '',
+    }),
+    []
+  )
+
+  const {
+    control,
+    formState: { errors },
+    handleSubmit,
+    reset,
+    setError: setFormError,
+  } = useForm<AuthUpdateDto>({
+    mode: 'onTouched',
+    defaultValues,
+  })
+
+  const onSubmit = (data: AuthUpdateDto) => {
+    updatePasswordMutation(
+      { data },
+      {
+        onSuccess: () => {
+          showSuccessToast({ description: t('toast.success.profile_updated') })
+          reset(defaultValues)
+        },
+        onError: (e) => {
+          handleFormError<keyof AuthUpdateDto>(
+            e as unknown as keyof AuthUpdateDto,
+            ({ field, description }) => {
+              setFormError(field, { message: description })
+            }
+          )
+          hapticImpact()
+        },
+      }
+    )
+  }
+
+  return {
+    control,
+    errors,
+    isSubmitting: isLoading,
+    submit: handleSubmit(onSubmit),
+  }
+}

src/i18n/translations/en.json

@@ -242,7 +242,8 @@
     "are_you_sure": "Are you sure?",
     "remove_account_desc": "This action cannot be undone.\n\nYou will lose access to your account. If you have an active subscription you will lose access to it.\n\nPlease make sure you are certain about this action.",
     "your_photo": "Your photo",
-    "your_photo_description": "This will be displayed on your profile."
+    "your_photo_description": "This will be displayed on your profile.",
+    "photo_innerText": "No Image"
   },
   "sign_in_screen": {
     "do_not_have_an_account": "Don't have an account?",

src/i18n/translations/pl.json

@@ -28,6 +28,7 @@
     "remove": "Usuń",
     "save": "Zapisz",
     "change": "Zmień",
+    "upload": "Prześlij",
     "search": "Szukaj",
     "try_again_later": "Proszę spróbuj ponownie później",
     "try_again": "Spróbuj ponownie"
@@ -238,7 +239,10 @@
     "update_your_details": "Zaktualizuj swoje dane osobowe tutaj.",
     "remove_account": "Usuń konto",
     "are_you_sure": "Jesteś pewny/a?",
-    "remove_account_desc": "Tej akcji nie można cofnąć.\n\nUtracisz dostęp do swojego konta. Jeśli masz aktywną subskrypcję, utracisz do niej dostęp.\n\nUpewnij się, że jesteś pewien tej akcji"
+    "remove_account_desc": "Tej akcji nie można cofnąć.\n\nUtracisz dostęp do swojego konta. Jeśli masz aktywną subskrypcję, utracisz do niej dostęp.\n\nUpewnij się, że jesteś pewien tej akcji",
+    "your_photo": "Twoje zdjęcie",
+    "your_photo_description": "To będzie wyświetlane na twoim profilu.",
+    "photo_innerText": "Bez Zdjęcia"
   },
   "sign_in_screen": {
     "do_not_have_an_account": "Nie masz konta?",

src/types/ProfileInputProps 2.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
+}

src/types/ProfileInputProps 3.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
+}