From e7536289cbb4380dc82dcd70737e165727cbbb92 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Wed, 9 Nov 2022 15:57:49 -0600 Subject: Add scene creator --- src/state/models/root-store.ts | 4 +- src/state/models/shell-ui.ts | 91 ++++++++++++++ src/state/models/shell.ts | 72 ----------- src/view/com/composer/ComposePost.tsx | 2 +- src/view/com/modals/CreateScene.tsx | 210 ++++++++++++++++++++++++++++++++ src/view/com/modals/EditProfile.tsx | 2 +- src/view/com/modals/Modal.tsx | 6 +- src/view/com/post-thread/PostThread.tsx | 2 +- src/view/com/posts/FeedItem.tsx | 2 +- src/view/com/profile/ProfileHeader.tsx | 2 +- src/view/com/util/DropdownBtn.tsx | 2 +- src/view/com/util/ErrorMessage.tsx | 6 +- src/view/com/util/Link.tsx | 2 +- src/view/lib/strings.ts | 14 +++ src/view/shell/mobile/Composer.tsx | 2 +- src/view/shell/mobile/MainMenu.tsx | 15 ++- src/view/shell/mobile/TabsSelector.tsx | 2 +- src/view/shell/mobile/index.tsx | 2 +- 18 files changed, 348 insertions(+), 90 deletions(-) create mode 100644 src/state/models/shell-ui.ts delete mode 100644 src/state/models/shell.ts create mode 100644 src/view/com/modals/CreateScene.tsx (limited to 'src') diff --git a/src/state/models/root-store.ts b/src/state/models/root-store.ts index da846a3b0..e2a505768 100644 --- a/src/state/models/root-store.ts +++ b/src/state/models/root-store.ts @@ -9,14 +9,14 @@ import {createContext, useContext} from 'react' import {isObj, hasProp} from '../lib/type-guards' import {SessionModel} from './session' import {NavigationModel} from './navigation' -import {ShellModel} from './shell' +import {ShellUiModel} from './shell-ui' import {MeModel} from './me' import {OnboardModel} from './onboard' export class RootStoreModel { session = new SessionModel(this) nav = new NavigationModel() - shell = new ShellModel() + shell = new ShellUiModel() me = new MeModel(this) onboard = new OnboardModel() diff --git a/src/state/models/shell-ui.ts b/src/state/models/shell-ui.ts new file mode 100644 index 000000000..345a6b4a9 --- /dev/null +++ b/src/state/models/shell-ui.ts @@ -0,0 +1,91 @@ +import {makeAutoObservable} from 'mobx' +import {ProfileViewModel} from './profile-view' +import * as Post from '../../third-party/api/src/client/types/app/bsky/feed/post' + +export interface LinkActionsModelOpts { + newTab?: boolean +} +export class LinkActionsModel { + name = 'link-actions' + newTab: boolean + + constructor( + public href: string, + public title: string, + opts?: LinkActionsModelOpts, + ) { + makeAutoObservable(this) + this.newTab = typeof opts?.newTab === 'boolean' ? opts.newTab : true + } +} + +export class SharePostModel { + name = 'share-post' + + constructor(public href: string) { + makeAutoObservable(this) + } +} + +export class EditProfileModel { + name = 'edit-profile' + + constructor(public profileView: ProfileViewModel) { + makeAutoObservable(this) + } +} + +export class CreateSceneModel { + name = 'create-scene' + + constructor() { + makeAutoObservable(this) + } +} + +export interface ComposerOpts { + replyTo?: Post.PostRef + onPost?: () => void +} + +export class ShellUiModel { + isModalActive = false + activeModal: + | LinkActionsModel + | SharePostModel + | EditProfileModel + | CreateSceneModel + | undefined + isComposerActive = false + composerOpts: ComposerOpts | undefined + + constructor() { + makeAutoObservable(this) + } + + openModal( + modal: + | LinkActionsModel + | SharePostModel + | EditProfileModel + | CreateSceneModel, + ) { + this.isModalActive = true + this.activeModal = modal + } + + closeModal() { + this.isModalActive = false + this.activeModal = undefined + } + + openComposer(opts: ComposerOpts) { + this.isComposerActive = true + this.composerOpts = opts + } + + closeComposer() { + this.isComposerActive = false + this.composerOpts = undefined + } +} diff --git a/src/state/models/shell.ts b/src/state/models/shell.ts deleted file mode 100644 index bef6ef765..000000000 --- a/src/state/models/shell.ts +++ /dev/null @@ -1,72 +0,0 @@ -import {makeAutoObservable} from 'mobx' -import {ProfileViewModel} from './profile-view' -import * as Post from '../../third-party/api/src/client/types/app/bsky/feed/post' - -export interface LinkActionsModelOpts { - newTab?: boolean -} -export class LinkActionsModel { - name = 'link-actions' - newTab: boolean - - constructor( - public href: string, - public title: string, - opts?: LinkActionsModelOpts, - ) { - makeAutoObservable(this) - this.newTab = typeof opts?.newTab === 'boolean' ? opts.newTab : true - } -} - -export class SharePostModel { - name = 'share-post' - - constructor(public href: string) { - makeAutoObservable(this) - } -} - -export class EditProfileModel { - name = 'edit-profile' - - constructor(public profileView: ProfileViewModel) { - makeAutoObservable(this) - } -} - -export interface ComposerOpts { - replyTo?: Post.PostRef - onPost?: () => void -} - -export class ShellModel { - isModalActive = false - activeModal: LinkActionsModel | SharePostModel | EditProfileModel | undefined - isComposerActive = false - composerOpts: ComposerOpts | undefined - - constructor() { - makeAutoObservable(this) - } - - openModal(modal: LinkActionsModel | SharePostModel | EditProfileModel) { - this.isModalActive = true - this.activeModal = modal - } - - closeModal() { - this.isModalActive = false - this.activeModal = undefined - } - - openComposer(opts: ComposerOpts) { - this.isComposerActive = true - this.composerOpts = opts - } - - closeComposer() { - this.isComposerActive = false - this.composerOpts = undefined - } -} diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index 9d2d6ed14..33c869968 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/src/view/com/composer/ComposePost.tsx @@ -8,7 +8,7 @@ import Toast from '../util/Toast' import ProgressCircle from '../util/ProgressCircle' import {useStores} from '../../../state' import * as apilib from '../../../state/lib/api' -import {ComposerOpts} from '../../../state/models/shell' +import {ComposerOpts} from '../../../state/models/shell-ui' import {s, colors, gradients} from '../../lib/styles' const MAX_TEXT_LENGTH = 256 diff --git a/src/view/com/modals/CreateScene.tsx b/src/view/com/modals/CreateScene.tsx new file mode 100644 index 000000000..16a085d53 --- /dev/null +++ b/src/view/com/modals/CreateScene.tsx @@ -0,0 +1,210 @@ +import React, {useState} from 'react' +import Toast from '../util/Toast' +import { + ActivityIndicator, + StyleSheet, + Text, + TextInput, + TouchableOpacity, + View, +} from 'react-native' +import LinearGradient from 'react-native-linear-gradient' +import {ErrorMessage} from '../util/ErrorMessage' +import {useStores} from '../../../state' +import {s, colors, gradients} from '../../lib/styles' +import {makeValidHandle, createFullHandle} from '../../lib/strings' +import {AppBskyActorCreateScene} from '../../../third-party/api/index' + +export const snapPoints = ['70%'] + +export function Component({}: {}) { + const store = useStores() + const [error, setError] = useState('') + const [isProcessing, setIsProcessing] = useState(false) + const [handle, setHandle] = useState('') + const [displayName, setDisplayName] = useState('') + const [description, setDescription] = useState('') + const onPressSave = async () => { + setIsProcessing(true) + if (error) { + setError('') + } + try { + if (!store.me.did) { + return + } + const desc = await store.api.com.atproto.server.getAccountsConfig() + const fullHandle = createFullHandle( + handle, + desc.data.availableUserDomains[0], + ) + // create scene actor + const createSceneRes = await store.api.app.bsky.actor.createScene({ + handle: fullHandle, + }) + // set the scene profile + // TODO + // follow the scene + await store.api.app.bsky.graph.follow + .create( + { + did: store.me.did, + }, + { + subject: { + did: createSceneRes.data.did, + declarationCid: createSceneRes.data.declarationCid, + }, + createdAt: new Date().toISOString(), + }, + ) + .catch(e => console.error(e)) // an error here is not critical + Toast.show('Scene created', { + position: Toast.positions.TOP, + }) + store.shell.closeModal() + store.nav.navigate(`/profile/${fullHandle}`) + } catch (e: any) { + if (e instanceof AppBskyActorCreateScene.InvalidHandleError) { + setError( + 'The handle can only contain letters, numbers, and dashes, and must start with a letter.', + ) + } else if (e instanceof AppBskyActorCreateScene.HandleNotAvailableError) { + setError(`The handle "${handle}" is not available.`) + } else { + console.error(e) + setError( + 'Failed to create the scene. Check your internet connection and try again.', + ) + } + setIsProcessing(false) + } + } + + return ( + + Create a scene + + Scenes are invite-only groups which aggregate what's popular with + members. + + + + Scene Handle + setHandle(makeValidHandle(str))} + /> + + + Scene Display Name + + + + Scene Description + + + + {error !== '' && ( + + + + )} + + {handle.length >= 2 && !isProcessing ? ( + + + Create Scene + + + ) : ( + + + {isProcessing ? ( + + ) : ( + Create Scene + )} + + + )} + + + ) +} + +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, + }, + inner: { + padding: 14, + }, + group: { + marginBottom: 10, + }, + label: { + fontSize: 16, + fontWeight: 'bold', + paddingHorizontal: 4, + paddingBottom: 4, + }, + textInput: { + borderWidth: 1, + borderColor: colors.gray3, + borderRadius: 6, + paddingHorizontal: 14, + paddingVertical: 10, + fontSize: 16, + }, + textArea: { + borderWidth: 1, + borderColor: colors.gray3, + borderRadius: 6, + paddingHorizontal: 12, + paddingTop: 10, + fontSize: 16, + height: 100, + textAlignVertical: 'top', + }, + errorContainer: { + height: 80, + }, + btn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + width: '100%', + borderRadius: 32, + padding: 14, + marginBottom: 10, + backgroundColor: colors.gray1, + }, +}) diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index ab4d7f563..3049ad5b8 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/src/view/com/modals/EditProfile.tsx @@ -68,7 +68,7 @@ export function Component({profileView}: {profileView: ProfileViewModel}) { /> - Biography + Description ) + } else if (store.shell.activeModal?.name === 'create-scene') { + snapPoints = CreateScene.snapPoints + element = } else { element = } diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index 5d0a5ba4b..0349d3428 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -6,7 +6,7 @@ import { PostThreadViewPostModel, } from '../../../state/models/post-thread-view' import {useStores} from '../../../state' -import {SharePostModel} from '../../../state/models/shell' +import {SharePostModel} from '../../../state/models/shell-ui' import {PostThreadItem} from './PostThreadItem' export const PostThread = observer(function PostThread({uri}: {uri: string}) { diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 73593166c..43017f7d7 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -5,7 +5,7 @@ import {AtUri} from '../../../third-party/uri' import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FeedItemModel} from '../../../state/models/feed-view' -import {SharePostModel} from '../../../state/models/shell' +import {SharePostModel} from '../../../state/models/shell-ui' import {Link} from '../util/Link' import {PostDropdownBtn} from '../util/DropdownBtn' import {UserInfoText} from '../util/UserInfoText' diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 536a37cb2..ee4df4fb9 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -11,7 +11,7 @@ import LinearGradient from 'react-native-linear-gradient' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {ProfileViewModel} from '../../../state/models/profile-view' import {useStores} from '../../../state' -import {EditProfileModel} from '../../../state/models/shell' +import {EditProfileModel} from '../../../state/models/shell-ui' import {pluralize} from '../../lib/strings' import {s, colors} from '../../lib/styles' import {getGradient} from '../../lib/asset-gen' diff --git a/src/view/com/util/DropdownBtn.tsx b/src/view/com/util/DropdownBtn.tsx index 2e9ca0c15..960293320 100644 --- a/src/view/com/util/DropdownBtn.tsx +++ b/src/view/com/util/DropdownBtn.tsx @@ -13,7 +13,7 @@ import RootSiblings from 'react-native-root-siblings' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {colors} from '../../lib/styles' import {useStores} from '../../../state' -import {SharePostModel} from '../../../state/models/shell' +import {SharePostModel} from '../../../state/models/shell-ui' export interface DropdownItem { icon?: IconProp diff --git a/src/view/com/util/ErrorMessage.tsx b/src/view/com/util/ErrorMessage.tsx index 3acea1cab..834cd598f 100644 --- a/src/view/com/util/ErrorMessage.tsx +++ b/src/view/com/util/ErrorMessage.tsx @@ -5,9 +5,11 @@ import {colors} from '../../lib/styles' export function ErrorMessage({ message, + numberOfLines, onPressTryAgain, }: { message: string + numberOfLines?: number onPressTryAgain?: () => void }) { return ( @@ -19,7 +21,9 @@ export function ErrorMessage({ size={16} /> - {message} + + {message} + {onPressTryAgain && ( 0 ? ents : undefined } + +export function makeValidHandle(str: string): string { + if (str.length > 20) { + str = str.slice(0, 20) + } + str = str.toLowerCase() + return str.replace(/^[^a-z]+/g, '').replace(/[^a-z0-9-]/g, '') +} + +export function createFullHandle(name: string, domain: string): string { + name = name.replace(/[\.]+$/, '') + domain = domain.replace(/^[\.]+/, '') + return `${name}.${domain}` +} diff --git a/src/view/shell/mobile/Composer.tsx b/src/view/shell/mobile/Composer.tsx index 96fd50441..7a8d6681b 100644 --- a/src/view/shell/mobile/Composer.tsx +++ b/src/view/shell/mobile/Composer.tsx @@ -19,7 +19,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {HomeIcon, UserGroupIcon, BellIcon} from '../../lib/icons' import {ComposePost} from '../../com/composer/ComposePost' import {useStores} from '../../../state' -import {ComposerOpts} from '../../../state/models/shell' +import {ComposerOpts} from '../../../state/models/shell-ui' import {s, colors} from '../../lib/styles' export const Composer = observer( diff --git a/src/view/shell/mobile/MainMenu.tsx b/src/view/shell/mobile/MainMenu.tsx index 0249714f4..3bc045029 100644 --- a/src/view/shell/mobile/MainMenu.tsx +++ b/src/view/shell/mobile/MainMenu.tsx @@ -20,6 +20,7 @@ import _chunk from 'lodash.chunk' import {HomeIcon, UserGroupIcon, BellIcon} from '../../lib/icons' import {UserAvatar} from '../../com/util/UserAvatar' import {useStores} from '../../../state' +import {CreateSceneModel} from '../../../state/models/shell-ui' import {s, colors} from '../../lib/styles' export const MainMenu = observer( @@ -54,6 +55,10 @@ export const MainMenu = observer( store.nav.navigate(url) onClose() } + const onPressCreateScene = () => { + store.shell.openModal(new CreateSceneModel()) + onClose() + } // rendering // = @@ -65,17 +70,19 @@ export const MainMenu = observer( const MenuItem = ({ icon, label, - url, count, + url, + onPress, }: { icon: IconProp label: string - url: string count?: number + url?: string + onPress?: () => void }) => ( onNavigate(url)}> + onPress={onPress ? onPress : () => onNavigate(url || '/')}> {icon === 'home' ? ( @@ -209,7 +216,7 @@ export const MainMenu = observer( {store.me.memberships ? ( store.me.memberships.memberships.map((membership, i) => ( diff --git a/src/view/shell/mobile/TabsSelector.tsx b/src/view/shell/mobile/TabsSelector.tsx index c0ae2321a..a3da5fa19 100644 --- a/src/view/shell/mobile/TabsSelector.tsx +++ b/src/view/shell/mobile/TabsSelector.tsx @@ -19,7 +19,7 @@ import Swipeable from 'react-native-gesture-handler/Swipeable' import {useStores} from '../../../state' import {s, colors} from '../../lib/styles' import {match} from '../../routes' -import {LinkActionsModel} from '../../../state/models/shell' +import {LinkActionsModel} from '../../../state/models/shell-ui' const TAB_HEIGHT = 42 diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx index 49b18a481..9fb17aba2 100644 --- a/src/view/shell/mobile/index.tsx +++ b/src/view/shell/mobile/index.tsx @@ -230,11 +230,11 @@ export const MobileShell: React.FC = observer(() => { /> - setMainMenuActive(false)} /> + setTabsSelectorActive(false)} -- cgit 1.4.1