diff --git a/src/lib/routes/types.ts b/src/lib/routes/types.ts index 139115698f..acd54ceb12 100644 --- a/src/lib/routes/types.ts +++ b/src/lib/routes/types.ts @@ -43,9 +43,8 @@ export type CommonNavigatorParams = { StarterPack: {name: string; rkey: string} StarterPackLanding: {name: string; rkey: string} StarterPackWizard: { - mode: 'Create' | 'Edit' - id?: string - initialStep?: 'Details' | 'Profiles' | 'Feeds' + name?: string + rkey?: string } } @@ -107,9 +106,8 @@ export type AllNavigatorParams = CommonNavigatorParams & { StarterPack: {name: string; rkey: string} StarterPackLanding: {name: string; rkey: string} StarterPackWizard: { - mode: 'Create' | 'Edit' - id?: string - initialStep?: 'Details' | 'Profiles' | 'Feeds' + name?: string + rkey?: string } } diff --git a/src/screens/StarterPack/Wizard/State.tsx b/src/screens/StarterPack/Wizard/State.tsx index d97535084e..766ab2f547 100644 --- a/src/screens/StarterPack/Wizard/State.tsx +++ b/src/screens/StarterPack/Wizard/State.tsx @@ -1,5 +1,9 @@ import React from 'react' -import {AppBskyActorDefs} from '@atproto/api' +import { + AppBskyActorDefs, + AppBskyGraphDefs, + AppBskyGraphStarterpack, +} from '@atproto/api' import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs' const steps = ['Details', 'Profiles', 'Feeds'] as const @@ -22,7 +26,6 @@ interface State { currentStep: Step name?: string description?: string - avatar?: string profiles: AppBskyActorDefs.ProfileViewBasic[] feeds: GeneratorView[] processing: boolean @@ -99,29 +102,35 @@ function reducer(state: State, action: Action): State { // TODO supply the initial state to this component export function Provider({ - initialState, - initialStep = 'Details', + starterPack, children, }: { - initialState?: any // TODO update this type - initialStep?: Step + starterPack?: AppBskyGraphDefs.StarterPackView children: React.ReactNode }) { - const [state, dispatch] = React.useReducer( - reducer, - initialState - ? { - ...initialState, - step: initialStep, - } - : { - canNext: false, - currentStep: initialStep, - profiles: [], - feeds: [], - processing: false, - }, - ) + const createInitialState = (): State => { + if (starterPack && AppBskyGraphStarterpack.isRecord(starterPack.record)) { + return { + canNext: false, + currentStep: 'Details', + name: starterPack.record.name, + description: starterPack.record.description, + profiles: starterPack.listItemsSample?.map(item => item.subject) || [], + feeds: starterPack.feeds || [], + processing: false, + } + } + + return { + canNext: false, + currentStep: 'Details', + profiles: [], + feeds: [], + processing: false, + } + } + + const [state, dispatch] = React.useReducer(reducer, createInitialState()) return ( diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx index 13258714e1..e47d7b8bb5 100644 --- a/src/screens/StarterPack/Wizard/index.tsx +++ b/src/screens/StarterPack/Wizard/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import {Keyboard, TouchableOpacity, View} from 'react-native' import {KeyboardAwareScrollView} from 'react-native-keyboard-controller' -import {AppBskyActorDefs, AtUri} from '@atproto/api' +import {AppBskyActorDefs, AppBskyGraphDefs, AtUri} 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' @@ -14,6 +14,8 @@ import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types' import {enforceLen} from 'lib/strings/helpers' import {isAndroid, isNative, isWeb} from 'platform/detection' import {useProfileQuery} from 'state/queries/profile' +import {useResolveDidQuery} from 'state/queries/resolve-uri' +import {useStarterPackQuery} from 'state/queries/useStarterPackQuery' import {useAgent, useSession} from 'state/session' import {useSetMinimalShellMode} from 'state/shell' import {UserAvatar} from 'view/com/util/UserAvatar' @@ -25,6 +27,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 {ListMaybePlaceholder} from '#/components/Lists' import {Loader} from '#/components/Loader' import {WizardEditListDialog} from '#/components/StarterPack/Wizard/WizardEditListDialog' import {Text} from '#/components/Typography' @@ -34,41 +37,42 @@ export function Wizard({ route, }: NativeStackScreenProps) { const params = route.params - const {mode, initialStep, id} = params ?? {} + const {name, rkey} = params ?? {} + + const {_} = useLingui() // TODO load query here - const starterPack = {} + const { + data: did, + isLoading: isLoadingDid, + isError: isErrorDid, + } = useResolveDidQuery(name) + const { + data: starterPack, + isLoading: isLoadingStarterPack, + isError: isErrorStarterPAck, + } = useStarterPackQuery({did, rkey}) - // TODO use this to wait for loading the starterpack for editing - if (mode === 'Edit' && false) { - // Await here - return + if (name && rkey && !starterPack) { + return ( + + ) } - return ( - - ) + return } function WizardReady({ - mode, - initialStep, starterPack, }: { - mode: 'Create' | 'Edit' - id?: string - initialStep?: 'Details' | 'Profiles' | 'Feeds' - starterPack?: any + starterPack?: AppBskyGraphDefs.StarterPackView }) { return ( - + ) diff --git a/src/state/queries/useStarterPackQuery.ts b/src/state/queries/useStarterPackQuery.ts index c03691acbf..d9db740bc8 100644 --- a/src/state/queries/useStarterPackQuery.ts +++ b/src/state/queries/useStarterPackQuery.ts @@ -6,7 +6,13 @@ import {useAgent, useSession} from 'state/session' const RQKEY_ROOT = 'starter-pack' -export function useStarterPackQuery({did, rkey}: {did?: string; rkey: string}) { +export function useStarterPackQuery({ + did, + rkey, +}: { + did?: string + rkey?: string +}) { const agent = useAgent() const uri = `at://${did}/app.bsky.graph.starterpack/${rkey}` @@ -18,7 +24,7 @@ export function useStarterPackQuery({did, rkey}: {did?: string; rkey: string}) { }) return res.data.starterPack }, - enabled: Boolean(did), + enabled: Boolean(did) && Boolean(rkey), staleTime: STALE.MINUTES.FIVE, }) }