zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

create algo-item model and redefine data models

Browse source
This commit is contained in:
Ansh Nanda 2023-05-13 11:59:08 -07:00
parent c24389df87
commit 047024a5ac
7 changed files with 144 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

93
src/view/com/algos/AlgoItem.tsx
View file

@ -1,41 +1,62 @@
import React from 'react'
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
import {Text} from '../util/text/Text'
import {AppBskyFeedDefs} from '@atproto/api'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
import {UserAvatar} from '../util/UserAvatar'
import {Button} from '../util/forms/Button'
import {observer} from 'mobx-react-lite'
import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
const AlgoItem = ({
item,
style,
}: {
item: AppBskyFeedDefs.GeneratorView
style?: StyleProp<ViewStyle>
}) => {
const pal = usePalette('default')
return (
<View style={[styles.container, style]} key={item.uri}>
<View style={[styles.headerContainer]}>
<View style={[s.mr20]}>
<UserAvatar size={56} avatar={item.avatar} />
const AlgoItem = observer(
({item, style}: {item: AlgoItemModel; style?: StyleProp<ViewStyle>}) => {
const pal = usePalette('default')
return (
<View style={[styles.container, style]} key={item.data.uri}>
<View style={[styles.headerContainer]}>
<View style={[s.mr10]}>
<UserAvatar size={36} avatar={item.data.avatar} />
</View>
<View style={[styles.headerTextContainer]}>
<Text style={[pal.text, s.bold]}>
{item.data.displayName ?? 'Feed name'}
</Text>
<Text style={[pal.textLight, styles.description]}>
{item.data.description ??
'THIS IS A FEED DESCRIPTION, IT WILL TELL YOU WHAT THE FEED IS ABOUT. THIS IS A COOL FEED ABOUT COOL PEOPLE.'}
</Text>
</View>
</View>
<View style={[styles.headerTextContainer]}>
<Text style={[pal.text, s.bold]}>
{item.displayName ?? 'Feed name'}
</Text>
<Text style={[pal.textLight, styles.description]}>
{item.description ??
'THIS IS A FEED DESCRIPTION, IT WILL TELL YOU WHAT THE FEED IS ABOUT. THIS IS A COOL FEED ABOUT COOL PEOPLE.'}
</Text>
{/* TODO: this feed is like by *3* people UserAvatars and others */}
<View style={styles.bottomContainer}>
<View style={styles.likedByContainer}>
<View style={styles.likedByAvatars}>
<UserAvatar size={24} avatar={item.data.avatar} />
<UserAvatar size={24} avatar={item.data.avatar} />
<UserAvatar size={24} avatar={item.data.avatar} />
</View>
<Text style={[pal.text, pal.textLight]}>Liked by 3 others</Text>
</View>
<View>
<Button
type="inverted"
onPress={() => {
if (item.data.viewer?.saved) {
item.unsave()
} else {
item.save()
}
}}
label={item.data.viewer?.saved ? 'Unsave' : 'Save'}
/>
</View>
</View>
</View>
{/* TODO: this feed is like by *3* people UserAvatars and others */}
</View>
)
}
)
},
)
export default AlgoItem
const styles = StyleSheet.create({
@ -43,10 +64,10 @@ const styles = StyleSheet.create({
paddingHorizontal: 18,
paddingVertical: 20,
flexDirection: 'column',
columnGap: 36,
flex: 1,
borderTopWidth: 1,
borderTopColor: '#E5E5E5',
gap: 18,
},
headerContainer: {
flexDirection: 'row',
@ -60,4 +81,18 @@ const styles = StyleSheet.create({
flex: 1,
flexWrap: 'wrap',
},
bottomContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
likedByContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 2,
},
likedByAvatars: {
flexDirection: 'row',
gap: -12,
},
})

3
src/view/com/util/post-embeds/index.tsx
View file

@ -26,6 +26,7 @@ import {getYoutubeVideoId} from 'lib/strings/url-helpers'
import QuoteEmbed from './QuoteEmbed'
import {AutoSizedImage} from '../images/AutoSizedImage'
import AlgoItem from 'view/com/algos/AlgoItem'
import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
type Embed =
| AppBskyEmbedRecord.View
@ -171,7 +172,7 @@ export function PostEmbeds({
) {
return (
<AlgoItem
item={embed.record}
item={new AlgoItemModel(store, embed.record)}
style={[pal.view, pal.border, styles.extOuter]}
/>
)