acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

[🏁 #4] Starter packs tab on profile (#4331)

Browse Source 
* add a tab for starter packs

* replace with new card

* add icon to card

* rm log

* adjust padding

* add link wrapper

* fix params

* full width

* add QR code icon
This commit is contained in:
Hailey
2024-06-03 11:16:26 -07:00
committed by GitHub
parent 55c2ca5b92
commit 2d3ec9506c
6 changed files with 333 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/qrCode_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#080B12" fill-rule="evenodd" d="M3 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm6 0H5v4h4V5ZM3 15a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4Zm6 0H5v4h4v-4ZM13 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V5Zm6 0h-4v4h4V5ZM14 13a1 1 0 0 1 1 1v1h1a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Zm3 1a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-1v1a1 1 0 1 1-2 0v-2Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 580 B

src/components/StarterPack/ProfileStarterPacks.tsx
+193
View File
@@ -0,0 +1,193 @@
import React from 'react'
import {
findNodeHandle,
ListRenderItemInfo,
StyleProp,
View,
ViewStyle,
} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useQueryClient} from '@tanstack/react-query'
import {cleanError} from '#/lib/strings/errors'
import {useTheme} from '#/lib/ThemeContext'
import {logger} from '#/logger'
import {isNative} from '#/platform/detection'
import {hydrateFeedGenerator} from '#/state/queries/feed'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens'
import {usePalette} from 'lib/hooks/usePalette'
import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
import {List, ListRef} from 'view/com/util/List'
import {LoadMoreRetryBtn} from 'view/com/util/LoadMoreRetryBtn'
import {Text} from 'view/com/util/text/Text'
import {StarterPackCard} from '#/components/StarterPack/StarterPackCard'
const LOADING = {_reactKey: '__loading__'}
const EMPTY = {_reactKey: '__empty__'}
const ERROR_ITEM = {_reactKey: '__error__'}
const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
interface SectionRef {
scrollToTop: () => void
}
interface ProfileFeedgensProps {
did: string
scrollElRef: ListRef
headerOffset: number
enabled?: boolean
style?: StyleProp<ViewStyle>
testID?: string
setScrollViewTag: (tag: number | null) => void
}
export const ProfileStarterPacks = React.forwardRef<
SectionRef,
ProfileFeedgensProps
>(function ProfileFeedgensImpl(
{did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag},
ref,
) {
const pal = usePalette('default')
const {_} = useLingui()
const theme = useTheme()
const [isPTRing, setIsPTRing] = React.useState(false)
const opts = React.useMemo(() => ({enabled}), [enabled])
const {
data,
isFetching,
isFetched,
hasNextPage,
fetchNextPage,
isError,
error,
refetch,
} = useProfileFeedgensQuery(did, opts)
const isEmpty = !isFetching && !data?.pages[0]?.feeds.length
const {data: preferences} = usePreferencesQuery()
const items = React.useMemo(() => {
let items: any[] = []
if (isError && isEmpty) {
items = items.concat([ERROR_ITEM])
}
if (!isFetched && isFetching) {
items = items.concat([LOADING])
} else if (isEmpty) {
items = items.concat([EMPTY])
} else if (data?.pages) {
for (const page of data?.pages) {
items = items.concat(page.feeds.map(feed => hydrateFeedGenerator(feed)))
}
}
if (isError && !isEmpty) {
items = items.concat([LOAD_MORE_ERROR_ITEM])
}
return items
}, [isError, isEmpty, isFetched, isFetching, data])
const queryClient = useQueryClient()
const onScrollToTop = React.useCallback(() => {
scrollElRef.current?.scrollToOffset({
animated: isNative,
offset: -headerOffset,
})
queryClient.invalidateQueries({queryKey: RQKEY(did)})
}, [scrollElRef, queryClient, headerOffset, did])
React.useImperativeHandle(ref, () => ({
scrollToTop: onScrollToTop,
}))
const onRefresh = React.useCallback(async () => {
setIsPTRing(true)
try {
await refetch()
} catch (err) {
logger.error('Failed to refresh starter packs', {message: err})
}
setIsPTRing(false)
}, [refetch, setIsPTRing])
const onEndReached = React.useCallback(async () => {
if (isFetching || !hasNextPage || isError) return
try {
await fetchNextPage()
} catch (err) {
logger.error('Failed to load more starter packs', {message: err})
}
}, [isFetching, hasNextPage, isError, fetchNextPage])
const onPressRetryLoadMore = React.useCallback(() => {
fetchNextPage()
}, [fetchNextPage])
const renderItem = React.useCallback(
({item, index}: ListRenderItemInfo<any>) => {
if (item === EMPTY) {
return (
<View
testID="listsEmpty"
style={[{padding: 18, borderTopWidth: 1}, pal.border]}>
<Text style={pal.textLight}>
<Trans>You have no feeds.</Trans>
</Text>
</View>
)
} else if (item === ERROR_ITEM) {
return (
<ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} />
)
} else if (item === LOAD_MORE_ERROR_ITEM) {
return (
<LoadMoreRetryBtn
label={_(
msg`There was an issue fetching your lists. Tap here to try again.`,
)}
onPress={onPressRetryLoadMore}
/>
)
} else if (item === LOADING) {
return <FeedLoadingPlaceholder />
}
if (preferences) {
return <StarterPackCard hideTopBorder={index === 0} />
}
return null
},
[error, refetch, onPressRetryLoadMore, pal, preferences, _],
)
React.useEffect(() => {
if (enabled && scrollElRef.current) {
const nativeTag = findNodeHandle(scrollElRef.current)
setScrollViewTag(nativeTag)
}
}, [enabled, scrollElRef, setScrollViewTag])
return (
<View testID={testID} style={style}>
<List
testID={testID ? `${testID}-flatlist` : undefined}
ref={scrollElRef}
data={items}
keyExtractor={(item: any) => item._reactKey || item.uri}
renderItem={renderItem}
refreshing={isPTRing}
onRefresh={onRefresh}
headerOffset={headerOffset}
contentContainerStyle={isNative && {paddingBottom: headerOffset + 100}}
indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
removeClippedSubviews={true}
// @ts-ignore our .web version only -prf
desktopFixedHeight
onEndReached={onEndReached}
/>
</View>
)
})
src/components/StarterPack/StarterPackCard.tsx
+39
View File
@@ -0,0 +1,39 @@
import React from 'react'
import {View} from 'react-native'
import {atoms as a, useTheme} from '#/alf'
import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
import {Link} from '#/components/Link'
import {Text} from '#/components/Typography'
export function StarterPackCard({hideTopBorder}: {hideTopBorder?: boolean}) {
const t = useTheme()
return (
<Link to={{screen: 'StarterPack', params: {id: '123'}}}>
<View
style={[
a.flex_row,
a.w_full,
!hideTopBorder && a.border_t,
a.px_xl,
a.py_lg,
a.gap_md,
t.atoms.border_contrast_low,
]}>
<StarterPackIcon width={36} height={36} />
<View style={a.gap_md}>
<View>
<Text style={[a.font_bold, a.text_md]}>Science</Text>
<Text style={[t.atoms.text_contrast_medium]}>
Starter pack by @bossett.social
</Text>
</View>
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
380 users have joined!
</Text>
</View>
</View>
</Link>
)
}
src/components/icons/QrCode.tsx
+5
View File
@@ -0,0 +1,5 @@
import {createSinglePathSVG} from './TEMPLATE'
export const QrCode_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M3 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm6 0H5v4h4V5ZM3 15a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4Zm6 0H5v4h4v-4ZM13 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V5Zm6 0h-4v4h4V5ZM14 13a1 1 0 0 1 1 1v1h1a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Zm3 1a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-1v1a1 1 0 1 1-2 0v-2Z',
})
src/screens/StarterPack/Main/index.tsx
+47 -11
View File
@@ -8,11 +8,15 @@ import {CommonNavigatorParams} from 'lib/routes/types'
import {isWeb} from 'platform/detection'
import {PagerWithHeader} from 'view/com/pager/PagerWithHeader'
import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader'
import {EventStopper} from 'view/com/util/EventStopper'
import {CenteredView} from 'view/com/util/Views'
import {FeedsList} from '#/screens/StarterPack/Main/FeedsList'
import {ProfilesList} from '#/screens/StarterPack/Main/ProfilesList'
import {atoms as a} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
import {QrCode_Stroke2_Corner0_Rounded as QrCode} from '#/components/icons/QrCode'
import * as Menu from '#/components/Menu'
/**
* TEMPORARY CONTENT, DO NOT TRANSLATE
@@ -96,7 +100,7 @@ export function StarterPackScreen({}: NativeStackScreenProps<
// const {id} = route.params
return (
<CenteredView style={a.flex_1}>
<CenteredView style={[a.h_full_vh]}>
<StarterPackScreenInner />
</CenteredView>
)
@@ -148,16 +152,48 @@ function Header({isOwn}: {isOwn: boolean}) {
creator={undefined}
avatarType="starter-pack">
<View style={[a.flex_row, a.gap_sm]}>
<Button
label={_(msg`Share`)}
variant="solid"
color="primary"
size="small"
onPress={() => {}}>
<ButtonText>
<Trans>Share</Trans>
</ButtonText>
</Button>
<EventStopper onKeyDown={false}>
<Menu.Root>
<Menu.Trigger label={_(msg`Repost or quote post`)}>
{({props}) => {
return (
<Button
label={_(msg`Share`)}
variant="solid"
color="primary"
size="small"
{...props}>
<ButtonText>
<Trans>Share</Trans>
</ButtonText>
</Button>
)
}}
</Menu.Trigger>
<Menu.Outer style={{minWidth: 170}}>
<Menu.Group>
<Menu.Item
label={_(msg`Share link`)}
testID="shareStarterPackLinkBtn"
onPress={() => {}}>
<Menu.ItemText>
<Trans>Share link</Trans>
</Menu.ItemText>
<Menu.ItemIcon icon={ArrowOutOfBox} position="right" />
</Menu.Item>
<Menu.Item
label={_(msg`Create QR code`)}
testID="createQRCodeBtn"
onPress={() => {}}>
<Menu.ItemText>
<Trans>Create QR code</Trans>
</Menu.ItemText>
<Menu.ItemIcon icon={QrCode} position="right" />
</Menu.Item>
</Menu.Group>
</Menu.Outer>
</Menu.Root>
</EventStopper>
{isOwn && (
<Button
label={_(msg`Edit`)}
src/view/screens/Profile.tsx
+48 -49
View File
@@ -1,4 +1,4 @@
import React, {useMemo} from 'react'
import React, {useCallback, useMemo} from 'react'
import {StyleSheet} from 'react-native'
import {
AppBskyActorDefs,
@@ -34,6 +34,7 @@ import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header'
import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed'
import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels'
import {ScreenHider} from '#/components/moderation/ScreenHider'
import {ProfileStarterPacks} from '#/components/StarterPack/ProfileStarterPacks'
import {ExpoScrollForwarderView} from '../../../modules/expo-scroll-forwarder'
import {ProfileFeedgens} from '../com/feeds/ProfileFeedgens'
import {ProfileLists} from '../com/lists/ProfileLists'
@@ -162,6 +163,7 @@ function ProfileScreenLoaded({
const likesSectionRef = React.useRef<SectionRef>(null)
const feedsSectionRef = React.useRef<SectionRef>(null)
const listsSectionRef = React.useRef<SectionRef>(null)
const starterPacksSectionRef = React.useRef<SectionRef>(null)
const labelsSectionRef = React.useRef<SectionRef>(null)
useSetTitle(combinedDisplayName(profile))
@@ -183,31 +185,21 @@ function ProfileScreenLoaded({
const showMediaTab = !hasLabeler
const showLikesTab = isMe
const showFeedsTab = isMe || (profile.associated?.feedgens || 0) > 0
const showStarterPacksTab = isMe || true
const showListsTab =
hasSession && (isMe || (profile.associated?.lists || 0) > 0)
const sectionTitles = useMemo<string[]>(() => {
return [
showFiltersTab ? _(msg`Labels`) : undefined,
showListsTab && hasLabeler ? _(msg`Lists`) : undefined,
showPostsTab ? _(msg`Posts`) : undefined,
showRepliesTab ? _(msg`Replies`) : undefined,
showMediaTab ? _(msg`Media`) : undefined,
showLikesTab ? _(msg`Likes`) : undefined,
showFeedsTab ? _(msg`Feeds`) : undefined,
showListsTab && !hasLabeler ? _(msg`Lists`) : undefined,
].filter(Boolean) as string[]
}, [
showPostsTab,
showRepliesTab,
showMediaTab,
showLikesTab,
showFeedsTab,
showListsTab,
showFiltersTab,
hasLabeler,
_,
])
const sectionTitles = [
showFiltersTab ? _(msg`Labels`) : undefined,
showListsTab && hasLabeler ? _(msg`Lists`) : undefined,
showPostsTab ? _(msg`Posts`) : undefined,
showRepliesTab ? _(msg`Replies`) : undefined,
showMediaTab ? _(msg`Media`) : undefined,
showLikesTab ? _(msg`Likes`) : undefined,
showFeedsTab ? _(msg`Feeds`) : undefined,
showStarterPacksTab ? _(msg`Starter Packs`) : undefined,
showListsTab && !hasLabeler ? _(msg`Lists`) : undefined,
].filter(Boolean) as string[]
let nextIndex = 0
let filtersIndex: number | null = null
@@ -216,6 +208,7 @@ function ProfileScreenLoaded({
let mediaIndex: number | null = null
let likesIndex: number | null = null
let feedsIndex: number | null = null
let starterPacksIndex: number | null = null
let listsIndex: number | null = null
if (showFiltersTab) {
filtersIndex = nextIndex++
@@ -235,11 +228,14 @@ function ProfileScreenLoaded({
if (showFeedsTab) {
feedsIndex = nextIndex++
}
if (showStarterPacksTab) {
starterPacksIndex = nextIndex++
}
if (showListsTab) {
listsIndex = nextIndex++
}
const scrollSectionToTop = React.useCallback(
const scrollSectionToTop = useCallback(
(index: number) => {
if (index === filtersIndex) {
labelsSectionRef.current?.scrollToTop()
@@ -253,18 +249,21 @@ function ProfileScreenLoaded({
likesSectionRef.current?.scrollToTop()
} else if (index === feedsIndex) {
feedsSectionRef.current?.scrollToTop()
} else if (index === starterPacksIndex) {
starterPacksSectionRef.current?.scrollToTop()
} else if (index === listsIndex) {
listsSectionRef.current?.scrollToTop()
}
},
[
feedsIndex,
filtersIndex,
likesIndex,
listsIndex,
mediaIndex,
postsIndex,
repliesIndex,
mediaIndex,
likesIndex,
feedsIndex,
listsIndex,
starterPacksIndex,
],
)
@@ -290,7 +289,7 @@ function ProfileScreenLoaded({
// events
// =
const onPressCompose = React.useCallback(() => {
const onPressCompose = () => {
track('ProfileScreen:PressCompose')
const mention =
profile.handle === currentAccount?.handle ||
@@ -298,23 +297,20 @@ function ProfileScreenLoaded({
? undefined
: profile.handle
openComposer({mention})
}, [openComposer, currentAccount, track, profile])
}
const onPageSelected = React.useCallback((i: number) => {
const onPageSelected = (i: number) => {
setCurrentPage(i)
}, [])
}
const onCurrentPageSelected = React.useCallback(
(index: number) => {
scrollSectionToTop(index)
},
[scrollSectionToTop],
)
const onCurrentPageSelected = (index: number) => {
scrollSectionToTop(index)
}
// rendering
// =
const renderHeader = React.useCallback(() => {
const renderHeader = () => {
return (
<ExpoScrollForwarderView scrollViewTag={scrollViewTag}>
<ProfileHeader
@@ -327,16 +323,7 @@ function ProfileScreenLoaded({
/>
</ExpoScrollForwarderView>
)
}, [
scrollViewTag,
profile,
labelerInfo,
hasDescription,
descriptionRT,
moderationOpts,
hideBackButton,
showPlaceholder,
])
}
return (
<ScreenHider
@@ -442,6 +429,18 @@ function ProfileScreenLoaded({
/>
)
: null}
{showStarterPacksTab
? ({headerHeight, isFocused, scrollElRef}) => (
<ProfileStarterPacks
ref={starterPacksSectionRef}
did={profile.did}
scrollElRef={scrollElRef as ListRef}
headerOffset={headerHeight}
enabled={isFocused}
setScrollViewTag={setScrollViewTag}
/>
)
: null}
{showListsTab && !profile.associated?.labeler
? ({headerHeight, isFocused, scrollElRef}) => (
<ProfileLists