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

[🏁 #3] Logged-in Starter Pack View (#4292)

Browse Source 
* minimal landing page

add a minimal gate

remove overlap row

add bg to avatar set

implement basic mock up

add header of mock

add route

* add navigation

* create starter pack landing page

* add state reducer

* make value an array

* implement state w/ steps

* add back the flex

* view header back button

* add button text

* add button text

* add details screen

* add button states

* proper use of button

* oops

* rm extra state

* use keyboard aware scrollview

* rm log

* remove some stuff

* remove avatar from landing

* add list for profiles

* add profile card w/ button

* add feeds

* add processing state

* support editing a pack

* fix undefined error

* add logged-in view routes

* fix navigation link

* add dummy button to settings

* add starter pack screen

* update prop

* add a pager for starter packs

* add placeholder for feeds

* add share/edit buttons

* tsignore for now, fix merge issues
This commit is contained in:
Hailey
2024-06-02 18:41:41 -07:00
committed by GitHub
parent 30686702a6
commit 55c2ca5b92
10 changed files with 355 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Navigation.tsx
+10 -2
View File
@@ -43,7 +43,8 @@ import {SavedFeeds} from 'view/screens/SavedFeeds'
import HashtagScreen from '#/screens/Hashtag'
import {ModerationScreen} from '#/screens/Moderation'
import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
import {Landing} from '#/screens/StarterPack/Landing'
import {LandingScreen} from '#/screens/StarterPack/Landing'
import {StarterPackScreen} from '#/screens/StarterPack/Main'
import {Wizard} from '#/screens/StarterPack/Wizard'
import {init as initAnalytics} from './lib/analytics/analytics'
import {useWebScrollRestoration} from './lib/hooks/useWebScrollRestoration'
@@ -308,9 +309,16 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
getComponent={() => MessagesSettingsScreen}
options={{title: title(msg`Chat settings`), requireAuth: true}}
/>
<Stack.Screen
// TODO figure out what is up with this
// @ts-ignore what the absolute fuck is going on here??
name="StarterPack"
getComponent={() => StarterPackScreen}
options={{title: title(msg`Starter Pack`), requireAuth: true}}
/>
<Stack.Screen
name="StarterPackLanding"
getComponent={() => Landing}
getComponent={() => LandingScreen}
options={{title: title(msg`Join Bluesky Today!`)}}
/>
<Stack.Screen
src/lib/hooks/useBottomBarOffset.ts
+5 -2
View File
@@ -4,8 +4,11 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {clamp} from 'lib/numbers'
import {isWeb} from 'platform/detection'
export function useBottomBarOffset() {
export function useBottomBarOffset(modifier: number = 0) {
const {isTabletOrDesktop} = useWebMediaQueries()
const {bottom: bottomInset} = useSafeAreaInsets()
return isWeb && isTabletOrDesktop ? 0 : clamp(60 + bottomInset, 60, 75)
return (
(isWeb && isTabletOrDesktop ? 0 : clamp(60 + bottomInset, 60, 75)) +
modifier
)
}
src/lib/routes/types.ts
+1
View File
@@ -40,6 +40,7 @@ export type CommonNavigatorParams = {
Hashtag: {tag: string; author?: string}
MessagesConversation: {conversation: string; embed?: string}
MessagesSettings: undefined
StarterPack: {id: string}
StarterPackLanding: {id: string}
StarterPackWizard: {
mode: 'Create' | 'Edit'
src/routes.ts
+1
View File
@@ -40,6 +40,7 @@ export const router = new Router({
Messages: '/messages',
MessagesSettings: '/messages/settings',
MessagesConversation: '/messages/:conversation',
StarterPack: '/starter-pack/:id',
StarterPackLanding: '/start/:id',
StarterPackWizard: '/starter-pack/create',
})
src/screens/StarterPack/Landing.tsx → src/screens/StarterPack/Landing/index.tsx
+17 -11
View File
@@ -5,7 +5,6 @@ import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {NativeStackScreenProps} from '@react-navigation/native-stack'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {CommonNavigatorParams} from 'lib/routes/types'
import {useGate} from 'lib/statsig/statsig'
import {useSetMinimalShellMode} from 'state/shell'
@@ -72,13 +71,12 @@ const PLACEHOLDER_USERS = [
},
]
export function Landing({
export function LandingScreen({
navigation,
}: NativeStackScreenProps<CommonNavigatorParams, 'StarterPackLanding'>) {
const {_} = useLingui()
const gate = useGate()
const t = useTheme()
const {isTabletOrDesktop} = useWebMediaQueries()
const setMinimalShellMode = useSetMinimalShellMode()
const gradient =
t.name === 'light'
@@ -93,7 +91,14 @@ export function Landing({
}, [])
React.useEffect(() => {
if (!gate('starter_packs_enabled')) {
// @ts-expect-error idk
navigation.replace('Home')
return
}
setMinimalShellMode(true)
return () => {
setMinimalShellMode(false)
}
@@ -120,21 +125,22 @@ export function Landing({
</View>
</LinearGradient>
<View style={[a.gap_md, a.mt_lg, a.mx_lg]}>
{/* TODO only display this when the total count is > 50 */}
<Text style={[a.text_md, a.text_center]}>186 joined this week!</Text>
<Text
style={[a.text_md, a.text_center, t.atoms.text_contrast_medium]}>
186 joined this week
</Text>
<Button
label={_(msg`Join Bluesky`)}
label={_(msg`Join Bluesky now`)}
onPress={() => {}}
variant="solid"
color="primary"
size="large"
style={[isTabletOrDesktop && {width: 200, alignSelf: 'center'}]}>
size="large">
<ButtonText style={[a.text_lg]}>
<Trans>Join Bluesky</Trans>
<Trans>Join Bluesky now</Trans>
</ButtonText>
</Button>
<View style={[a.gap_xl, a.mt_md]}>
<Text style={[a.text_md]}>
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
(This is the description) A collection of feeds and users to get
you started with the science community on Bluesky!
</Text>
@@ -162,7 +168,7 @@ export function Landing({
t.atoms.bg_contrast_25,
a.rounded_sm,
a.px_xs,
a.py_xl,
a.py_md,
a.gap_xl,
]}>
<UserSet users={userSets.first} />
src/screens/StarterPack/Main/FeedsList.tsx
+54
View File
@@ -0,0 +1,54 @@
import React, {useCallback} from 'react'
import {View} from 'react-native'
import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
import {isNative} from 'platform/detection'
import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
import {List, ListRef} from 'view/com/util/List'
import {SectionRef} from '#/screens/Profile/Sections/types'
function renderItem({item}: {item: string}) {
return <FeedSourceCard feedUri={item} />
}
function keyExtractor(item: string) {
return item
}
interface ProfilesListProps {
feeds: string[]
headerHeight: number
scrollElRef: ListRef
}
export const FeedsList = React.forwardRef<SectionRef, ProfilesListProps>(
function FeedsListImpl({feeds, headerHeight, scrollElRef}, ref) {
const [initialHeaderHeight] = React.useState(headerHeight)
const bottomBarOffset = useBottomBarOffset(20)
const onScrollToTop = useCallback(() => {
scrollElRef.current?.scrollToOffset({
animated: isNative,
offset: -headerHeight,
})
}, [scrollElRef, headerHeight])
React.useImperativeHandle(ref, () => ({
scrollToTop: onScrollToTop,
}))
return (
<List
data={feeds}
renderItem={renderItem}
keyExtractor={keyExtractor}
ref={scrollElRef}
headerOffset={headerHeight}
ListFooterComponent={
<View style={[{height: initialHeaderHeight + bottomBarOffset}]} />
}
showsVerticalScrollIndicator={false}
/>
)
},
)
src/screens/StarterPack/Main/ProfilesList.tsx
+55
View File
@@ -0,0 +1,55 @@
import React, {useCallback} from 'react'
import {View} from 'react-native'
import {AppBskyActorDefs} from '@atproto/api'
import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
import {isNative} from 'platform/detection'
import {ProfileCardWithFollowBtn} from 'view/com/profile/ProfileCard'
import {List, ListRef} from 'view/com/util/List'
import {SectionRef} from '#/screens/Profile/Sections/types'
function renderItem({item}: {item: AppBskyActorDefs.ProfileViewBasic}) {
return <ProfileCardWithFollowBtn profile={item} />
}
function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic, index: number) {
return `${item.did}-${index}`
}
interface ProfilesListProps {
profiles: AppBskyActorDefs.ProfileViewBasic[]
headerHeight: number
scrollElRef: ListRef
}
export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
function ProfilesListImpl({profiles, headerHeight, scrollElRef}, ref) {
const [initialHeaderHeight] = React.useState(headerHeight)
const bottomBarOffset = useBottomBarOffset(20)
const onScrollToTop = useCallback(() => {
scrollElRef.current?.scrollToOffset({
animated: isNative,
offset: -headerHeight,
})
}, [scrollElRef, headerHeight])
React.useImperativeHandle(ref, () => ({
scrollToTop: onScrollToTop,
}))
return (
<List
data={profiles}
renderItem={renderItem}
keyExtractor={keyExtractor}
ref={scrollElRef}
headerOffset={headerHeight}
ListFooterComponent={
<View style={[{height: initialHeaderHeight + bottomBarOffset}]} />
}
showsVerticalScrollIndicator={false}
/>
)
},
)
src/screens/StarterPack/Main/index.tsx
+183
View File
@@ -0,0 +1,183 @@
import React from 'react'
import {Text, View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {NativeStackScreenProps} from '@react-navigation/native-stack'
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 {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'
/**
* TEMPORARY CONTENT, DO NOT TRANSLATE
*/
/**
* TEMPORARY CONTENT, DO NOT TRANSLATE
*/
/**
* TEMPORARY CONTENT, DO NOT TRANSLATE
*/
const PLACEHOLDER_USERS = [
{
did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
handle: 'test.handle',
displayName: 'Bossett',
avatar:
'https://cdn.bsky.app/img/avatar/plain/did:plc:jfhpnnst6flqway4eaeqzj2a/bafkreid42e2su4sju7hl2nm4ouacw3icvvytf7r6gab3pvc2qxhqhc5ji4@jpeg',
},
{
did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
handle: 'test.handle',
displayName: 'hailey',
avatar:
'https://cdn.bsky.app/img/avatar/plain/did:plc:oisofpd7lj26yvgiivf3lxsi/bafkreia4lpswywb5yx3gsezqb5io73kt7icw634ks4m4mmbfvp7e62cxku@jpeg',
},
{
did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
handle: 'test.handle',
displayName: 'samuel',
avatar:
'https://cdn.bsky.app/img/avatar/plain/did:plc:p2cp5gopk7mgjegy6wadk3ep/bafkreias5vktko4jpg4mwp4audptcbdfkb4o3cfyzt4426mj2h7ewwvg7q@jpeg',
},
{
did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
handle: 'test.handle',
displayName: 'Paul “Frazee” 🦋',
avatar:
'https://cdn.bsky.app/img/avatar/plain/did:plc:ragtjsm2j2vknwkz3zp4oxrd/bafkreihhpqdyntku66himwor5wlhtdo44hllmngj2ofmbqnm25bdm454wq@jpeg',
},
{
did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
handle: 'test.handle',
displayName: 'Jay',
avatar:
'https://cdn.bsky.app/img/avatar/plain/did:plc:oky5czdrnfjpqslsw2a5iclo/bafkreihidru2xruxdxlvvcixc7lbgoudzicjbrdgacdhdhxyfw4yut4nfq@jpeg',
},
{
did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
handle: 'test.handle',
displayName: 'Emily 🦋',
avatar:
'https://cdn.bsky.app/img/avatar/plain/did:plc:vjug55kidv6sye7ykr5faxxn/bafkreia63347vwjt4sgfkedgvytodt22ugfck5o36qotwaflsf3qq5xj3y@jpeg',
},
{
did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
handle: 'test.handle',
displayName: 'Rose 🌹',
avatar:
'https://cdn.bsky.app/img/avatar/plain/did:plc:qjeavhlw222ppsre4rscd3n2/bafkreiehdi7v7bmz64anqam72ybtkkeodfe22sh7dcsh7m6wei2cf5liye@jpeg',
},
{
did: 'did:plc:qjeavhlw222ppsre4rscd3n2',
handle: 'test.handle',
displayName: 'dan',
avatar:
'https://cdn.bsky.app/img/avatar/plain/did:plc:fpruhuo22xkm5o7ttr2ktxdo/bafkreif65cz6sp4cvwue6dnsy7lhy7o7vdelknwd6hermcbzg2npealz5q@jpeg',
},
]
const PLACEHOLDER_FEEDS = [
'at://did:plc:jfhpnnst6flqway4eaeqzj2a/app.bsky.feed.generator/for-science',
'at://did:plc:upmfcx5muayjhkg5sltj625o/app.bsky.feed.generator/aaachrckxlsh2',
]
export function StarterPackScreen({}: NativeStackScreenProps<
CommonNavigatorParams,
'StarterPackLanding'
>) {
// const {id} = route.params
return (
<CenteredView style={a.flex_1}>
<StarterPackScreenInner />
</CenteredView>
)
}
function StarterPackScreenInner() {
const isOwn = true
return (
<View style={isWeb ? {minHeight: '100%'} : {height: '100%'}}>
<PagerWithHeader
items={['Profiles', 'Feeds']}
isHeaderReady={true}
renderHeader={() => <Header isOwn={isOwn} />}>
{({headerHeight, scrollElRef}) => (
<ProfilesList
key={0}
profiles={PLACEHOLDER_USERS}
headerHeight={headerHeight}
// @ts-expect-error
scrollElRef={scrollElRef}
/>
)}
{({headerHeight, scrollElRef}) => (
<FeedsList
key={1}
feeds={PLACEHOLDER_FEEDS}
headerHeight={headerHeight}
// @ts-expect-error
scrollElRef={scrollElRef}
/>
)}
</PagerWithHeader>
</View>
)
}
function Header({isOwn}: {isOwn: boolean}) {
const {_} = useLingui()
return (
<>
<ProfileSubpageHeader
isLoading={false}
href=""
title="Science"
isOwner={false}
avatar={undefined}
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>
{isOwn && (
<Button
label={_(msg`Edit`)}
variant="solid"
color="secondary"
size="small"
onPress={() => {}}>
<ButtonText>
<Trans>Edit</Trans>
</ButtonText>
</Button>
)}
</View>
</ProfileSubpageHeader>
<View style={[a.px_md, a.py_lg]}>
<Text style={[a.text_md]}>
(This is the description) A collection of feeds and users to get you
started with the science community on Bluesky!
</Text>
</View>
</>
)
}
src/view/com/profile/ProfileSubpageHeader.tsx
+7 -2
View File
@@ -21,6 +21,7 @@ import {Text} from '../util/text/Text'
import {UserAvatar, UserAvatarType} from '../util/UserAvatar'
import {CenteredView} from '../util/Views'
import hairlineWidth = StyleSheet.hairlineWidth
import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
export function ProfileSubpageHeader({
isLoading,
@@ -43,7 +44,7 @@ export function ProfileSubpageHeader({
handle: string
}
| undefined
avatarType: UserAvatarType
avatarType: UserAvatarType | 'starter-pack'
}>) {
const setDrawerOpen = useSetDrawerOpen()
const navigation = useNavigation<NavigationProp>()
@@ -130,7 +131,11 @@ export function ProfileSubpageHeader({
accessibilityLabel={_(msg`View the avatar`)}
accessibilityHint=""
style={{width: 58}}>
<UserAvatar type={avatarType} size={58} avatar={avatar} />
{avatarType === 'starter-pack' ? (
<StarterPackIcon width={58} height={58} />
) : (
<UserAvatar type={avatarType} size={58} avatar={avatar} />
)}
</Pressable>
<View style={{flex: 1}}>
{isLoading ? (
src/view/screens/Settings/index.tsx
+22 -10
View File
@@ -854,6 +854,28 @@ export function SettingsScreen({}: Props) {
<Trans>Reset preferences state</Trans>
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[pal.view, styles.linkCardNoIcon]}
onPress={() => onPressDeleteChatDeclaration()}
accessibilityRole="button"
accessibilityLabel={_(msg`Delete chat declaration record`)}
accessibilityHint={_(msg`Deletes the chat declaration record`)}>
<Text type="lg" style={pal.text}>
<Trans>Delete chat declaration record</Trans>
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[pal.view, styles.linkCardNoIcon]}
onPress={() => {
navigation.navigate('StarterPack', {id: '123'})
}}
accessibilityRole="button"
accessibilityLabel={_(msg`Navigate to Starter Pack`)}
accessibilityHint={_(msg`Navigate to Starter Pack`)}>
<Text type="lg" style={pal.text}>
<Trans>Navigate to Starter Pack</Trans>
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[pal.view, styles.linkCardNoIcon]}
onPress={() => {
@@ -866,16 +888,6 @@ export function SettingsScreen({}: Props) {
<Trans>Navigate to Starter Pack Landing</Trans>
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[pal.view, styles.linkCardNoIcon]}
onPress={() => onPressDeleteChatDeclaration()}
accessibilityRole="button"
accessibilityLabel={_(msg`Delete chat declaration record`)}
accessibilityHint={_(msg`Deletes the chat declaration record`)}>
<Text type="lg" style={pal.text}>
<Trans>Delete chat declaration record</Trans>
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[pal.view, styles.linkCardNoIcon]}
onPress={() =>