acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Edit profile dialog ALF refresh (#5633)

Browse Source
This commit is contained in:
Samuel Newman
2024-10-15 21:57:28 +03:00
committed by GitHub
parent fe5eb507ca
commit c3d0cc55d9
16 changed files with 567 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Profile/Header/EditProfileDialog.tsx
+370
View File
@@ -0,0 +1,370 @@
import React, {useCallback, useEffect, useState} from 'react'
import {Dimensions, View} from 'react-native'
import {Image as RNImage} from 'react-native-image-crop-picker'
import {AppBskyActorDefs} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {compressIfNeeded} from '#/lib/media/manip'
import {cleanError} from '#/lib/strings/errors'
import {useWarnMaxGraphemeCount} from '#/lib/strings/helpers'
import {logger} from '#/logger'
import {isWeb} from '#/platform/detection'
import {useProfileUpdateMutation} from '#/state/queries/profile'
import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
import * as Toast from '#/view/com/util/Toast'
import {EditableUserAvatar} from '#/view/com/util/UserAvatar'
import {UserBanner} from '#/view/com/util/UserBanner'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import * as TextField from '#/components/forms/TextField'
import * as Prompt from '#/components/Prompt'
const DISPLAY_NAME_MAX_GRAPHEMES = 64
const DESCRIPTION_MAX_GRAPHEMES = 256
const SCREEN_HEIGHT = Dimensions.get('window').height
export function EditProfileDialog({
profile,
control,
onUpdate,
}: {
profile: AppBskyActorDefs.ProfileViewDetailed
control: Dialog.DialogControlProps
onUpdate?: () => void
}) {
const {_} = useLingui()
const cancelControl = Dialog.useDialogControl()
const [dirty, setDirty] = useState(false)
// 'You might lose unsaved changes' warning
useEffect(() => {
if (isWeb && dirty) {
const abortController = new AbortController()
const {signal} = abortController
window.addEventListener('beforeunload', evt => evt.preventDefault(), {
signal,
})
return () => {
abortController.abort()
}
}
}, [dirty])
const onPressCancel = useCallback(() => {
if (dirty) {
cancelControl.open()
} else {
control.close()
}
}, [dirty, control, cancelControl])
return (
<Dialog.Outer
control={control}
nativeOptions={{
preventDismiss: dirty,
minHeight: SCREEN_HEIGHT,
}}>
<DialogInner
profile={profile}
onUpdate={onUpdate}
setDirty={setDirty}
onPressCancel={onPressCancel}
/>
<Prompt.Basic
control={cancelControl}
title={_(msg`Discard changes?`)}
description={_(msg`Are you sure you want to discard your changes?`)}
onConfirm={() => control.close()}
confirmButtonCta={_(msg`Discard`)}
confirmButtonColor="negative"
/>
</Dialog.Outer>
)
}
function DialogInner({
profile,
onUpdate,
setDirty,
onPressCancel,
}: {
profile: AppBskyActorDefs.ProfileViewDetailed
onUpdate?: () => void
setDirty: (dirty: boolean) => void
onPressCancel: () => void
}) {
const {_} = useLingui()
const t = useTheme()
const control = Dialog.useDialogContext()
const {
mutateAsync: updateProfileMutation,
error: updateProfileError,
isError: isUpdateProfileError,
isPending: isUpdatingProfile,
} = useProfileUpdateMutation()
const [imageError, setImageError] = useState('')
const initialDisplayName = profile.displayName || ''
const [displayName, setDisplayName] = useState(initialDisplayName)
const initialDescription = profile.description || ''
const [description, setDescription] = useState(initialDescription)
const [userBanner, setUserBanner] = useState<string | undefined | null>(
profile.banner,
)
const [userAvatar, setUserAvatar] = useState<string | undefined | null>(
profile.avatar,
)
const [newUserBanner, setNewUserBanner] = useState<
RNImage | undefined | null
>()
const [newUserAvatar, setNewUserAvatar] = useState<
RNImage | undefined | null
>()
const dirty =
displayName !== initialDisplayName ||
description !== initialDescription ||
userAvatar !== profile.avatar ||
userBanner !== profile.banner
useEffect(() => {
setDirty(dirty)
}, [dirty, setDirty])
const onSelectNewAvatar = useCallback(
async (img: RNImage | null) => {
setImageError('')
if (img === null) {
setNewUserAvatar(null)
setUserAvatar(null)
return
}
try {
const finalImg = await compressIfNeeded(img, 1000000)
setNewUserAvatar(finalImg)
setUserAvatar(finalImg.path)
} catch (e: any) {
setImageError(cleanError(e))
}
},
[setNewUserAvatar, setUserAvatar, setImageError],
)
const onSelectNewBanner = useCallback(
async (img: RNImage | null) => {
setImageError('')
if (!img) {
setNewUserBanner(null)
setUserBanner(null)
return
}
try {
const finalImg = await compressIfNeeded(img, 1000000)
setNewUserBanner(finalImg)
setUserBanner(finalImg.path)
} catch (e: any) {
setImageError(cleanError(e))
}
},
[setNewUserBanner, setUserBanner, setImageError],
)
const onPressSave = useCallback(async () => {
setImageError('')
try {
await updateProfileMutation({
profile,
updates: {
displayName: displayName.trimEnd(),
description: description.trimEnd(),
},
newUserAvatar,
newUserBanner,
})
onUpdate?.()
control.close()
Toast.show(_(msg`Profile updated`))
} catch (e: any) {
logger.error('Failed to update user profile', {message: String(e)})
}
}, [
updateProfileMutation,
profile,
onUpdate,
control,
displayName,
description,
newUserAvatar,
newUserBanner,
setImageError,
_,
])
const displayNameTooLong = useWarnMaxGraphemeCount({
text: displayName,
maxCount: DISPLAY_NAME_MAX_GRAPHEMES,
})
const descriptionTooLong = useWarnMaxGraphemeCount({
text: description,
maxCount: DESCRIPTION_MAX_GRAPHEMES,
})
const cancelButton = useCallback(
() => (
<Button
label={_(msg`Cancel`)}
onPress={onPressCancel}
size="small"
color="primary"
variant="ghost"
style={[a.rounded_full]}>
<ButtonText style={[a.text_md]}>
<Trans>Cancel</Trans>
</ButtonText>
</Button>
),
[onPressCancel, _],
)
const saveButton = useCallback(
() => (
<Button
label={_(msg`Save`)}
onPress={onPressSave}
disabled={
!dirty ||
isUpdatingProfile ||
displayNameTooLong ||
descriptionTooLong
}
size="small"
color="primary"
variant="ghost"
style={[a.rounded_full]}>
<ButtonText style={[a.text_md, !dirty && t.atoms.text_contrast_low]}>
<Trans>Save</Trans>
</ButtonText>
</Button>
),
[
_,
t,
dirty,
onPressSave,
isUpdatingProfile,
displayNameTooLong,
descriptionTooLong,
],
)
return (
<Dialog.ScrollableInner
label={_(msg`Edit profile`)}
style={[a.overflow_hidden]}
contentContainerStyle={[a.px_0, a.pt_0]}
header={
<Dialog.Header renderLeft={cancelButton} renderRight={saveButton}>
<Dialog.HeaderText>
<Trans>Edit profile</Trans>
</Dialog.HeaderText>
</Dialog.Header>
}>
<View style={[a.relative]}>
<UserBanner banner={userBanner} onSelectNewBanner={onSelectNewBanner} />
<View
style={[
a.absolute,
{
top: 80,
left: 20,
width: 84,
height: 84,
borderWidth: 2,
borderRadius: 42,
borderColor: t.atoms.bg.backgroundColor,
},
]}>
<EditableUserAvatar
size={80}
avatar={userAvatar}
onSelectNewAvatar={onSelectNewAvatar}
/>
</View>
</View>
{isUpdateProfileError && (
<View style={[a.mt_xl]}>
<ErrorMessage message={cleanError(updateProfileError)} />
</View>
)}
{imageError !== '' && (
<View style={[a.mt_xl]}>
<ErrorMessage message={imageError} />
</View>
)}
<View style={[a.mt_4xl, a.px_xl, a.gap_xl]}>
<View>
<TextField.LabelText>
<Trans>Display name</Trans>
</TextField.LabelText>
<TextField.Root isInvalid={displayNameTooLong}>
<Dialog.Input
defaultValue={displayName}
onChangeText={setDisplayName}
label={_(msg`Display name`)}
placeholder={_(msg`e.g. Alice Lastname`)}
/>
</TextField.Root>
{displayNameTooLong && (
<TextField.SuffixText
style={[
a.text_sm,
a.mt_xs,
a.font_bold,
{color: t.palette.negative_400},
]}
label={_(msg`Display name is too long`)}>
<Trans>
Display name is too long. The maximum number of characters is{' '}
{DISPLAY_NAME_MAX_GRAPHEMES}.
</Trans>
</TextField.SuffixText>
)}
</View>
<View>
<TextField.LabelText>
<Trans>Description</Trans>
</TextField.LabelText>
<TextField.Root isInvalid={descriptionTooLong}>
<Dialog.Input
defaultValue={description}
onChangeText={setDescription}
multiline
label={_(msg`Display name`)}
placeholder={_(msg`Tell us a bit about yourself`)}
/>
</TextField.Root>
{descriptionTooLong && (
<TextField.SuffixText
style={[
a.text_sm,
a.mt_xs,
a.font_bold,
{color: t.palette.negative_400},
]}
label={_(msg`Description is too long`)}>
<Trans>
Description is too long. The maximum number of characters is{' '}
{DESCRIPTION_MAX_GRAPHEMES}.
</Trans>
</TextField.SuffixText>
)}
</View>
</View>
</Dialog.ScrollableInner>
)
}
src/screens/Profile/Header/ProfileHeaderLabeler.tsx
+23 -20
View File
@@ -18,7 +18,6 @@ import {logger} from '#/logger'
import {isIOS} from '#/platform/detection'
import {useProfileShadow} from '#/state/cache/profile-shadow'
import {Shadow} from '#/state/cache/types'
import {useModalControls} from '#/state/modals'
import {useLabelerSubscriptionMutation} from '#/state/queries/labeler'
import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like'
import {usePreferencesQuery} from '#/state/queries/preferences'
@@ -27,7 +26,7 @@ import {ProfileMenu} from '#/view/com/profile/ProfileMenu'
import * as Toast from '#/view/com/util/Toast'
import {atoms as a, tokens, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {DialogOuterProps} from '#/components/Dialog'
import {DialogOuterProps, useDialogControl} from '#/components/Dialog'
import {
Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled,
Heart2_Stroke2_Corner0_Rounded as Heart,
@@ -37,6 +36,7 @@ import * as Prompt from '#/components/Prompt'
import {RichText} from '#/components/RichText'
import {Text} from '#/components/Typography'
import {ProfileHeaderDisplayName} from './DisplayName'
import {EditProfileDialog} from './EditProfileDialog'
import {ProfileHeaderHandle} from './Handle'
import {ProfileHeaderMetrics} from './Metrics'
import {ProfileHeaderShell} from './Shell'
@@ -63,7 +63,6 @@ let ProfileHeaderLabeler = ({
const t = useTheme()
const {_} = useLingui()
const {currentAccount, hasSession} = useSession()
const {openModal} = useModalControls()
const requireAuth = useRequireAuth()
const playHaptic = useHaptics()
const cantSubscribePrompt = Prompt.usePromptControl()
@@ -117,12 +116,10 @@ let ProfileHeaderLabeler = ({
}
}, [labeler, playHaptic, likeUri, unlikeMod, likeMod, _])
const editProfileControl = useDialogControl()
const onPressEditProfile = React.useCallback(() => {
openModal({
name: 'edit-profile',
profile,
})
}, [openModal, profile])
editProfileControl.open()
}, [editProfileControl])
const onPressSubscribe = React.useCallback(
() =>
@@ -169,18 +166,24 @@ let ProfileHeaderLabeler = ({
style={[a.flex_row, a.justify_end, a.align_center, a.gap_xs, a.pb_lg]}
pointerEvents={isIOS ? 'auto' : 'box-none'}>
{isMe ? (
<Button
testID="profileHeaderEditProfileButton"
size="small"
color="secondary"
variant="solid"
onPress={onPressEditProfile}
label={_(msg`Edit profile`)}
style={a.rounded_full}>
<ButtonText>
<Trans>Edit Profile</Trans>
</ButtonText>
</Button>
<>
<Button
testID="profileHeaderEditProfileButton"
size="small"
color="secondary"
variant="solid"
onPress={onPressEditProfile}
label={_(msg`Edit profile`)}
style={a.rounded_full}>
<ButtonText>
<Trans>Edit Profile</Trans>
</ButtonText>
</Button>
<EditProfileDialog
profile={profile}
control={editProfileControl}
/>
</>
) : !isAppLabeler(profile.did) ? (
<>
<Button
src/screens/Profile/Header/ProfileHeaderStandard.tsx
+23 -19
View File
@@ -14,7 +14,6 @@ import {logger} from '#/logger'
import {isIOS} from '#/platform/detection'
import {useProfileShadow} from '#/state/cache/profile-shadow'
import {Shadow} from '#/state/cache/types'
import {useModalControls} from '#/state/modals'
import {
useProfileBlockMutationQueue,
useProfileFollowMutationQueue,
@@ -24,6 +23,7 @@ import {ProfileMenu} from '#/view/com/profile/ProfileMenu'
import * as Toast from '#/view/com/util/Toast'
import {atoms as a} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {useDialogControl} from '#/components/Dialog'
import {MessageProfileButton} from '#/components/dms/MessageProfileButton'
import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
@@ -34,6 +34,7 @@ import {
import * as Prompt from '#/components/Prompt'
import {RichText} from '#/components/RichText'
import {ProfileHeaderDisplayName} from './DisplayName'
import {EditProfileDialog} from './EditProfileDialog'
import {ProfileHeaderHandle} from './Handle'
import {ProfileHeaderMetrics} from './Metrics'
import {ProfileHeaderShell} from './Shell'
@@ -57,7 +58,6 @@ let ProfileHeaderStandard = ({
useProfileShadow(profileUnshadowed)
const {currentAccount, hasSession} = useSession()
const {_} = useLingui()
const {openModal} = useModalControls()
const moderation = useMemo(
() => moderateProfile(profile, moderationOpts),
[profile, moderationOpts],
@@ -74,12 +74,10 @@ let ProfileHeaderStandard = ({
profile.viewer?.blockedBy ||
profile.viewer?.blockingByList
const editProfileControl = useDialogControl()
const onPressEditProfile = React.useCallback(() => {
openModal({
name: 'edit-profile',
profile,
})
}, [openModal, profile])
editProfileControl.open()
}, [editProfileControl])
const onPressFollow = () => {
requireAuth(async () => {
@@ -161,18 +159,24 @@ let ProfileHeaderStandard = ({
]}
pointerEvents={isIOS ? 'auto' : 'box-none'}>
{isMe ? (
<Button
testID="profileHeaderEditProfileButton"
size="small"
color="secondary"
variant="solid"
onPress={onPressEditProfile}
label={_(msg`Edit profile`)}
style={[a.rounded_full]}>
<ButtonText>
<Trans>Edit Profile</Trans>
</ButtonText>
</Button>
<>
<Button
testID="profileHeaderEditProfileButton"
size="small"
color="secondary"
variant="solid"
onPress={onPressEditProfile}
label={_(msg`Edit profile`)}
style={[a.rounded_full]}>
<ButtonText>
<Trans>Edit Profile</Trans>
</ButtonText>
</Button>
<EditProfileDialog
profile={profile}
control={editProfileControl}
/>
</>
) : profile.viewer?.blocking ? (
profile.viewer?.blockingByList ? null : (
<Button