Add sortby handling

tabi-memo · Dec 4, 2023 · b2f4934 · b2f4934
1 parent 042fb42
commit b2f4934
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -13,26 +13,27 @@ import { PrimaryButton } from '@/components/button'
 import { Loading } from '@/components/loading'
 import { Header, Footer } from '@/components/navigation'
 import { TripSearch, TripSort, TripCard } from '@/trip/components'
-import { OrderByDirection, useTripsCollectionQuery } from '@generated/api'
+import { useTripsCollectionQuery, TripsOrderBy } from '@generated/api'
 
-export default function Top({
-  searchParams
-}: {
-  searchParams: { offset: string }
-}) {
+export default function Top({ searchParams }: { searchParams: { q: string } }) {
   const router = useRouter()
   const bg = useColorModeValue('white', 'gray.800')
   const color = useColorModeValue('black', 'gray.300')
 
-  const { data, loading, fetchMore } = useTripsCollectionQuery({
+  const { data, loading, fetchMore, refetch } = useTripsCollectionQuery({
     variables: {
       user_id: 1,
-      orderBy: [{ date_from: OrderByDirection.DescNullsFirst }],
-      first: 6,
+      first: 2,
       after: null
     }
   })
 
+  const handleSortBy = (sortObj: TripsOrderBy) => {
+    refetch({
+      orderBy: sortObj
+    })
+  }
+
   const handleLoadMore = () => {
     fetchMore({
       variables: {
@@ -55,7 +56,7 @@ export default function Top({
       }
     })
   }
-
+  console.log('searchParams', searchParams)
   console.log('data', data)
 
   return (
@@ -93,7 +94,7 @@ export default function Top({
               <TripSearch />
             </GridItem>
             <GridItem>
-              <TripSort />
+              <TripSort sortBy={handleSortBy} />
             </GridItem>
           </Grid>
           {loading || !data?.tripsCollection ? (

diff --git a/app/trip/components/trip-sort.tsx b/app/trip/components/trip-sort.tsx
@@ -1,8 +1,12 @@
 import { Menu, MenuButton, MenuList, MenuItem, Flex } from '@chakra-ui/react'
 import { MdOutlineSort, MdArrowDropDown } from 'react-icons/md'
 import { useIsMobile } from '@/hooks'
+import { OrderByDirection, TripsOrderBy } from '@generated/api'
 
-export const TripSort = () => {
+type TripSortProps = {
+  sortBy: (arg: TripsOrderBy) => void
+}
+export const TripSort = ({ sortBy }: TripSortProps) => {
   const { isMobile } = useIsMobile()
 
   return (
@@ -38,9 +42,22 @@ export const TripSort = () => {
       </MenuButton>
 
       <MenuList>
-        <MenuItem>Date</MenuItem>
-        <MenuItem>Created</MenuItem>
-        <MenuItem>Title</MenuItem>
+        <MenuItem
+          onClick={() => sortBy({ date_from: OrderByDirection.DescNullsLast })}
+        >
+          Date From
+        </MenuItem>
+
+        <MenuItem
+          onClick={() => sortBy({ id: OrderByDirection.DescNullsLast })}
+        >
+          Created Date
+        </MenuItem>
+        <MenuItem
+          onClick={() => sortBy({ title: OrderByDirection.AscNullsLast })}
+        >
+          Title
+        </MenuItem>
       </MenuList>
     </Menu>
   )