-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of github.com:lyve-app/lyve-mobile
- Loading branch information
Showing
10 changed files
with
288 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { | ||
| View, | ||
| Text, | ||
| KeyboardAvoidingView, | ||
| Platform, | ||
| ScrollView, | ||
| TouchableWithoutFeedback, | ||
| Keyboard, | ||
| } from 'react-native'; | ||
| import React from 'react'; | ||
| import EditProfilePage from '@screens/EditProfilePage'; | ||
| import { SafeAreaView } from 'react-native-safe-area-context'; | ||
|
|
||
| const EditProfile = () => { | ||
| return ( | ||
| <KeyboardAvoidingView | ||
| behavior={Platform.OS === 'ios' ? 'padding' : 'height'} | ||
| style={{ flex: 1 }}> | ||
| <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}> | ||
| <SafeAreaView style={{ flex: 1 }}> | ||
| <ScrollView contentContainerStyle={{ flexGrow: 1 }}> | ||
| <EditProfilePage /> | ||
| </ScrollView> | ||
| </SafeAreaView> | ||
| </TouchableWithoutFeedback> | ||
| </KeyboardAvoidingView> | ||
| ); | ||
| }; | ||
|
|
||
| export default EditProfile; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import useAuth from '@modules/auth/useAuth'; | ||
| import { Avatar, Button, H1, Input, SizableText, TextArea, XStack, YStack } from 'tamagui'; | ||
| import { Feather } from '@expo/vector-icons'; | ||
| import { router } from 'expo-router'; | ||
| import { Formik } from 'formik'; | ||
| import { KeyboardAvoidingView, Platform, Pressable } from 'react-native'; | ||
| import { useUpdateUser } from '@api/user/mutation/useUpdateUser'; | ||
| import { useGetUser } from '@api/user/query/useGetUser'; | ||
| import useCameraActionSheet from '@hooks/useCameraActionSheet'; | ||
|
|
||
| const EditProfilePage = () => { | ||
|
|
||
|
|
||
| const { show, assets } = useCameraActionSheet(); | ||
|
|
||
|
|
||
| const [imageUri, setImageUri] = useState<{ | ||
| image: { | ||
| uri: string; | ||
| name: string; | ||
| type: string; | ||
| }; | ||
| } | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| if (assets && assets[0]) { | ||
| const { uri, mimeType, fileName, assetId } = assets[0]; | ||
| setImageUri({ | ||
| image: { uri, type: mimeType ?? 'image/jpeg', name: fileName ?? assetId ?? 'image' }, | ||
| }); | ||
| } | ||
| }, [assets]); | ||
|
|
||
| const openActionSheet = async () => { | ||
| console.log("fnjkgjrngjrj"); | ||
| await show(); | ||
| }; | ||
|
|
||
|
|
||
| const { user } = useAuth(); | ||
|
|
||
| const { data } = useGetUser({ | ||
| variables: { id: user.id }, | ||
| refetchOnMount: true, | ||
| refetchOnWindowFocus: true, | ||
| }); | ||
|
|
||
| const { mutate } = useUpdateUser(); | ||
|
|
||
| const updateUser = async (displayname: string, bio: string) => { | ||
| const formData = new FormData(); | ||
|
|
||
|
|
||
| if (imageUri) { | ||
| // @ts-ignore | ||
| formData.append('image', { ...imageUri.image }); | ||
| } | ||
|
|
||
| formData.append('dispname', displayname); | ||
| formData.append('bio', bio); | ||
| mutate({ | ||
| id: user.id, | ||
| data: formData, | ||
| }); | ||
| }; | ||
|
|
||
| const handleFinishPress = (displayname: string, bio: string) => { | ||
| updateUser(displayname, bio); | ||
| router.back(); | ||
| }; | ||
|
|
||
| return ( | ||
|
|
||
| <Formik | ||
| initialValues={{ displayname: user.dispname || '', bio: data?.data?.user.bio || '' }} | ||
| onSubmit={(values) => updateUser(values.displayname, values.bio)}> | ||
| {(props) => ( | ||
| <YStack padding="$4" backgroundColor="$background" gap="$5" flexGrow={1}> | ||
| <XStack alignItems="center" justifyContent="space-between"> | ||
| <XStack alignItems="center"> | ||
| <Pressable onPress={() => router.back()}> | ||
| <Feather name="chevron-left" size={28} color="white" /> | ||
| </Pressable> | ||
| <H1 fontSize={24}>Edit Profile</H1> | ||
| </XStack> | ||
| <Pressable onPress={() => handleFinishPress(props.values.displayname, props.values.bio)}> | ||
| <SizableText fontSize={18} color="$accentWashedOut"> | ||
| Finish | ||
| </SizableText> | ||
| </Pressable> | ||
| </XStack> | ||
|
|
||
| <YStack alignItems="center"> | ||
| <Avatar circular size="$10" testID="profile-avatar"> | ||
| <Avatar.Image | ||
| accessibilityLabel="Nate Wienert" | ||
| src={ | ||
| data?.data?.user.avatar_url ?? | ||
| 'https://lyveblobstorage.blob.core.windows.net/images/avatar_placeholder.png' | ||
| } | ||
| /> | ||
| <Avatar.Fallback delayMs={600} backgroundColor="$blue10" /> | ||
| </Avatar> | ||
| <Pressable onPress={openActionSheet}> | ||
| <SizableText color="$textWashedOut">Edit Avatar</SizableText> | ||
| </Pressable> | ||
| </YStack> | ||
|
|
||
| <YStack gap="$2"> | ||
| <YStack gap="$6"> | ||
| <YStack gap="$2"> | ||
| <XStack justifyContent="space-between"> | ||
| <SizableText color="$textWashedOut">Displayname</SizableText> | ||
| <SizableText | ||
| color={props.values.displayname.length >= 20 ? 'red' : '$textWashedOut'}> | ||
| {props.values.displayname.length}/20 | ||
| </SizableText> | ||
| </XStack> | ||
| <Input | ||
| maxLength={20} | ||
| placeholderTextColor="$textWashedOut" | ||
| placeholder="displayname" | ||
| onChangeText={props.handleChange('displayname')} | ||
| value={props.values.displayname} | ||
| /> | ||
| </YStack> | ||
|
|
||
| <YStack gap="$2"> | ||
| <XStack justifyContent="space-between"> | ||
| <SizableText color="$textWashedOut">Bio</SizableText> | ||
| <SizableText color={props.values.bio.length >= 100 ? 'red' : '$textWashedOut'}> | ||
| {props.values.bio.length}/100 | ||
| </SizableText> | ||
| </XStack> | ||
| <TextArea | ||
| maxLength={100} | ||
| placeholderTextColor="$textWashedOut" | ||
| placeholder="bio" | ||
| onChangeText={props.handleChange('bio')} | ||
| value={props.values.bio} | ||
| /> | ||
| </YStack> | ||
| </YStack> | ||
| </YStack> | ||
| </YStack> | ||
| )} | ||
| </Formik> | ||
| ); | ||
| }; | ||
|
|
||
| export default EditProfilePage; |
Oops, something went wrong.