diff options
Diffstat (limited to 'src/view/com/modals')
| -rw-r--r-- | src/view/com/modals/Confirm.tsx | 95 | ||||
| -rw-r--r-- | src/view/com/modals/CreateScene.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/modals/InviteToScene.tsx | 238 | ||||
| -rw-r--r-- | src/view/com/modals/Modal.tsx | 28 |
4 files changed, 356 insertions, 7 deletions
diff --git a/src/view/com/modals/Confirm.tsx b/src/view/com/modals/Confirm.tsx new file mode 100644 index 000000000..5afe7c087 --- /dev/null +++ b/src/view/com/modals/Confirm.tsx @@ -0,0 +1,95 @@ +import React, {useState} from 'react' +import { + ActivityIndicator, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native' +import LinearGradient from 'react-native-linear-gradient' +import {useStores} from '../../../state' +import {s, colors, gradients} from '../../lib/styles' +import {ErrorMessage} from '../util/ErrorMessage' + +export const snapPoints = ['50%'] + +export function Component({ + title, + message, + onPressConfirm, +}: { + title: string + message: string | (() => JSX.Element) + onPressConfirm: () => void | Promise<void> +}) { + const store = useStores() + const [isProcessing, setIsProcessing] = useState<boolean>(false) + const [error, setError] = useState<string>('') + const onPress = async () => { + setError('') + setIsProcessing(true) + try { + await onPressConfirm() + store.shell.closeModal() + return + } catch (e: any) { + setError(e.toString()) + setIsProcessing(false) + } + } + return ( + <View style={[s.flex1, s.pl10, s.pr10]}> + <Text style={styles.title}>{title}</Text> + {typeof message === 'string' ? ( + <Text style={styles.description}>{message}</Text> + ) : ( + message() + )} + {error ? ( + <View style={s.mt10}> + <ErrorMessage message={error} /> + </View> + ) : undefined} + {isProcessing ? ( + <View style={[styles.btn, s.mt10]}> + <ActivityIndicator /> + </View> + ) : ( + <TouchableOpacity style={s.mt10} onPress={onPress}> + <LinearGradient + colors={[gradients.primary.start, gradients.primary.end]} + start={{x: 0, y: 0}} + end={{x: 1, y: 1}} + style={[styles.btn]}> + <Text style={[s.white, s.bold, s.f18]}>Confirm</Text> + </LinearGradient> + </TouchableOpacity> + )} + </View> + ) +} + +const styles = StyleSheet.create({ + title: { + textAlign: 'center', + fontWeight: 'bold', + fontSize: 24, + marginBottom: 12, + }, + description: { + textAlign: 'center', + fontSize: 17, + paddingHorizontal: 22, + color: colors.gray5, + marginBottom: 10, + }, + btn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + width: '100%', + borderRadius: 32, + padding: 14, + backgroundColor: colors.gray1, + }, +}) diff --git a/src/view/com/modals/CreateScene.tsx b/src/view/com/modals/CreateScene.tsx index 16a085d53..5c0a351b2 100644 --- a/src/view/com/modals/CreateScene.tsx +++ b/src/view/com/modals/CreateScene.tsx @@ -53,7 +53,7 @@ export function Component({}: {}) { { subject: { did: createSceneRes.data.did, - declarationCid: createSceneRes.data.declarationCid, + declarationCid: createSceneRes.data.declaration.cid, }, createdAt: new Date().toISOString(), }, diff --git a/src/view/com/modals/InviteToScene.tsx b/src/view/com/modals/InviteToScene.tsx new file mode 100644 index 000000000..f1c9d3386 --- /dev/null +++ b/src/view/com/modals/InviteToScene.tsx @@ -0,0 +1,238 @@ +import React, {useState, useEffect, useMemo} from 'react' +import Toast from '../util/Toast' +import { + ActivityIndicator, + FlatList, + StyleSheet, + Text, + useWindowDimensions, + View, +} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + TabView, + SceneMap, + Route, + TabBar, + TabBarProps, +} from 'react-native-tab-view' +import _omit from 'lodash.omit' +import {AtUri} from '../../../third-party/uri' +import {ProfileCard} from '../profile/ProfileCard' +import {ErrorMessage} from '../util/ErrorMessage' +import {useStores} from '../../../state' +import * as apilib from '../../../state/lib/api' +import {ProfileViewModel} from '../../../state/models/profile-view' +import {SceneInviteSuggestions} from '../../../state/models/scene-invite-suggestions' +import {FollowItem} from '../../../state/models/user-follows-view' +import {s, colors} from '../../lib/styles' + +export const snapPoints = ['70%'] + +export function Component({profileView}: {profileView: ProfileViewModel}) { + const store = useStores() + const layout = useWindowDimensions() + const [index, setIndex] = useState(0) + const tabRoutes = [ + {key: 'suggestions', title: 'Suggestions'}, + {key: 'pending', title: 'Pending Invites'}, + ] + const [hasSetup, setHasSetup] = useState<boolean>(false) + const [error, setError] = useState<string>('') + const suggestions = useMemo( + () => new SceneInviteSuggestions(store, {sceneDid: profileView.did}), + [profileView.did], + ) + const [createdInvites, setCreatedInvites] = useState<Record<string, string>>( + {}, + ) + + useEffect(() => { + let aborted = false + if (hasSetup) { + return + } + suggestions.setup().then(() => { + if (aborted) return + setHasSetup(true) + }) + return () => { + aborted = true + } + }, [profileView.did]) + + const onPressInvite = async (follow: FollowItem) => { + setError('') + try { + const assertionUri = await apilib.inviteToScene( + store, + profileView.did, + follow.did, + follow.declaration.cid, + ) + setCreatedInvites({[follow.did]: assertionUri, ...createdInvites}) + Toast.show('Invite sent', { + duration: Toast.durations.LONG, + position: Toast.positions.TOP, + }) + } catch (e) { + setError('There was an issue with the invite. Please try again.') + console.error(e) + } + } + const onPressUndo = async (subjectDid: string, assertionUri: string) => { + setError('') + const urip = new AtUri(assertionUri) + try { + await store.api.app.bsky.graph.assertion.delete({ + did: profileView.did, + rkey: urip.rkey, + }) + setCreatedInvites(_omit(createdInvites, [subjectDid])) + } catch (e) { + setError('There was an issue with the invite. Please try again.') + console.error(e) + } + } + + const renderSuggestionItem = ({item}: {item: FollowItem}) => { + const createdInvite = createdInvites[item.did] + return ( + <ProfileCard + did={item.did} + handle={item.handle} + displayName={item.displayName} + renderButton={() => + !createdInvite ? ( + <> + <FontAwesomeIcon icon="user-plus" style={[s.mr5]} size={14} /> + <Text style={[s.fw400, s.f14]}>Invite</Text> + </> + ) : ( + <> + <FontAwesomeIcon icon="x" style={[s.mr5]} size={14} /> + <Text style={[s.fw400, s.f14]}>Undo invite</Text> + </> + ) + } + onPressButton={() => + !createdInvite + ? onPressInvite(item) + : onPressUndo(item.did, createdInvite) + } + /> + ) + } + + const Suggestions = () => ( + <View style={s.flex1}> + {hasSetup ? ( + <View style={s.flex1}> + <View style={styles.todoContainer}> + <Text style={styles.todoLabel}> + User search is still being implemented. For now, you can pick from + your follows below. + </Text> + </View> + {!suggestions.hasContent ? ( + <Text + style={{ + textAlign: 'center', + paddingTop: 10, + paddingHorizontal: 40, + fontWeight: 'bold', + color: colors.gray5, + }}> + {suggestions.myFollowsView.follows.length + ? 'Sorry! You dont follow anybody for us to suggest.' + : 'Sorry! All of the users you follow are members already.'} + </Text> + ) : ( + <FlatList + data={suggestions.suggestions} + keyExtractor={item => item._reactKey} + renderItem={renderSuggestionItem} + style={s.flex1} + /> + )} + </View> + ) : !error ? ( + <ActivityIndicator /> + ) : undefined} + </View> + ) + + const PendingInvites = () => ( + <View> + <View style={styles.todoContainer}> + <Text style={styles.todoLabel}> + Pending invites are still being implemented. Check back soon! + </Text> + </View> + </View> + ) + + const renderScene = SceneMap({ + suggestions: Suggestions, + pending: PendingInvites, + }) + + const renderTabBar = (props: TabBarProps<Route>) => ( + <TabBar + {...props} + style={{backgroundColor: 'white'}} + activeColor="black" + inactiveColor={colors.gray5} + labelStyle={{textTransform: 'none'}} + indicatorStyle={{backgroundColor: colors.purple3}} + /> + ) + + return ( + <View style={s.flex1}> + <Text style={styles.title}> + Invite to {profileView.displayName || profileView.handle} + </Text> + {error !== '' ? ( + <View style={s.p10}> + <ErrorMessage message={error} /> + </View> + ) : undefined} + <TabView + navigationState={{index, routes: tabRoutes}} + renderScene={renderScene} + renderTabBar={renderTabBar} + onIndexChange={setIndex} + initialLayout={{width: layout.width}} + /> + </View> + ) +} + +const styles = StyleSheet.create({ + title: { + textAlign: 'center', + fontWeight: 'bold', + fontSize: 18, + marginBottom: 4, + }, + todoContainer: { + backgroundColor: colors.pink1, + margin: 10, + padding: 10, + borderRadius: 6, + }, + todoLabel: { + color: colors.pink5, + textAlign: 'center', + }, + + tabBar: { + flexDirection: 'row', + }, + tabItem: { + alignItems: 'center', + padding: 16, + flex: 1, + }, +}) diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index f79a571d4..f2c61a6ae 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -8,9 +8,11 @@ import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop' import * as models from '../../../state/models/shell-ui' import * as LinkActionsModal from './LinkActions' +import * as ConfirmModal from './Confirm' import * as SharePostModal from './SharePost.native' -import * as EditProfile from './EditProfile' -import * as CreateScene from './CreateScene' +import * as EditProfileModal from './EditProfile' +import * as CreateSceneModal from './CreateScene' +import * as InviteToSceneModal from './InviteToScene' const CLOSED_SNAPPOINTS = ['10%'] @@ -44,6 +46,13 @@ export const Modal = observer(function Modal() { {...(store.shell.activeModal as models.LinkActionsModel)} /> ) + } else if (store.shell.activeModal?.name === 'confirm') { + snapPoints = ConfirmModal.snapPoints + element = ( + <ConfirmModal.Component + {...(store.shell.activeModal as models.ConfirmModel)} + /> + ) } else if (store.shell.activeModal?.name === 'share-post') { snapPoints = SharePostModal.snapPoints element = ( @@ -52,15 +61,22 @@ export const Modal = observer(function Modal() { /> ) } else if (store.shell.activeModal?.name === 'edit-profile') { - snapPoints = EditProfile.snapPoints + snapPoints = EditProfileModal.snapPoints element = ( - <EditProfile.Component + <EditProfileModal.Component {...(store.shell.activeModal as models.EditProfileModel)} /> ) } else if (store.shell.activeModal?.name === 'create-scene') { - snapPoints = CreateScene.snapPoints - element = <CreateScene.Component /> + snapPoints = CreateSceneModal.snapPoints + element = <CreateSceneModal.Component /> + } else if (store.shell.activeModal?.name === 'invite-to-scene') { + snapPoints = InviteToSceneModal.snapPoints + element = ( + <InviteToSceneModal.Component + {...(store.shell.activeModal as models.InviteToSceneModel)} + /> + ) } else { element = <View /> } |