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

temp revert to old modal (#6005)

Browse Source
This commit is contained in:
Samuel Newman
2024-10-29 20:55:30 +00:00
committed by GitHub
parent 27ff85433b
commit 1cfcffd79e
6 changed files with 354 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Profile/Header/ProfileHeaderLabeler.tsx
+13 -3
View File
@@ -15,9 +15,10 @@ import {MAX_LABELERS} from '#/lib/constants'
import {useHaptics} from '#/lib/haptics'
import {isAppLabeler} from '#/lib/moderation'
import {logger} from '#/logger'
import {isIOS} from '#/platform/detection'
import {isIOS, isWeb} 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'
@@ -116,10 +117,19 @@ let ProfileHeaderLabeler = ({
}
}, [labeler, playHaptic, likeUri, unlikeMod, likeMod, _])
const {openModal} = useModalControls()
const editProfileControl = useDialogControl()
const onPressEditProfile = React.useCallback(() => {
editProfileControl.open()
}, [editProfileControl])
if (isWeb) {
// temp, while we figure out the nested dialog bug
openModal({
name: 'edit-profile',
profile,
})
} else {
editProfileControl.open()
}
}, [editProfileControl, openModal, profile])
const onPressSubscribe = React.useCallback(
() =>
src/screens/Profile/Header/ProfileHeaderStandard.tsx
+13 -3
View File
@@ -11,9 +11,10 @@ import {useLingui} from '@lingui/react'
import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {logger} from '#/logger'
import {isIOS} from '#/platform/detection'
import {isIOS, isWeb} from '#/platform/detection'
import {useProfileShadow} from '#/state/cache/profile-shadow'
import {Shadow} from '#/state/cache/types'
import {useModalControls} from '#/state/modals'
import {
useProfileBlockMutationQueue,
useProfileFollowMutationQueue,
@@ -74,10 +75,19 @@ let ProfileHeaderStandard = ({
profile.viewer?.blockedBy ||
profile.viewer?.blockingByList
const {openModal} = useModalControls()
const editProfileControl = useDialogControl()
const onPressEditProfile = React.useCallback(() => {
editProfileControl.open()
}, [editProfileControl])
if (isWeb) {
// temp, while we figure out the nested dialog bug
openModal({
name: 'edit-profile',
profile,
})
} else {
editProfileControl.open()
}
}, [editProfileControl, openModal, profile])
const onPressFollow = () => {
requireAuth(async () => {
src/state/modals/index.tsx
+9
View File
@@ -4,6 +4,12 @@ import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
export interface EditProfileModal {
name: 'edit-profile'
profile: AppBskyActorDefs.ProfileViewDetailed
onUpdate?: () => void
}
export interface CreateOrEditListModal {
name: 'create-or-edit-list'
purpose?: string
@@ -102,6 +108,9 @@ export type Modal =
| ChangeEmailModal
| ChangePasswordModal
// Temp
| EditProfileModal
// Curation
| ContentLanguagesSettingsModal
| PostLanguagesSettingsModal
src/view/com/modals/EditProfile.tsx
+310
View File
@@ -0,0 +1,310 @@
import React, {useCallback, useState} from 'react'
import {
ActivityIndicator,
KeyboardAvoidingView,
ScrollView,
StyleSheet,
TextInput,
TouchableOpacity,
View,
} from 'react-native'
import {Image as RNImage} from 'react-native-image-crop-picker'
import Animated, {FadeOut} from 'react-native-reanimated'
import {LinearGradient} from 'expo-linear-gradient'
import {AppBskyActorDefs} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {MAX_DESCRIPTION, MAX_DISPLAY_NAME} from '#/lib/constants'
import {usePalette} from '#/lib/hooks/usePalette'
import {compressIfNeeded} from '#/lib/media/manip'
import {cleanError} from '#/lib/strings/errors'
import {enforceLen} from '#/lib/strings/helpers'
import {colors, gradients, s} from '#/lib/styles'
import {useTheme} from '#/lib/ThemeContext'
import {logger} from '#/logger'
import {isWeb} from '#/platform/detection'
import {useModalControls} from '#/state/modals'
import {useProfileUpdateMutation} from '#/state/queries/profile'
import {Text} from '#/view/com/util/text/Text'
import * as Toast from '#/view/com/util/Toast'
import {EditableUserAvatar} from '#/view/com/util/UserAvatar'
import {UserBanner} from '#/view/com/util/UserBanner'
import {ErrorMessage} from '../util/error/ErrorMessage'
const AnimatedTouchableOpacity =
Animated.createAnimatedComponent(TouchableOpacity)
export const snapPoints = ['fullscreen']
export function Component({
profile,
onUpdate,
}: {
profile: AppBskyActorDefs.ProfileViewDetailed
onUpdate?: () => void
}) {
const pal = usePalette('default')
const theme = useTheme()
const {_} = useLingui()
const {closeModal} = useModalControls()
const updateMutation = useProfileUpdateMutation()
const [imageError, setImageError] = useState<string>('')
const [displayName, setDisplayName] = useState<string>(
profile.displayName || '',
)
const [description, setDescription] = useState<string>(
profile.description || '',
)
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 onPressCancel = () => {
closeModal()
}
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 updateMutation.mutateAsync({
profile,
updates: {
displayName,
description,
},
newUserAvatar,
newUserBanner,
})
Toast.show(_(msg`Profile updated`))
onUpdate?.()
closeModal()
} catch (e: any) {
logger.error('Failed to update user profile', {message: String(e)})
}
}, [
updateMutation,
profile,
onUpdate,
closeModal,
displayName,
description,
newUserAvatar,
newUserBanner,
setImageError,
_,
])
return (
<KeyboardAvoidingView style={s.flex1} behavior="height">
<ScrollView style={[pal.view]} testID="editProfileModal">
<Text style={[styles.title, pal.text]}>
<Trans>Edit my profile</Trans>
</Text>
<View style={styles.photos}>
<UserBanner
banner={userBanner}
onSelectNewBanner={onSelectNewBanner}
/>
<View style={[styles.avi, {borderColor: pal.colors.background}]}>
<EditableUserAvatar
size={80}
avatar={userAvatar}
onSelectNewAvatar={onSelectNewAvatar}
/>
</View>
</View>
{updateMutation.isError && (
<View style={styles.errorContainer}>
<ErrorMessage message={cleanError(updateMutation.error)} />
</View>
)}
{imageError !== '' && (
<View style={styles.errorContainer}>
<ErrorMessage message={imageError} />
</View>
)}
<View style={styles.form}>
<View>
<Text style={[styles.label, pal.text]}>
<Trans>Display Name</Trans>
</Text>
<TextInput
testID="editProfileDisplayNameInput"
style={[styles.textInput, pal.border, pal.text]}
placeholder={_(msg`e.g. Alice Roberts`)}
placeholderTextColor={colors.gray4}
value={displayName}
onChangeText={v =>
setDisplayName(enforceLen(v, MAX_DISPLAY_NAME))
}
accessible={true}
accessibilityLabel={_(msg`Display name`)}
accessibilityHint={_(msg`Edit your display name`)}
/>
</View>
<View style={s.pb10}>
<Text style={[styles.label, pal.text]}>
<Trans>Description</Trans>
</Text>
<TextInput
testID="editProfileDescriptionInput"
style={[styles.textArea, pal.border, pal.text]}
placeholder={_(msg`e.g. Artist, dog-lover, and avid reader.`)}
placeholderTextColor={colors.gray4}
keyboardAppearance={theme.colorScheme}
multiline
value={description}
onChangeText={v => setDescription(enforceLen(v, MAX_DESCRIPTION))}
accessible={true}
accessibilityLabel={_(msg`Description`)}
accessibilityHint={_(msg`Edit your profile description`)}
/>
</View>
{updateMutation.isPending ? (
<View style={[styles.btn, s.mt10, {backgroundColor: colors.gray2}]}>
<ActivityIndicator />
</View>
) : (
<TouchableOpacity
testID="editProfileSaveBtn"
style={s.mt10}
onPress={onPressSave}
accessibilityRole="button"
accessibilityLabel={_(msg`Save`)}
accessibilityHint={_(msg`Saves any changes to your profile`)}>
<LinearGradient
colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.btn]}>
<Text style={[s.white, s.bold]}>
<Trans>Save Changes</Trans>
</Text>
</LinearGradient>
</TouchableOpacity>
)}
{!updateMutation.isPending && (
<AnimatedTouchableOpacity
exiting={!isWeb ? FadeOut : undefined}
testID="editProfileCancelBtn"
style={s.mt5}
onPress={onPressCancel}
accessibilityRole="button"
accessibilityLabel={_(msg`Cancel profile editing`)}
accessibilityHint=""
onAccessibilityEscape={onPressCancel}>
<View style={[styles.btn]}>
<Text style={[s.black, s.bold, pal.text]}>
<Trans>Cancel</Trans>
</Text>
</View>
</AnimatedTouchableOpacity>
)}
</View>
</ScrollView>
</KeyboardAvoidingView>
)
}
const styles = StyleSheet.create({
title: {
textAlign: 'center',
fontWeight: '600',
fontSize: 24,
marginBottom: 18,
},
label: {
fontWeight: '600',
paddingHorizontal: 4,
paddingBottom: 4,
marginTop: 20,
},
form: {
paddingHorizontal: 14,
},
textInput: {
borderWidth: 1,
borderRadius: 6,
paddingHorizontal: 14,
paddingVertical: 10,
fontSize: 16,
},
textArea: {
borderWidth: 1,
borderRadius: 6,
paddingHorizontal: 12,
paddingTop: 10,
fontSize: 16,
height: 120,
textAlignVertical: 'top',
},
btn: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
borderRadius: 32,
padding: 10,
marginBottom: 10,
},
avi: {
position: 'absolute',
top: 80,
left: 24,
width: 84,
height: 84,
borderWidth: 2,
borderRadius: 42,
},
photos: {
marginBottom: 36,
marginHorizontal: -14,
},
errorContainer: {marginTop: 20},
})
src/view/com/modals/Modal.tsx
+5 -1
View File
@@ -13,6 +13,7 @@ import * as ChangeHandleModal from './ChangeHandle'
import * as ChangePasswordModal from './ChangePassword'
import * as CreateOrEditListModal from './CreateOrEditList'
import * as DeleteAccountModal from './DeleteAccount'
import * as EditProfileModal from './EditProfile'
import * as InAppBrowserConsentModal from './InAppBrowserConsent'
import * as InviteCodesModal from './InviteCodes'
import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
@@ -53,7 +54,10 @@ export function ModalsContainer() {
let snapPoints: (string | number)[] = DEFAULT_SNAPPOINTS
let element
if (activeModal?.name === 'create-or-edit-list') {
if (activeModal?.name === 'edit-profile') {
snapPoints = EditProfileModal.snapPoints
element = <EditProfileModal.Component {...activeModal} />
} else if (activeModal?.name === 'create-or-edit-list') {
snapPoints = CreateOrEditListModal.snapPoints
element = <CreateOrEditListModal.Component {...activeModal} />
} else if (activeModal?.name === 'user-add-remove-lists') {
src/view/com/modals/Modal.web.tsx
+4 -1
View File
@@ -14,6 +14,7 @@ import * as ChangePasswordModal from './ChangePassword'
import * as CreateOrEditListModal from './CreateOrEditList'
import * as CropImageModal from './CropImage.web'
import * as DeleteAccountModal from './DeleteAccount'
import * as EditProfileModal from './EditProfile'
import * as InviteCodesModal from './InviteCodes'
import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
@@ -61,7 +62,9 @@ function Modal({modal}: {modal: ModalIface}) {
}
let element
if (modal.name === 'create-or-edit-list') {
if (modal.name === 'edit-profile') {
element = <EditProfileModal.Component {...modal} />
} else if (modal.name === 'create-or-edit-list') {
element = <CreateOrEditListModal.Component {...modal} />
} else if (modal.name === 'user-add-remove-lists') {
element = <UserAddRemoveLists.Component {...modal} />