Merge pull request #1263 from andrew-bierman/feat/feed-sort

add feed sorting
andrew-bierman · Sep 23, 2024 · 679c5d8 · 679c5d8
2 parents f650e5d + 2379ec8
commit 679c5d8
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 27 deletions.
diff --git a/packages/app/modules/feed/components/FeedSearchFilter.tsx b/packages/app/modules/feed/components/FeedSearchFilter.tsx
@@ -14,20 +14,11 @@ import {
 } 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;
 
-const dataValues = [
-  'Favorite',
-  'Most Recent',
-  'Lightest',
-  'Heaviest',
-  // 'Most Items',
-  // 'Fewest Items',
-  'Oldest',
-];
-
 interface FeedSearchFilterProps {
   feedType?: string | null;
   isSortHidden?: boolean;
@@ -57,6 +48,9 @@ export const FeedSearchFilter = ({
   const styles = useCustomStyles(loadStyles);
   const [searchValue, setSearchValue] = useState();
   const debounceTimerRef = useRef(null);
+  const sortOptions = useFeedSortOptions(
+    selectedTypes?.trip || feedType === 'userTrips',
+  );
 
   // const onSearch = (search) => (setSearchQuery) ? setSearchQuery(search) : null;
   const handleSetSearchValue = (v: string) => {
@@ -77,6 +71,12 @@ export const FeedSearchFilter = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (!sortOptions.includes(queryString)) {
+      handleSortChange(sortOptions[0]);
+    }
+  }, [sortOptions, queryString]);
+
   return (
     <View style={styles.filterContainer}>
       <View style={styles.searchContainer}>
@@ -119,6 +119,7 @@ export const FeedSearchFilter = ({
                 id="single-switch"
                 size="$1.5"
                 checked={selectedTypes?.pack ?? false}
+                disabled={!selectedTypes?.trip}
                 onCheckedChange={handleTogglePack}
               >
                 <Switch.Thumb />
@@ -134,14 +135,14 @@ export const FeedSearchFilter = ({
                 id="two-switch"
                 size="$1.5"
                 checked={selectedTypes?.trip ?? false}
+                disabled={!selectedTypes?.pack}
                 onCheckedChange={handleToggleTrip}
               >
                 <Switch.Thumb />
               </RSwitch>
             </RStack>
           )}
-          {/* DISABLE SORTS */}
-          {/* <RStack
+          <RStack
             style={{
               flexDirection: 'row',
               alignItems: 'center',
@@ -162,12 +163,12 @@ export const FeedSearchFilter = ({
             <View style={{ flex: 1 }}>
               <DropdownComponent
                 value={queryString}
-                data={dataValues}
+                data={sortOptions}
                 onValueChange={handleSortChange}
                 placeholder={queryString}
               />
             </View>
-          </RStack> */}
+          </RStack>
           {(feedType === 'userPacks' || feedType === 'userTrips') && (
             <RButton
               style={{ marginLeft: 'auto', marginTop: 8 }}

diff --git a/packages/app/modules/feed/hooks/index.ts b/packages/app/modules/feed/hooks/index.ts
@@ -1,3 +1,4 @@
 export { useFeed } from './useFeed';
 export { useAddFavorite } from './useAddFavorite';
 export { useFetchUserFavorites } from './useFetchUserFavorites';
+export * from './useFeedSortOptions';
diff --git a/packages/app/modules/feed/hooks/useFeedSortOptions.ts b/packages/app/modules/feed/hooks/useFeedSortOptions.ts
@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+
+const SORT_OPTIONS = {
+  FAVORITE: 'Favorite',
+  MOST_RECENT: 'Most Recent',
+  LIGHTEST: 'Lightest',
+  HEAVIEST: 'Heaviest',
+  OLDEST: 'Oldest',
+  //   MOST_ITEMS: 'Most Items',
+  //   FEWEST_ITEMS: 'Fewest Items',
+};
+const packSortOptions = [
+  SORT_OPTIONS.FAVORITE,
+  SORT_OPTIONS.MOST_RECENT,
+  SORT_OPTIONS.LIGHTEST,
+  SORT_OPTIONS.HEAVIEST,
+  SORT_OPTIONS.OLDEST,
+];
+
+const commonOptions = [SORT_OPTIONS.MOST_RECENT, SORT_OPTIONS.OLDEST];
+
+export const useFeedSortOptions = (isTripsEnabled = false) => {
+  return useMemo(
+    () => (isTripsEnabled ? commonOptions : packSortOptions),
+    [isTripsEnabled],
+  );
+};
diff --git a/server/src/modules/feed/model/feed.ts b/server/src/modules/feed/model/feed.ts
@@ -1,4 +1,4 @@
-import { and, eq, like, sql } from 'drizzle-orm';
+import { and, asc, desc, eq, like, sql } from 'drizzle-orm';
 import { DbClient } from '../../../db/client';
 import {
   item,
@@ -15,6 +15,7 @@ import {
 } from '../../../helpers/pagination';
 import { FeedQueryBy, Modifiers } from '../models';
 
+// Adding aliases to columns for order operations
 export class Feed {
   async findFeed(
     queryBy: FeedQueryBy,
@@ -26,7 +27,7 @@ export class Feed {
       let packsQuery = DbClient.instance
         .select({
           id: pack.id,
-          createdAt: pack.createdAt,
+          createdAt: sql`${pack.createdAt} as createdAt`,
           name: pack.name,
           owner_id: pack.owner_id,
           grades: pack.grades,
@@ -37,7 +38,7 @@ export class Feed {
           favorites_count: sql`COALESCE(COUNT(DISTINCT ${userFavoritePacks.userId}), 0) as favorites_count`,
           quantity: sql`COALESCE(SUM(DISTINCT ${item.quantity}), 0)`,
           userFavorites: sql`GROUP_CONCAT(DISTINCT ${userFavoritePacks.userId})`,
-          total_weight: sql`COALESCE(SUM(DISTINCT ${item.weight} * ${item.quantity}), 0)`,
+          total_weight: sql`COALESCE(SUM(DISTINCT ${item.weight} * ${item.quantity}), 0) as total_weight`,
         })
         .from(pack)
         .leftJoin(userFavoritePacks, eq(pack.id, userFavoritePacks.packId))
@@ -54,7 +55,7 @@ export class Feed {
       let tripsQuery = DbClient.instance
         .select({
           id: trip.id,
-          createdAt: trip.createdAt,
+          createdAt: sql`${trip.createdAt} as createdAt`,
           name: trip.name,
           owner_id: trip.owner_id,
           grades: literal('{}'),
@@ -105,8 +106,11 @@ export class Feed {
         .all();
       const { limit, offset } = getPaginationParams(pagination);
       if (queryBy === 'Oldest' || queryBy === 'Most Recent') {
-        const orderDirection = queryBy === 'Most Recent' ? 'desc' : 'asc';
-        feedQuery = feedQuery.orderBy((row) => row.createdAt, orderDirection);
+        const order =
+          queryBy === 'Most Recent'
+            ? desc(sql`createdAt`)
+            : asc(sql`createdAt`);
+        feedQuery = feedQuery.orderBy(order);
       }
 
       const feedData = await feedQuery.limit(limit).offset(offset).all();
@@ -151,14 +155,11 @@ export class Feed {
       queryBy === 'Lightest'
     ) {
       const orderConfig = {
-        Favorite: { field: 'favorites_count', orderDirection: 'desc' },
-        Heaviest: { field: 'total_weight', orderDirection: 'desc' },
-        Lightest: { field: 'total_weight', orderDirection: 'asc' },
+        Favorite: desc(sql`favorites_count`),
+        Heaviest: desc(sql`total_weight`),
+        Lightest: asc(sql`total_weight`),
       };
-      return packQuery.orderBy(
-        orderConfig[queryBy].field,
-        orderConfig[queryBy].orderDirection,
-      );
+      return packQuery.orderBy(orderConfig[queryBy]);
     }
 
     return packQuery;