Feed screen enhancement

packages/app/components/FilterBadge.tsx

@@ -0,0 +1,25 @@
+import { RDropdownMenu, RStack } from '@packrat/ui';
+import React from 'react';
+
+const FilterBadge = ({ menuItems, selectedValue, onSelect }) => {
+  return (
+    <RStack
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        margin: 5,
+        borderRadius: 20,
+      }}
+    >
+      <RDropdownMenu
+        menuItems={menuItems.map((item) => ({
+          label: item,
+          onSelect: () => onSelect(item),
+        }))}
+        menuName={selectedValue}
+      />
+    </RStack>
+  );
+};
+
+export default FilterBadge;

packages/app/modules/feed/components/FeedSearchFilter.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useContext, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import useTheme from 'app/hooks/useTheme';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { View } from 'react-native';
@@ -9,36 +9,31 @@ import {
   RButton,
   Form,
   InputWithIcon,
-  DropdownComponent,
-  RSwitch,
 } from '@packrat/ui';
 import { Search, X } from '@tamagui/lucide-icons';
-import { Switch } from 'tamagui';
 import { useFeedSortOptions } from '../hooks';
-const RStack: any = OriginalRStack;
-const RText: any = OriginalRText;
-const RSeparator: any = OriginalRSeparator;
+import FilterBadge from 'app/components/FilterBadge';
+
+const RStack = OriginalRStack;
+const RText = OriginalRText;
+const RSeparator = OriginalRSeparator;
 
 interface FeedSearchFilterProps {
   feedType?: string | null;
   isSortHidden?: boolean;
   handleSortChange?: (value: string) => void;
-  handleTogglePack?: () => void;
-  handleToggleTrip?: () => void;
+  handleTypeChange?: (type: string) => void;
   selectedTypes?: { pack: boolean; trip: boolean };
   queryString?: string;
   setSearchQuery?: (query: string) => void;
   handleCreateClick?: () => void;
-  value?: string;
-  onChange?: (value: string) => void;
 }
 
 export const FeedSearchFilter = ({
   feedType,
   isSortHidden,
   handleSortChange,
-  handleTogglePack,
-  handleToggleTrip,
+  handleTypeChange,
   selectedTypes,
   queryString,
   setSearchQuery,
@@ -53,14 +48,13 @@ export const FeedSearchFilter = ({
     selectedTypes?.trip || feedType === 'userTrips',
   );
 
-  // const onSearch = (search) => (setSearchQuery) ? setSearchQuery(search) : null;
   const handleSetSearchValue = (v: string) => {
     setSearchValue(v);
     if (debounceTimerRef.current) {
       clearTimeout(debounceTimerRef.current);
     }
     debounceTimerRef.current = setTimeout(() => {
-      setSearchQuery(v);
+      setSearchQuery?.(v);
     }, 600);
   };
 
@@ -82,7 +76,14 @@ export const FeedSearchFilter = ({
     <View style={styles.filterContainer}>
       <View style={styles.searchContainer}>
         <Form>
-          <RStack style={{ flexDirection: 'row', margin: 0, padding: 0 }}>
+          <RStack
+            style={{
+              flexDirection: 'row',
+              margin: 0,
+              padding: 0,
+              width: '100%',
+            }}
+          >
             <InputWithIcon
               LeftIcon={<Search />}
               RightIcon={<X />}
@@ -94,91 +95,23 @@ export const FeedSearchFilter = ({
         </Form>
       </View>
       <RSeparator />
+
       {!isSortHidden && (
-        <RStack
-          // flex={1}
-          flexWrap="wrap"
-          flexDirection="row"
-          justifyContent="space-between"
-          alignItems="center"
-          padding={2}
-          margin={2}
-        >
+        <RStack style={{ flexDirection: 'row' }}>
           {feedType === 'public' && (
-            <RStack
-              style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}
-            >
-              <RText
-                fontSize={18}
-                fontWeight="bold"
-                color={currentTheme.colors.tertiaryBlue}
-              >
-                Packs
-              </RText>
-
-              <RSwitch
-                id="single-switch"
-                size="$1.5"
-                checked={selectedTypes?.pack ?? false}
-                disabled={!selectedTypes?.trip}
-                onCheckedChange={handleTogglePack}
-              >
-                <Switch.Thumb />
-              </RSwitch>
-              <RText
-                fontSize={18}
-                fontWeight="bold"
-                color={currentTheme.colors.tertiaryBlue}
-              >
-                Trips
-              </RText>
-              <RSwitch
-                id="two-switch"
-                size="$1.5"
-                checked={selectedTypes?.trip ?? false}
-                disabled={!selectedTypes?.pack}
-                onCheckedChange={handleToggleTrip}
-              >
-                <Switch.Thumb />
-              </RSwitch>
-            </RStack>
-          )}
-          {feedType === 'packTemplates' && (
-            <RText
-              fontSize={18}
-              fontWeight="bold"
-              color={currentTheme.colors.text}
-            >
-              Discover our curated pack templates to help you get started.
-            </RText>
+            <FilterBadge
+              menuItems={['Packs', 'Trips']}
+              selectedValue={selectedTypes?.pack ? 'Packs' : 'Trips'}
+              onSelect={(value) => handleTypeChange?.(value)}
+            />
           )}
-          <RStack
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              display: 'flex',
-              gap: 10,
-              width: '100%',
-              marginTop: 15,
-              justifyContent: 'space-between',
-            }}
-          >
-            <RText
-              fontSize={17}
-              fontWeight="bold"
-              color={currentTheme.colors.text}
-            >
-              Sort By:
-            </RText>
-            <View style={{ flex: 1 }}>
-              <DropdownComponent
-                value={queryString}
-                data={sortOptions}
-                onValueChange={handleSortChange}
-                placeholder={queryString}
-              />
-            </View>
-          </RStack>
+
+          <FilterBadge
+            menuItems={sortOptions}
+            selectedValue={queryString}
+            onSelect={handleSortChange}
+          />
+
           {(feedType === 'userPacks' || feedType === 'userTrips') && (
             <RButton
               style={{ marginLeft: 'auto', marginTop: 8 }}
@@ -204,12 +137,6 @@ const loadStyles = (theme: any) => {
   const { currentTheme } = theme;
 
   return {
-    mainContainer: {
-      // flex: 1,
-      backgroundColor: currentTheme.colors.background,
-      fontSize: 18,
-      padding: 15,
-    },
     filterContainer: {
       backgroundColor: currentTheme.colors.card,
       padding: 15,
@@ -227,12 +154,5 @@ const loadStyles = (theme: any) => {
       padding: 10,
       borderRadius: 5,
     },
-
-    cardContainer: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: 'space-around',
-      alignItems: 'center',
-    },
   };
 };

packages/app/modules/feed/screens/FeedScreen.tsx

@@ -70,28 +70,20 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
     searchQuery,
   });
 
-  // Refresh data
   const onRefresh = () => {
     setRefreshing(true);
-    refetch && refetch(); // Ensure refetch is defined
+    refetch && refetch();
     setRefreshing(false);
   };
 
-  const handleTogglePack = () => {
-    setSelectedTypes((prevState) => ({
-      ...prevState,
-      pack: !prevState.pack,
-    }));
+  const handleTypeChange = (value: string) => {
+    setSelectedTypes({
+      pack: value === 'Packs',
+      trip: value === 'Trips',
+    });
   };
 
-  const handleToggleTrip = () => {
-    setSelectedTypes((prevState) => ({
-      ...prevState,
-      trip: !prevState.trip,
-    }));
-  };
-
-  const handleSortChange = (value) => {
+  const handleSortChange = (value: string) => {
     setQueryString(value);
   };
 
@@ -108,8 +100,7 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
             <FeedSearchFilter
               feedType={feedType}
               handleSortChange={handleSortChange}
-              handleTogglePack={handleTogglePack}
-              handleToggleTrip={handleToggleTrip}
+              handleTypeChange={handleTypeChange}
               selectedTypes={selectedTypes}
               queryString={queryString}
               setSearchQuery={setSearchQuery}

packages/ui/src/ZDropdown/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ComponentProps } from 'react';
 import * as ZeegoDropdownMenu from 'zeego/dropdown-menu';
 import { ChevronDown } from '@tamagui/lucide-icons';
-import RButton from '../RButton';
+import { Button } from 'tamagui';
 
 type ContentProps = ComponentProps<typeof ZeegoDropdownMenu.Content>;
 type ItemProps = ComponentProps<typeof ZeegoDropdownMenu.Item>;
@@ -18,7 +18,6 @@ const DropdownMenu = {
           padding: 10,
           borderRadius: 8,
           gap: 10,
-          // boxShadow: '0px 0px 16px -8px #484848',
         }}
       />
     ),
@@ -47,9 +46,17 @@ const RDropdownMenu = ({ menuItems = [], menuName }) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <RButton style={{ backgroundColor: '#deddda', color: 'black' }}>
+        <Button
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingRight: 10,
+            borderRadius: 40,
+          }}
+        >
           {menuName}
-        </RButton>
+          <ChevronDown size={14} />
+        </Button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>
         {menuItems.map(({ label, onSelect = () => {} }) => (

packages/ui/src/form/components/InputWithIcon.tsx

@@ -32,7 +32,7 @@ export function InputWithIcon({
   };
 
   return (
-    <View justifyContent="center" alignItems="center">
+    <View justifyContent="center" alignItems="center" width="100%">
       <Input size={size} minWidth="100%">
         <Input.Box>
           <Input.Icon {...focusTrigger}>{LeftIcon}</Input.Icon>