Merge pull request #1153 from andrew-bierman/feat/show-similar-packs-…

…and-items

Feat/show similar packs

packages/app/components/feedPreview/FeedPreviewCard.tsx

@@ -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;

packages/app/components/dashboard/feedpreview.style.tsx → packages/app/components/feedPreview/feedpreview.style.tsx

@@ -7,11 +7,9 @@ const loadStyles = (theme: any, appTheme: any) => {
       marginBottom: 20,
     },
     cardStyles: {
-      height: 100,
-      width: '100%',
       backgroundColor: appTheme.colors.primary,
-      borderRadius: 5,
-      padding: 20,
+      borderRadius: 8,
+      overflow: 'hidden',
     },
     feedItem: {
       width: 250,
@@ -25,16 +23,12 @@ const loadStyles = (theme: any, appTheme: any) => {
     },
     feedItemTitle: {
       fontWeight: 'bold',
-      fontSize: 17,
-      color: currentTheme.colors.text,
-      marginBottom: 5,
-    },
-    feedItemType: {
-      fontWeight: 'bold',
-      fontSize: 16,
+      fontSize: 18,
       color: currentTheme.colors.text,
-      backgroundColor: currentTheme.colors.background,
-      marginBottom: 5,
+      marginBottom: 12,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
     },
   };
 };

packages/app/components/feedPreview/index.tsx

@@ -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;

packages/app/components/layout/Layout.tsx

@@ -1,17 +1,27 @@
+import { StyleProp, ViewStyle } from 'react-native';
 import { View } from 'react-native';
 
-const Layout = ({ children }) => {
+const Layout = ({
+  children,
+  customStyle = {},
+}: {
+  children: React.ReactNode;
+  customStyle?: StyleProp<ViewStyle>;
+}) => {
   return (
     <View
-      style={{
-        display: 'flex',
-        flex: 1,
-        justifyContent: 'center',
-        marginTop: 20,
-        alignItems: 'center',
-        backgroundColor: 'transparent',
-        width: '100%',
-      }}
+      style={[
+        {
+          display: 'flex',
+          flex: 1,
+          justifyContent: 'center',
+          marginTop: 20,
+          alignItems: 'center',
+          backgroundColor: 'transparent',
+          width: '100%',
+        },
+        customStyle,
+      ]}
     >
       {children}
     </View>