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

Ensure the UI always renders, even in bad network conditions (close #6)

zio/stable
Paul Frazee 2022-12-05 13:25:04 -06:00
parent 59363181e1
commit f27e32e54c
13 changed files with 259 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/errors.ts 100644
View File

@ -0,0 +1,4 @@
export function isNetworkError(e: unknown) {
const str = String(e)
return str.includes('Aborted') || str.includes('Network request failed')
}

3
src/lib/strings.ts
View File

@ -1,6 +1,7 @@
import {AtUri} from '../third-party/uri'
import {Entity} from '../third-party/api/src/client/types/app/bsky/feed/post'
import {PROD_SERVICE} from '../state'
import {isNetworkError} from './errors'
import TLDs from 'tlds'
export const MAX_DISPLAY_NAME = 64
@ -201,7 +202,7 @@ export function enforceLen(str: string, len: number): string {
}
export function cleanError(str: string): string {
if (str.includes('Network request failed')) {
if (isNetworkError(str)) {
return 'Unable to connect. Please check your internet connection and try again.'
}
if (str.startsWith('Error: ')) {

16
src/state/index.ts
View File

@ -27,10 +27,19 @@ export async function setupState() {
console.error('Failed to load state from storage', e)
}
await rootStore.session.setup()
console.log('Initial hydrate', rootStore.me)
rootStore.session
.connect()
.then(() => {
console.log('Session connected', rootStore.me)
return rootStore.fetchStateUpdate()
})
.catch(e => {
console.log('Failed initial connect', e)
})
// @ts-ignore .on() is correct -prf
api.sessionManager.on('session', () => {
if (!api.sessionManager.session && rootStore.session.isAuthed) {
if (!api.sessionManager.session && rootStore.session.hasSession) {
// reset session
rootStore.session.clear()
} else if (api.sessionManager.session) {
@ -44,9 +53,6 @@ export async function setupState() {
storage.save(ROOT_STATE_STORAGE_KEY, snapshot)
})
await rootStore.fetchStateUpdate()
console.log(rootStore.me)
// periodic state fetch
setInterval(() => {
rootStore.fetchStateUpdate()

9
src/state/lib/api.ts
View File

@ -12,6 +12,8 @@ import {APP_BSKY_GRAPH} from '../../third-party/api'
import {RootStoreModel} from '../models/root-store'
import {extractEntities} from '../../lib/strings'
const TIMEOUT = 10e3 // 10s
export function doPolyfill() {
AtpApi.xrpc.fetch = fetchHandler
}
@ -175,10 +177,14 @@ async function fetchHandler(
reqBody = JSON.stringify(reqBody)
}
const controller = new AbortController()
const to = setTimeout(() => controller.abort(), TIMEOUT)
const res = await fetch(reqUri, {
method: reqMethod,
headers: reqHeaders,
body: reqBody,
signal: controller.signal,
})
const resStatus = res.status
@ -197,6 +203,9 @@ async function fetchHandler(
throw new Error('TODO: non-textual response body')
}
}
clearTimeout(to)
return {
status: resStatus,
headers: resHeaders,

42
src/state/models/me.ts
View File

@ -2,6 +2,7 @@ import {makeAutoObservable, runInAction} from 'mobx'
import {RootStoreModel} from './root-store'
import {MembershipsViewModel} from './memberships-view'
import {NotificationsViewModel} from './notifications-view'
import {isObj, hasProp} from '../lib/type-guards'
export class MeModel {
did?: string
@ -13,7 +14,11 @@ export class MeModel {
notifications: NotificationsViewModel
constructor(public rootStore: RootStoreModel) {
makeAutoObservable(this, {rootStore: false}, {autoBind: true})
makeAutoObservable(
this,
{rootStore: false, serialize: false, hydrate: false},
{autoBind: true},
)
this.notifications = new NotificationsViewModel(this.rootStore, {})
}
@ -26,9 +31,42 @@ export class MeModel {
this.memberships = undefined
}
serialize(): unknown {
return {
did: this.did,
handle: this.handle,
displayName: this.displayName,
description: this.description,
}
}
hydrate(v: unknown) {
if (isObj(v)) {
let did, handle, displayName, description
if (hasProp(v, 'did') && typeof v.did === 'string') {
did = v.did
}
if (hasProp(v, 'handle') && typeof v.handle === 'string') {
handle = v.handle
}
if (hasProp(v, 'displayName') && typeof v.displayName === 'string') {
displayName = v.displayName
}
if (hasProp(v, 'description') && typeof v.description === 'string') {
description = v.description
}
if (did && handle) {
this.did = did
this.handle = handle
this.displayName = displayName
this.description = description
}
}
}
async load() {
const sess = this.rootStore.session
if (sess.isAuthed && sess.data) {
if (sess.hasSession && sess.data) {
this.did = sess.data.did || ''
this.handle = sess.data.handle
const profile = await this.rootStore.api.app.bsky.actor.getProfile({

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

@ -14,6 +14,7 @@ import {ProfilesViewModel} from './profiles-view'
import {LinkMetasViewModel} from './link-metas-view'
import {MeModel} from './me'
import {OnboardModel} from './onboard'
import {isNetworkError} from '../../lib/errors'
export class RootStoreModel {
session = new SessionModel(this)
@ -45,12 +46,18 @@ export class RootStoreModel {
}
async fetchStateUpdate() {
if (!this.session.isAuthed) {
if (!this.session.hasSession) {
return
}
try {
if (!this.session.online) {
await this.session.connect()
}
await this.me.fetchStateUpdate()
} catch (e) {
} catch (e: unknown) {
if (isNetworkError(e)) {
this.session.setOnline(false) // connection lost
}
console.error('Failed to fetch latest state', e)
}
}
@ -58,6 +65,7 @@ export class RootStoreModel {
serialize(): unknown {
return {
session: this.session.serialize(),
me: this.me.serialize(),
nav: this.nav.serialize(),
onboard: this.onboard.serialize(),
}
@ -68,6 +76,9 @@ export class RootStoreModel {
if (hasProp(v, 'session')) {
this.session.hydrate(v.session)
}
if (hasProp(v, 'me')) {
this.me.hydrate(v.me)
}
if (hasProp(v, 'nav')) {
this.nav.hydrate(v.nav)
}

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

@ -7,6 +7,7 @@ import type {
import type * as GetAccountsConfig from '../../third-party/api/src/client/types/com/atproto/server/getAccountsConfig'
import {isObj, hasProp} from '../lib/type-guards'
import {RootStoreModel} from './root-store'
import {isNetworkError} from '../../lib/errors'
export type ServiceDescription = GetAccountsConfig.OutputSchema
@ -20,16 +21,20 @@ interface SessionData {
export class SessionModel {
data: SessionData | null = null
online = false
attemptingConnect = false
private _connectPromise: Promise<void> | undefined
constructor(public rootStore: RootStoreModel) {
makeAutoObservable(this, {
rootStore: false,
serialize: false,
hydrate: false,
_connectPromise: false,
})
}
get isAuthed() {
get hasSession() {
return this.data !== null
}
@ -91,6 +96,13 @@ export class SessionModel {
this.data = data
}
setOnline(online: boolean, attemptingConnect?: boolean) {
this.online = online
if (typeof attemptingConnect === 'boolean') {
this.attemptingConnect = attemptingConnect
}
}
updateAuthTokens(session: Session) {
if (this.data) {
this.setState({
@ -125,7 +137,14 @@ export class SessionModel {
return true
}
async setup(): Promise<void> {
async connect(): Promise<void> {
this._connectPromise ??= this._connect()
await this._connectPromise
this._connectPromise = undefined
}
private async _connect(): Promise<void> {
this.attemptingConnect = true
if (!this.configureApi()) {
return
}
@ -133,14 +152,25 @@ export class SessionModel {
try {
const sess = await this.rootStore.api.com.atproto.session.get()
if (sess.success && this.data && this.data.did === sess.data.did) {
this.setOnline(true, false)
if (this.rootStore.me.did !== sess.data.did) {
this.rootStore.me.clear()
}
this.rootStore.me.load().catch(e => {
console.error('Failed to fetch local user information', e)
})
return // success
}
} catch (e: any) {}
} catch (e: any) {
if (isNetworkError(e)) {
this.setOnline(false, false) // connection issue
return
} else {
this.clear() // invalid session cached
}
}
this.clear() // invalid session cached
this.setOnline(false, false)
}
async describeService(service: string): Promise<ServiceDescription> {
@ -212,7 +242,7 @@ export class SessionModel {
}
async logout() {
if (this.isAuthed) {
if (this.hasSession) {
this.rootStore.api.com.atproto.session.delete().catch((e: any) => {
console.error('(Minor issue) Failed to delete session on the server', e)
})

147
src/view/com/util/ViewHeader.tsx
View File

@ -1,14 +1,21 @@
import React from 'react'
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {
ActivityIndicator,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {colors} from '../../lib/styles'
import {s, colors} from '../../lib/styles'
import {MagnifyingGlassIcon} from '../../lib/icons'
import {useStores} from '../../../state'
const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
export function ViewHeader({
export const ViewHeader = observer(function ViewHeader({
title,
subtitle,
onPost,
@ -27,43 +34,91 @@ export function ViewHeader({
const onPressSearch = () => {
store.nav.navigate(`/search`)
}
const onPressReconnect = () => {
store.session.connect().catch(e => {
// log for debugging but ignore otherwise
console.log(e)
})
}
return (
<View style={styles.header}>
{store.nav.tab.canGoBack ? (
<>
<View style={styles.header}>
{store.nav.tab.canGoBack ? (
<TouchableOpacity
onPress={onPressBack}
hitSlop={BACK_HITSLOP}
style={styles.backIcon}>
<FontAwesomeIcon
size={18}
icon="angle-left"
style={{marginTop: 6}}
/>
</TouchableOpacity>
) : undefined}
<View style={styles.titleContainer} pointerEvents="none">
<Text style={styles.title}>{title}</Text>
{subtitle ? (
<Text style={styles.subtitle} numberOfLines={1}>
{subtitle}
</Text>
) : undefined}
</View>
<TouchableOpacity
onPress={onPressBack}
hitSlop={BACK_HITSLOP}
style={styles.backIcon}>
<FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 6}} />
onPress={onPressCompose}
hitSlop={HITSLOP}
style={styles.btn}>
<FontAwesomeIcon size={18} icon="plus" />
</TouchableOpacity>
<TouchableOpacity
onPress={onPressSearch}
hitSlop={HITSLOP}
style={[styles.btn, {marginLeft: 8}]}>
<MagnifyingGlassIcon
size={18}
strokeWidth={3}
style={styles.searchBtnIcon}
/>
</TouchableOpacity>
</View>
{!store.session.online ? (
<TouchableOpacity style={styles.offline} onPress={onPressReconnect}>
{store.session.attemptingConnect ? (
<>
<ActivityIndicator />
<Text style={[s.gray1, s.bold, s.flex1, s.pl5, s.pt5, s.pb5]}>
Connecting...
</Text>
</>
) : (
<>
<FontAwesomeIcon icon="signal" style={[s.gray2]} size={18} />
<FontAwesomeIcon
icon="x"
style={[
s.red4,
{
backgroundColor: colors.gray6,
position: 'relative',
left: -4,
top: 6,
},
]}
border
size={12}
/>
<Text style={[s.gray1, s.bold, s.flex1, s.pl2]}>
Unable to connect
</Text>
<View style={styles.offlineBtn}>
<Text style={styles.offlineBtnText}>Try again</Text>
</View>
</>
)}
</TouchableOpacity>
) : undefined}
<View style={styles.titleContainer} pointerEvents="none">
<Text style={styles.title}>{title}</Text>
{subtitle ? (
<Text style={styles.subtitle} numberOfLines={1}>
{subtitle}
</Text>
) : undefined}
</View>
<TouchableOpacity
onPress={onPressCompose}
hitSlop={HITSLOP}
style={styles.btn}>
<FontAwesomeIcon size={18} icon="plus" />
</TouchableOpacity>
<TouchableOpacity
onPress={onPressSearch}
hitSlop={HITSLOP}
style={[styles.btn, {marginLeft: 8}]}>
<MagnifyingGlassIcon
size={18}
strokeWidth={3}
style={styles.searchBtnIcon}
/>
</TouchableOpacity>
</View>
</>
)
}
})
const styles = StyleSheet.create({
header: {
@ -108,4 +163,26 @@ const styles = StyleSheet.create({
position: 'relative',
top: -1,
},
offline: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: colors.gray6,
paddingLeft: 15,
paddingRight: 10,
paddingVertical: 8,
borderRadius: 8,
marginHorizontal: 4,
marginTop: 4,
},
offlineBtn: {
backgroundColor: colors.gray5,
borderRadius: 5,
paddingVertical: 5,
paddingHorizontal: 10,
},
offlineBtnText: {
color: colors.white,
fontWeight: 'bold',
},
})

2
src/view/index.ts
View File

@ -45,6 +45,7 @@ import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus'
import {faShare} from '@fortawesome/free-solid-svg-icons/faShare'
import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSquare'
import {faShield} from '@fortawesome/free-solid-svg-icons/faShield'
import {faSignal} from '@fortawesome/free-solid-svg-icons/faSignal'
import {faReply} from '@fortawesome/free-solid-svg-icons/faReply'
import {faRetweet} from '@fortawesome/free-solid-svg-icons/faRetweet'
import {faRss} from '@fortawesome/free-solid-svg-icons/faRss'
@ -110,6 +111,7 @@ export function setup() {
faShare,
faShareFromSquare,
faShield,
faSignal,
faUser,
faUsers,
faUserCheck,

4
src/view/lib/styles.ts
View File

@ -10,6 +10,9 @@ export const colors = {
gray3: '#c1b9b9',
gray4: '#968d8d',
gray5: '#645454',
gray6: '#423737',
gray7: '#2D2626',
gray8: '#131010',
blue0: '#bfe1ff',
blue1: '#8bc7fd',
@ -131,6 +134,7 @@ export const s = StyleSheet.create({
flexRow: {flexDirection: 'row'},
flexCol: {flexDirection: 'column'},
flex1: {flex: 1},
alignCenter: {alignItems: 'center'},
// position
absolute: {position: 'absolute'},

45
src/view/screens/Login.tsx
View File

@ -25,6 +25,7 @@ import {useStores, DEFAULT_SERVICE} from '../../state'
import {ServiceDescription} from '../../state/models/session'
import {ServerInputModel} from '../../state/models/shell-ui'
import {ComAtprotoAccountCreate} from '../../third-party/api/index'
import {isNetworkError} from '../../lib/errors'
enum ScreenState {
SigninOrCreateAccount,
@ -186,7 +187,7 @@ const Signin = ({onPressBack}: {onPressBack: () => void}) => {
setIsProcessing(false)
if (errMsg.includes('Authentication Required')) {
setError('Invalid username or password')
} else if (errMsg.includes('Network request failed')) {
} else if (isNetworkError(e)) {
setError(
'Unable to contact your service. Please check your Internet connection.',
)
@ -210,16 +211,6 @@ const Signin = ({onPressBack}: {onPressBack: () => void}) => {
</Text>
<FontAwesomeIcon icon="pen" size={10} style={styles.groupTitleIcon} />
</TouchableOpacity>
{error ? (
<View style={styles.error}>
<View style={styles.errorIcon}>
<FontAwesomeIcon icon="exclamation" style={s.white} size={10} />
</View>
<View style={s.flex1}>
<Text style={[s.white, s.bold]}>{error}</Text>
</View>
</View>
) : undefined}
<View style={styles.groupContent}>
<FontAwesomeIcon icon="at" style={styles.groupContentIcon} />
<TextInput
@ -249,18 +240,31 @@ const Signin = ({onPressBack}: {onPressBack: () => void}) => {
/>
</View>
</View>
<View style={[s.flexRow, s.pl20, s.pr20]}>
{error ? (
<View style={styles.error}>
<View style={styles.errorIcon}>
<FontAwesomeIcon icon="exclamation" style={s.white} size={10} />
</View>
<View style={s.flex1}>
<Text style={[s.white, s.bold]}>{error}</Text>
</View>
</View>
) : undefined}
<View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}>
<TouchableOpacity onPress={onPressBack}>
<Text style={[s.white, s.f18, s.pl5]}>Back</Text>
</TouchableOpacity>
<View style={s.flex1} />
<TouchableOpacity onPress={onPressNext}>
{isProcessing ? (
{!serviceDescription || isProcessing ? (
<ActivityIndicator color="#fff" />
) : (
<Text style={[s.white, s.f18, s.bold, s.pr5]}>Next</Text>
)}
</TouchableOpacity>
{!serviceDescription || isProcessing ? (
<Text style={[s.white, s.f18, s.pl10]}>Connecting...</Text>
) : undefined}
</View>
</KeyboardAvoidingView>
)
@ -689,18 +693,19 @@ const styles = StyleSheet.create({
color: colors.white,
},
error: {
borderTopWidth: 1,
borderTopColor: colors.blue1,
borderWidth: 1,
borderColor: colors.red5,
backgroundColor: colors.red4,
flexDirection: 'row',
alignItems: 'center',
marginTop: 5,
backgroundColor: colors.blue2,
marginTop: -5,
marginHorizontal: 20,
marginBottom: 15,
borderRadius: 8,
paddingHorizontal: 8,
paddingVertical: 5,
paddingVertical: 8,
},
errorFloating: {
borderWidth: 1,
borderColor: colors.blue1,
marginBottom: 20,
marginHorizontal: 20,
borderRadius: 8,

2
src/view/shell/desktop-web/index.tsx
View File

@ -9,7 +9,7 @@ export const DesktopWebShell: React.FC = observer(({children}) => {
const store = useStores()
return (
<View style={styles.outerContainer}>
{store.session.isAuthed ? (
{store.session.hasSession ? (
<>
<DesktopLeftColumn />
<View style={styles.innerContainer}>{children}</View>

2
src/view/shell/mobile/index.tsx
View File

@ -231,7 +231,7 @@ export const MobileShell: React.FC = observer(() => {
transform: [{scale: newTabInterp.value}],
}))
if (!store.session.isAuthed) {
if (!store.session.hasSession) {
return (
<LinearGradient
colors={['#007CFF', '#00BCFF']}