Skip to content

Commit

Permalink
remove legacy components
Browse files Browse the repository at this point in the history
  • Loading branch information
@mozzius
mozzius committed Jan 25, 2025
1 parent dc2dae5 commit 4a83fe4
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 139 deletions.
2 changes: 1 addition & 1 deletion src/alf/atoms.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const atoms = {
* Used for the outermost components on screens, to ensure that they can fill
* the screen and extend beyond.
*/
// @ts-ignore - web only minHeight string
// @ts-expect-error - web only minHeight string
util_screen_outer: [
web({
minHeight: '100vh',
Expand Down
193 changes: 55 additions & 138 deletions src/view/screens/Search/Search.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import React, {useLayoutEffect} from 'react'
import {
ActivityIndicator,
Image,
ImageStyle,
Pressable,
StyleProp,
StyleSheet,
TextInput,
View,
ViewStyle,
} from 'react-native'
import {ScrollView as RNGHScrollView} from 'react-native-gesture-handler'
import RNPickerSelect from 'react-native-picker-select'
Expand All @@ -16,10 +15,6 @@ import Animated, {
LinearTransition,
} from 'react-native-reanimated'
import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api'
import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import AsyncStorage from '@react-native-async-storage/async-storage'
Expand All @@ -29,8 +24,6 @@ import {APP_LANGUAGES, LANGUAGES} from '#/lib/../locale/languages'
import {createHitslop, HITSLOP_20} from '#/lib/constants'
import {HITSLOP_10} from '#/lib/constants'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
import {usePalette} from '#/lib/hooks/usePalette'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {MagnifyingGlassIcon} from '#/lib/icons'
import {makeProfileLink} from '#/lib/routes/links'
import {NavigationProp} from '#/lib/routes/types'
Expand Down Expand Up @@ -58,16 +51,18 @@ import {Post} from '#/view/com/post/Post'
import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
import {Link} from '#/view/com/util/Link'
import {List} from '#/view/com/util/List'
import {Text} from '#/view/com/util/text/Text'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {Explore} from '#/view/screens/Search/Explore'
import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search'
import {makeSearchQuery, parseSearchQuery} from '#/screens/Search/utils'
import {atoms as a, native, tokens, useBreakpoints, useTheme, web} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import * as FeedCard from '#/components/FeedCard'
import {SearchInput} from '#/components/forms/SearchInput'
import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
import * as Layout from '#/components/Layout'
import {Text} from '#/components/Typography'

function Loader() {
return (
Expand All @@ -80,13 +75,13 @@ function Loader() {
}

function EmptyState({message, error}: {message: string; error?: string}) {
const pal = usePalette('default')
const t = useTheme()

return (
<Layout.Content>
<View style={[a.p_xl]}>
<View style={[pal.viewLight, {padding: 18, borderRadius: 8}]}>
<Text style={[pal.text]}>{message}</Text>
<View style={[t.atoms.bg_contrast_25, a.rounded_sm, a.p_lg]}>
<Text style={[a.text_md]}>{message}</Text>

{error && (
<>
Expand All @@ -96,13 +91,13 @@ function EmptyState({message, error}: {message: string; error?: string}) {
marginVertical: 12,
height: 1,
width: '100%',
backgroundColor: pal.text.color,
backgroundColor: t.atoms.text.color,
opacity: 0.2,
},
]}
/>

<Text style={[pal.textLight]}>
<Text style={[t.atoms.text_contrast_medium]}>
<Trans>Error:</Trans> {error}
</Text>
</>
Expand Down Expand Up @@ -469,10 +464,10 @@ let SearchScreenInner = ({
queryWithParams: string
headerHeight: number
}): React.ReactNode => {
const pal = usePalette('default')
const t = useTheme()
const setMinimalShellMode = useSetMinimalShellMode()
const {hasSession} = useSession()
const {isDesktop} = useWebMediaQueries()
const {gtTablet} = useBreakpoints()
const [activeTab, setActiveTab] = React.useState(0)
const {_} = useLingui()

Expand Down Expand Up @@ -543,39 +538,29 @@ let SearchScreenInner = ({
<Explore />
) : (
<Layout.Center>
<View style={web({height: '100vh'})}>
{isDesktop && (
<Text
type="title"
<View style={a.flex_1}>
{gtTablet && (
<View
style={[
pal.text,
pal.border,
{
display: 'flex',
paddingVertical: 12,
paddingHorizontal: 18,
fontWeight: '600',
borderBottomWidth: 1,
},
a.border_b,
t.atoms.border_contrast_low,
a.px_lg,
a.pt_sm,
a.pb_lg,
]}>
<Trans>Search</Trans>
</Text>
<Text style={[a.text_2xl, a.font_heavy]}>
<Trans>Search</Trans>
</Text>
</View>
)}

<View
style={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 30,
gap: 15,
}}>
<View style={[a.align_center, a.justify_center, a.py_4xl, a.gap_lg]}>
<MagnifyingGlassIcon
strokeWidth={3}
size={isDesktop ? 60 : 60}
style={pal.textLight}
size={60}
style={t.atoms.text_contrast_medium as StyleProp<ViewStyle>}
/>
<Text type="xl" style={[pal.textLight, {paddingHorizontal: 18}]}>
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
<Trans>Find posts and users on Bluesky</Trans>
</Text>
</View>
Expand Down Expand Up @@ -1030,57 +1015,57 @@ function SearchHistory({
onRemoveItemClick: (item: string) => void
onRemoveProfileClick: (profile: AppBskyActorDefs.ProfileViewBasic) => void
}) {
const {isMobile} = useWebMediaQueries()
const pal = usePalette('default')
const {gtMobile} = useBreakpoints()
const t = useTheme()
const {_} = useLingui()

return (
<Layout.Content
keyboardDismissMode="interactive"
keyboardShouldPersistTaps="handled">
<View style={styles.searchHistoryContainer}>
<View style={[a.w_full, a.px_md]}>
{(searchHistory.length > 0 || selectedProfiles.length > 0) && (
<Text style={[pal.text, styles.searchHistoryTitle]}>
<Text style={[a.text_md, a.font_bold, a.p_md]}>
<Trans>Recent Searches</Trans>
</Text>
)}
{selectedProfiles.length > 0 && (
<View
style={[
styles.selectedProfilesContainer,
isMobile && styles.selectedProfilesContainerMobile,
!gtMobile && styles.selectedProfilesContainerMobile,
]}>
<RNGHScrollView
keyboardShouldPersistTaps="handled"
horizontal={true}
style={[
a.flex_row,
a.flex_nowrap,
{marginHorizontal: -tokens.space._2xl},
{marginHorizontal: tokens.space._2xl * -1},
]}
contentContainerStyle={[a.px_2xl, a.border_0]}>
{selectedProfiles.slice(0, 5).map((profile, index) => (
<View
key={index}
style={[
styles.profileItem,
isMobile && styles.profileItemMobile,
!gtMobile && styles.profileItemMobile,
]}>
<Link
href={makeProfileLink(profile)}
title={profile.handle}
asAnchor
anchorNoUnderline
onBeforePress={() => onProfileClick(profile)}
style={styles.profilePressable}>
<Image
source={{uri: profile.avatar}}
style={styles.profileAvatar as StyleProp<ImageStyle>}
accessibilityIgnoresInvertColors
style={[a.align_center, a.w_full]}>
<UserAvatar
avatar={profile.avatar}
type={profile.associated?.labeler ? 'labeler' : 'user'}
size={60}
/>
<Text
emoji
style={[pal.text, styles.profileName]}
style={[a.text_xs, a.text_center, styles.profileName]}
numberOfLines={1}>
{sanitizeDisplayName(
profile.displayName || profile.handle,
Expand All @@ -1096,46 +1081,33 @@ function SearchHistory({
onPress={() => onRemoveProfileClick(profile)}
hitSlop={createHitslop(6)}
style={styles.profileRemoveBtn}>
<FontAwesomeIcon
icon="xmark"
size={14}
style={pal.textLight as FontAwesomeIconStyle}
/>
<XIcon size="xs" style={t.atoms.text_contrast_low} />
</Pressable>
</View>
))}
</RNGHScrollView>
</View>
)}
{searchHistory.length > 0 && (
<View style={styles.searchHistoryContent}>
<View style={[a.pl_md, a.pr_xs, a.mt_md]}>
{searchHistory.slice(0, 5).map((historyItem, index) => (
<View
key={index}
style={[
a.flex_row,
a.mt_md,
a.justify_center,
a.justify_between,
]}>
<View key={index} style={[a.flex_row, a.align_center, a.mt_xs]}>
<Pressable
accessibilityRole="button"
onPress={() => onItemClick(historyItem)}
hitSlop={HITSLOP_10}
style={[a.flex_1, a.py_sm]}>
<Text style={pal.text}>{historyItem}</Text>
style={[a.flex_1, a.py_md]}>
<Text style={[a.text_md]}>{historyItem}</Text>
</Pressable>
<Pressable
accessibilityRole="button"
<Button
label={_(msg`Remove ${historyItem}`)}
onPress={() => onRemoveItemClick(historyItem)}
hitSlop={HITSLOP_10}
style={[a.px_md, a.py_xs, a.justify_center]}>
<FontAwesomeIcon
icon="xmark"
size={16}
style={pal.textLight as FontAwesomeIconStyle}
/>
</Pressable>
size="small"
variant="ghost"
color="secondary"
shape="round">
<ButtonIcon icon={XIcon} />
</Button>
</View>
))}
</View>
Expand All @@ -1152,41 +1124,6 @@ function scrollToTopWeb() {
}

const styles = StyleSheet.create({
headerMenuBtn: {
width: 30,
height: 30,
borderRadius: 30,
marginRight: 6,
alignItems: 'center',
justifyContent: 'center',
},
headerSearchContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
borderRadius: 30,
paddingHorizontal: 12,
paddingVertical: 8,
},
headerSearchIcon: {
marginRight: 6,
alignSelf: 'center',
},
headerSearchInput: {
flex: 1,
fontSize: 17,
minWidth: 0,
},
headerCancelBtn: {
paddingLeft: 10,
alignSelf: 'center',
zIndex: -1,
elevation: -1, // For Android
},
searchHistoryContainer: {
width: '100%',
paddingHorizontal: 12,
},
selectedProfilesContainer: {
marginTop: 10,
paddingHorizontal: 12,
Expand All @@ -1203,20 +1140,9 @@ const styles = StyleSheet.create({
profileItemMobile: {
width: 70,
},
profilePressable: {
alignItems: 'center',
width: '100%',
},
profileAvatar: {
width: 60,
height: 60,
borderRadius: 45,
},
profileName: {
width: 78,
fontSize: 12,
textAlign: 'center',
marginTop: 5,
marginTop: 6,
},
profileRemoveBtn: {
position: 'absolute',
Expand All @@ -1229,13 +1155,4 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
},
searchHistoryContent: {
paddingHorizontal: 10,
borderRadius: 8,
},
searchHistoryTitle: {
fontWeight: '600',
paddingVertical: 12,
paddingHorizontal: 10,
},
})

0 comments on commit 4a83fe4

Please sign in to comment.