zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Merge pull request #1860 from bluesky-social/eric/startup 

Web login/signup and shell
zio/stable
Eric Bailey 2023-11-10 11:31:36 -06:00 committed by GitHub
parent 8d7475c130 436a14eabb
commit 6513055d02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 695 additions and 916 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/constants.ts
View File

@ -43,7 +43,10 @@ export function IS_PROD(url: string) {
// until open federation, "production" is defined as the main server // until open federation, "production" is defined as the main server
// this definition will not work once federation is enabled! // this definition will not work once federation is enabled!
// -prf // -prf
return url.startsWith('https://bsky.social') return (
url.startsWith('https://bsky.social') ||
url.startsWith('https://api.bsky.app')
)
} }
export const PROD_TEAM_HANDLES = [ export const PROD_TEAM_HANDLES = [

57
src/lib/hooks/useAccountSwitcher.ts
View File

@ -1,46 +1,43 @@
import {useCallback, useState} from 'react' import {useCallback} from 'react'
import {useStores} from 'state/index'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from '#/lib/analytics/analytics'
import {StackActions, useNavigation} from '@react-navigation/native' import {useStores} from '#/state/index'
import {NavigationProp} from 'lib/routes/types'
import {AccountData} from 'state/models/session'
import {reset as resetNavigation} from '../../Navigation'
import * as Toast from 'view/com/util/Toast'
import {useSetDrawerOpen} from '#/state/shell/drawer-open' import {useSetDrawerOpen} from '#/state/shell/drawer-open'
import {useModalControls} from '#/state/modals' import {useModalControls} from '#/state/modals'
import {useSessionApi, SessionAccount} from '#/state/session'
import * as Toast from '#/view/com/util/Toast'
export function useAccountSwitcher(): [ export function useAccountSwitcher() {
boolean,
(v: boolean) => void,
(acct: AccountData) => Promise<void>,
] {
const {track} = useAnalytics() const {track} = useAnalytics()
const store = useStores() const store = useStores()
const setDrawerOpen = useSetDrawerOpen() const setDrawerOpen = useSetDrawerOpen()
const {closeModal} = useModalControls() const {closeModal} = useModalControls()
const [isSwitching, setIsSwitching] = useState(false) const {selectAccount, clearCurrentAccount} = useSessionApi()
const navigation = useNavigation<NavigationProp>()
const onPressSwitchAccount = useCallback( const onPressSwitchAccount = useCallback(
async (acct: AccountData) => { async (acct: SessionAccount) => {
track('Settings:SwitchAccountButtonClicked') track('Settings:SwitchAccountButtonClicked')
setIsSwitching(true)
const success = await store.session.resumeSession(acct) try {
setDrawerOpen(false) await selectAccount(acct)
closeModal() setDrawerOpen(false)
store.shell.closeAllActiveElements() closeModal()
if (success) { store.shell.closeAllActiveElements()
resetNavigation() Toast.show(`Signed in as ${acct.handle}`)
Toast.show(`Signed in as ${acct.displayName || acct.handle}`) } catch (e) {
} else {
Toast.show('Sorry! We need you to enter your password.') Toast.show('Sorry! We need you to enter your password.')
navigation.navigate('HomeTab') clearCurrentAccount() // back user out to login
navigation.dispatch(StackActions.popToTop())
store.session.clear()
} }
}, },
[track, setIsSwitching, navigation, store, setDrawerOpen, closeModal], [
track,
store,
setDrawerOpen,
closeModal,
clearCurrentAccount,
selectAccount,
],
) )
return [isSwitching, setIsSwitching, onPressSwitchAccount] return {onPressSwitchAccount}
} }

20
src/state/models/root-store.ts
View File

@ -63,7 +63,6 @@ export class RootStoreModel {
serialize(): unknown { serialize(): unknown {
return { return {
appInfo: this.appInfo, appInfo: this.appInfo,
session: this.session.serialize(),
me: this.me.serialize(), me: this.me.serialize(),
preferences: this.preferences.serialize(), preferences: this.preferences.serialize(),
} }
@ -80,9 +79,6 @@ export class RootStoreModel {
if (hasProp(v, 'me')) { if (hasProp(v, 'me')) {
this.me.hydrate(v.me) this.me.hydrate(v.me)
} }
if (hasProp(v, 'session')) {
this.session.hydrate(v.session)
}
if (hasProp(v, 'preferences')) { if (hasProp(v, 'preferences')) {
this.preferences.hydrate(v.preferences) this.preferences.hydrate(v.preferences)
} }
@ -92,18 +88,7 @@ export class RootStoreModel {
/** /**
* Called during init to resume any stored session. * Called during init to resume any stored session.
*/ */
async attemptSessionResumption() { async attemptSessionResumption() {}
logger.debug('RootStoreModel:attemptSessionResumption')
try {
await this.session.attemptSessionResumption()
logger.debug('Session initialized', {
hasSession: this.session.hasSession,
})
this.updateSessionState()
} catch (e: any) {
logger.warn('Failed to initialize session', {error: e})
}
}
/** /**
* Called by the session model. Refreshes session-oriented state. * Called by the session model. Refreshes session-oriented state.
@ -135,11 +120,10 @@ export class RootStoreModel {
} }
/** /**
* Clears all session-oriented state. * Clears all session-oriented state, previously called on LOGOUT
*/ */
clearAllSessionState() { clearAllSessionState() {
logger.debug('RootStoreModel:clearAllSessionState') logger.debug('RootStoreModel:clearAllSessionState')
this.session.clear()
resetToTab('HomeTab') resetToTab('HomeTab')
this.me.clear() this.me.clear()
} }

443
src/state/models/session.ts
View File

@ -1,274 +1,26 @@
import {makeAutoObservable, runInAction} from 'mobx' import {makeAutoObservable} from 'mobx'
import { import {
BskyAgent, BskyAgent,
AtpSessionEvent,
AtpSessionData,
ComAtprotoServerDescribeServer as DescribeServer, ComAtprotoServerDescribeServer as DescribeServer,
} from '@atproto/api' } from '@atproto/api'
import normalizeUrl from 'normalize-url'
import {isObj, hasProp} from 'lib/type-guards'
import {networkRetry} from 'lib/async/retry'
import {z} from 'zod'
import {RootStoreModel} from './root-store' import {RootStoreModel} from './root-store'
import {IS_PROD} from 'lib/constants'
import {track} from 'lib/analytics/analytics'
import {logger} from '#/logger'
export type ServiceDescription = DescribeServer.OutputSchema export type ServiceDescription = DescribeServer.OutputSchema
export const activeSession = z.object({
service: z.string(),
did: z.string(),
})
export type ActiveSession = z.infer<typeof activeSession>
export const accountData = z.object({
service: z.string(),
refreshJwt: z.string().optional(),
accessJwt: z.string().optional(),
handle: z.string(),
did: z.string(),
email: z.string().optional(),
displayName: z.string().optional(),
aviUrl: z.string().optional(),
emailConfirmed: z.boolean().optional(),
})
export type AccountData = z.infer<typeof accountData>
interface AdditionalAccountData {
displayName?: string
aviUrl?: string
}
export class SessionModel { export class SessionModel {
// DEBUG
// emergency log facility to help us track down this logout issue
// remove when resolved
// -prf
_log(message: string, details?: Record<string, any>) {
details = details || {}
details.state = {
data: this.data,
accounts: this.accounts.map(
a =>
`${!!a.accessJwt && !!a.refreshJwt ? '✅' : '❌'} ${a.handle} (${
a.service
})`,
),
isResumingSession: this.isResumingSession,
}
logger.debug(message, details, logger.DebugContext.session)
}
/**
* Currently-active session
*/
data: ActiveSession | null = null
/**
* A listing of the currently & previous sessions
*/
accounts: AccountData[] = []
/**
* Flag to indicate if we're doing our initial-load session resumption
*/
isResumingSession = false
constructor(public rootStore: RootStoreModel) { constructor(public rootStore: RootStoreModel) {
makeAutoObservable(this, { makeAutoObservable(this, {
rootStore: false, rootStore: false,
serialize: false,
hydrate: false,
hasSession: false, hasSession: false,
}) })
} }
get currentSession() { get currentSession(): any {
if (!this.data) { return undefined
return undefined
}
const {did, service} = this.data
return this.accounts.find(
account =>
normalizeUrl(account.service) === normalizeUrl(service) &&
account.did === did &&
!!account.accessJwt &&
!!account.refreshJwt,
)
} }
get hasSession() { get hasSession() {
return !!this.currentSession && !!this.rootStore.agent.session return false
}
get hasAccounts() {
return this.accounts.length >= 1
}
get switchableAccounts() {
return this.accounts.filter(acct => acct.did !== this.data?.did)
}
get emailNeedsConfirmation() {
return !this.currentSession?.emailConfirmed
}
get isSandbox() {
if (!this.data) {
return false
}
return !IS_PROD(this.data.service)
}
serialize(): unknown {
return {
data: this.data,
accounts: this.accounts,
}
}
hydrate(v: unknown) {
this.accounts = []
if (isObj(v)) {
if (hasProp(v, 'data') && activeSession.safeParse(v.data)) {
this.data = v.data as ActiveSession
}
if (hasProp(v, 'accounts') && Array.isArray(v.accounts)) {
for (const account of v.accounts) {
if (accountData.safeParse(account)) {
this.accounts.push(account as AccountData)
}
}
}
}
}
clear() {
this.data = null
}
/**
* Attempts to resume the previous session loaded from storage
*/
async attemptSessionResumption() {
const sess = this.currentSession
if (sess) {
this._log('SessionModel:attemptSessionResumption found stored session')
this.isResumingSession = true
try {
return await this.resumeSession(sess)
} finally {
runInAction(() => {
this.isResumingSession = false
})
}
} else {
this._log(
'SessionModel:attemptSessionResumption has no session to resume',
)
}
}
/**
* Sets the active session
*/
async setActiveSession(agent: BskyAgent, did: string) {
this._log('SessionModel:setActiveSession')
const hadSession = !!this.data
this.data = {
service: agent.service.toString(),
did,
}
await this.rootStore.handleSessionChange(agent, {hadSession})
}
/**
* Upserts a session into the accounts
*/
persistSession(
service: string,
did: string,
event: AtpSessionEvent,
session?: AtpSessionData,
addedInfo?: AdditionalAccountData,
) {
this._log('SessionModel:persistSession', {
service,
did,
event,
hasSession: !!session,
})
const existingAccount = this.accounts.find(
account => account.service === service && account.did === did,
)
// fall back to any preexisting access tokens
let refreshJwt = session?.refreshJwt || existingAccount?.refreshJwt
let accessJwt = session?.accessJwt || existingAccount?.accessJwt
if (event === 'expired') {
// only clear the tokens when they're known to have expired
refreshJwt = undefined
accessJwt = undefined
}
const newAccount = {
service,
did,
refreshJwt,
accessJwt,
handle: session?.handle || existingAccount?.handle || '',
email: session?.email || existingAccount?.email || '',
displayName: addedInfo
? addedInfo.displayName
: existingAccount?.displayName || '',
aviUrl: addedInfo ? addedInfo.aviUrl : existingAccount?.aviUrl || '',
emailConfirmed: session?.emailConfirmed,
}
if (!existingAccount) {
this.accounts.push(newAccount)
} else {
this.accounts = [
newAccount,
...this.accounts.filter(
account => !(account.service === service && account.did === did),
),
]
}
// if the session expired, fire an event to let the user know
if (event === 'expired') {
this.rootStore.handleSessionDrop()
}
}
/**
* Clears any session tokens from the accounts; used on logout.
*/
clearSessionTokens() {
this._log('SessionModel:clearSessionTokens')
this.accounts = this.accounts.map(acct => ({
service: acct.service,
handle: acct.handle,
did: acct.did,
displayName: acct.displayName,
aviUrl: acct.aviUrl,
email: acct.email,
emailConfirmed: acct.emailConfirmed,
}))
}
/**
* Fetches additional information about an account on load.
*/
async loadAccountInfo(agent: BskyAgent, did: string) {
const res = await agent.getProfile({actor: did}).catch(_e => undefined)
if (res) {
return {
displayName: res.data.displayName,
aviUrl: res.data.avatar,
}
}
} }
/** /**
@ -280,193 +32,8 @@ export class SessionModel {
return res.data return res.data
} }
/**
* Attempt to resume a session that we still have access tokens for.
*/
async resumeSession(account: AccountData): Promise<boolean> {
this._log('SessionModel:resumeSession')
if (!(account.accessJwt && account.refreshJwt && account.service)) {
this._log(
'SessionModel:resumeSession aborted due to lack of access tokens',
)
return false
}
const agent = new BskyAgent({
service: account.service,
persistSession: (evt: AtpSessionEvent, sess?: AtpSessionData) => {
this.persistSession(account.service, account.did, evt, sess)
},
})
try {
await networkRetry(3, () =>
agent.resumeSession({
accessJwt: account.accessJwt || '',
refreshJwt: account.refreshJwt || '',
did: account.did,
handle: account.handle,
email: account.email,
emailConfirmed: account.emailConfirmed,
}),
)
const addedInfo = await this.loadAccountInfo(agent, account.did)
this.persistSession(
account.service,
account.did,
'create',
agent.session,
addedInfo,
)
this._log('SessionModel:resumeSession succeeded')
} catch (e: any) {
this._log('SessionModel:resumeSession failed', {
error: e.toString(),
})
return false
}
await this.setActiveSession(agent, account.did)
return true
}
/**
* Create a new session.
*/
async login({
service,
identifier,
password,
}: {
service: string
identifier: string
password: string
}) {
this._log('SessionModel:login')
const agent = new BskyAgent({service})
await agent.login({identifier, password})
if (!agent.session) {
throw new Error('Failed to establish session')
}
const did = agent.session.did
const addedInfo = await this.loadAccountInfo(agent, did)
this.persistSession(service, did, 'create', agent.session, addedInfo)
agent.setPersistSessionHandler(
(evt: AtpSessionEvent, sess?: AtpSessionData) => {
this.persistSession(service, did, evt, sess)
},
)
await this.setActiveSession(agent, did)
this._log('SessionModel:login succeeded')
}
async createAccount({
service,
email,
password,
handle,
inviteCode,
}: {
service: string
email: string
password: string
handle: string
inviteCode?: string
}) {
this._log('SessionModel:createAccount')
const agent = new BskyAgent({service})
await agent.createAccount({
handle,
password,
email,
inviteCode,
})
if (!agent.session) {
throw new Error('Failed to establish session')
}
const did = agent.session.did
const addedInfo = await this.loadAccountInfo(agent, did)
this.persistSession(service, did, 'create', agent.session, addedInfo)
agent.setPersistSessionHandler(
(evt: AtpSessionEvent, sess?: AtpSessionData) => {
this.persistSession(service, did, evt, sess)
},
)
await this.setActiveSession(agent, did)
this._log('SessionModel:createAccount succeeded')
track('Create Account Successfully')
}
/**
* Close all sessions across all accounts.
*/
async logout() {
this._log('SessionModel:logout')
// TODO
// need to evaluate why deleting the session has caused errors at times
// -prf
/*if (this.hasSession) {
this.rootStore.agent.com.atproto.session.delete().catch((e: any) => {
this.rootStore.log.warn(
'(Minor issue) Failed to delete session on the server',
e,
)
})
}*/
this.clearSessionTokens()
this.rootStore.clearAllSessionState()
}
/**
* Removes an account from the list of stored accounts.
*/
removeAccount(handle: string) {
this.accounts = this.accounts.filter(acc => acc.handle !== handle)
}
/** /**
* Reloads the session from the server. Useful when account details change, like the handle. * Reloads the session from the server. Useful when account details change, like the handle.
*/ */
async reloadFromServer() { async reloadFromServer() {}
const sess = this.currentSession
if (!sess) {
return
}
const res = await this.rootStore.agent
.getProfile({actor: sess.did})
.catch(_e => undefined)
if (res?.success) {
const updated = {
...sess,
handle: res.data.handle,
displayName: res.data.displayName,
aviUrl: res.data.avatar,
}
runInAction(() => {
this.accounts = [
updated,
...this.accounts.filter(
account =>
!(
account.service === updated.service &&
account.did === updated.did
),
),
]
})
await this.rootStore.me.load()
}
}
updateLocalAccountData(changes: Partial<AccountData>) {
this.accounts = this.accounts.map(acct =>
acct.did === this.data?.did ? {...acct, ...changes} : acct,
)
}
} }

11
src/state/models/ui/create-account.ts
View File

@ -10,6 +10,7 @@ import {getAge} from 'lib/strings/time'
import {track} from 'lib/analytics/analytics' import {track} from 'lib/analytics/analytics'
import {logger} from '#/logger' import {logger} from '#/logger'
import {DispatchContext as OnboardingDispatchContext} from '#/state/shell/onboarding' import {DispatchContext as OnboardingDispatchContext} from '#/state/shell/onboarding'
import {ApiContext as SessionApiContext} from '#/state/session'
const DEFAULT_DATE = new Date(Date.now() - 60e3 * 60 * 24 * 365 * 20) // default to 20 years ago const DEFAULT_DATE = new Date(Date.now() - 60e3 * 60 * 24 * 365 * 20) // default to 20 years ago
@ -91,7 +92,13 @@ export class CreateAccountModel {
} }
} }
async submit(onboardingDispatch: OnboardingDispatchContext) { async submit({
createAccount,
onboardingDispatch,
}: {
createAccount: SessionApiContext['createAccount']
onboardingDispatch: OnboardingDispatchContext
}) {
if (!this.email) { if (!this.email) {
this.setStep(2) this.setStep(2)
return this.setError('Please enter your email.') return this.setError('Please enter your email.')
@ -113,7 +120,7 @@ export class CreateAccountModel {
try { try {
onboardingDispatch({type: 'start'}) // start now to avoid flashing the wrong view onboardingDispatch({type: 'start'}) // start now to avoid flashing the wrong view
await this.rootStore.session.createAccount({ await createAccount({
service: this.serviceUrl, service: this.serviceUrl,
email: this.email, email: this.email,
handle: createFullHandle(this.handle, this.userDomain), handle: createFullHandle(this.handle, this.userDomain),

2
src/state/persisted/schema.ts
View File

@ -7,6 +7,8 @@ const accountSchema = z.object({
service: z.string(), service: z.string(),
did: z.string(), did: z.string(),
handle: z.string(), handle: z.string(),
email: z.string(),
emailConfirmed: z.boolean(),
refreshJwt: z.string().optional(), // optional because it can expire refreshJwt: z.string().optional(), // optional because it can expire
accessJwt: z.string().optional(), // optional because it can expire accessJwt: z.string().optional(), // optional because it can expire
// displayName: z.string().optional(), // displayName: z.string().optional(),

5
src/state/queries/index.ts 100644
View File

@ -0,0 +1,5 @@
import {BskyAgent} from '@atproto/api'
export const PUBLIC_BSKY_AGENT = new BskyAgent({
service: 'https://api.bsky.app',
})

13
src/state/queries/profile.ts 100644
View File

@ -0,0 +1,13 @@
import {useQuery} from '@tanstack/react-query'
import {PUBLIC_BSKY_AGENT} from '#/state/queries'
export function useProfileQuery({did}: {did: string}) {
return useQuery({
queryKey: ['getProfile', did],
queryFn: async () => {
const res = await PUBLIC_BSKY_AGENT.getProfile({actor: did})
return res.data
},
})
}

250
src/state/session/index.tsx
View File

@ -1,18 +1,25 @@
import React from 'react' import React from 'react'
import {DeviceEventEmitter} from 'react-native'
import {BskyAgent, AtpPersistSessionHandler} from '@atproto/api' import {BskyAgent, AtpPersistSessionHandler} from '@atproto/api'
import {networkRetry} from '#/lib/async/retry' import {networkRetry} from '#/lib/async/retry'
import {logger} from '#/logger' import {logger} from '#/logger'
import * as persisted from '#/state/persisted' import * as persisted from '#/state/persisted'
import {PUBLIC_BSKY_AGENT} from '#/state/queries'
import {IS_PROD} from '#/lib/constants'
export type SessionAccount = persisted.PersistedAccount export type SessionAccount = persisted.PersistedAccount
export type StateContext = { export type SessionState = {
isInitialLoad: boolean
agent: BskyAgent agent: BskyAgent
isInitialLoad: boolean
isSwitchingAccounts: boolean
accounts: persisted.PersistedAccount[] accounts: persisted.PersistedAccount[]
currentAccount: persisted.PersistedAccount | undefined currentAccount: persisted.PersistedAccount | undefined
}
export type StateContext = SessionState & {
hasSession: boolean hasSession: boolean
isSandbox: boolean
} }
export type ApiContext = { export type ApiContext = {
createAccount: (props: { createAccount: (props: {
@ -28,26 +35,26 @@ export type ApiContext = {
password: string password: string
}) => Promise<void> }) => Promise<void>
logout: () => Promise<void> logout: () => Promise<void>
initSession: (account: persisted.PersistedAccount) => Promise<void> initSession: (account: SessionAccount) => Promise<void>
resumeSession: (account?: persisted.PersistedAccount) => Promise<void> resumeSession: (account?: SessionAccount) => Promise<void>
removeAccount: ( removeAccount: (account: SessionAccount) => void
account: Partial<Pick<persisted.PersistedAccount, 'handle' | 'did'>>, selectAccount: (account: SessionAccount) => Promise<void>
) => void
updateCurrentAccount: ( updateCurrentAccount: (
account: Pick<persisted.PersistedAccount, 'handle'>, account: Partial<
Pick<SessionAccount, 'handle' | 'email' | 'emailConfirmed'>
>,
) => void ) => void
clearCurrentAccount: () => void
} }
export const PUBLIC_BSKY_AGENT = new BskyAgent({
service: 'https://api.bsky.app',
})
const StateContext = React.createContext<StateContext>({ const StateContext = React.createContext<StateContext>({
hasSession: false, agent: PUBLIC_BSKY_AGENT,
isInitialLoad: true, isInitialLoad: true,
isSwitchingAccounts: false,
accounts: [], accounts: [],
currentAccount: undefined, currentAccount: undefined,
agent: PUBLIC_BSKY_AGENT, hasSession: false,
isSandbox: false,
}) })
const ApiContext = React.createContext<ApiContext>({ const ApiContext = React.createContext<ApiContext>({
@ -57,7 +64,9 @@ const ApiContext = React.createContext<ApiContext>({
initSession: async () => {}, initSession: async () => {},
resumeSession: async () => {}, resumeSession: async () => {},
removeAccount: () => {}, removeAccount: () => {},
selectAccount: async () => {},
updateCurrentAccount: () => {}, updateCurrentAccount: () => {},
clearCurrentAccount: () => {},
}) })
function createPersistSessionHandler( function createPersistSessionHandler(
@ -73,15 +82,23 @@ function createPersistSessionHandler(
service: account.service, service: account.service,
did: session?.did || account.did, did: session?.did || account.did,
handle: session?.handle || account.handle, handle: session?.handle || account.handle,
email: session?.email || account.email,
emailConfirmed: session?.emailConfirmed || account.emailConfirmed,
refreshJwt: session?.refreshJwt, // undefined when expired or creation fails refreshJwt: session?.refreshJwt, // undefined when expired or creation fails
accessJwt: session?.accessJwt, // undefined when expired or creation fails accessJwt: session?.accessJwt, // undefined when expired or creation fails
} }
logger.debug(`session: BskyAgent.persistSession`, { logger.debug(
expired, `session: BskyAgent.persistSession`,
did: refreshedAccount.did, {
handle: refreshedAccount.handle, expired,
}) did: refreshedAccount.did,
handle: refreshedAccount.handle,
},
logger.DebugContext.session,
)
if (expired) DeviceEventEmitter.emit('session-dropped')
persistSessionCallback({ persistSessionCallback({
expired, expired,
@ -91,17 +108,26 @@ function createPersistSessionHandler(
} }
export function Provider({children}: React.PropsWithChildren<{}>) { export function Provider({children}: React.PropsWithChildren<{}>) {
const [state, setState] = React.useState<StateContext>({ const isDirty = React.useRef(false)
hasSession: false, const [state, setState] = React.useState<SessionState>({
agent: PUBLIC_BSKY_AGENT,
isInitialLoad: true, // try to resume the session first isInitialLoad: true, // try to resume the session first
isSwitchingAccounts: false,
accounts: persisted.get('session').accounts, accounts: persisted.get('session').accounts,
currentAccount: undefined, // assume logged out to start currentAccount: undefined, // assume logged out to start
agent: PUBLIC_BSKY_AGENT,
}) })
const setStateAndPersist = React.useCallback(
(fn: (prev: SessionState) => SessionState) => {
isDirty.current = true
setState(fn)
},
[setState],
)
const upsertAccount = React.useCallback( const upsertAccount = React.useCallback(
(account: persisted.PersistedAccount, expired = false) => { (account: persisted.PersistedAccount, expired = false) => {
setState(s => { setStateAndPersist(s => {
return { return {
...s, ...s,
currentAccount: expired ? undefined : account, currentAccount: expired ? undefined : account,
@ -109,16 +135,19 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
} }
}) })
}, },
[setState], [setStateAndPersist],
) )
// TODO have not connected this yet
const createAccount = React.useCallback<ApiContext['createAccount']>( const createAccount = React.useCallback<ApiContext['createAccount']>(
async ({service, email, password, handle, inviteCode}: any) => { async ({service, email, password, handle, inviteCode}: any) => {
logger.debug(`session: creating account`, { logger.debug(
service, `session: creating account`,
handle, {
}) service,
handle,
},
logger.DebugContext.session,
)
const agent = new BskyAgent({service}) const agent = new BskyAgent({service})
@ -136,9 +165,11 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
const account: persisted.PersistedAccount = { const account: persisted.PersistedAccount = {
service, service,
did: agent.session.did, did: agent.session.did,
handle: agent.session.handle,
email: agent.session.email!, // TODO this is always defined?
emailConfirmed: false,
refreshJwt: agent.session.refreshJwt, refreshJwt: agent.session.refreshJwt,
accessJwt: agent.session.accessJwt, accessJwt: agent.session.accessJwt,
handle: agent.session.handle,
} }
agent.setPersistSessionHandler( agent.setPersistSessionHandler(
@ -149,20 +180,28 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
upsertAccount(account) upsertAccount(account)
logger.debug(`session: created account`, { logger.debug(
service, `session: created account`,
handle, {
}) service,
handle,
},
logger.DebugContext.session,
)
}, },
[upsertAccount], [upsertAccount],
) )
const login = React.useCallback<ApiContext['login']>( const login = React.useCallback<ApiContext['login']>(
async ({service, identifier, password}) => { async ({service, identifier, password}) => {
logger.debug(`session: login`, { logger.debug(
service, `session: login`,
identifier, {
}) service,
identifier,
},
logger.DebugContext.session,
)
const agent = new BskyAgent({service}) const agent = new BskyAgent({service})
@ -175,9 +214,11 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
const account: persisted.PersistedAccount = { const account: persisted.PersistedAccount = {
service, service,
did: agent.session.did, did: agent.session.did,
handle: agent.session.handle,
email: agent.session.email!, // TODO this is always defined?
emailConfirmed: agent.session.emailConfirmed || false,
refreshJwt: agent.session.refreshJwt, refreshJwt: agent.session.refreshJwt,
accessJwt: agent.session.accessJwt, accessJwt: agent.session.accessJwt,
handle: agent.session.handle,
} }
agent.setPersistSessionHandler( agent.setPersistSessionHandler(
@ -189,17 +230,21 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
setState(s => ({...s, agent})) setState(s => ({...s, agent}))
upsertAccount(account) upsertAccount(account)
logger.debug(`session: logged in`, { logger.debug(
service, `session: logged in`,
identifier, {
}) service,
identifier,
},
logger.DebugContext.session,
)
}, },
[upsertAccount], [upsertAccount],
) )
const logout = React.useCallback<ApiContext['logout']>(async () => { const logout = React.useCallback<ApiContext['logout']>(async () => {
logger.debug(`session: logout`) logger.debug(`session: logout`, {}, logger.DebugContext.session)
setState(s => { setStateAndPersist(s => {
return { return {
...s, ...s,
agent: PUBLIC_BSKY_AGENT, agent: PUBLIC_BSKY_AGENT,
@ -211,14 +256,18 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
})), })),
} }
}) })
}, [setState]) }, [setStateAndPersist])
const initSession = React.useCallback<ApiContext['initSession']>( const initSession = React.useCallback<ApiContext['initSession']>(
async account => { async account => {
logger.debug(`session: initSession`, { logger.debug(
did: account.did, `session: initSession`,
handle: account.handle, {
}) did: account.did,
handle: account.handle,
},
logger.DebugContext.session,
)
const agent = new BskyAgent({ const agent = new BskyAgent({
service: account.service, service: account.service,
@ -265,23 +314,21 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
const removeAccount = React.useCallback<ApiContext['removeAccount']>( const removeAccount = React.useCallback<ApiContext['removeAccount']>(
account => { account => {
setState(s => { setStateAndPersist(s => {
return { return {
...s, ...s,
accounts: s.accounts.filter( accounts: s.accounts.filter(a => a.did !== account.did),
a => !(a.did === account.did || a.handle === account.handle),
),
} }
}) })
}, },
[setState], [setStateAndPersist],
) )
const updateCurrentAccount = React.useCallback< const updateCurrentAccount = React.useCallback<
ApiContext['updateCurrentAccount'] ApiContext['updateCurrentAccount']
>( >(
account => { account => {
setState(s => { setStateAndPersist(s => {
const currentAccount = s.currentAccount const currentAccount = s.currentAccount
// ignore, should never happen // ignore, should never happen
@ -289,52 +336,94 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
const updatedAccount = { const updatedAccount = {
...currentAccount, ...currentAccount,
handle: account.handle, // only update handle rn handle: account.handle || currentAccount.handle,
email: account.email || currentAccount.email,
emailConfirmed:
account.emailConfirmed !== undefined
? account.emailConfirmed
: currentAccount.emailConfirmed,
} }
return { return {
...s, ...s,
currentAccount: updatedAccount, currentAccount: updatedAccount,
accounts: s.accounts.filter(a => a.did !== currentAccount.did), accounts: [
updatedAccount,
...s.accounts.filter(a => a.did !== currentAccount.did),
],
} }
}) })
}, },
[setState], [setStateAndPersist],
) )
const selectAccount = React.useCallback<ApiContext['selectAccount']>(
async account => {
setState(s => ({...s, isSwitchingAccounts: true}))
try {
await initSession(account)
setState(s => ({...s, isSwitchingAccounts: false}))
} catch (e) {
// reset this in case of error
setState(s => ({...s, isSwitchingAccounts: false}))
// but other listeners need a throw
throw e
}
},
[setState, initSession],
)
const clearCurrentAccount = React.useCallback(() => {
setStateAndPersist(s => ({
...s,
currentAccount: undefined,
}))
}, [setStateAndPersist])
React.useEffect(() => { React.useEffect(() => {
persisted.write('session', { if (isDirty.current) {
accounts: state.accounts, isDirty.current = false
currentAccount: state.currentAccount, persisted.write('session', {
}) accounts: state.accounts,
currentAccount: state.currentAccount,
})
}
}, [state]) }, [state])
React.useEffect(() => { React.useEffect(() => {
return persisted.onUpdate(() => { return persisted.onUpdate(() => {
const session = persisted.get('session') const session = persisted.get('session')
logger.debug(`session: onUpdate`) logger.debug(`session: onUpdate`, {}, logger.DebugContext.session)
if (session.currentAccount) { if (session.currentAccount) {
if (session.currentAccount?.did !== state.currentAccount?.did) { if (session.currentAccount?.did !== state.currentAccount?.did) {
logger.debug(`session: switching account`, { logger.debug(
from: { `session: switching account`,
did: state.currentAccount?.did, {
handle: state.currentAccount?.handle, from: {
did: state.currentAccount?.did,
handle: state.currentAccount?.handle,
},
to: {
did: session.currentAccount.did,
handle: session.currentAccount.handle,
},
}, },
to: { logger.DebugContext.session,
did: session.currentAccount.did, )
handle: session.currentAccount.handle,
},
})
initSession(session.currentAccount) initSession(session.currentAccount)
} }
} else if (!session.currentAccount && state.currentAccount) { } else if (!session.currentAccount && state.currentAccount) {
logger.debug(`session: logging out`, { logger.debug(
did: state.currentAccount?.did, `session: logging out`,
handle: state.currentAccount?.handle, {
}) did: state.currentAccount?.did,
handle: state.currentAccount?.handle,
},
logger.DebugContext.session,
)
logout() logout()
} }
@ -345,6 +434,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
() => ({ () => ({
...state, ...state,
hasSession: !!state.currentAccount, hasSession: !!state.currentAccount,
isSandbox: state.currentAccount
? !IS_PROD(state.currentAccount?.service)
: false,
}), }),
[state], [state],
) )
@ -357,7 +449,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
initSession, initSession,
resumeSession, resumeSession,
removeAccount, removeAccount,
selectAccount,
updateCurrentAccount, updateCurrentAccount,
clearCurrentAccount,
}), }),
[ [
createAccount, createAccount,
@ -366,7 +460,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
initSession, initSession,
resumeSession, resumeSession,
removeAccount, removeAccount,
selectAccount,
updateCurrentAccount, updateCurrentAccount,
clearCurrentAccount,
], ],
) )

7
src/view/com/auth/LoggedOut.tsx
View File

@ -6,7 +6,6 @@ import {CreateAccount} from 'view/com/auth/create/CreateAccount'
import {ErrorBoundary} from 'view/com/util/ErrorBoundary' import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useStores} from 'state/index'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
import {SplashScreen} from './SplashScreen' import {SplashScreen} from './SplashScreen'
import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' import {useSetMinimalShellMode} from '#/state/shell/minimal-mode'
@ -19,7 +18,6 @@ enum ScreenState {
export const LoggedOut = observer(function LoggedOutImpl() { export const LoggedOut = observer(function LoggedOutImpl() {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores()
const setMinimalShellMode = useSetMinimalShellMode() const setMinimalShellMode = useSetMinimalShellMode()
const {screen} = useAnalytics() const {screen} = useAnalytics()
const [screenState, setScreenState] = React.useState<ScreenState>( const [screenState, setScreenState] = React.useState<ScreenState>(
@ -31,10 +29,7 @@ export const LoggedOut = observer(function LoggedOutImpl() {
setMinimalShellMode(true) setMinimalShellMode(true)
}, [screen, setMinimalShellMode]) }, [screen, setMinimalShellMode])
if ( if (screenState === ScreenState.S_LoginOrCreateAccount) {
store.session.isResumingSession ||
screenState === ScreenState.S_LoginOrCreateAccount
) {
return ( return (
<SplashScreen <SplashScreen
onPressSignin={() => setScreenState(ScreenState.S_Login)} onPressSignin={() => setScreenState(ScreenState.S_Login)}

9
src/view/com/auth/create/CreateAccount.tsx
View File

@ -18,6 +18,7 @@ import {usePalette} from 'lib/hooks/usePalette'
import {msg, Trans} from '@lingui/macro' import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useOnboardingDispatch} from '#/state/shell' import {useOnboardingDispatch} from '#/state/shell'
import {useSessionApi} from '#/state/session'
import {Step1} from './Step1' import {Step1} from './Step1'
import {Step2} from './Step2' import {Step2} from './Step2'
@ -34,6 +35,7 @@ export const CreateAccount = observer(function CreateAccountImpl({
const model = React.useMemo(() => new CreateAccountModel(store), [store]) const model = React.useMemo(() => new CreateAccountModel(store), [store])
const {_} = useLingui() const {_} = useLingui()
const onboardingDispatch = useOnboardingDispatch() const onboardingDispatch = useOnboardingDispatch()
const {createAccount} = useSessionApi()
React.useEffect(() => { React.useEffect(() => {
screen('CreateAccount') screen('CreateAccount')
@ -64,14 +66,17 @@ export const CreateAccount = observer(function CreateAccountImpl({
model.next() model.next()
} else { } else {
try { try {
await model.submit(onboardingDispatch) await model.submit({
onboardingDispatch,
createAccount,
})
} catch { } catch {
// dont need to handle here // dont need to handle here
} finally { } finally {
track('Try Create Account') track('Try Create Account')
} }
} }
}, [model, track, onboardingDispatch]) }, [model, track, onboardingDispatch, createAccount])
return ( return (
<LoggedOutLayout <LoggedOutLayout

114
src/view/com/auth/login/ChooseAccountForm.tsx
View File

@ -1,52 +1,90 @@
import React from 'react' import React from 'react'
import { import {ScrollView, TouchableOpacity, View} from 'react-native'
ActivityIndicator,
ScrollView,
TouchableOpacity,
View,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
import {Text} from '../../util/text/Text' import {Text} from '../../util/text/Text'
import {UserAvatar} from '../../util/UserAvatar' import {UserAvatar} from '../../util/UserAvatar'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {RootStoreModel} from 'state/index'
import {AccountData} from 'state/models/session'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {styles} from './styles' import {styles} from './styles'
import {useSession, useSessionApi, SessionAccount} from '#/state/session'
import {useProfileQuery} from '#/state/queries/profile'
function AccountItem({
account,
onSelect,
}: {
account: SessionAccount
onSelect: (account: SessionAccount) => void
}) {
const pal = usePalette('default')
const {_} = useLingui()
const {data: profile} = useProfileQuery({did: account.did})
const onPress = React.useCallback(() => {
onSelect(account)
}, [account, onSelect])
return (
<TouchableOpacity
testID={`chooseAccountBtn-${account.handle}`}
key={account.did}
style={[pal.view, pal.border, styles.account]}
onPress={onPress}
accessibilityRole="button"
accessibilityLabel={_(msg`Sign in as ${account.handle}`)}
accessibilityHint="Double tap to sign in">
<View style={[pal.borderDark, styles.groupContent, styles.noTopBorder]}>
<View style={s.p10}>
<UserAvatar avatar={profile?.avatar} size={30} />
</View>
<Text style={styles.accountText}>
<Text type="lg-bold" style={pal.text}>
{profile?.displayName || account.handle}{' '}
</Text>
<Text type="lg" style={[pal.textLight]}>
{account.handle}
</Text>
</Text>
<FontAwesomeIcon
icon="angle-right"
size={16}
style={[pal.text, s.mr10]}
/>
</View>
</TouchableOpacity>
)
}
export const ChooseAccountForm = ({ export const ChooseAccountForm = ({
store,
onSelectAccount, onSelectAccount,
onPressBack, onPressBack,
}: { }: {
store: RootStoreModel onSelectAccount: (account?: SessionAccount) => void
onSelectAccount: (account?: AccountData) => void
onPressBack: () => void onPressBack: () => void
}) => { }) => {
const {track, screen} = useAnalytics() const {track, screen} = useAnalytics()
const pal = usePalette('default') const pal = usePalette('default')
const [isProcessing, setIsProcessing] = React.useState(false)
const {_} = useLingui() const {_} = useLingui()
const {accounts} = useSession()
const {initSession} = useSessionApi()
React.useEffect(() => { React.useEffect(() => {
screen('Choose Account') screen('Choose Account')
}, [screen]) }, [screen])
const onTryAccount = async (account: AccountData) => { const onSelect = React.useCallback(
if (account.accessJwt && account.refreshJwt) { async (account: SessionAccount) => {
setIsProcessing(true) if (account.accessJwt) {
if (await store.session.resumeSession(account)) { await initSession(account)
track('Sign In', {resumedSession: true}) track('Sign In', {resumedSession: true})
setIsProcessing(false) } else {
return onSelectAccount(account)
} }
setIsProcessing(false) },
} [track, initSession, onSelectAccount],
onSelectAccount(account) )
}
return ( return (
<ScrollView testID="chooseAccountForm" style={styles.maxHeight}> <ScrollView testID="chooseAccountForm" style={styles.maxHeight}>
@ -55,35 +93,8 @@ export const ChooseAccountForm = ({
style={[pal.text, styles.groupLabel, s.mt5, s.mb10]}> style={[pal.text, styles.groupLabel, s.mt5, s.mb10]}>
<Trans>Sign in as...</Trans> <Trans>Sign in as...</Trans>
</Text> </Text>
{store.session.accounts.map(account => ( {accounts.map(account => (
<TouchableOpacity <AccountItem key={account.did} account={account} onSelect={onSelect} />
testID={`chooseAccountBtn-${account.handle}`}
key={account.did}
style={[pal.view, pal.border, styles.account]}
onPress={() => onTryAccount(account)}
accessibilityRole="button"
accessibilityLabel={_(msg`Sign in as ${account.handle}`)}
accessibilityHint="Double tap to sign in">
<View
style={[pal.borderDark, styles.groupContent, styles.noTopBorder]}>
<View style={s.p10}>
<UserAvatar avatar={account.aviUrl} size={30} />
</View>
<Text style={styles.accountText}>
<Text type="lg-bold" style={pal.text}>
{account.displayName || account.handle}{' '}
</Text>
<Text type="lg" style={[pal.textLight]}>
{account.handle}
</Text>
</Text>
<FontAwesomeIcon
icon="angle-right"
size={16}
style={[pal.text, s.mr10]}
/>
</View>
</TouchableOpacity>
))} ))}
<TouchableOpacity <TouchableOpacity
testID="chooseNewAccountBtn" testID="chooseNewAccountBtn"
@ -112,7 +123,6 @@ export const ChooseAccountForm = ({
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
<View style={s.flex1} /> <View style={s.flex1} />
{isProcessing && <ActivityIndicator />}
</View> </View>
</ScrollView> </ScrollView>
) )

2
src/view/com/auth/login/ForgotPasswordForm.tsx
View File

@ -15,7 +15,6 @@ import {useAnalytics} from 'lib/analytics/analytics'
import {Text} from '../../util/text/Text' import {Text} from '../../util/text/Text'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {toNiceDomain} from 'lib/strings/url-helpers' import {toNiceDomain} from 'lib/strings/url-helpers'
import {RootStoreModel} from 'state/index'
import {ServiceDescription} from 'state/models/session' import {ServiceDescription} from 'state/models/session'
import {isNetworkError} from 'lib/strings/errors' import {isNetworkError} from 'lib/strings/errors'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
@ -36,7 +35,6 @@ export const ForgotPasswordForm = ({
onPressBack, onPressBack,
onEmailSent, onEmailSent,
}: { }: {
store: RootStoreModel
error: string error: string
serviceUrl: string serviceUrl: string
serviceDescription: ServiceDescription | undefined serviceDescription: ServiceDescription | undefined

11
src/view/com/auth/login/Login.tsx
View File

@ -4,7 +4,6 @@ import {useAnalytics} from 'lib/analytics/analytics'
import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout' import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout'
import {useStores, DEFAULT_SERVICE} from 'state/index' import {useStores, DEFAULT_SERVICE} from 'state/index'
import {ServiceDescription} from 'state/models/session' import {ServiceDescription} from 'state/models/session'
import {AccountData} from 'state/models/session'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {logger} from '#/logger' import {logger} from '#/logger'
import {ChooseAccountForm} from './ChooseAccountForm' import {ChooseAccountForm} from './ChooseAccountForm'
@ -14,6 +13,7 @@ import {SetNewPasswordForm} from './SetNewPasswordForm'
import {PasswordUpdatedForm} from './PasswordUpdatedForm' import {PasswordUpdatedForm} from './PasswordUpdatedForm'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useSession, SessionAccount} from '#/state/session'
enum Forms { enum Forms {
Login, Login,
@ -26,6 +26,7 @@ enum Forms {
export const Login = ({onPressBack}: {onPressBack: () => void}) => { export const Login = ({onPressBack}: {onPressBack: () => void}) => {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const {accounts} = useSession()
const {track} = useAnalytics() const {track} = useAnalytics()
const {_} = useLingui() const {_} = useLingui()
const [error, setError] = useState<string>('') const [error, setError] = useState<string>('')
@ -36,10 +37,10 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
>(undefined) >(undefined)
const [initialHandle, setInitialHandle] = useState<string>('') const [initialHandle, setInitialHandle] = useState<string>('')
const [currentForm, setCurrentForm] = useState<Forms>( const [currentForm, setCurrentForm] = useState<Forms>(
store.session.hasAccounts ? Forms.ChooseAccount : Forms.Login, accounts.length ? Forms.ChooseAccount : Forms.Login,
) )
const onSelectAccount = (account?: AccountData) => { const onSelectAccount = (account?: SessionAccount) => {
if (account?.service) { if (account?.service) {
setServiceUrl(account.service) setServiceUrl(account.service)
} }
@ -95,7 +96,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
title={_(msg`Sign in`)} title={_(msg`Sign in`)}
description={_(msg`Enter your username and password`)}> description={_(msg`Enter your username and password`)}>
<LoginForm <LoginForm
store={store}
error={error} error={error}
serviceUrl={serviceUrl} serviceUrl={serviceUrl}
serviceDescription={serviceDescription} serviceDescription={serviceDescription}
@ -114,7 +114,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
title={_(msg`Sign in as...`)} title={_(msg`Sign in as...`)}
description={_(msg`Select from an existing account`)}> description={_(msg`Select from an existing account`)}>
<ChooseAccountForm <ChooseAccountForm
store={store}
onSelectAccount={onSelectAccount} onSelectAccount={onSelectAccount}
onPressBack={onPressBack} onPressBack={onPressBack}
/> />
@ -126,7 +125,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
title={_(msg`Forgot Password`)} title={_(msg`Forgot Password`)}
description={_(msg`Let's get your password reset!`)}> description={_(msg`Let's get your password reset!`)}>
<ForgotPasswordForm <ForgotPasswordForm
store={store}
error={error} error={error}
serviceUrl={serviceUrl} serviceUrl={serviceUrl}
serviceDescription={serviceDescription} serviceDescription={serviceDescription}
@ -143,7 +141,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
title={_(msg`Forgot Password`)} title={_(msg`Forgot Password`)}
description={_(msg`Let's get your password reset!`)}> description={_(msg`Let's get your password reset!`)}>
<SetNewPasswordForm <SetNewPasswordForm
store={store}
error={error} error={error}
serviceUrl={serviceUrl} serviceUrl={serviceUrl}
setError={setError} setError={setError}

8
src/view/com/auth/login/LoginForm.tsx
View File

@ -15,7 +15,6 @@ import {Text} from '../../util/text/Text'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {createFullHandle} from 'lib/strings/handles' import {createFullHandle} from 'lib/strings/handles'
import {toNiceDomain} from 'lib/strings/url-helpers' import {toNiceDomain} from 'lib/strings/url-helpers'
import {RootStoreModel} from 'state/index'
import {ServiceDescription} from 'state/models/session' import {ServiceDescription} from 'state/models/session'
import {isNetworkError} from 'lib/strings/errors' import {isNetworkError} from 'lib/strings/errors'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
@ -29,7 +28,6 @@ import {useLingui} from '@lingui/react'
import {useModalControls} from '#/state/modals' import {useModalControls} from '#/state/modals'
export const LoginForm = ({ export const LoginForm = ({
store,
error, error,
serviceUrl, serviceUrl,
serviceDescription, serviceDescription,
@ -40,7 +38,6 @@ export const LoginForm = ({
onPressBack, onPressBack,
onPressForgotPassword, onPressForgotPassword,
}: { }: {
store: RootStoreModel
error: string error: string
serviceUrl: string serviceUrl: string
serviceDescription: ServiceDescription | undefined serviceDescription: ServiceDescription | undefined
@ -106,11 +103,6 @@ export const LoginForm = ({
identifier: fullIdent, identifier: fullIdent,
password, password,
}) })
await store.session.login({
service: serviceUrl,
identifier: fullIdent,
password,
})
} catch (e: any) { } catch (e: any) {
const errMsg = e.toString() const errMsg = e.toString()
logger.warn('Failed to login', {error: e}) logger.warn('Failed to login', {error: e})

2
src/view/com/auth/login/SetNewPasswordForm.tsx
View File

@ -10,7 +10,6 @@ import {BskyAgent} from '@atproto/api'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
import {Text} from '../../util/text/Text' import {Text} from '../../util/text/Text'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {RootStoreModel} from 'state/index'
import {isNetworkError} from 'lib/strings/errors' import {isNetworkError} from 'lib/strings/errors'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useTheme} from 'lib/ThemeContext' import {useTheme} from 'lib/ThemeContext'
@ -27,7 +26,6 @@ export const SetNewPasswordForm = ({
onPressBack, onPressBack,
onPasswordSet, onPasswordSet,
}: { }: {
store: RootStoreModel
error: string error: string
serviceUrl: string serviceUrl: string
setError: (v: string) => void setError: (v: string) => void

8
src/view/com/auth/withAuthRequired.tsx
View File

@ -6,7 +6,6 @@ import {
TouchableOpacity, TouchableOpacity,
} from 'react-native' } from 'react-native'
import {observer} from 'mobx-react-lite' import {observer} from 'mobx-react-lite'
import {useStores} from 'state/index'
import {CenteredView} from '../util/Views' import {CenteredView} from '../util/Views'
import {LoggedOut} from './LoggedOut' import {LoggedOut} from './LoggedOut'
import {Onboarding} from './Onboarding' import {Onboarding} from './Onboarding'
@ -14,17 +13,18 @@ import {Text} from '../util/text/Text'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {STATUS_PAGE_URL} from 'lib/constants' import {STATUS_PAGE_URL} from 'lib/constants'
import {useOnboardingState} from '#/state/shell' import {useOnboardingState} from '#/state/shell'
import {useSession} from '#/state/session'
export const withAuthRequired = <P extends object>( export const withAuthRequired = <P extends object>(
Component: React.ComponentType<P>, Component: React.ComponentType<P>,
): React.FC<P> => ): React.FC<P> =>
observer(function AuthRequired(props: P) { observer(function AuthRequired(props: P) {
const store = useStores() const {isInitialLoad, hasSession} = useSession()
const onboardingState = useOnboardingState() const onboardingState = useOnboardingState()
if (store.session.isResumingSession) { if (isInitialLoad) {
return <Loading /> return <Loading />
} }
if (!store.session.hasSession) { if (!hasSession) {
return <LoggedOut /> return <LoggedOut />
} }
if (onboardingState.isActive) { if (onboardingState.isActive) {

15
src/view/com/feeds/FeedPage.tsx
View File

@ -23,6 +23,7 @@ import useAppState from 'react-native-appstate-hook'
import {logger} from '#/logger' import {logger} from '#/logger'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useSession} from '#/state/session'
export const FeedPage = observer(function FeedPageImpl({ export const FeedPage = observer(function FeedPageImpl({
testID, testID,
@ -38,6 +39,7 @@ export const FeedPage = observer(function FeedPageImpl({
renderEndOfFeed?: () => JSX.Element renderEndOfFeed?: () => JSX.Element
}) { }) {
const store = useStores() const store = useStores()
const {isSandbox} = useSession()
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
const {isDesktop} = useWebMediaQueries() const {isDesktop} = useWebMediaQueries()
@ -140,7 +142,7 @@ export const FeedPage = observer(function FeedPageImpl({
style={[pal.text, {fontWeight: 'bold'}]} style={[pal.text, {fontWeight: 'bold'}]}
text={ text={
<> <>
{store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}{' '} {isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
{hasNew && ( {hasNew && (
<View <View
style={{ style={{
@ -173,7 +175,16 @@ export const FeedPage = observer(function FeedPageImpl({
) )
} }
return <></> return <></>
}, [isDesktop, pal.view, pal.text, pal.textLight, store, hasNew, _]) }, [
isDesktop,
pal.view,
pal.text,
pal.textLight,
store,
hasNew,
_,
isSandbox,
])
return ( return (
<View testID={testID} style={s.h100pct}> <View testID={testID} style={s.h100pct}>

25
src/view/com/modals/ChangeEmail.tsx
View File

@ -6,7 +6,6 @@ import {Text} from '../util/text/Text'
import {Button} from '../util/forms/Button' import {Button} from '../util/forms/Button'
import {ErrorMessage} from '../util/error/ErrorMessage' import {ErrorMessage} from '../util/error/ErrorMessage'
import * as Toast from '../util/Toast' import * as Toast from '../util/Toast'
import {useStores} from 'state/index'
import {s, colors} from 'lib/styles' import {s, colors} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {isWeb} from 'platform/detection' import {isWeb} from 'platform/detection'
@ -15,6 +14,7 @@ import {cleanError} from 'lib/strings/errors'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useModalControls} from '#/state/modals' import {useModalControls} from '#/state/modals'
import {useSession, useSessionApi} from '#/state/session'
enum Stages { enum Stages {
InputEmail, InputEmail,
@ -26,12 +26,11 @@ export const snapPoints = ['90%']
export const Component = observer(function Component({}: {}) { export const Component = observer(function Component({}: {}) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const {agent, currentAccount} = useSession()
const {updateCurrentAccount} = useSessionApi()
const {_} = useLingui() const {_} = useLingui()
const [stage, setStage] = useState<Stages>(Stages.InputEmail) const [stage, setStage] = useState<Stages>(Stages.InputEmail)
const [email, setEmail] = useState<string>( const [email, setEmail] = useState<string>(currentAccount?.email || '')
store.session.currentSession?.email || '',
)
const [confirmationCode, setConfirmationCode] = useState<string>('') const [confirmationCode, setConfirmationCode] = useState<string>('')
const [isProcessing, setIsProcessing] = useState<boolean>(false) const [isProcessing, setIsProcessing] = useState<boolean>(false)
const [error, setError] = useState<string>('') const [error, setError] = useState<string>('')
@ -39,19 +38,19 @@ export const Component = observer(function Component({}: {}) {
const {openModal, closeModal} = useModalControls() const {openModal, closeModal} = useModalControls()
const onRequestChange = async () => { const onRequestChange = async () => {
if (email === store.session.currentSession?.email) { if (email === currentAccount?.email) {
setError('Enter your new email above') setError('Enter your new email above')
return return
} }
setError('') setError('')
setIsProcessing(true) setIsProcessing(true)
try { try {
const res = await store.agent.com.atproto.server.requestEmailUpdate() const res = await agent.com.atproto.server.requestEmailUpdate()
if (res.data.tokenRequired) { if (res.data.tokenRequired) {
setStage(Stages.ConfirmCode) setStage(Stages.ConfirmCode)
} else { } else {
await store.agent.com.atproto.server.updateEmail({email: email.trim()}) await agent.com.atproto.server.updateEmail({email: email.trim()})
store.session.updateLocalAccountData({ updateCurrentAccount({
email: email.trim(), email: email.trim(),
emailConfirmed: false, emailConfirmed: false,
}) })
@ -79,11 +78,11 @@ export const Component = observer(function Component({}: {}) {
setError('') setError('')
setIsProcessing(true) setIsProcessing(true)
try { try {
await store.agent.com.atproto.server.updateEmail({ await agent.com.atproto.server.updateEmail({
email: email.trim(), email: email.trim(),
token: confirmationCode.trim(), token: confirmationCode.trim(),
}) })
store.session.updateLocalAccountData({ updateCurrentAccount({
email: email.trim(), email: email.trim(),
emailConfirmed: false, emailConfirmed: false,
}) })
@ -120,8 +119,8 @@ export const Component = observer(function Component({}: {}) {
) : stage === Stages.ConfirmCode ? ( ) : stage === Stages.ConfirmCode ? (
<Trans> <Trans>
An email has been sent to your previous address,{' '} An email has been sent to your previous address,{' '}
{store.session.currentSession?.email || ''}. It includes a {currentAccount?.email || ''}. It includes a confirmation code
confirmation code which you can enter below. which you can enter below.
</Trans> </Trans>
) : ( ) : (
<Trans> <Trans>

146
src/view/com/modals/SwitchAccount.tsx
View File

@ -6,7 +6,6 @@ import {
View, View,
} from 'react-native' } from 'react-native'
import {Text} from '../util/text/Text' import {Text} from '../util/text/Text'
import {useStores} from 'state/index'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
@ -19,26 +18,91 @@ import {BottomSheetScrollView} from '@gorhom/bottom-sheet'
import {Haptics} from 'lib/haptics' import {Haptics} from 'lib/haptics'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useSession, useSessionApi, SessionAccount} from '#/state/session'
import {useProfileQuery} from '#/state/queries/profile'
export const snapPoints = ['40%', '90%'] export const snapPoints = ['40%', '90%']
function SwitchAccountCard({account}: {account: SessionAccount}) {
const pal = usePalette('default')
const {_} = useLingui()
const {track} = useAnalytics()
const {isSwitchingAccounts, currentAccount} = useSession()
const {logout} = useSessionApi()
const {data: profile} = useProfileQuery({did: account.did})
const isCurrentAccount = account.did === currentAccount?.did
const {onPressSwitchAccount} = useAccountSwitcher()
const onPressSignout = React.useCallback(() => {
track('Settings:SignOutButtonClicked')
logout()
}, [track, logout])
const contents = (
<View style={[pal.view, styles.linkCard]}>
<View style={styles.avi}>
<UserAvatar size={40} avatar={profile?.avatar} />
</View>
<View style={[s.flex1]}>
<Text type="md-bold" style={pal.text} numberOfLines={1}>
{profile?.displayName || currentAccount?.handle}
</Text>
<Text type="sm" style={pal.textLight} numberOfLines={1}>
{currentAccount?.handle}
</Text>
</View>
{isCurrentAccount ? (
<TouchableOpacity
testID="signOutBtn"
onPress={isSwitchingAccounts ? undefined : onPressSignout}
accessibilityRole="button"
accessibilityLabel={_(msg`Sign out`)}
accessibilityHint={`Signs ${profile?.displayName} out of Bluesky`}>
<Text type="lg" style={pal.link}>
<Trans>Sign out</Trans>
</Text>
</TouchableOpacity>
) : (
<AccountDropdownBtn account={account} />
)}
</View>
)
return isCurrentAccount ? (
<Link
href={makeProfileLink({
did: currentAccount.did,
handle: currentAccount.handle,
})}
title="Your profile"
noFeedback>
{contents}
</Link>
) : (
<TouchableOpacity
testID={`switchToAccountBtn-${account.handle}`}
key={account.did}
style={[isSwitchingAccounts && styles.dimmed]}
onPress={
isSwitchingAccounts ? undefined : () => onPressSwitchAccount(account)
}
accessibilityRole="button"
accessibilityLabel={`Switch to ${account.handle}`}
accessibilityHint="Switches the account you are logged in to">
{contents}
</TouchableOpacity>
)
}
export function Component({}: {}) { export function Component({}: {}) {
const pal = usePalette('default') const pal = usePalette('default')
const {track} = useAnalytics() const {isSwitchingAccounts, currentAccount, accounts} = useSession()
const {_: _lingui} = useLingui()
const store = useStores()
const [isSwitching, _, onPressSwitchAccount] = useAccountSwitcher()
React.useEffect(() => { React.useEffect(() => {
Haptics.default() Haptics.default()
}) })
const onPressSignout = React.useCallback(() => {
track('Settings:SignOutButtonClicked')
store.session.logout()
}, [track, store])
return ( return (
<BottomSheetScrollView <BottomSheetScrollView
style={[styles.container, pal.view]} style={[styles.container, pal.view]}
@ -46,62 +110,20 @@ export function Component({}: {}) {
<Text type="title-xl" style={[styles.title, pal.text]}> <Text type="title-xl" style={[styles.title, pal.text]}>
<Trans>Switch Account</Trans> <Trans>Switch Account</Trans>
</Text> </Text>
{isSwitching ? (
{isSwitchingAccounts || !currentAccount ? (
<View style={[pal.view, styles.linkCard]}> <View style={[pal.view, styles.linkCard]}>
<ActivityIndicator /> <ActivityIndicator />
</View> </View>
) : ( ) : (
<Link href={makeProfileLink(store.me)} title="Your profile" noFeedback> <SwitchAccountCard account={currentAccount} />
<View style={[pal.view, styles.linkCard]}>
<View style={styles.avi}>
<UserAvatar size={40} avatar={store.me.avatar} />
</View>
<View style={[s.flex1]}>
<Text type="md-bold" style={pal.text} numberOfLines={1}>
{store.me.displayName || store.me.handle}
</Text>
<Text type="sm" style={pal.textLight} numberOfLines={1}>
{store.me.handle}
</Text>
</View>
<TouchableOpacity
testID="signOutBtn"
onPress={isSwitching ? undefined : onPressSignout}
accessibilityRole="button"
accessibilityLabel={_lingui(msg`Sign out`)}
accessibilityHint={`Signs ${store.me.displayName} out of Bluesky`}>
<Text type="lg" style={pal.link}>
<Trans>Sign out</Trans>
</Text>
</TouchableOpacity>
</View>
</Link>
)} )}
{store.session.switchableAccounts.map(account => (
<TouchableOpacity {accounts
testID={`switchToAccountBtn-${account.handle}`} .filter(a => a.did !== currentAccount?.did)
key={account.did} .map(account => (
style={[pal.view, styles.linkCard, isSwitching && styles.dimmed]} <SwitchAccountCard key={account.did} account={account} />
onPress={ ))}
isSwitching ? undefined : () => onPressSwitchAccount(account)
}
accessibilityRole="button"
accessibilityLabel={`Switch to ${account.handle}`}
accessibilityHint="Switches the account you are logged in to">
<View style={styles.avi}>
<UserAvatar size={40} avatar={account.aviUrl} />
</View>
<View style={[s.flex1]}>
<Text type="md-bold" style={pal.text}>
{account.displayName || account.handle}
</Text>
<Text type="sm" style={pal.textLight}>
{account.handle}
</Text>
</View>
<AccountDropdownBtn handle={account.handle} />
</TouchableOpacity>
))}
</BottomSheetScrollView> </BottomSheetScrollView>
) )
} }

20
src/view/com/modals/VerifyEmail.tsx
View File

@ -14,7 +14,6 @@ import {Text} from '../util/text/Text'
import {Button} from '../util/forms/Button' import {Button} from '../util/forms/Button'
import {ErrorMessage} from '../util/error/ErrorMessage' import {ErrorMessage} from '../util/error/ErrorMessage'
import * as Toast from '../util/Toast' import * as Toast from '../util/Toast'
import {useStores} from 'state/index'
import {s, colors} from 'lib/styles' import {s, colors} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {isWeb} from 'platform/detection' import {isWeb} from 'platform/detection'
@ -23,6 +22,7 @@ import {cleanError} from 'lib/strings/errors'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useModalControls} from '#/state/modals' import {useModalControls} from '#/state/modals'
import {useSession, useSessionApi} from '#/state/session'
export const snapPoints = ['90%'] export const snapPoints = ['90%']
@ -38,7 +38,8 @@ export const Component = observer(function Component({
showReminder?: boolean showReminder?: boolean
}) { }) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const {agent, currentAccount} = useSession()
const {updateCurrentAccount} = useSessionApi()
const {_} = useLingui() const {_} = useLingui()
const [stage, setStage] = useState<Stages>( const [stage, setStage] = useState<Stages>(
showReminder ? Stages.Reminder : Stages.Email, showReminder ? Stages.Reminder : Stages.Email,
@ -53,7 +54,7 @@ export const Component = observer(function Component({
setError('') setError('')
setIsProcessing(true) setIsProcessing(true)
try { try {
await store.agent.com.atproto.server.requestEmailConfirmation() await agent.com.atproto.server.requestEmailConfirmation()
setStage(Stages.ConfirmCode) setStage(Stages.ConfirmCode)
} catch (e) { } catch (e) {
setError(cleanError(String(e))) setError(cleanError(String(e)))
@ -66,11 +67,11 @@ export const Component = observer(function Component({
setError('') setError('')
setIsProcessing(true) setIsProcessing(true)
try { try {
await store.agent.com.atproto.server.confirmEmail({ await agent.com.atproto.server.confirmEmail({
email: (store.session.currentSession?.email || '').trim(), email: (currentAccount?.email || '').trim(),
token: confirmationCode.trim(), token: confirmationCode.trim(),
}) })
store.session.updateLocalAccountData({emailConfirmed: true}) updateCurrentAccount({emailConfirmed: true})
Toast.show('Email verified') Toast.show('Email verified')
closeModal() closeModal()
} catch (e) { } catch (e) {
@ -112,9 +113,8 @@ export const Component = observer(function Component({
</Trans> </Trans>
) : stage === Stages.ConfirmCode ? ( ) : stage === Stages.ConfirmCode ? (
<Trans> <Trans>
An email has been sent to{' '} An email has been sent to {currentAccount?.email || ''}. It
{store.session.currentSession?.email || ''}. It includes a includes a confirmation code which you can enter below.
confirmation code which you can enter below.
</Trans> </Trans>
) : ( ) : (
'' ''
@ -130,7 +130,7 @@ export const Component = observer(function Component({
size={16} size={16}
/> />
<Text type="xl-medium" style={[pal.text, s.flex1, {minWidth: 0}]}> <Text type="xl-medium" style={[pal.text, s.flex1, {minWidth: 0}]}>
{store.session.currentSession?.email || ''} {currentAccount?.email || ''}
</Text> </Text>
</View> </View>
<Pressable <Pressable

4
src/view/com/pager/FeedsTabBarMobile.tsx
View File

@ -19,12 +19,14 @@ import {useLingui} from '@lingui/react'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {useSetDrawerOpen} from '#/state/shell/drawer-open' import {useSetDrawerOpen} from '#/state/shell/drawer-open'
import {useShellLayout} from '#/state/shell/shell-layout' import {useShellLayout} from '#/state/shell/shell-layout'
import {useSession} from '#/state/session'
export const FeedsTabBar = observer(function FeedsTabBarImpl( export const FeedsTabBar = observer(function FeedsTabBarImpl(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void}, props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) { ) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
const {isSandbox} = useSession()
const {_} = useLingui() const {_} = useLingui()
const setDrawerOpen = useSetDrawerOpen() const setDrawerOpen = useSetDrawerOpen()
const items = useHomeTabs(store.preferences.pinnedFeeds) const items = useHomeTabs(store.preferences.pinnedFeeds)
@ -59,7 +61,7 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Text style={[brandBlue, s.bold, styles.title]}> <Text style={[brandBlue, s.bold, styles.title]}>
{store.session.isSandbox ? 'SANDBOX' : 'Bluesky'} {isSandbox ? 'SANDBOX' : 'Bluesky'}
</Text> </Text>
<View style={[pal.view]}> <View style={[pal.view]}>
<Link <Link

8
src/view/com/testing/TestCtrls.e2e.tsx
View File

@ -3,6 +3,7 @@ import {Pressable, View} from 'react-native'
import {useStores} from 'state/index' import {useStores} from 'state/index'
import {navigate} from '../../../Navigation' import {navigate} from '../../../Navigation'
import {useModalControls} from '#/state/modals' import {useModalControls} from '#/state/modals'
import {useSessionApi} from '#/state/session'
/** /**
* This utility component is only included in the test simulator * This utility component is only included in the test simulator
@ -14,16 +15,17 @@ const BTN = {height: 1, width: 1, backgroundColor: 'red'}
export function TestCtrls() { export function TestCtrls() {
const store = useStores() const store = useStores()
const {logout, login} = useSessionApi()
const {openModal} = useModalControls() const {openModal} = useModalControls()
const onPressSignInAlice = async () => { const onPressSignInAlice = async () => {
await store.session.login({ await login({
service: 'http://localhost:3000', service: 'http://localhost:3000',
identifier: 'alice.test', identifier: 'alice.test',
password: 'hunter2', password: 'hunter2',
}) })
} }
const onPressSignInBob = async () => { const onPressSignInBob = async () => {
await store.session.login({ await login({
service: 'http://localhost:3000', service: 'http://localhost:3000',
identifier: 'bob.test', identifier: 'bob.test',
password: 'hunter2', password: 'hunter2',
@ -45,7 +47,7 @@ export function TestCtrls() {
/> />
<Pressable <Pressable
testID="e2eSignOut" testID="e2eSignOut"
onPress={() => store.session.logout()} onPress={() => logout()}
accessibilityRole="button" accessibilityRole="button"
style={BTN} style={BTN}
/> />

6
src/view/com/util/AccountDropdownBtn.tsx
View File

@ -8,11 +8,11 @@ import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {DropdownItem, NativeDropdown} from './forms/NativeDropdown' import {DropdownItem, NativeDropdown} from './forms/NativeDropdown'
import * as Toast from '../../com/util/Toast' import * as Toast from '../../com/util/Toast'
import {useSessionApi} from '#/state/session' import {useSessionApi, SessionAccount} from '#/state/session'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
export function AccountDropdownBtn({handle}: {handle: string}) { export function AccountDropdownBtn({account}: {account: SessionAccount}) {
const pal = usePalette('default') const pal = usePalette('default')
const {removeAccount} = useSessionApi() const {removeAccount} = useSessionApi()
const {_} = useLingui() const {_} = useLingui()
@ -21,7 +21,7 @@ export function AccountDropdownBtn({handle}: {handle: string}) {
{ {
label: 'Remove account', label: 'Remove account',
onPress: () => { onPress: () => {
removeAccount({handle}) removeAccount(account)
Toast.show('Account removed from quick access') Toast.show('Account removed from quick access')
}, },
icon: { icon: {

6
src/view/com/util/PostSandboxWarning.tsx
View File

@ -1,13 +1,13 @@
import React from 'react' import React from 'react'
import {StyleSheet, View} from 'react-native' import {StyleSheet, View} from 'react-native'
import {Text} from './text/Text' import {Text} from './text/Text'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useSession} from '#/state/session'
export function PostSandboxWarning() { export function PostSandboxWarning() {
const store = useStores() const {isSandbox} = useSession()
const pal = usePalette('default') const pal = usePalette('default')
if (store.session.isSandbox) { if (isSandbox) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text <Text

233
src/view/screens/Settings.tsx
View File

@ -57,7 +57,8 @@ import {
useRequireAltTextEnabled, useRequireAltTextEnabled,
useSetRequireAltTextEnabled, useSetRequireAltTextEnabled,
} from '#/state/preferences' } from '#/state/preferences'
import {useSession, useSessionApi} from '#/state/session' import {useSession, useSessionApi, SessionAccount} from '#/state/session'
import {useProfileQuery} from '#/state/queries/profile'
// TEMPORARY (APP-700) // TEMPORARY (APP-700)
// remove after backend testing finishes // remove after backend testing finishes
@ -67,6 +68,70 @@ import {STATUS_PAGE_URL} from 'lib/constants'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
function SettingsAccountCard({account}: {account: SessionAccount}) {
const pal = usePalette('default')
const {isSwitchingAccounts, currentAccount} = useSession()
const {logout} = useSessionApi()
const {data: profile} = useProfileQuery({did: account.did})
const isCurrentAccount = account.did === currentAccount?.did
const {onPressSwitchAccount} = useAccountSwitcher()
const contents = (
<View style={[pal.view, styles.linkCard]}>
<View style={styles.avi}>
<UserAvatar size={40} avatar={profile?.avatar} />
</View>
<View style={[s.flex1]}>
<Text type="md-bold" style={pal.text}>
{profile?.displayName || account.handle}
</Text>
<Text type="sm" style={pal.textLight}>
{account.handle}
</Text>
</View>
{isCurrentAccount ? (
<TouchableOpacity
testID="signOutBtn"
onPress={logout}
accessibilityRole="button"
accessibilityLabel="Sign out"
accessibilityHint={`Signs ${profile?.displayName} out of Bluesky`}>
<Text type="lg" style={pal.link}>
Sign out
</Text>
</TouchableOpacity>
) : (
<AccountDropdownBtn account={account} />
)}
</View>
)
return isCurrentAccount ? (
<Link
href={makeProfileLink({
did: currentAccount?.did,
handle: currentAccount?.handle,
})}
title="Your profile"
noFeedback>
{contents}
</Link>
) : (
<TouchableOpacity
testID={`switchToAccountBtn-${account.handle}`}
key={account.did}
onPress={
isSwitchingAccounts ? undefined : () => onPressSwitchAccount(account)
}
accessibilityRole="button"
accessibilityLabel={`Switch to ${account.handle}`}
accessibilityHint="Switches the account you are logged in to">
{contents}
</TouchableOpacity>
)
}
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'>
export const SettingsScreen = withAuthRequired( export const SettingsScreen = withAuthRequired(
observer(function Settings({}: Props) { observer(function Settings({}: Props) {
@ -82,14 +147,12 @@ export const SettingsScreen = withAuthRequired(
const navigation = useNavigation<NavigationProp>() const navigation = useNavigation<NavigationProp>()
const {isMobile} = useWebMediaQueries() const {isMobile} = useWebMediaQueries()
const {screen, track} = useAnalytics() const {screen, track} = useAnalytics()
const [isSwitching, setIsSwitching, onPressSwitchAccount] =
useAccountSwitcher()
const [debugHeaderEnabled, toggleDebugHeader] = useDebugHeaderSetting( const [debugHeaderEnabled, toggleDebugHeader] = useDebugHeaderSetting(
store.agent, store.agent,
) )
const {openModal} = useModalControls() const {openModal} = useModalControls()
const {logout} = useSessionApi() const {isSwitchingAccounts, accounts, currentAccount} = useSession()
const {accounts} = useSession() const {clearCurrentAccount} = useSessionApi()
const primaryBg = useCustomPalette<ViewStyle>({ const primaryBg = useCustomPalette<ViewStyle>({
light: {backgroundColor: colors.blue0}, light: {backgroundColor: colors.blue0},
@ -120,30 +183,27 @@ export const SettingsScreen = withAuthRequired(
track('Settings:AddAccountButtonClicked') track('Settings:AddAccountButtonClicked')
navigation.navigate('HomeTab') navigation.navigate('HomeTab')
navigation.dispatch(StackActions.popToTop()) navigation.dispatch(StackActions.popToTop())
store.session.clear() clearCurrentAccount()
}, [track, navigation, store]) }, [track, navigation, clearCurrentAccount])
const onPressChangeHandle = React.useCallback(() => { const onPressChangeHandle = React.useCallback(() => {
track('Settings:ChangeHandleButtonClicked') track('Settings:ChangeHandleButtonClicked')
openModal({ openModal({
name: 'change-handle', name: 'change-handle',
onChanged() { onChanged() {
setIsSwitching(true)
store.session.reloadFromServer().then( store.session.reloadFromServer().then(
() => { () => {
setIsSwitching(false)
Toast.show('Your handle has been updated') Toast.show('Your handle has been updated')
}, },
err => { err => {
logger.error('Failed to reload from server after handle update', { logger.error('Failed to reload from server after handle update', {
error: err, error: err,
}) })
setIsSwitching(false)
}, },
) )
}, },
}) })
}, [track, store, openModal, setIsSwitching]) }, [track, store, openModal])
const onPressInviteCodes = React.useCallback(() => { const onPressInviteCodes = React.useCallback(() => {
track('Settings:InvitecodesButtonClicked') track('Settings:InvitecodesButtonClicked')
@ -154,12 +214,6 @@ export const SettingsScreen = withAuthRequired(
navigation.navigate('LanguageSettings') navigation.navigate('LanguageSettings')
}, [navigation]) }, [navigation])
const onPressSignout = React.useCallback(() => {
track('Settings:SignOutButtonClicked')
logout()
store.session.logout()
}, [track, store, logout])
const onPressDeleteAccount = React.useCallback(() => { const onPressDeleteAccount = React.useCallback(() => {
openModal({name: 'delete-account'}) openModal({name: 'delete-account'})
}, [openModal]) }, [openModal])
@ -217,7 +271,7 @@ export const SettingsScreen = withAuthRequired(
contentContainerStyle={isMobile && pal.viewLight} contentContainerStyle={isMobile && pal.viewLight}
scrollIndicatorInsets={{right: 1}}> scrollIndicatorInsets={{right: 1}}>
<View style={styles.spacer20} /> <View style={styles.spacer20} />
{store.session.currentSession !== undefined ? ( {currentAccount ? (
<> <>
<Text type="xl-bold" style={[pal.text, styles.heading]}> <Text type="xl-bold" style={[pal.text, styles.heading]}>
<Trans>Account</Trans> <Trans>Account</Trans>
@ -226,7 +280,7 @@ export const SettingsScreen = withAuthRequired(
<Text type="lg-medium" style={pal.text}> <Text type="lg-medium" style={pal.text}>
Email:{' '} Email:{' '}
</Text> </Text>
{!store.session.emailNeedsConfirmation && ( {currentAccount.emailConfirmed && (
<> <>
<FontAwesomeIcon <FontAwesomeIcon
icon="check" icon="check"
@ -236,7 +290,7 @@ export const SettingsScreen = withAuthRequired(
</> </>
)} )}
<Text type="lg" style={pal.text}> <Text type="lg" style={pal.text}>
{store.session.currentSession?.email}{' '} {currentAccount.email}{' '}
</Text> </Text>
<Link onPress={() => openModal({name: 'change-email'})}> <Link onPress={() => openModal({name: 'change-email'})}>
<Text type="lg" style={pal.link}> <Text type="lg" style={pal.link}>
@ -255,7 +309,8 @@ export const SettingsScreen = withAuthRequired(
</Link> </Link>
</View> </View>
<View style={styles.spacer20} /> <View style={styles.spacer20} />
<EmailConfirmationNotice />
{!currentAccount.emailConfirmed && <EmailConfirmationNotice />}
</> </>
) : null} ) : null}
<View style={[s.flexRow, styles.heading]}> <View style={[s.flexRow, styles.heading]}>
@ -264,70 +319,29 @@ export const SettingsScreen = withAuthRequired(
</Text> </Text>
<View style={s.flex1} /> <View style={s.flex1} />
</View> </View>
{isSwitching ? (
{isSwitchingAccounts ? (
<View style={[pal.view, styles.linkCard]}> <View style={[pal.view, styles.linkCard]}>
<ActivityIndicator /> <ActivityIndicator />
</View> </View>
) : ( ) : (
<Link <SettingsAccountCard account={currentAccount!} />
href={makeProfileLink(store.me)}
title="Your profile"
noFeedback>
<View style={[pal.view, styles.linkCard]}>
<View style={styles.avi}>
<UserAvatar size={40} avatar={store.me.avatar} />
</View>
<View style={[s.flex1]}>
<Text type="md-bold" style={pal.text} numberOfLines={1}>
{store.me.displayName || store.me.handle}
</Text>
<Text type="sm" style={pal.textLight} numberOfLines={1}>
{store.me.handle}
</Text>
</View>
<TouchableOpacity
testID="signOutBtn"
onPress={isSwitching ? undefined : onPressSignout}
accessibilityRole="button"
accessibilityLabel={_(msg`Sign out`)}
accessibilityHint={`Signs ${store.me.displayName} out of Bluesky`}>
<Text type="lg" style={pal.link}>
<Trans>Sign out</Trans>
</Text>
</TouchableOpacity>
</View>
</Link>
)} )}
{accounts.map(account => (
<TouchableOpacity {accounts
testID={`switchToAccountBtn-${account.handle}`} .filter(a => a.did !== currentAccount?.did)
key={account.did} .map(account => (
style={[pal.view, styles.linkCard, isSwitching && styles.dimmed]} <SettingsAccountCard key={account.did} account={account} />
onPress={ ))}
isSwitching ? undefined : () => onPressSwitchAccount(account)
}
accessibilityRole="button"
accessibilityLabel={`Switch to ${account.handle}`}
accessibilityHint="Switches the account you are logged in to">
<View style={styles.avi}>
{/*<UserAvatar size={40} avatar={account.aviUrl} />*/}
</View>
<View style={[s.flex1]}>
<Text type="md-bold" style={pal.text}>
{/* @ts-ignore */}
{account.displayName || account.handle}
</Text>
<Text type="sm" style={pal.textLight}>
{account.handle}
</Text>
</View>
<AccountDropdownBtn handle={account.handle} />
</TouchableOpacity>
))}
<TouchableOpacity <TouchableOpacity
testID="switchToNewAccountBtn" testID="switchToNewAccountBtn"
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} style={[
onPress={isSwitching ? undefined : onPressAddAccount} styles.linkCard,
pal.view,
isSwitchingAccounts && styles.dimmed,
]}
onPress={isSwitchingAccounts ? undefined : onPressAddAccount}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel={_(msg`Add account`)} accessibilityLabel={_(msg`Add account`)}
accessibilityHint="Create a new Bluesky account"> accessibilityHint="Create a new Bluesky account">
@ -349,8 +363,12 @@ export const SettingsScreen = withAuthRequired(
</Text> </Text>
<TouchableOpacity <TouchableOpacity
testID="inviteFriendBtn" testID="inviteFriendBtn"
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} style={[
onPress={isSwitching ? undefined : onPressInviteCodes} styles.linkCard,
pal.view,
isSwitchingAccounts && styles.dimmed,
]}
onPress={isSwitchingAccounts ? undefined : onPressInviteCodes}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel={_(msg`Invite`)} accessibilityLabel={_(msg`Invite`)}
accessibilityHint="Opens invite code list"> accessibilityHint="Opens invite code list">
@ -427,7 +445,11 @@ export const SettingsScreen = withAuthRequired(
</Text> </Text>
<TouchableOpacity <TouchableOpacity
testID="preferencesHomeFeedButton" testID="preferencesHomeFeedButton"
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} style={[
styles.linkCard,
pal.view,
isSwitchingAccounts && styles.dimmed,
]}
onPress={openHomeFeedPreferences} onPress={openHomeFeedPreferences}
accessibilityRole="button" accessibilityRole="button"
accessibilityHint="" accessibilityHint=""
@ -444,7 +466,11 @@ export const SettingsScreen = withAuthRequired(
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
testID="preferencesThreadsButton" testID="preferencesThreadsButton"
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} style={[
styles.linkCard,
pal.view,
isSwitchingAccounts && styles.dimmed,
]}
onPress={openThreadsPreferences} onPress={openThreadsPreferences}
accessibilityRole="button" accessibilityRole="button"
accessibilityHint="" accessibilityHint=""
@ -462,7 +488,11 @@ export const SettingsScreen = withAuthRequired(
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
testID="savedFeedsBtn" testID="savedFeedsBtn"
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} style={[
styles.linkCard,
pal.view,
isSwitchingAccounts && styles.dimmed,
]}
accessibilityHint="My Saved Feeds" accessibilityHint="My Saved Feeds"
accessibilityLabel={_(msg`Opens screen with all saved feeds`)} accessibilityLabel={_(msg`Opens screen with all saved feeds`)}
onPress={onPressSavedFeeds}> onPress={onPressSavedFeeds}>
@ -475,8 +505,12 @@ export const SettingsScreen = withAuthRequired(
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
testID="languageSettingsBtn" testID="languageSettingsBtn"
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} style={[
onPress={isSwitching ? undefined : onPressLanguageSettings} styles.linkCard,
pal.view,
isSwitchingAccounts && styles.dimmed,
]}
onPress={isSwitchingAccounts ? undefined : onPressLanguageSettings}
accessibilityRole="button" accessibilityRole="button"
accessibilityHint="Language settings" accessibilityHint="Language settings"
accessibilityLabel={_(msg`Opens configurable language settings`)}> accessibilityLabel={_(msg`Opens configurable language settings`)}>
@ -492,9 +526,15 @@ export const SettingsScreen = withAuthRequired(
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
testID="moderationBtn" testID="moderationBtn"
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} style={[
styles.linkCard,
pal.view,
isSwitchingAccounts && styles.dimmed,
]}
onPress={ onPress={
isSwitching ? undefined : () => navigation.navigate('Moderation') isSwitchingAccounts
? undefined
: () => navigation.navigate('Moderation')
} }
accessibilityRole="button" accessibilityRole="button"
accessibilityHint="" accessibilityHint=""
@ -513,7 +553,11 @@ export const SettingsScreen = withAuthRequired(
</Text> </Text>
<TouchableOpacity <TouchableOpacity
testID="appPasswordBtn" testID="appPasswordBtn"
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} style={[
styles.linkCard,
pal.view,
isSwitchingAccounts && styles.dimmed,
]}
onPress={onPressAppPasswords} onPress={onPressAppPasswords}
accessibilityRole="button" accessibilityRole="button"
accessibilityHint="Open app password settings" accessibilityHint="Open app password settings"
@ -530,8 +574,12 @@ export const SettingsScreen = withAuthRequired(
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
testID="changeHandleBtn" testID="changeHandleBtn"
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} style={[
onPress={isSwitching ? undefined : onPressChangeHandle} styles.linkCard,
pal.view,
isSwitchingAccounts && styles.dimmed,
]}
onPress={isSwitchingAccounts ? undefined : onPressChangeHandle}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel={_(msg`Change handle`)} accessibilityLabel={_(msg`Change handle`)}
accessibilityHint="Choose a new Bluesky username or create"> accessibilityHint="Choose a new Bluesky username or create">
@ -655,15 +703,10 @@ const EmailConfirmationNotice = observer(
function EmailConfirmationNoticeImpl() { function EmailConfirmationNoticeImpl() {
const pal = usePalette('default') const pal = usePalette('default')
const palInverted = usePalette('inverted') const palInverted = usePalette('inverted')
const store = useStores()
const {_} = useLingui() const {_} = useLingui()
const {isMobile} = useWebMediaQueries() const {isMobile} = useWebMediaQueries()
const {openModal} = useModalControls() const {openModal} = useModalControls()
if (!store.session.emailNeedsConfirmation) {
return null
}
return ( return (
<View style={{marginBottom: 20}}> <View style={{marginBottom: 20}}>
<Text type="xl-bold" style={[pal.text, styles.heading]}> <Text type="xl-bold" style={[pal.text, styles.heading]}>

98
src/view/shell/Drawer.tsx
View File

@ -47,6 +47,57 @@ import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useSetDrawerOpen} from '#/state/shell' import {useSetDrawerOpen} from '#/state/shell'
import {useModalControls} from '#/state/modals' import {useModalControls} from '#/state/modals'
import {useSession, SessionAccount} from '#/state/session'
import {useProfileQuery} from '#/state/queries/profile'
export function DrawerProfileCard({
account,
onPressProfile,
}: {
account: SessionAccount
onPressProfile: () => void
}) {
const {_} = useLingui()
const pal = usePalette('default')
const {data: profile} = useProfileQuery({did: account.did})
return (
<TouchableOpacity
testID="profileCardButton"
accessibilityLabel={_(msg`Profile`)}
accessibilityHint="Navigates to your profile"
onPress={onPressProfile}>
<UserAvatar
size={80}
avatar={profile?.avatar}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
/>
<Text
type="title-lg"
style={[pal.text, s.bold, styles.profileCardDisplayName]}
numberOfLines={1}>
{profile?.displayName || account.handle}
</Text>
<Text
type="2xl"
style={[pal.textLight, styles.profileCardHandle]}
numberOfLines={1}>
@{account.handle}
</Text>
<Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
<Text type="xl-medium" style={pal.text}>
{formatCountShortOnly(profile?.followersCount ?? 0)}
</Text>{' '}
{pluralize(profile?.followersCount || 0, 'follower')} &middot;{' '}
<Text type="xl-medium" style={pal.text}>
{formatCountShortOnly(profile?.followsCount ?? 0)}
</Text>{' '}
following
</Text>
</TouchableOpacity>
)
}
export const DrawerContent = observer(function DrawerContentImpl() { export const DrawerContent = observer(function DrawerContentImpl() {
const theme = useTheme() const theme = useTheme()
@ -58,6 +109,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
const {track} = useAnalytics() const {track} = useAnalytics()
const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} = const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
useNavigationTabState() useNavigationTabState()
const {currentAccount} = useSession()
const {notifications} = store.me const {notifications} = store.me
@ -135,11 +187,11 @@ export const DrawerContent = observer(function DrawerContentImpl() {
track('Menu:FeedbackClicked') track('Menu:FeedbackClicked')
Linking.openURL( Linking.openURL(
FEEDBACK_FORM_URL({ FEEDBACK_FORM_URL({
email: store.session.currentSession?.email, email: currentAccount?.email,
handle: store.session.currentSession?.handle, handle: currentAccount?.handle,
}), }),
) )
}, [track, store.session.currentSession]) }, [track, currentAccount])
const onPressHelp = React.useCallback(() => { const onPressHelp = React.useCallback(() => {
track('Menu:HelpClicked') track('Menu:HelpClicked')
@ -159,42 +211,12 @@ export const DrawerContent = observer(function DrawerContentImpl() {
<SafeAreaView style={s.flex1}> <SafeAreaView style={s.flex1}>
<ScrollView style={styles.main}> <ScrollView style={styles.main}>
<View style={{}}> <View style={{}}>
<TouchableOpacity {currentAccount && (
testID="profileCardButton" <DrawerProfileCard
accessibilityLabel={_(msg`Profile`)} account={currentAccount}
accessibilityHint="Navigates to your profile" onPressProfile={onPressProfile}
onPress={onPressProfile}>
<UserAvatar
size={80}
avatar={store.me.avatar}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
/> />
<Text )}
type="title-lg"
style={[pal.text, s.bold, styles.profileCardDisplayName]}
numberOfLines={1}>
{store.me.displayName || store.me.handle}
</Text>
<Text
type="2xl"
style={[pal.textLight, styles.profileCardHandle]}
numberOfLines={1}>
@{store.me.handle}
</Text>
<Text
type="xl"
style={[pal.textLight, styles.profileCardFollowers]}>
<Text type="xl-medium" style={pal.text}>
{formatCountShortOnly(store.me.followersCount ?? 0)}
</Text>{' '}
{pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '}
<Text type="xl-medium" style={pal.text}>
{formatCountShortOnly(store.me.followsCount ?? 0)}
</Text>{' '}
following
</Text>
</TouchableOpacity>
</View> </View>
<InviteCodes style={{paddingLeft: 0}} /> <InviteCodes style={{paddingLeft: 0}} />

57
src/view/shell/desktop/LeftNav.tsx
View File

@ -41,18 +41,25 @@ import {router} from '../../../routes'
import {makeProfileLink} from 'lib/routes/links' import {makeProfileLink} from 'lib/routes/links'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useProfileQuery} from '#/state/queries/profile'
import {useSession} from '#/state/session'
const ProfileCard = observer(function ProfileCardImpl() { const ProfileCard = observer(function ProfileCardImpl() {
const store = useStores() const {currentAccount} = useSession()
const {isLoading, data: profile} = useProfileQuery({did: currentAccount!.did})
const {isDesktop} = useWebMediaQueries() const {isDesktop} = useWebMediaQueries()
const size = 48 const size = 48
return store.me.handle ? (
return !isLoading && profile ? (
<Link <Link
href={makeProfileLink(store.me)} href={makeProfileLink({
did: currentAccount!.did,
handle: currentAccount!.handle,
})}
style={[styles.profileCard, !isDesktop && styles.profileCardTablet]} style={[styles.profileCard, !isDesktop && styles.profileCardTablet]}
title="My Profile" title="My Profile"
asAnchor> asAnchor>
<UserAvatar avatar={store.me.avatar} size={size} /> <UserAvatar avatar={profile.avatar} size={size} />
</Link> </Link>
) : ( ) : (
<View style={[styles.profileCard, !isDesktop && styles.profileCardTablet]}> <View style={[styles.profileCard, !isDesktop && styles.profileCardTablet]}>
@ -255,7 +262,7 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
pal.view, pal.view,
pal.border, pal.border,
]}> ]}>
{store.session.hasSession && <ProfileCard />} <ProfileCard />
<BackBtn /> <BackBtn />
<NavItem <NavItem
href="/" href="/"
@ -360,26 +367,24 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
} }
label="Moderation" label="Moderation"
/> />
{store.session.hasSession && ( <NavItem
<NavItem href={makeProfileLink(store.me)}
href={makeProfileLink(store.me)} icon={
icon={ <UserIcon
<UserIcon strokeWidth={1.75}
strokeWidth={1.75} size={isDesktop ? 28 : 30}
size={isDesktop ? 28 : 30} style={pal.text}
style={pal.text} />
/> }
} iconFilled={
iconFilled={ <UserIconSolid
<UserIconSolid strokeWidth={1.75}
strokeWidth={1.75} size={isDesktop ? 28 : 30}
size={isDesktop ? 28 : 30} style={pal.text}
style={pal.text} />
/> }
} label="Profile"
label="Profile" />
/>
)}
<NavItem <NavItem
href="/settings" href="/settings"
icon={ icon={
@ -398,7 +403,7 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
} }
label="Settings" label="Settings"
/> />
{store.session.hasSession && <ComposeBtn />} <ComposeBtn />
</View> </View>
) )
}) })

13
src/view/shell/desktop/RightNav.tsx
View File

@ -14,11 +14,12 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {pluralize} from 'lib/strings/helpers' import {pluralize} from 'lib/strings/helpers'
import {formatCount} from 'view/com/util/numeric/format' import {formatCount} from 'view/com/util/numeric/format'
import {useModalControls} from '#/state/modals' import {useModalControls} from '#/state/modals'
import {useSession} from '#/state/session'
export const DesktopRightNav = observer(function DesktopRightNavImpl() { export const DesktopRightNav = observer(function DesktopRightNavImpl() {
const store = useStores()
const pal = usePalette('default') const pal = usePalette('default')
const palError = usePalette('error') const palError = usePalette('error')
const {isSandbox, hasSession, currentAccount} = useSession()
const {isTablet} = useWebMediaQueries() const {isTablet} = useWebMediaQueries()
if (isTablet) { if (isTablet) {
@ -27,10 +28,10 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() {
return ( return (
<View style={[styles.rightNav, pal.view]}> <View style={[styles.rightNav, pal.view]}>
{store.session.hasSession && <DesktopSearch />} {hasSession && <DesktopSearch />}
{store.session.hasSession && <DesktopFeeds />} {hasSession && <DesktopFeeds />}
<View style={styles.message}> <View style={styles.message}>
{store.session.isSandbox ? ( {isSandbox ? (
<View style={[palError.view, styles.messageLine, s.p10]}> <View style={[palError.view, styles.messageLine, s.p10]}>
<Text type="md" style={[palError.text, s.bold]}> <Text type="md" style={[palError.text, s.bold]}>
SANDBOX. Posts and accounts are not permanent. SANDBOX. Posts and accounts are not permanent.
@ -42,8 +43,8 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() {
type="md" type="md"
style={pal.link} style={pal.link}
href={FEEDBACK_FORM_URL({ href={FEEDBACK_FORM_URL({
email: store.session.currentSession?.email, email: currentAccount!.email,
handle: store.session.currentSession?.handle, handle: currentAccount!.handle,
})} })}
text="Send feedback" text="Send feedback"
/> />

7
src/view/shell/index.tsx
View File

@ -33,6 +33,7 @@ import {
} from '#/state/shell' } from '#/state/shell'
import {isAndroid} from 'platform/detection' import {isAndroid} from 'platform/detection'
import {useModalControls} from '#/state/modals' import {useModalControls} from '#/state/modals'
import {useSession} from '#/state/session'
const ShellInner = observer(function ShellInnerImpl() { const ShellInner = observer(function ShellInnerImpl() {
const store = useStores() const store = useStores()
@ -57,6 +58,8 @@ const ShellInner = observer(function ShellInnerImpl() {
[setIsDrawerOpen], [setIsDrawerOpen],
) )
const canGoBack = useNavigationState(state => !isStateAtTabRoot(state)) const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
const {hasSession} = useSession()
React.useEffect(() => { React.useEffect(() => {
let listener = {remove() {}} let listener = {remove() {}}
if (isAndroid) { if (isAndroid) {
@ -81,9 +84,7 @@ const ShellInner = observer(function ShellInnerImpl() {
onOpen={onOpenDrawer} onOpen={onOpenDrawer}
onClose={onCloseDrawer} onClose={onCloseDrawer}
swipeEdgeWidth={winDim.width / 2} swipeEdgeWidth={winDim.width / 2}
swipeEnabled={ swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}>
!canGoBack && store.session.hasSession && !isDrawerSwipeDisabled
}>
<TabsNavigator /> <TabsNavigator />
</Drawer> </Drawer>
</ErrorBoundary> </ErrorBoundary>

6
src/view/shell/index.web.tsx
View File

@ -24,6 +24,7 @@ import {
useOnboardingState, useOnboardingState,
} from '#/state/shell' } from '#/state/shell'
import {useModalControls} from '#/state/modals' import {useModalControls} from '#/state/modals'
import {useSession} from '#/state/session'
const ShellInner = observer(function ShellInnerImpl() { const ShellInner = observer(function ShellInnerImpl() {
const store = useStores() const store = useStores()
@ -33,6 +34,8 @@ const ShellInner = observer(function ShellInnerImpl() {
const onboardingState = useOnboardingState() const onboardingState = useOnboardingState()
const {isDesktop, isMobile} = useWebMediaQueries() const {isDesktop, isMobile} = useWebMediaQueries()
const navigator = useNavigation<NavigationProp>() const navigator = useNavigation<NavigationProp>()
const {hasSession} = useSession()
useAuxClick() useAuxClick()
useEffect(() => { useEffect(() => {
@ -44,8 +47,7 @@ const ShellInner = observer(function ShellInnerImpl() {
}, [navigator, store.shell, setDrawerOpen, closeModal]) }, [navigator, store.shell, setDrawerOpen, closeModal])
const showBottomBar = isMobile && !onboardingState.isActive const showBottomBar = isMobile && !onboardingState.isActive
const showSideNavs = const showSideNavs = !isMobile && hasSession && !onboardingState.isActive
!isMobile && store.session.hasSession && !onboardingState.isActive
return ( return (
<View style={[s.hContentRegion, {overflow: 'hidden'}]}> <View style={[s.hContentRegion, {overflow: 'hidden'}]}>
<View style={s.hContentRegion}> <View style={s.hContentRegion}>