Merge main into the Web PR (#230)
* Update to RN 71.1.0 (#100) * Update to RN 71 * Adds missing lint plugin * Add missing native changes * Bump @atproto/api@0.0.7 (#112) * Image not loading on swipe (#114) * Adds prefetching to images * Adds image prefetch * bugfix for images not showing on swipe * Fixes prefetch bug * Update src/view/com/util/PostEmbeds.tsx --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com> * Fixes to session management (#117) * Update session-management to solve incorrectly dropped sessions * Reset the nav on account switch * Reset the feed on me.load() * Update tests to reflect new account-switching behavior * Increase max image resolutions and sizes (#118) * Slightly increase the hitslop for post controls * Fix character counter color in dark mode * Update login to use new session.create api, which enables email login (close #93) (#119) * Replaces the alert with dropdown for profile image and banner (#123) * replaces the alert with dropdown for profile image and banner * lint * Fix to ordering of images in the embed grid (#121) * Add explicit link-embed controls to the composer (#120) * Add explicit link-embed controls * Update the target rez/size of link embed thumbs * Remove the alert before publishing without a link card * [Draft] Fixes image failing on reupload issue (#128) * Fixes image failing on reupload issue * Use tmp folder instead of documents * lint * Image performance improvements (#126) * Switch out most images for FastImage * Add image loading placeholders * Fix tests * Collection of fixes to list rendering (#127) * Fix bug that caused endless spinners in profile feeds * Bundle fetches of suggested actors into one update * Fixes to suggested follow rendering * Fix missing replacement of flex:1 to height:100 * Fixes to navigation swipes (#129) * Nav swipe: increase the distance traveled in response to gesture movement. This causes swipes to feel faster and more responsive. * Fix: fully clamp the swipe against the edge * Improve the performance of swipes by skipping the interaction manager * Adds dark mode to the edit screen (#130) * Adds dark mode to edit screen * lint * lint * lint * Reduce render cost of post controls and improve perceived responsiveness (#132) * Move post control animations into conditional render and increase perceived responsiveness * Remove log * Adds dark mode to the dropdown (#131) * Adds dark mode to the bottom sheet * Make background button lighter (like before) * lint * Fix bug in lightbox rendering (#133) * Fix layout in onboarding to not overflow the footer * Configure feed FlatList (removeClippedSubviews=true) to improve scroll performance (#136) * Disable like/repost animations to see if theyre causing #135 (#137) * Composer: mention tagging now works in middle of text (close #105) (#139) * Implement account deletion (#141) * Fix photo & camera permission management (#140) * Check photo & camera perms and alert the user if not available (close #64) - Adds perms checks with a prompt to update settings if needed - Moves initial access of photos in the composer so that the initial prompt occurs at an intuitive time. * Add react-native-permissions test mock * Fix issue causing multiple access requests * Use longer var names * Update podfile.lock * Lint fix * Move photo perm request in composer to the gallery btn instead of when the carousel is opened * Adds more tracking all around the app (#142) * Adds more tracking all around the app * more events * lint * using better analytics naming * missed file * more fixes * Calculate image aspect ratio on load (#146) * Calculate image aspect ratio on load * Move aspect ratio bounds to constants * Adds detox testing and instructions (#147) * Adds detox testing and instructions * lint * lint * Error cleanup (close #79) (#148) * Avoid surfacing errors to the user when it's not critical * Remove now-unused GetAssertionsView * Apply cleanError() consistently * Give a better error message for Upstream Failures (http status 502) * Hide errors in notifications because they're not useful * More e2e tests (create account) (#150) * Adds respots under the 'post' tab under profile (#158) * Adds dark mode to delete account screen (#159) * 87 dark mode edit profile (#162) * Adds dark mode to delete account screen * Adds one more missed darkmode * more fixes * Remove fallback gradient on external links without thumbs (#164) * Remove fallback gradient on external links without thumbs * Remove fallback gradient on external links without thumbs in the composer preview * Fix refresh behavior around a series of models (repost, graph, vote) (#163) * Fix refresh behavior around a series of models (repost, graph, vote) * Fix cursor behavior in reposted-by view * Fixes issue where retrying on image upload fails (#166) * Fixes issue where retrying on image upload fails * Lint, longer test time * Longer waitfor time in tests * even longer timeout * longer timeout * missed file * Update src/view/com/composer/ComposePost.tsx Co-authored-by: Paul Frazee <pfrazee@gmail.com> * Update src/view/com/composer/ComposePost.tsx Co-authored-by: Paul Frazee <pfrazee@gmail.com> --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com> * 154 cached image profile (#167) * Fixes issue where retrying on image upload fails * Lint, longer test time * Longer waitfor time in tests * even longer timeout * longer timeout * missed file * Fixes image cache error on second try for profile screen * lint * lint * lint * Refactor session management to use a new "Agent" API (#165) * Add the atp-agent implementation (temporarily in this repo) * Rewrite all session & API management to use the new atp-agent * Update tests for the atp-agent refactor * Refactor management of session-related state. Includes: - More careful management of when state is cleared or fetched - Debug logging to help trace future issues - Clearer APIs overall * Bubble session-expiration events to the user and display a toast to explain * Switch to the new @atproto/api@0.1.0 * Minor aesthetic cleanup in SessionModel * Wire up ReportAccount and ReportPost (#168) * Fixes embeds for youtube channels (#169) * Bump app ios version to 1.1 (needed after app store submission) * Fix potential issues with promise guards when an error occurs (#170) * Refactor models to use bundleAsync and lock regions (#171) * Fix to an edge case with feed re-ordering for threads (#172) * 151 fix youtube channel embed (#173) * Fixes embeds for youtube channels * Tests for youtube extract meta * lint * Add 'doesnt use non-exempt encryption' to ios config * Rework the search UI and add (#174) * Add search tab and move icon to footer * Remove subtitles from view header * Remove unused code * Clean up UI of search screen * Search: give better user feedback to UI state and add a cancel button * Add WhoToFollow section to search * Add a temporary SuggestedPosts solution using the patented 'bsky team algo' * Trigger reload of suggested content in search on open * Wait five min between reloading discovery content * Reduce weight of solid search icon in footer * Fix lint * Fix tests * 151 feat youtube embed iframe (#176) * youtube embed iframe temp commit * Fixes styling and code cleanup * lint * Now clicking between the pause and settings button doesn't trigger the parent * use modest branding (less yt logos) * Stop playing the video once there's a navigation event * Make sure the iframe is unmounted on any navigation event * fixes tests * lint * Add scroll-to-top for all screens (#177) * Adds hardcoded suggested list (#178) * Adds hardcoded suggested list * Update suggested-actors-view to support page sizes smaller than the hardcoded list --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com> * more robust centering of the play button (#181) Co-authored-by: Aryan Goharzad <arrygoo@gmail.com> * Bundle of UI modifications (#175) * Adjust visual balance of SuggestedPosts and WhoToFollow * Fix bug in the discovery load trigger * Adjust search header aesthetic and have it scroll away * More visual balance tweaks on the search page * Even more visual balance tweaks on the search page * Hide the footer on scroll in search * Ditch the composer prompt buttons in the home feed * Center the view header title * Hide header on scroll on the home feed * Fix e2e tests * Fix home feed positioning (closes #189) (#195) * Fix home feed positioning for floating header * Fix positioning of errors in home feed * Fix lint * Don't show new-content notification for reposts (close #179) (#197) * Show the splash screen during session resumption (close #186) (#199) * Fix to suggested follows: chunk the hardcoded fetches to 25 at a time (close #196) (#198) * UI updates to the floating action button (#201) * Update FAB to use a plus icon and not drop shadow * Update FAB positioning to be more consistent in different shell modes * Animate the FAB's repositioning * Remove the 'loading' placeholder from images as it degraded feed perf (#202) * Remove the 'loading' placeholder from images as it degraded feed perf * Remove references * Fix RN bug that causes home feed not to load more; also fix home feed load view. (#208) RN has a bug where rendering a flatlist with an empty array appears to break its virtual list windowing behaviors. See https://stackoverflow.com/a/67873596 * Only give the loading spinner on the home feed during PTR (#207) (cherry picked from commit b7a5da12fdfacef74873b5cf6d75f20d259bde0e) * Implement our own lifecycle tracking to ensure it never fires while the app is backgrounded (close #193) (#211) * Push notification fixes (#210) * Fix to when screen analytics events are firing * Fix: dont trigger update state when backgrounded * Small fix to notifee API usage * Fix: properly load notification info for push card * Add feedback link to main menu (close #191) (#212) * Add "follows you" information and sync follow state between views (#215) * Bump @atproto/api@0.1.2 and update API usage * Add 'follows you' pill to profile header (close #110) * Add 'follows you' to followers and follows (close #103) * Update reposted-by and liked-by views to use the same components as followers and following * Create a local follows cache MyFollowsModel to keep views in sync (close #205) * Add incremental hydration to the MyFollows model * Fix tests * Update deps * Fix lint * Fix to paginated fetches * Fix reference * Fix potential state-desync issue * Fixes to notifications (#216) * Improve push-notification for follows * Refresh notifications on screen open (close #214) * Avoid showing loader more than needed in post threads * Refactor notification polling to handle view-state more effectively * Delete a bunch of tests taht werent adding value * Remove the accounts integration test; we'll use the e2e test instead * Load latest in notifications when the screen is open rather than full refresh * Randomize hard-coded suggested follows (#226) * Ensure follows are loaded before filtering hardcoded suggestions * Randomize hard-coded suggested profiles (close #219) * Sanitizes posts on publish and render (#217) * Sanatizes posts on publish and render * lint * lint and added sanitize to thread view as well * adjusts indices based on replaced text * Woops, fixes a bug * bugfix + cleanup * comment * lint * move sanitize text to later in the flow * undo changes to compose post * Add RichText library building upon the sanitizePost library method * Add lodash.clonedeep dep * Switch to RichText processing on record load & render * Fix lint --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com> * A group of notifications fixes (#227) * Fix: don't group together notifications that can't visually be grouped (close #221) * Mark all notifications read on PTR * Small optimization: useCallback and useMemo in posts feed * Add loading spinner to footer of notifications (close #222) * Fix to scrolling to posts within a thread (#228) * Fix: render the entire thread at start so that scrollToIndex works always (close #270) * Visual fixes to thread 'load more' * A few small perf improvements to thread rendering * Fix lint * 1.2 * Remove unused logger lib * Remove state-mock * Type fixes * Reorganize the folder structure for lib and switch to typescript path aliases * Move build-flags into lib * Move to the state path alias * Add view path alias * Fix lint * iOS build fixes * Wrap analytics in native/web splitter and re-enable in all view code * Add web version of react-native-webview * Add web split for version number * Fix BlurView import for web * Add web split for fastimage * Create web split for permissions lib * Fix for web high priority images --------- Co-authored-by: Aryan Goharzad <arrygoo@gmail.com>
This commit is contained in:
Paul Frazee
GitHub
parent
7916b26aad
commit
f28334739b
242 changed files with 8400 additions and 7454 deletions
|
|
@ -4,10 +4,10 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|||
import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
|
||||
import {Selector} from '../com/util/Selector'
|
||||
import {Text} from '../com/util/text/Text'
|
||||
import {colors} from '../lib/styles'
|
||||
import {colors} from 'lib/styles'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
import {useAnimatedValue} from '../lib/hooks/useAnimatedValue'
|
||||
import {useStores} from 'state/index'
|
||||
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
|
||||
|
||||
export const Contacts = ({navIdx, visible}: ScreenParams) => {
|
||||
const store = useStores()
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import React from 'react'
|
||||
import {ScrollView, View} from 'react-native'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {ThemeProvider} from '../lib/ThemeContext'
|
||||
import {PaletteColorName} from '../lib/ThemeContext'
|
||||
import {usePalette} from '../lib/hooks/usePalette'
|
||||
import {s} from '../lib/styles'
|
||||
import {displayNotification} from '../lib/notifee'
|
||||
import {ThemeProvider, PaletteColorName} from 'lib/ThemeContext'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {s} from 'lib/styles'
|
||||
import {displayNotification} from 'lib/notifee'
|
||||
|
||||
import {Text} from '../com/util/text/Text'
|
||||
import {ViewSelector} from '../com/util/ViewSelector'
|
||||
|
|
@ -284,6 +283,9 @@ function TypographyView() {
|
|||
'xs-heavy' lorem ipsum dolor
|
||||
</Text>
|
||||
|
||||
<Text type="title-2xl" style={[pal.text]}>
|
||||
'title-2xl' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="title-xl" style={[pal.text]}>
|
||||
'title-xl' lorem ipsum dolor
|
||||
</Text>
|
||||
|
|
@ -296,6 +298,9 @@ function TypographyView() {
|
|||
<Text type="button" style={[pal.text]}>
|
||||
Button
|
||||
</Text>
|
||||
<Text type="button-lg" style={[pal.text]}>
|
||||
Button-lg
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,24 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {FlatList, View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import useAppState from 'react-native-appstate-hook'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {Feed} from '../com/posts/Feed'
|
||||
import {FAB} from '../com/util/FAB'
|
||||
import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
|
||||
import {useStores} from '../../state'
|
||||
import {useStores} from 'state/index'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {s} from '../lib/styles'
|
||||
import {useOnMainScroll} from '../lib/hooks/useOnMainScroll'
|
||||
import {s} from 'lib/styles'
|
||||
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
|
||||
import {useAnalytics} from 'lib/analytics'
|
||||
|
||||
export const Home = observer(function Home({
|
||||
navIdx,
|
||||
visible,
|
||||
scrollElRef,
|
||||
}: ScreenParams) {
|
||||
const HEADER_HEIGHT = 42
|
||||
|
||||
export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
|
||||
const store = useStores()
|
||||
const onMainScroll = useOnMainScroll(store)
|
||||
const {screen, track} = useAnalytics()
|
||||
const scrollElRef = React.useRef<FlatList>(null)
|
||||
const [wasVisible, setWasVisible] = React.useState<boolean>(false)
|
||||
const {appState} = useAppState({
|
||||
onForeground: () => doPoll(true),
|
||||
|
|
@ -31,22 +32,31 @@ export const Home = observer(function Home({
|
|||
if (store.me.mainFeed.isLoading) {
|
||||
return
|
||||
}
|
||||
store.log.debug('Polling home feed')
|
||||
store.me.mainFeed.checkForLatest().catch(e => {
|
||||
store.log.error('Failed to poll feed', e)
|
||||
})
|
||||
store.log.debug('HomeScreen: Polling for new posts')
|
||||
store.me.mainFeed.checkForLatest()
|
||||
},
|
||||
[appState, visible, store],
|
||||
)
|
||||
|
||||
const scrollToTop = React.useCallback(() => {
|
||||
// NOTE: the feed is offset by the height of the collapsing header,
|
||||
// so we scroll to the negative of that height -prf
|
||||
scrollElRef.current?.scrollToOffset({offset: -HEADER_HEIGHT})
|
||||
}, [scrollElRef])
|
||||
|
||||
useEffect(() => {
|
||||
const softResetSub = store.onScreenSoftReset(scrollToTop)
|
||||
const feedCleanup = store.me.mainFeed.registerListeners()
|
||||
const pollInterval = setInterval(() => doPoll(), 15e3)
|
||||
const pollInterval = setInterval(doPoll, 15e3)
|
||||
const cleanup = () => {
|
||||
clearInterval(pollInterval)
|
||||
softResetSub.remove()
|
||||
feedCleanup()
|
||||
}
|
||||
|
||||
// guard to only continue when transitioning from !visible -> visible
|
||||
// TODO is this 100% needed? depends on if useEffect() is getting refired
|
||||
// for reasons other than `visible` changing -prf
|
||||
if (!visible) {
|
||||
setWasVisible(false)
|
||||
return cleanup
|
||||
|
|
@ -55,17 +65,20 @@ export const Home = observer(function Home({
|
|||
}
|
||||
setWasVisible(true)
|
||||
|
||||
// just became visible
|
||||
screen('Feed')
|
||||
store.nav.setTitle(navIdx, 'Home')
|
||||
store.log.debug('Updating home feed')
|
||||
store.log.debug('HomeScreen: Updating feed')
|
||||
if (store.me.mainFeed.hasContent) {
|
||||
store.me.mainFeed.update()
|
||||
} else {
|
||||
store.me.mainFeed.setup()
|
||||
}
|
||||
return cleanup
|
||||
}, [visible, store, navIdx, doPoll, wasVisible])
|
||||
}, [visible, store, store.me.mainFeed, navIdx, doPoll, wasVisible, scrollToTop, screen])
|
||||
|
||||
const onPressCompose = (imagesOpen?: boolean) => {
|
||||
track('Home:ComposeButtonPressed')
|
||||
store.shell.openComposer({imagesOpen})
|
||||
}
|
||||
const onPressTryAgain = () => {
|
||||
|
|
@ -73,26 +86,31 @@ export const Home = observer(function Home({
|
|||
}
|
||||
const onPressLoadLatest = () => {
|
||||
store.me.mainFeed.refresh()
|
||||
scrollElRef?.current?.scrollToOffset({offset: 0})
|
||||
scrollToTop()
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={s.h100pct}>
|
||||
<ViewHeader title="Bluesky" subtitle="Private Beta" canGoBack={false} />
|
||||
<Feed
|
||||
testID="homeFeed"
|
||||
key="default"
|
||||
feed={store.me.mainFeed}
|
||||
scrollElRef={scrollElRef}
|
||||
style={s.h100pct}
|
||||
onPressCompose={onPressCompose}
|
||||
onPressTryAgain={onPressTryAgain}
|
||||
onPressCompose={onPressCompose}
|
||||
onScroll={onMainScroll}
|
||||
headerOffset={HEADER_HEIGHT}
|
||||
/>
|
||||
<ViewHeader title="Bluesky" canGoBack={false} hideOnScroll />
|
||||
{store.me.mainFeed.hasNewLatest && !store.me.mainFeed.isRefreshing && (
|
||||
<LoadLatestBtn onPress={onPressLoadLatest} />
|
||||
)}
|
||||
<FAB icon="pen-nib" onPress={() => onPressCompose(false)} />
|
||||
<FAB
|
||||
testID="composeFAB"
|
||||
icon="plus"
|
||||
onPress={() => onPressCompose(false)}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
|||
import {observer} from 'mobx-react-lite'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {ScrollView} from '../com/util/Views'
|
||||
import {useStores} from '../../state'
|
||||
import {useStores} from 'state/index'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {s} from '../lib/styles'
|
||||
import {s} from 'lib/styles'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {Text} from '../com/util/text/Text'
|
||||
import {usePalette} from '../lib/hooks/usePalette'
|
||||
import {ago} from '../../lib/strings'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {ago} from 'lib/strings/time'
|
||||
|
||||
export const Log = observer(function Log({navIdx, visible}: ScreenParams) {
|
||||
const pal = usePalette('default')
|
||||
|
|
|
|||
|
|
@ -1,19 +1,16 @@
|
|||
import React, {useState} from 'react'
|
||||
import {
|
||||
Image,
|
||||
SafeAreaView,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import React, {useEffect, useState} from 'react'
|
||||
import {SafeAreaView, StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||
import Image, {Source as ImageSource} from 'view/com/util/images/Image'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {Signin} from '../com/login/Signin'
|
||||
import {CreateAccount} from '../com/login/CreateAccount'
|
||||
import {Text} from '../com/util/text/Text'
|
||||
import {ErrorBoundary} from '../com/util/ErrorBoundary'
|
||||
import {colors} from '../lib/styles'
|
||||
import {usePalette} from '../lib/hooks/usePalette'
|
||||
import {CLOUD_SPLASH} from '../lib/assets'
|
||||
import {colors} from 'lib/styles'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useStores} from 'state/index'
|
||||
import {CLOUD_SPLASH} from 'lib/assets'
|
||||
import {useAnalytics} from 'lib/analytics'
|
||||
|
||||
enum ScreenState {
|
||||
S_SigninOrCreateAccount,
|
||||
|
|
@ -28,6 +25,12 @@ const SigninOrCreateAccount = ({
|
|||
onPressSignin: () => void
|
||||
onPressCreateAccount: () => void
|
||||
}) => {
|
||||
const {screen} = useAnalytics()
|
||||
|
||||
useEffect(() => {
|
||||
screen('Login')
|
||||
}, [screen])
|
||||
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<>
|
||||
|
|
@ -57,22 +60,28 @@ const SigninOrCreateAccount = ({
|
|||
|
||||
export const Login = observer(() => {
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
const [screenState, setScreenState] = useState<ScreenState>(
|
||||
ScreenState.S_SigninOrCreateAccount,
|
||||
)
|
||||
|
||||
if (screenState === ScreenState.S_SigninOrCreateAccount) {
|
||||
if (
|
||||
store.session.isResumingSession ||
|
||||
screenState === ScreenState.S_SigninOrCreateAccount
|
||||
) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Image source={CLOUD_SPLASH} style={styles.bgImg} />
|
||||
<Image source={CLOUD_SPLASH as ImageSource} style={styles.bgImg} />
|
||||
<SafeAreaView testID="noSessionView" style={styles.container}>
|
||||
<ErrorBoundary>
|
||||
<SigninOrCreateAccount
|
||||
onPressSignin={() => setScreenState(ScreenState.S_Signin)}
|
||||
onPressCreateAccount={() =>
|
||||
setScreenState(ScreenState.S_CreateAccount)
|
||||
}
|
||||
/>
|
||||
{!store.session.isResumingSession && (
|
||||
<SigninOrCreateAccount
|
||||
onPressSignin={() => setScreenState(ScreenState.S_Signin)}
|
||||
onPressCreateAccount={() =>
|
||||
setScreenState(ScreenState.S_CreateAccount)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</ErrorBoundary>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,13 @@
|
|||
import React, {useState} from 'react'
|
||||
import {
|
||||
Image,
|
||||
SafeAreaView,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {SafeAreaView, StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {CenteredView} from '../com/util/Views'
|
||||
import {Signin} from '../com/login/Signin'
|
||||
import {CreateAccount} from '../com/login/CreateAccount'
|
||||
import {Text} from '../com/util/text/Text'
|
||||
import {ErrorBoundary} from '../com/util/ErrorBoundary'
|
||||
import {colors} from '../lib/styles'
|
||||
import {usePalette} from '../lib/hooks/usePalette'
|
||||
import {CLOUD_SPLASH} from '../lib/assets'
|
||||
import {colors} from 'lib/styles'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
|
||||
enum ScreenState {
|
||||
S_SigninOrCreateAccount,
|
||||
|
|
@ -125,6 +118,7 @@ const styles = StyleSheet.create({
|
|||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
hero: {},
|
||||
heroText: {
|
||||
backgroundColor: colors.white,
|
||||
paddingTop: 10,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react'
|
|||
import {Button, StyleSheet, View} from 'react-native'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {Text} from '../com/util/text/Text'
|
||||
import {useStores} from '../../state'
|
||||
import {useStores} from 'state/index'
|
||||
|
||||
export const NotFound = () => {
|
||||
const stores = useStores()
|
||||
|
|
|
|||
|
|
@ -1,35 +1,79 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {FlatList, View} from 'react-native'
|
||||
import useAppState from 'react-native-appstate-hook'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {Feed} from '../com/notifications/Feed'
|
||||
import {useStores} from '../../state'
|
||||
import {useStores} from 'state/index'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useOnMainScroll} from '../lib/hooks/useOnMainScroll'
|
||||
import {s} from '../lib/styles'
|
||||
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
|
||||
import {s} from 'lib/styles'
|
||||
import {useAnalytics} from 'lib/analytics'
|
||||
|
||||
const NOTIFICATIONS_POLL_INTERVAL = 15e3
|
||||
|
||||
export const Notifications = ({navIdx, visible}: ScreenParams) => {
|
||||
const store = useStores()
|
||||
const onMainScroll = useOnMainScroll(store)
|
||||
const scrollElRef = React.useRef<FlatList>(null)
|
||||
const {screen} = useAnalytics()
|
||||
const {appState} = useAppState({
|
||||
onForeground: () => doPoll(true),
|
||||
})
|
||||
|
||||
// event handlers
|
||||
// =
|
||||
const onPressTryAgain = () => {
|
||||
store.me.notifications.refresh()
|
||||
}
|
||||
const scrollToTop = React.useCallback(() => {
|
||||
scrollElRef.current?.scrollToOffset({offset: 0})
|
||||
}, [scrollElRef])
|
||||
|
||||
// periodic polling
|
||||
// =
|
||||
const doPoll = React.useCallback(
|
||||
async (isForegrounding = false) => {
|
||||
if (isForegrounding) {
|
||||
// app is foregrounding, refresh optimistically
|
||||
store.log.debug('NotificationsScreen: Refreshing on app foreground')
|
||||
await Promise.all([
|
||||
store.me.notifications.loadUnreadCount(),
|
||||
store.me.notifications.refresh(),
|
||||
])
|
||||
} else if (appState === 'active') {
|
||||
// periodic poll, refresh if there are new notifs
|
||||
store.log.debug('NotificationsScreen: Polling for new notifications')
|
||||
const didChange = await store.me.notifications.loadUnreadCount()
|
||||
if (didChange) {
|
||||
store.log.debug('NotificationsScreen: Loading new notifications')
|
||||
await store.me.notifications.loadLatest()
|
||||
}
|
||||
}
|
||||
},
|
||||
[appState, store],
|
||||
)
|
||||
useEffect(() => {
|
||||
const pollInterval = setInterval(doPoll, NOTIFICATIONS_POLL_INTERVAL)
|
||||
return () => clearInterval(pollInterval)
|
||||
}, [doPoll])
|
||||
|
||||
// on-visible setup
|
||||
// =
|
||||
useEffect(() => {
|
||||
if (!visible) {
|
||||
return
|
||||
}
|
||||
store.log.debug('Updating notifications feed')
|
||||
store.me.notifications
|
||||
.update()
|
||||
.catch(e => {
|
||||
store.log.error('Error while updating notifications feed', e)
|
||||
})
|
||||
.then(() => {
|
||||
store.me.notifications.updateReadState()
|
||||
})
|
||||
store.log.debug('NotificationsScreen: Updating feed')
|
||||
const softResetSub = store.onScreenSoftReset(scrollToTop)
|
||||
store.me.notifications.update().then(() => {
|
||||
store.me.notifications.markAllRead()
|
||||
})
|
||||
screen('Notifications')
|
||||
store.nav.setTitle(navIdx, 'Notifications')
|
||||
}, [visible, store, navIdx])
|
||||
|
||||
const onPressTryAgain = () => {
|
||||
store.me.notifications.refresh()
|
||||
}
|
||||
return () => {
|
||||
softResetSub.remove()
|
||||
}
|
||||
}, [visible, store, navIdx, screen, scrollToTop])
|
||||
|
||||
return (
|
||||
<View style={s.h100pct}>
|
||||
|
|
@ -38,6 +82,7 @@ export const Notifications = ({navIdx, visible}: ScreenParams) => {
|
|||
view={store.me.notifications}
|
||||
onPressTryAgain={onPressTryAgain}
|
||||
onScroll={onMainScroll}
|
||||
scrollElRef={scrollElRef}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import {StyleSheet, View} from 'react-native'
|
|||
import {observer} from 'mobx-react-lite'
|
||||
import {FeatureExplainer} from '../com/onboard/FeatureExplainer'
|
||||
import {Follows} from '../com/onboard/Follows'
|
||||
import {OnboardStage, OnboardStageOrder} from '../../state/models/onboard'
|
||||
import {useStores} from '../../state'
|
||||
import {OnboardStage, OnboardStageOrder} from 'state/models/onboard'
|
||||
import {useStores} from 'state/index'
|
||||
|
||||
export const Onboard = observer(() => {
|
||||
const store = useStores()
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import {View} from 'react-native'
|
|||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {PostVotedBy as PostLikedByComponent} from '../com/post-thread/PostVotedBy'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
import {makeRecordUri} from '../../lib/strings'
|
||||
import {useStores} from 'state/index'
|
||||
import {makeRecordUri} from 'lib/strings/url-helpers'
|
||||
|
||||
export const PostDownvotedBy = ({navIdx, visible, params}: ScreenParams) => {
|
||||
const store = useStores()
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import {View} from 'react-native'
|
|||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
import {makeRecordUri} from '../../lib/strings'
|
||||
import {useStores} from 'state/index'
|
||||
import {makeRecordUri} from 'lib/strings/url-helpers'
|
||||
|
||||
export const PostRepostedBy = ({navIdx, visible, params}: ScreenParams) => {
|
||||
const store = useStores()
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
import React, {useEffect, useMemo, useState} from 'react'
|
||||
import React, {useEffect, useMemo} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {makeRecordUri} from '../../lib/strings'
|
||||
import {makeRecordUri} from 'lib/strings/url-helpers'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
|
||||
import {PostThreadViewModel} from '../../state/models/post-thread-view'
|
||||
import {PostThreadViewModel} from 'state/models/post-thread-view'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
import {s} from '../lib/styles'
|
||||
import {useStores} from 'state/index'
|
||||
import {s} from 'lib/styles'
|
||||
|
||||
export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
|
||||
const store = useStores()
|
||||
const {name, rkey} = params
|
||||
const [viewSubtitle, setViewSubtitle] = useState<string>(`by ${name}`)
|
||||
const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
|
||||
const view = useMemo<PostThreadViewModel>(
|
||||
() => new PostThreadViewModel(store, {uri}),
|
||||
|
|
@ -24,7 +23,6 @@ export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
|
|||
const setTitle = () => {
|
||||
const author = view.thread?.post.author
|
||||
const niceName = author?.handle || name
|
||||
setViewSubtitle(`by ${niceName}`)
|
||||
store.nav.setTitle(navIdx, `Post by ${niceName}`)
|
||||
}
|
||||
if (!visible) {
|
||||
|
|
@ -52,7 +50,7 @@ export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
|
|||
|
||||
return (
|
||||
<View style={s.h100pct}>
|
||||
<ViewHeader title="Post" subtitle={viewSubtitle} />
|
||||
<ViewHeader title="Post" />
|
||||
<View style={s.h100pct}>
|
||||
<PostThreadComponent uri={uri} view={view} />
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import {View} from 'react-native'
|
|||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {PostVotedBy as PostLikedByComponent} from '../com/post-thread/PostVotedBy'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
import {makeRecordUri} from '../../lib/strings'
|
||||
import {useStores} from 'state/index'
|
||||
import {makeRecordUri} from 'lib/strings/url-helpers'
|
||||
|
||||
export const PostUpvotedBy = ({navIdx, visible, params}: ScreenParams) => {
|
||||
const store = useStores()
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import {observer} from 'mobx-react-lite'
|
|||
import {ViewSelector} from '../com/util/ViewSelector'
|
||||
import {CenteredView} from '../com/util/Views'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {ProfileUiModel, Sections} from '../../state/models/profile-ui'
|
||||
import {useStores} from '../../state'
|
||||
import {ProfileUiModel, Sections} from 'state/models/profile-ui'
|
||||
import {useStores} from 'state/index'
|
||||
import {ProfileHeader} from '../com/profile/ProfileHeader'
|
||||
import {FeedItem} from '../com/posts/FeedItem'
|
||||
import {PostFeedLoadingPlaceholder} from '../com/util/LoadingPlaceholder'
|
||||
|
|
@ -14,8 +14,9 @@ import {ErrorMessage} from '../com/util/error/ErrorMessage'
|
|||
import {EmptyState} from '../com/util/EmptyState'
|
||||
import {Text} from '../com/util/text/Text'
|
||||
import {FAB} from '../com/util/FAB'
|
||||
import {s, colors} from '../lib/styles'
|
||||
import {useOnMainScroll} from '../lib/hooks/useOnMainScroll'
|
||||
import {s, colors} from 'lib/styles'
|
||||
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
|
||||
import {useAnalytics} from 'lib/analytics'
|
||||
|
||||
const LOADING_ITEM = {_reactKey: '__loading__'}
|
||||
const END_ITEM = {_reactKey: '__end__'}
|
||||
|
|
@ -23,6 +24,12 @@ const EMPTY_ITEM = {_reactKey: '__empty__'}
|
|||
|
||||
export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
|
||||
const store = useStores()
|
||||
const {screen} = useAnalytics()
|
||||
|
||||
useEffect(() => {
|
||||
screen('Profile')
|
||||
}, [screen])
|
||||
|
||||
const onMainScroll = useOnMainScroll(store)
|
||||
const [hasSetup, setHasSetup] = useState<boolean>(false)
|
||||
const uiState = React.useMemo(
|
||||
|
|
@ -128,7 +135,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
|
|||
}
|
||||
if (!uiState.feed.hasMore) {
|
||||
items = items.concat([END_ITEM])
|
||||
} else {
|
||||
} else if (uiState.feed.isLoading) {
|
||||
Footer = LoadingMoreFooter
|
||||
}
|
||||
renderItem = (item: any) => {
|
||||
|
|
@ -184,7 +191,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
|
|||
) : (
|
||||
<CenteredView>{renderHeader()}</CenteredView>
|
||||
)}
|
||||
<FAB icon="pen-nib" onPress={onPressCompose} />
|
||||
<FAB icon="plus" onPress={onPressCompose} />
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {View} from 'react-native'
|
|||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
import {useStores} from 'state/index'
|
||||
|
||||
export const ProfileFollowers = ({navIdx, visible, params}: ScreenParams) => {
|
||||
const store = useStores()
|
||||
|
|
@ -18,7 +18,7 @@ export const ProfileFollowers = ({navIdx, visible, params}: ScreenParams) => {
|
|||
|
||||
return (
|
||||
<View>
|
||||
<ViewHeader title="Followers" subtitle={`of ${name}`} />
|
||||
<ViewHeader title="Followers" />
|
||||
<ProfileFollowersComponent name={name} />
|
||||
</View>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {View} from 'react-native'
|
|||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
import {useStores} from 'state/index'
|
||||
|
||||
export const ProfileFollows = ({navIdx, visible, params}: ScreenParams) => {
|
||||
const store = useStores()
|
||||
|
|
@ -18,7 +18,7 @@ export const ProfileFollows = ({navIdx, visible, params}: ScreenParams) => {
|
|||
|
||||
return (
|
||||
<View>
|
||||
<ViewHeader title="Followed" subtitle={`by ${name}`} />
|
||||
<ViewHeader title="Following" />
|
||||
<ProfileFollowsComponent name={name} />
|
||||
</View>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,41 +1,73 @@
|
|||
import React, {useEffect, useState, useMemo, useRef} from 'react'
|
||||
import React from 'react'
|
||||
import {
|
||||
Keyboard,
|
||||
StyleSheet,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
TouchableWithoutFeedback,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {CenteredView, ScrollView} from '../com/util/Views'
|
||||
import {SuggestedFollows} from '../com/discover/SuggestedFollows'
|
||||
import {ScrollView} from '../com/util/Views'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {UserAvatar} from '../com/util/UserAvatar'
|
||||
import {Text} from '../com/util/text/Text'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
import {UserAutocompleteViewModel} from '../../state/models/user-autocomplete-view'
|
||||
import {s} from '../lib/styles'
|
||||
import {MagnifyingGlassIcon} from '../lib/icons'
|
||||
import {usePalette} from '../lib/hooks/usePalette'
|
||||
import {useStores} from 'state/index'
|
||||
import {UserAutocompleteViewModel} from 'state/models/user-autocomplete-view'
|
||||
import {s} from 'lib/styles'
|
||||
import {MagnifyingGlassIcon} from 'lib/icons'
|
||||
import {WhoToFollow} from '../com/discover/WhoToFollow'
|
||||
import {SuggestedPosts} from '../com/discover/SuggestedPosts'
|
||||
import {ProfileCard} from '../com/profile/ProfileCard'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
|
||||
import {useAnalytics} from 'lib/analytics'
|
||||
|
||||
export const Search = ({navIdx, visible, params}: ScreenParams) => {
|
||||
const MENU_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
|
||||
const FIVE_MIN = 5 * 60 * 1e3
|
||||
|
||||
export const Search = observer(({navIdx, visible, params}: ScreenParams) => {
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
const textInput = useRef<TextInput>(null)
|
||||
const [query, setQuery] = useState<string>('')
|
||||
const autocompleteView = useMemo<UserAutocompleteViewModel>(
|
||||
const {track} = useAnalytics()
|
||||
const scrollElRef = React.useRef<ScrollView>(null)
|
||||
const onMainScroll = useOnMainScroll(store)
|
||||
const textInput = React.useRef<TextInput>(null)
|
||||
const [lastRenderTime, setRenderTime] = React.useState<number>(Date.now()) // used to trigger reloads
|
||||
const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false)
|
||||
const [query, setQuery] = React.useState<string>('')
|
||||
const autocompleteView = React.useMemo<UserAutocompleteViewModel>(
|
||||
() => new UserAutocompleteViewModel(store),
|
||||
[store],
|
||||
)
|
||||
const {name} = params
|
||||
|
||||
useEffect(() => {
|
||||
const onSoftReset = () => {
|
||||
scrollElRef.current?.scrollTo({x: 0, y: 0})
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
const softResetSub = store.onScreenSoftReset(onSoftReset)
|
||||
const cleanup = () => {
|
||||
softResetSub.remove()
|
||||
}
|
||||
|
||||
if (visible) {
|
||||
const now = Date.now()
|
||||
if (now - lastRenderTime > FIVE_MIN) {
|
||||
setRenderTime(Date.now()) // trigger reload of suggestions
|
||||
}
|
||||
store.shell.setMinimalShellMode(false)
|
||||
autocompleteView.setup()
|
||||
store.nav.setTitle(navIdx, 'Search')
|
||||
}
|
||||
}, [store, visible, name, navIdx, autocompleteView])
|
||||
return cleanup
|
||||
}, [store, visible, name, navIdx, autocompleteView, lastRenderTime])
|
||||
|
||||
const onPressMenu = () => {
|
||||
track('ViewHeader:MenuButtonClicked')
|
||||
store.shell.setMainMenuOpen(true)
|
||||
}
|
||||
|
||||
const onChangeQuery = (text: string) => {
|
||||
setQuery(text)
|
||||
|
|
@ -46,87 +78,139 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
|
|||
autocompleteView.setActive(false)
|
||||
}
|
||||
}
|
||||
const onSelect = (handle: string) => {
|
||||
textInput.current?.blur()
|
||||
store.nav.navigate(`/profile/${handle}`)
|
||||
const onPressCancelSearch = () => {
|
||||
setQuery('')
|
||||
autocompleteView.setActive(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[pal.view, styles.container]}>
|
||||
<ViewHeader title="Search" />
|
||||
<CenteredView style={[pal.view, pal.border, styles.inputContainer]}>
|
||||
<MagnifyingGlassIcon style={[pal.text, styles.inputIcon]} />
|
||||
<TextInput
|
||||
testID="searchTextInput"
|
||||
ref={textInput}
|
||||
placeholder="Type your query here..."
|
||||
placeholderTextColor={pal.colors.textLight}
|
||||
selectTextOnFocus
|
||||
returnKeyType="search"
|
||||
style={[pal.text, styles.input]}
|
||||
onChangeText={onChangeQuery}
|
||||
/>
|
||||
</CenteredView>
|
||||
<View style={styles.outputContainer}>
|
||||
{query ? (
|
||||
<ScrollView testID="searchScrollView" onScroll={Keyboard.dismiss}>
|
||||
{autocompleteView.searchRes.map((item, i) => (
|
||||
<TouchableOpacity
|
||||
key={i}
|
||||
style={[pal.view, pal.border, styles.searchResult]}
|
||||
onPress={() => onSelect(item.handle)}>
|
||||
<UserAvatar
|
||||
handle={item.handle}
|
||||
displayName={item.displayName}
|
||||
avatar={item.avatar}
|
||||
size={36}
|
||||
/>
|
||||
<View style={[s.ml10]}>
|
||||
<Text type="title-sm" style={pal.text}>
|
||||
{item.displayName || item.handle}
|
||||
</Text>
|
||||
<Text style={pal.textLight}>@{item.handle}</Text>
|
||||
</View>
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||
<ScrollView
|
||||
ref={scrollElRef}
|
||||
testID="searchScrollView"
|
||||
style={[pal.view, styles.container]}
|
||||
onScroll={onMainScroll}
|
||||
scrollEventThrottle={100}>
|
||||
<View style={[pal.view, pal.border, styles.header]}>
|
||||
<TouchableOpacity
|
||||
testID="viewHeaderBackOrMenuBtn"
|
||||
onPress={onPressMenu}
|
||||
hitSlop={MENU_HITSLOP}
|
||||
style={styles.headerMenuBtn}>
|
||||
<UserAvatar
|
||||
size={30}
|
||||
handle={store.me.handle}
|
||||
displayName={store.me.displayName}
|
||||
avatar={store.me.avatar}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<View
|
||||
style={[
|
||||
{backgroundColor: pal.colors.backgroundLight},
|
||||
styles.headerSearchContainer,
|
||||
]}>
|
||||
<MagnifyingGlassIcon
|
||||
style={[pal.icon, styles.headerSearchIcon]}
|
||||
size={21}
|
||||
/>
|
||||
<TextInput
|
||||
testID="searchTextInput"
|
||||
ref={textInput}
|
||||
placeholder="Search"
|
||||
placeholderTextColor={pal.colors.textLight}
|
||||
selectTextOnFocus
|
||||
returnKeyType="search"
|
||||
value={query}
|
||||
style={[pal.text, styles.headerSearchInput]}
|
||||
onFocus={() => setIsInputFocused(true)}
|
||||
onBlur={() => setIsInputFocused(false)}
|
||||
onChangeText={onChangeQuery}
|
||||
/>
|
||||
</View>
|
||||
{query ? (
|
||||
<View style={styles.headerCancelBtn}>
|
||||
<TouchableOpacity onPress={onPressCancelSearch}>
|
||||
<Text>Cancel</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : undefined}
|
||||
</View>
|
||||
{query && autocompleteView.searchRes.length ? (
|
||||
<>
|
||||
{autocompleteView.searchRes.map(item => (
|
||||
<ProfileCard
|
||||
key={item.did}
|
||||
handle={item.handle}
|
||||
displayName={item.displayName}
|
||||
avatar={item.avatar}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
) : query && !autocompleteView.searchRes.length ? (
|
||||
<View>
|
||||
<Text style={[pal.textLight, styles.searchPrompt]}>
|
||||
No results found for {autocompleteView.prefix}
|
||||
</Text>
|
||||
</View>
|
||||
) : isInputFocused ? (
|
||||
<View>
|
||||
<Text style={[pal.textLight, styles.searchPrompt]}>
|
||||
Search for users on the network
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<ScrollView onScroll={Keyboard.dismiss}>
|
||||
<WhoToFollow key={`wtf-${lastRenderTime}`} />
|
||||
<SuggestedPosts key={`sp-${lastRenderTime}`} />
|
||||
<View style={s.footerSpacer} />
|
||||
</ScrollView>
|
||||
) : (
|
||||
<SuggestedFollows asLinks />
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<View style={s.footerSpacer} />
|
||||
</ScrollView>
|
||||
</TouchableWithoutFeedback>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
inputContainer: {
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 16,
|
||||
borderTopWidth: 1,
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 12,
|
||||
paddingTop: 4,
|
||||
marginBottom: 14,
|
||||
},
|
||||
inputIcon: {
|
||||
marginRight: 10,
|
||||
headerMenuBtn: {
|
||||
width: 40,
|
||||
height: 30,
|
||||
marginLeft: 6,
|
||||
},
|
||||
headerSearchContainer: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: 30,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
headerSearchIcon: {
|
||||
marginRight: 6,
|
||||
alignSelf: 'center',
|
||||
},
|
||||
input: {
|
||||
headerSearchInput: {
|
||||
flex: 1,
|
||||
fontSize: 16,
|
||||
fontSize: 17,
|
||||
},
|
||||
headerCancelBtn: {
|
||||
width: 60,
|
||||
paddingLeft: 10,
|
||||
},
|
||||
|
||||
outputContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
searchResult: {
|
||||
flexDirection: 'row',
|
||||
borderTopWidth: 1,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
searchPrompt: {
|
||||
textAlign: 'center',
|
||||
paddingTop: 10,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -7,17 +7,20 @@ import {
|
|||
} from 'react-native'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {useStores} from '../../state'
|
||||
import * as AppInfo from 'lib/app-info'
|
||||
import {useStores} from 'state/index'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {s} from '../lib/styles'
|
||||
import {s} from 'lib/styles'
|
||||
import {ScrollView} from '../com/util/Views'
|
||||
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'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {AccountData} from 'state/models/session'
|
||||
import {useAnalytics} from 'lib/analytics'
|
||||
import {DeleteAccountModal} from 'state/models/shell-ui'
|
||||
|
||||
export const Settings = observer(function Settings({
|
||||
navIdx,
|
||||
|
|
@ -25,8 +28,13 @@ export const Settings = observer(function Settings({
|
|||
}: ScreenParams) {
|
||||
const pal = usePalette('default')
|
||||
const store = useStores()
|
||||
const {screen, track} = useAnalytics()
|
||||
const [isSwitching, setIsSwitching] = React.useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
screen('Settings')
|
||||
}, [screen])
|
||||
|
||||
useEffect(() => {
|
||||
if (!visible) {
|
||||
return
|
||||
|
|
@ -36,22 +44,30 @@ export const Settings = observer(function Settings({
|
|||
}, [visible, store, navIdx])
|
||||
|
||||
const onPressSwitchAccount = async (acct: AccountData) => {
|
||||
track('Settings:SwitchAccountButtonClicked')
|
||||
setIsSwitching(true)
|
||||
if (await store.session.resumeSession(acct)) {
|
||||
setIsSwitching(false)
|
||||
store.nav.tab.fixedTabReset()
|
||||
Toast.show(`Signed in as ${acct.displayName || acct.handle}`)
|
||||
return
|
||||
}
|
||||
setIsSwitching(false)
|
||||
Toast.show('Sorry! We need you to enter your password.')
|
||||
store.nav.tab.fixedTabReset()
|
||||
store.session.clear()
|
||||
}
|
||||
const onPressAddAccount = () => {
|
||||
track('Settings:AddAccountButtonClicked')
|
||||
store.session.clear()
|
||||
}
|
||||
const onPressSignout = () => {
|
||||
track('Settings:SignOutButtonClicked')
|
||||
store.session.logout()
|
||||
}
|
||||
const onPressDeleteAccount = () => {
|
||||
store.shell.openModal(new DeleteAccountModal())
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[s.h100pct]} testID="settingsScreen">
|
||||
|
|
@ -143,22 +159,34 @@ export const Settings = observer(function Settings({
|
|||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={styles.spacer} />
|
||||
<Text type="sm-medium" style={[s.mb5]}>
|
||||
Danger zone
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={[pal.view, s.p10, s.mb10]}
|
||||
onPress={onPressDeleteAccount}>
|
||||
<Text style={pal.textLight}>Delete my account</Text>
|
||||
</TouchableOpacity>
|
||||
<Text type="sm-medium" style={[s.mt10, s.mb5]}>
|
||||
Developer tools
|
||||
</Text>
|
||||
<Link
|
||||
style={[pal.view, s.p10, s.mb2]}
|
||||
href="/sys/log"
|
||||
title="System log">
|
||||
<Text style={pal.link}>System log</Text>
|
||||
<Text style={pal.textLight}>System log</Text>
|
||||
</Link>
|
||||
<Link
|
||||
style={[pal.view, s.p10, s.mb2]}
|
||||
href="/sys/debug"
|
||||
title="Debug tools">
|
||||
<Text style={pal.link}>Storybook</Text>
|
||||
<Text style={pal.textLight}>Storybook</Text>
|
||||
</Link>
|
||||
<Text type="sm" style={[s.mt10, pal.textLight]}>
|
||||
Build version {AppInfo.appVersion} ({AppInfo.buildVersion})
|
||||
</Text>
|
||||
<View style={s.footerSpacer} />
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue