-
Notifications
You must be signed in to change notification settings - Fork 39
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'andrew_testing' of https://github.com/andrew-bierman/Pa…
…ckRat into feat/integrate_servers
- Loading branch information
Showing
15 changed files
with
336 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
145 changes: 145 additions & 0 deletions
145
packages/app/components/feedPreview/FeedPreviewCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| import { useState } from 'react'; | ||
| import { RText as OriginalRText, RStack } from '@packrat/ui'; | ||
| import { RLink } from '@packrat/ui'; | ||
| import { LayoutChangeEvent, View } from 'react-native'; | ||
| import useCustomStyles from 'app/hooks/useCustomStyles'; | ||
| import loadStyles from './feedpreview.style'; | ||
| import { AntDesign, MaterialIcons } from '@expo/vector-icons'; | ||
| import useTheme from 'app/hooks/useTheme'; | ||
| import { useItemWeightUnit } from 'app/hooks/items'; | ||
| import { convertWeight } from 'app/utils/convertWeight'; | ||
| import { formatNumber } from 'app/utils/formatNumber'; | ||
| import { hexToRGBA } from 'app/utils/colorFunctions'; | ||
|
|
||
| // TODO FeedItem is one of: trip, pack, similar pack & item | ||
| export type FeedItem = any; | ||
|
|
||
| interface FeedPreviewCardProps { | ||
| linkStr: string; | ||
| item: FeedItem; | ||
| } | ||
|
|
||
| const RText: any = OriginalRText; | ||
|
|
||
| const FeedPreviewCard: React.FC<FeedPreviewCardProps> = ({ linkStr, item }) => { | ||
| const { currentTheme } = useTheme(); | ||
| const styles = useCustomStyles(loadStyles); | ||
| const [weightUnit] = useItemWeightUnit(); | ||
| const formattedWeight = convertWeight(item.total_weight, 'g', weightUnit); | ||
| const [cardWidth, setCardWidth] = useState<number | undefined>(); | ||
|
|
||
| const handleSetCardWidth = (event: LayoutChangeEvent) => { | ||
| const { width } = event.nativeEvent.layout; | ||
| setCardWidth(width); | ||
| }; | ||
|
|
||
| return ( | ||
| <RLink href={linkStr}> | ||
| <View style={styles.cardStyles}> | ||
| <View | ||
| style={{ | ||
| backgroundColor: currentTheme.colors.cardIconColor, | ||
| width: '100%', | ||
| paddingLeft: 16, | ||
| alignSelf: 'stretch', | ||
| }} | ||
| > | ||
| <View | ||
| style={{ | ||
| backgroundColor: currentTheme.colors.primary, | ||
| padding: 4, | ||
| alignSelf: 'flex-start', | ||
| borderRadius: 8, | ||
| position: 'relative', | ||
| top: 16, | ||
| }} | ||
| > | ||
| <MaterialIcons | ||
| name="backpack" | ||
| size={24} | ||
| color={currentTheme.colors.cardIconColor} | ||
| /> | ||
| </View> | ||
| </View> | ||
| <View style={{ padding: 16 }}> | ||
| <RText style={[styles.feedItemTitle, { width: cardWidth }]}> | ||
| {item.name} | ||
| </RText> | ||
| <RStack | ||
| style={{ | ||
| flexDirection: 'row', | ||
| alignItems: 'start', | ||
| fontWeight: 500, | ||
| }} | ||
| gap="$4" | ||
| onLayout={handleSetCardWidth} | ||
| > | ||
| <RText | ||
| color={hexToRGBA(currentTheme.colors.text, 0.8)} | ||
| style={{ fontWeight: 'bold', lineHeight: 'normal' }} | ||
| > | ||
| {formatNumber(formattedWeight)} | ||
| {weightUnit} | ||
| </RText> | ||
| <View | ||
| style={{ | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| gap: 8, | ||
| }} | ||
| > | ||
| <AntDesign | ||
| name="heart" | ||
| size={16} | ||
| color={hexToRGBA(currentTheme.colors.text, 0.8)} | ||
| /> | ||
| <RText | ||
| color={hexToRGBA(currentTheme.colors.text, 0.8)} | ||
| style={{ fontWeight: 'bold', lineHeight: 'normal' }} | ||
| > | ||
| {item.favorites_count} | ||
| </RText> | ||
| </View> | ||
| <View | ||
| style={{ | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| gap: 8, | ||
| }} | ||
| > | ||
| <AntDesign | ||
| name="clockcircle" | ||
| size={16} | ||
| color={hexToRGBA(currentTheme.colors.text, 0.8)} | ||
| /> | ||
| <RText | ||
| color={hexToRGBA(currentTheme.colors.text, 0.8)} | ||
| style={{ fontWeight: 'bold', lineHeight: 'normal' }} | ||
| > | ||
| {new Date(item.createdAt).toLocaleString('en-US', { | ||
| month: 'short', | ||
| day: '2-digit', | ||
| ...(new Date(item.createdAt).getFullYear() == | ||
| new Date().getFullYear() | ||
| ? {} | ||
| : { year: 'numeric' }), | ||
| })} | ||
| </RText> | ||
| </View> | ||
| <RText | ||
| color={hexToRGBA(currentTheme.colors.text, 0.8)} | ||
| style={{ fontWeight: 'bold', lineHeight: 'normal' }} | ||
| > | ||
| Ttl Score: {item.total_score} | ||
| </RText> | ||
| </RStack> | ||
| {/* <RText style={{ color: styles.feedItemType.color }}> | ||
| {item.description} | ||
| </RText> */} | ||
| </View> | ||
| </View> | ||
| </RLink> | ||
| ); | ||
| }; | ||
|
|
||
| export default FeedPreviewCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import React from 'react'; | ||
| import Carousel from '../carousel'; | ||
| import { useFeed } from 'app/hooks/feed'; | ||
| import { default as FeedPreviewCard, type FeedItem } from './FeedPreviewCard'; | ||
|
|
||
| interface FeedPreviewScrollProps { | ||
| itemWidth: number; | ||
| feedType: string; | ||
| id?: string; | ||
| } | ||
|
|
||
| const FeedPreviewScroll: React.FC<FeedPreviewScrollProps> = ({ | ||
| itemWidth, | ||
| feedType, | ||
| id, | ||
| }) => { | ||
| const { data: feedData } = useFeed({ feedType, id }); | ||
|
|
||
| return ( | ||
| <Carousel itemWidth={itemWidth}> | ||
| {feedData | ||
| ?.filter((item): item is FeedItem => item.type !== null) | ||
| .map((item: FeedItem) => { | ||
| const linkStr = `/${item.type}/${item.id}`; | ||
| return linkStr ? ( | ||
| <FeedPreviewCard {...{ linkStr, item }} key={linkStr} /> | ||
| ) : null; | ||
| })} | ||
| </Carousel> | ||
| ); | ||
| }; | ||
|
|
||
| const FeedPreview: React.FC<{ feedType: string; id?: string }> = ({ | ||
| feedType, | ||
| id, | ||
| }) => { | ||
| return <FeedPreviewScroll itemWidth={200} feedType={feedType} id={id} />; | ||
| }; | ||
| export default FeedPreview; |
Oops, something went wrong.