import React, {useEffect} from 'react' import { ActivityIndicator, ScrollView, StyleSheet, TouchableOpacity, View, } from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {observer} from 'mobx-react-lite' import {useStores} from '../../state' import {ScreenParams} from '../routes' import {s} from '../lib/styles' import {ViewHeader} from '../com/util/ViewHeader' import {Link} from '../com/util/Link' import {Text} from '../com/util/text/Text' import * as Toast from '../com/util/Toast' import {UserAvatar} from '../com/util/UserAvatar' import {usePalette} from '../lib/hooks/usePalette' import {AccountData} from '../../state/models/session' export const Settings = observer(function Settings({ navIdx, visible, }: ScreenParams) { const pal = usePalette('default') const store = useStores() const [isSwitching, setIsSwitching] = React.useState(false) useEffect(() => { if (!visible) { return } store.shell.setMinimalShellMode(false) store.nav.setTitle(navIdx, 'Settings') }, [visible, store]) const onPressSwitchAccount = async (acct: AccountData) => { setIsSwitching(true) if (await store.session.resumeSession(acct)) { setIsSwitching(false) Toast.show(`Signed in as ${acct.displayName || acct.handle}`) return } setIsSwitching(false) Toast.show('Sorry! We need you to enter your password.') store.session.clear() } const onPressAddAccount = () => { store.session.clear() } const onPressSignout = () => { store.session.logout() } return ( Signed in as Sign out {isSwitching ? ( ) : ( {store.me.displayName || store.me.handle} @{store.me.handle} )} Switch to: {store.session.switchableAccounts.map(account => ( onPressSwitchAccount(account) }> {account.displayName || account.handle} @{account.handle} ))} Add account Developer tools System log Storybook ) }) const styles = StyleSheet.create({ dimmed: { opacity: 0.5, }, title: { fontSize: 32, fontWeight: 'bold', marginTop: 20, marginBottom: 14, }, profile: { flexDirection: 'row', marginVertical: 6, borderRadius: 4, paddingVertical: 10, paddingHorizontal: 10, }, avi: { width: 40, height: 40, borderRadius: 30, marginRight: 8, }, })