Fix items similar product

andrew-bierman · Oct 30, 2024 · 44aee1b · 44aee1b
1 parent c5259bf
commit 44aee1b
Show file tree

Hide file tree

Showing 9 changed files with 188 additions and 104 deletions.
diff --git a/packages/app/components/footer/Footer.tsx b/packages/app/components/footer/Footer.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { theme } from '../../theme';
 import useTheme from '../../hooks/useTheme';
@@ -24,7 +25,14 @@ export default function Footer() {
         <NewsLetter />
       </View>
       <View style={styles.mainFirstContainer}>
-        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10 }}>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 10,
+          }}
+        >
           <RImage
             source={{
               // TODO: Update this to use the PackRat logo from the assets folder
@@ -40,27 +48,60 @@ export default function Footer() {
               navigate('/');
             }}
           />
-          <RText style={{ fontSize: 25, fontWeight: 'bold', color: currentTheme.colors.logo }}>PackRat</RText>
+          <RText
+            style={{
+              fontSize: 25,
+              fontWeight: 'bold',
+              color: currentTheme.colors.logo,
+            }}
+          >
+            PackRat
+          </RText>
         </View>
-        <View style={{ flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'center', gap: 50 }}>
-          <View>{firstFootorLinksGroup.map((item) => {
-            return (
-              <RLink src={item.link}>
-                <RText style={styles.navItem}>{item.label}</RText>
-              </RLink>
-            );
-          })}</View>
-          <View>{secondFootorLinksGroup.map((item) => {
-            return (
-              <RLink src={item.link}>
-                <RText style={styles.navItem}>{item.label}</RText>
-              </RLink>
-            );
-          })}</View>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            gap: 50,
+          }}
+        >
+          <View>
+            {firstFootorLinksGroup.map((item) => {
+              return (
+                <RLink key={item.label} src={item.link}>
+                  <RText style={styles.navItem}>{item.label}</RText>
+                </RLink>
+              );
+            })}
+          </View>
+          <View>
+            {secondFootorLinksGroup.map((item) => {
+              return (
+                <RLink key={item.label} src={item.link}>
+                  <RText style={styles.navItem}>{item.label}</RText>
+                </RLink>
+              );
+            })}
+          </View>
         </View>
-        <View style={{ flexDirection: xs || sm || md ? 'row' : 'column', alignItems: 'flex-start', justifyContent: 'center', gap: xs || sm || md  ? 10 : 0 }}>
-          <RLink >
-            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
+        <View
+          style={{
+            flexDirection: xs || sm || md ? 'row' : 'column',
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            gap: xs || sm || md ? 10 : 0,
+          }}
+        >
+          <RLink>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 5,
+              }}
+            >
               <MaterialCommunityIcons
                 name="facebook"
                 size={20}
@@ -69,8 +110,15 @@ export default function Footer() {
               <RText>Facebook</RText>
             </View>
           </RLink>
-          <RLink >
-            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
+          <RLink>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 5,
+              }}
+            >
               <MaterialCommunityIcons
                 name="instagram"
                 size={20}
@@ -79,8 +127,15 @@ export default function Footer() {
               <RText>Instagram</RText>
             </View>
           </RLink>
-          <RLink >
-            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
+          <RLink>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 5,
+              }}
+            >
               <MaterialCommunityIcons
                 name="twitter"
                 size={20}
@@ -89,8 +144,15 @@ export default function Footer() {
               <RText>X</RText>
             </View>
           </RLink>
-          <RLink >
-            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
+          <RLink>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 5,
+              }}
+            >
               <MaterialCommunityIcons
                 name="github"
                 size={20}
@@ -111,76 +173,73 @@ export default function Footer() {
 }
 
 const loadStyles = (currentTheme, xs, sm, md) => {
-  {
-    return StyleSheet.create({
-      mainContainer: {
-        width: '100%',
-        flexDirection: 'column',
-        paddingTop: 80,
-        paddingBottom: 40,
-        alignSelf: 'center',
-        alignItems: 'center',
-        justifyContent: 'space-evenly',
-        position: 'relative',
-        bottom: 0,
-      },
-      mainFirstContainer: {
-        width: '100%',
-        flexDirection: xs || sm || md ? 'column' : 'row',
-        flexWrap: 'wrap',
-        paddingTop: 80,
-        paddingBottom: 40,
-        alignSelf: 'center',
-        alignItems: 'center',
-        justifyContent: 'space-evenly',
-        position: 'relative',
-        bottom: 0,
-        gap: xs || sm || md ? 10 : 0
-      },
-      firstMainContainer: {
-        width: '95%',
-        // justifyContent: 'center',
-        // alignItems: 'center',
-      },
-      firstContainer: {
-        width: '100%',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        gap: 4,
-        paddingVertical: 18,
-      },
-      logo: {
-        backgroundColor: currentTheme.colors.tertiaryBlue,
-        borderRadius: 10,
-        cursor: 'pointer',
-      },
-      navLinks: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 16,
-        margin: 10,
-        fontSize: 14,
-        color: currentTheme.colors.textPrimary,
-        paddingBottom: 40,
-      },
-      navItem: { color: currentTheme.colors.textPrimary },
-      credit: {
-        color: currentTheme.colors.textPrimary,
-        fontSize: 13,
-        textAlign: xs ? 'center' : 'left',
-        fontWeight: 'normal',
-        paddingTop: sm || md ? 10 : 'auto',
-      },
-      lastContainer: {
-        display: 'flex',
-        flexWrap: 'wrap-reverse',
-        flexDirection: sm ? 'column-reverse' : 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        width: sm || md ? 'auto' : '95%',
-
-      },
-    });
-  }
+  return StyleSheet.create({
+    mainContainer: {
+      width: '100%',
+      flexDirection: 'column',
+      paddingTop: 80,
+      paddingBottom: 40,
+      alignSelf: 'center',
+      alignItems: 'center',
+      justifyContent: 'space-evenly',
+      position: 'relative',
+      bottom: 0,
+    },
+    mainFirstContainer: {
+      width: '100%',
+      flexDirection: xs || sm || md ? 'column' : 'row',
+      flexWrap: 'wrap',
+      paddingTop: 80,
+      paddingBottom: 40,
+      alignSelf: 'center',
+      alignItems: 'center',
+      justifyContent: 'space-evenly',
+      position: 'relative',
+      bottom: 0,
+      gap: xs || sm || md ? 10 : 0,
+    },
+    firstMainContainer: {
+      width: '95%',
+      // justifyContent: 'center',
+      // alignItems: 'center',
+    },
+    firstContainer: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      gap: 4,
+      paddingVertical: 18,
+    },
+    logo: {
+      backgroundColor: currentTheme.colors.tertiaryBlue,
+      borderRadius: 10,
+      cursor: 'pointer',
+    },
+    navLinks: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 16,
+      margin: 10,
+      fontSize: 14,
+      color: currentTheme.colors.textPrimary,
+      paddingBottom: 40,
+    },
+    navItem: { color: currentTheme.colors.textPrimary },
+    credit: {
+      color: currentTheme.colors.textPrimary,
+      fontSize: 13,
+      textAlign: xs ? 'center' : 'left',
+      fontWeight: 'normal',
+      paddingTop: sm || md ? 10 : 'auto',
+    },
+    lastContainer: {
+      display: 'flex',
+      flexWrap: 'wrap-reverse',
+      flexDirection: sm ? 'column-reverse' : 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      width: sm || md ? 'auto' : '95%',
+    },
+  });
 };
diff --git a/packages/app/modules/feed/components/FeedCard/FeedCard.tsx b/packages/app/modules/feed/components/FeedCard/FeedCard.tsx
@@ -11,16 +11,18 @@ import { useAddFavorite } from 'app/modules/feed';
 import { useAuthUser } from 'app/modules/auth';
 import { TripCard } from 'app/modules/trip';
 import { PackTemplateCard } from 'app/modules/pack-templates';
+import { ItemCard } from 'app/modules/item';
 
 const convertersByType = {
   pack: feedItemPackCardConverter,
   trip: feedItemTripCardConverter,
   packTemplate: feedItemPackTemplateCardConverter,
 };
 
-const cardComponentsByType = {
+const cardComponentsByType: Record<FeedResource, React.FC<any>> = {
   pack: PackCard,
   trip: TripCard,
+  item: ItemCard,
   packTemplate: PackTemplateCard,
 };
 

diff --git a/packages/app/modules/feed/components/FeedCard/utils.ts b/packages/app/modules/feed/components/FeedCard/utils.ts
@@ -76,6 +76,13 @@ export const feedItemTripCardConverter: Converter<
   };
 };
 
+export const feedItemCardConverter: Converter<
+  FeedItem,
+  RouterOutput['getPackTemplates'][0]
+> = (input) => {
+  return input;
+};
+
 export const feedItemPackTemplateCardConverter: Converter<
   FeedItem,
   RouterOutput['getPackTemplates'][0]

diff --git a/packages/app/modules/feed/model.ts b/packages/app/modules/feed/model.ts
@@ -7,7 +7,7 @@ export type FeedType =
   | 'similarPacks'
   | 'similarItems'
   | 'packTemplates';
-export type FeedResource = 'pack' | 'trip' | 'packTemplate';
+export type FeedResource = 'pack' | 'item' | 'trip' | 'packTemplate';
 
 export interface BaseFeedItem {
   id: string;
@@ -25,6 +25,7 @@ export interface BaseFeedItem {
   owner_id: string | { id: string };
   createdAt: string;
   owners: Array<{ any: any }>;
+  ga;
 }
 
 interface PackFeedItem extends BaseFeedItem {

diff --git a/packages/app/modules/feed/widgets/FeedPreview/FeedPreview.tsx b/packages/app/modules/feed/widgets/FeedPreview/FeedPreview.tsx
@@ -4,10 +4,11 @@ import { useFeed } from '../../hooks';
 import Loader from 'app/components/Loader';
 import { FeedCard, type FeedItem } from 'app/modules/feed';
 import { View } from 'tamagui';
+import type { FeedType } from 'app/modules/feed/model';
 
 interface FeedPreviewScrollProps {
   itemWidth: number;
-  feedType: string;
+  feedType: FeedType;
   id?: string;
 }
 
@@ -24,15 +25,23 @@ const FeedPreviewScroll: React.FC<FeedPreviewScrollProps> = ({
   ) : (
     <Carousel itemWidth={itemWidth}>
       {validFeedData
-        ?.filter((item): item is FeedItem => item.type !== null)
+        ?.filter(
+          (item): item is FeedItem =>
+            item.type !== null || feedType === 'similarItems',
+        )
         .map((item: FeedItem) => {
           return (
             <View
+              key={item.id}
               style={{
                 marginBottom: 10,
               }}
             >
-              <FeedCard item={item} cardType="secondary" feedType={item.type} />
+              <FeedCard
+                item={item}
+                cardType="secondary"
+                feedType={item.type || 'item'}
+              />
             </View>
           );
         })}