From 3ebdccfce2e0050dfffe17766a2d39b2397eadcb Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 6 Jun 2024 20:59:31 -0700 Subject: [PATCH] add processing state to button --- src/screens/StarterPack/Wizard/State.tsx | 64 +---------- src/screens/StarterPack/Wizard/index.tsx | 131 ++++++++++++++++------- 2 files changed, 97 insertions(+), 98 deletions(-) diff --git a/src/screens/StarterPack/Wizard/State.tsx b/src/screens/StarterPack/Wizard/State.tsx index eb9c393b11..d97535084e 100644 --- a/src/screens/StarterPack/Wizard/State.tsx +++ b/src/screens/StarterPack/Wizard/State.tsx @@ -2,8 +2,6 @@ import React from 'react' import {AppBskyActorDefs} from '@atproto/api' import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs' -import {useAgent, useSession} from 'state/session' - const steps = ['Details', 'Profiles', 'Feeds'] as const type Step = (typeof steps)[number] @@ -30,12 +28,11 @@ interface State { processing: boolean } -type TStateContext = [State, (action: Action) => void, () => Promise] +type TStateContext = [State, (action: Action) => void] const StateContext = React.createContext([ {} as State, (_: Action) => {}, - async () => {}, ]) export const useWizardState = () => React.useContext(StateContext) @@ -110,9 +107,6 @@ export function Provider({ initialStep?: Step children: React.ReactNode }) { - const agent = useAgent() - const {currentAccount} = useSession() - const [state, dispatch] = React.useReducer( reducer, initialState @@ -129,62 +123,8 @@ export function Provider({ }, ) - const submit = async () => { - dispatch({type: 'SetProcessing', processing: true}) - - try { - const list = await agent.app.bsky.graph.list.create( - {repo: currentAccount?.did}, - { - name: state.name ?? '', - description: state.description ?? '', - descriptionFacets: [], - avatar: undefined, - createdAt: new Date().toISOString(), - purpose: 'app.bsky.graph.defs#referencelist', - }, - ) - - await agent.com.atproto.repo.applyWrites({ - repo: currentAccount!.did, - writes: state.profiles.map(p => ({ - $type: 'com.atproto.repo.applyWrites#create', - collection: 'app.bsky.graph.listitem', - value: { - $type: 'app.bsky.graph.listitem', - subject: p.did, - list: list.uri, - createdAt: new Date().toISOString(), - }, - })), - }) - - await agent.app.bsky.graph.starterpack.create( - { - repo: currentAccount!.did, - validate: false, - }, - { - name: state.name ?? '', - description: state.description ?? '', - descriptionFacets: [], - list: list.uri, - feeds: state.feeds.map(f => ({ - uri: f.uri, - })), - createdAt: new Date().toISOString(), - }, - ) - } catch (e) { - // TODO add error to state - console.error(e) - } finally { - dispatch({type: 'SetProcessing', processing: false}) - } - } - return ( - + {children} ) diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx index 853151e4f3..795166c1dc 100644 --- a/src/screens/StarterPack/Wizard/index.tsx +++ b/src/screens/StarterPack/Wizard/index.tsx @@ -1,18 +1,20 @@ import React from 'react' -import {Keyboard, View} from 'react-native' +import {Keyboard, TouchableOpacity, View} from 'react-native' import {KeyboardAwareScrollView} from 'react-native-keyboard-controller' import {AppBskyActorDefs} from '@atproto/api' import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg, Plural, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect, useNavigation} from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {HITSLOP_10} from 'lib/constants' import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types' import {enforceLen} from 'lib/strings/helpers' import {isAndroid, isWeb} from 'platform/detection' import {useProfileQuery} from 'state/queries/profile' -import {useSession} from 'state/session' +import {useAgent, useSession} from 'state/session' import {useSetMinimalShellMode} from 'state/shell' import {UserAvatar} from 'view/com/util/UserAvatar' import {CenteredView} from 'view/com/util/Views' @@ -23,6 +25,7 @@ import {StepProfiles} from '#/screens/StarterPack/Wizard/StepProfiles' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' import {useDialogControl} from '#/components/Dialog' +import {Loader} from '#/components/Loader' import {WizardEditListDialog} from '#/components/StarterPack/Wizard/WizardEditListDialog' import {Text} from '#/components/Typography' import {Provider} from './State' @@ -75,7 +78,8 @@ function WizardInner() { const navigation = useNavigation() const {_} = useLingui() const t = useTheme() - const [state, dispatch, submit] = useWizardState() + const [state, dispatch] = useWizardState() + const agent = useAgent() const {currentAccount} = useSession() const {data: currentProfile} = useProfileQuery({ did: currentAccount?.did, @@ -121,6 +125,62 @@ function WizardInner() { const uiStrings = wizardUiStrings[state.currentStep] + const submit = async () => { + dispatch({type: 'SetProcessing', processing: true}) + + try { + const list = await agent.app.bsky.graph.list.create( + {repo: currentAccount?.did}, + { + name: state.name ?? '', + description: state.description ?? '', + descriptionFacets: [], + avatar: undefined, + createdAt: new Date().toISOString(), + purpose: 'app.bsky.graph.defs#referencelist', + }, + ) + + await agent.com.atproto.repo.applyWrites({ + repo: currentAccount!.did, + writes: state.profiles.map(p => ({ + $type: 'com.atproto.repo.applyWrites#create', + collection: 'app.bsky.graph.listitem', + value: { + $type: 'app.bsky.graph.listitem', + subject: p.did, + list: list.uri, + createdAt: new Date().toISOString(), + }, + })), + }) + + const res = await agent.app.bsky.graph.starterpack.create( + { + repo: currentAccount!.did, + validate: false, + }, + { + name: state.name ?? '', + description: state.description ?? '', + descriptionFacets: [], + list: list.uri, + feeds: state.feeds.map(f => ({ + uri: f.uri, + })), + createdAt: new Date().toISOString(), + }, + ) + + navigation.navigate('StarterPack', {id: res.uri}) + } catch (e) { + // TODO add error to state + console.error(e) + } finally { + // dispatch({type: 'SetProcessing', processing: false}) + } + } + const onNext = () => { if (state.currentStep === 'Details' && !state.name) { dispatch({ @@ -146,39 +206,36 @@ function WizardInner() { return ( - - - - {state.currentStep !== 'Details' && ( - - )} - - - {uiStrings.header} - - + + + {state.currentStep !== 'Details' && ( + dispatch({type: 'Back'})} + hitSlop={HITSLOP_10} + accessibilityRole="button" + accessibilityLabel={_(msg`Back`)} + accessibilityHint={_(msg`Go back to the previous step`)}> + + + )} + + {uiStrings.header} + + @@ -348,8 +405,10 @@ function Footer({ variant="solid" color="primary" size="small" - onPress={onNext}> + onPress={onNext} + disabled={state.canNext || state.processing}> {nextBtnText} +