✨ feat(ui): show similar items v2

packages/app/components/feedPreview/FeedPreviewCard.tsx

@@ -4,7 +4,7 @@ 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 { AntDesign, Fontisto, MaterialIcons } from '@expo/vector-icons';
 import useTheme from 'app/hooks/useTheme';
 import { useItemWeightUnit } from 'app/hooks/items';
 import { convertWeight } from 'app/utils/convertWeight';
@@ -17,22 +17,118 @@ export type FeedItem = any;
 interface FeedPreviewCardProps {
   linkStr: string;
   item: FeedItem;
+  feedType: string;
 }
 
 const RText: any = OriginalRText;
 
-const FeedPreviewCard: React.FC<FeedPreviewCardProps> = ({ linkStr, item }) => {
+const FeedPreviewCard: React.FC<FeedPreviewCardProps> = ({
+  linkStr,
+  item,
+  feedType,
+}) => {
   const { currentTheme } = useTheme();
   const styles = useCustomStyles(loadStyles);
   const [weightUnit] = useItemWeightUnit();
-  const formattedWeight = convertWeight(item.total_weight, 'g', weightUnit);
+  const formattedWeight = convertWeight(
+    item.total_weight ?? item.weight,
+    item.unit ?? 'g',
+    weightUnit,
+  );
   const [cardWidth, setCardWidth] = useState<number | undefined>();
 
   const handleSetCardWidth = (event: LayoutChangeEvent) => {
     const { width } = event.nativeEvent.layout;
     setCardWidth(width);
   };
 
+  if (feedType == 'similarItems') {
+    return (
+      <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,
+            }}
+          >
+            <Fontisto
+              name="tent"
+              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="$6"
+            onLayout={handleSetCardWidth}
+          >
+            <RText
+              color={hexToRGBA(currentTheme.colors.text, 0.8)}
+              style={{ fontWeight: 'bold', lineHeight: 'normal' }}
+            >
+              {formatNumber(formattedWeight)}
+              {weightUnit}
+            </RText>
+
+            <RText
+              color={hexToRGBA(currentTheme.colors.text, 0.8)}
+              style={{ fontWeight: 'bold', lineHeight: 'normal' }}
+            >
+              Qty: {item.quantity}
+            </RText>
+            <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>
+          </RStack>
+        </View>
+      </View>
+    );
+  }
+
   return (
     <RLink href={linkStr}>
       <View style={styles.cardStyles}>

packages/app/components/feedPreview/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Carousel from '../carousel';
 import { useFeed } from 'app/hooks/feed';
 import { default as FeedPreviewCard, type FeedItem } from './FeedPreviewCard';
+import Loader from 'app/components/Loader';
 
 interface FeedPreviewScrollProps {
   itemWidth: number;
@@ -14,16 +15,18 @@ const FeedPreviewScroll: React.FC<FeedPreviewScrollProps> = ({
   feedType,
   id,
 }) => {
-  const { data: feedData } = useFeed({ feedType, id });
+  const { data: feedData, isLoading } = useFeed({ feedType, id });
 
-  return (
+  return isLoading ? (
+    <Loader />
+  ) : (
     <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} />
+            <FeedPreviewCard {...{ linkStr, item, feedType }} key={linkStr} />
           ) : null;
         })}
     </Carousel>

packages/app/hooks/feed/index.ts

@@ -1,7 +1,8 @@
 import { usePublicFeed } from './publicFeed';
 import { useUserPacks } from './../packs';
 import { useUserTrips } from '../singletrips';
-import { useSimilarPacks } from 'app/hooks/packs/useSimilarPacks';
+import { useSimilarPacks } from 'app/hooks/packs';
+import { useSimilarItems } from 'app/hooks/items';
 
 export const useFeed = ({
   queryString = 'Most Recent',
@@ -25,6 +26,8 @@ export const useFeed = ({
       return useUserTrips(ownerId || undefined);
     case 'similarPacks':
       return useSimilarPacks(id);
+    case 'similarItems':
+      return useSimilarItems(id);
     default:
       return { data: null, error: null, isLoading: true };
   }

packages/app/hooks/items/index.ts

@@ -5,3 +5,4 @@ export { useItemsUpdater } from './useItemsUpdater';
 export { useItemWeightUnit } from './useItemWeightUnit';
 export { useItemId } from './useItemId';
 export { useItem } from './useItem';
+export { useSimilarItems } from './useSimilarItems';

packages/app/hooks/items/useSimilarItems.ts

@@ -0,0 +1,13 @@
+import { queryTrpc } from '../../trpc';
+
+export const useSimilarItems = (id: string) => {
+  const { data, error, isLoading, refetch } =
+    queryTrpc.getSimilarItems.useQuery(
+      { id, limit: 10 },
+      {
+        refetchOnWindowFocus: true,
+      },
+    );
+
+  return { data, error, isLoading, refetch };
+};

packages/app/screens/items/item-details.tsx

@@ -10,6 +10,7 @@ import { usePagination } from 'app/hooks/common';
 import {
   BaseModal,
   DropdownComponent,
+  RH3,
   RImage,
   RScrollView,
   RStack,
@@ -18,16 +19,20 @@ import {
 } from '@packrat/ui';
 import useResponsive from 'app/hooks/useResponsive';
 import { CustomCard } from 'app/components/card';
+import LargeCard from 'app/components/card/LargeCard';
+import FeedPreview from 'app/components/feedPreview';
 
 export default function ItemDetails() {
   const { limit, handleLimitChange, page, handlePageChange } = usePagination();
   const [itemId] = useItemId();
   const { data: item, isError } = useItem(itemId);
   const styles = useCustomStyles(loadStyles);
+  const { currentTheme } = useTheme();
+
   console.log({ item, itemId });
 
   return (
-    <RScrollView>
+    <RScrollView style={{ marginBottom: 50 }}>
       <RStack style={styles.mainContainer}>
         {!isError && item && (
           <View style={{ padding: 10, width: '100%' }}>
@@ -55,6 +60,26 @@ export default function ItemDetails() {
               }
               type="item"
             />
+            <LargeCard
+              customStyle={{
+                width: '80%',
+                backgroundColor: currentTheme.colors.secondaryBlue,
+                paddingBottom: 24,
+                paddingTop: 0,
+              }}
+            >
+              <RH3
+                style={{
+                  color: currentTheme.colors.text,
+                  fontSize: 24,
+                  alignSelf: 'center',
+                  marginBottom: 20,
+                }}
+              >
+                Similar Items
+              </RH3>
+              <FeedPreview feedType="similarItems" id={itemId} />
+            </LargeCard>
           </View>
         )}
       </RStack>