-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b2ceae2
commit af66fd5
Showing
30 changed files
with
626 additions
and
208 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './useInfinitePagination'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { type Dispatch, type SetStateAction, useEffect, useRef } from 'react'; | ||
|
|
||
| const DEFAULT_LIMIT = 20; | ||
|
|
||
| export const getPaginationInitialParams = (defaultPage = 1) => ({ | ||
| limit: DEFAULT_LIMIT, | ||
| offset: getOffset(defaultPage, DEFAULT_LIMIT), | ||
| }); | ||
|
|
||
| export interface PaginationParams { | ||
| limit: number; | ||
| offset: number; | ||
| } | ||
|
|
||
| interface PaginationOptions { | ||
| nextPage?: number; | ||
| enabled?: boolean; | ||
| defaultPage?: number; | ||
| } | ||
|
|
||
| export const useInfinitePagination = ( | ||
| fetchFunction: () => void, | ||
| paginationParams: PaginationParams, | ||
| setPaginationParams: Dispatch<SetStateAction<PaginationParams>>, | ||
| options: PaginationOptions = {}, | ||
| ) => { | ||
| const initialRender = useRef(false); | ||
| const { nextPage, enabled = true } = options; | ||
|
|
||
| const fetchNextPage = () => { | ||
| setPaginationParams((prev) => ({ | ||
| ...prev, | ||
| offset: nextPage, | ||
| })); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const run = () => { | ||
| if (!initialRender.current) { | ||
| initialRender.current = true; | ||
| return; | ||
| } | ||
| if (!enabled) { | ||
| return; | ||
| } | ||
|
|
||
| fetchFunction(); | ||
| }; | ||
|
|
||
| run(); | ||
| }, [paginationParams.limit, paginationParams.offset, enabled]); | ||
|
|
||
| return { fetchNextPage }; | ||
| }; | ||
|
|
||
| function getOffset(page: number, limit: number) { | ||
| return (page - 1) * limit; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +1,53 @@ | ||
| import { queryTrpc } from 'app/trpc'; | ||
| import { useState, useEffect } from 'react'; | ||
|
|
||
| type DataType = { | ||
| type: string; | ||
| id: string; | ||
| duration: string; | ||
| name: string; | ||
| description: string; | ||
| createdAt: string | null; | ||
| updatedAt: string | null; | ||
| pack_id: string | null; | ||
| owner_id: string | null; | ||
| is_public: boolean | null; | ||
| }[]; | ||
|
|
||
| type OptionalDataType = DataType[]; | ||
| import { | ||
| getPaginationInitialParams, | ||
| type PaginationParams, | ||
| useInfinitePagination, | ||
| } from 'app/hooks/pagination'; | ||
| import { useState } from 'react'; | ||
|
|
||
| export const usePublicFeed = ( | ||
| queryString: string, | ||
| queryBy, | ||
| searchQuery: string, | ||
| selectedTypes, | ||
| initialPage = 1, | ||
| initialLimit = 4 | ||
| enabled = false, | ||
| ) => { | ||
| const [page, setPage] = useState(initialPage); | ||
| const [data, setData] = useState<OptionalDataType>([]); | ||
| const [hasMore, setHasMore] = useState(true); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [isFetchingNextPage, setIsFetchingNextPage] = useState(false); | ||
|
|
||
| // Fetch public packs using the useQuery hook | ||
| const { | ||
| data: publicPacksData, | ||
| isLoading: isPacksLoading, | ||
| refetch: refetchPacks, | ||
| } = queryTrpc.getPublicPacks.useQuery( | ||
| { queryBy: queryString ?? 'Favorite', page, limit: initialLimit }, | ||
| { keepPreviousData: true, enabled: selectedTypes.pack } | ||
| ); | ||
|
|
||
| // Fetch public trips using the useQuery hook | ||
| const { | ||
| data: publicTripsData, | ||
| isLoading: isTripsLoading, | ||
| refetch: refetchTrips, | ||
| } = queryTrpc.getPublicTripsRoute.useQuery( | ||
| { queryBy: queryString ?? 'Favorite' }, | ||
| { enabled: selectedTypes.trip && publicPacksData?.length > 0 } | ||
| const [allData, setAllData] = useState([]); | ||
| const [pagination, setPagination] = useState<PaginationParams>( | ||
| getPaginationInitialParams(), | ||
| ); | ||
|
|
||
| // Ensure that fetching logic behaves consistently | ||
| useEffect(() => { | ||
| const processFetchedData = () => { | ||
| if (!isPacksLoading && !isTripsLoading && (publicPacksData || publicTripsData)) { | ||
| let newData: OptionalDataType = []; | ||
|
|
||
| // Fetch and append packs | ||
| if (selectedTypes.pack && publicPacksData) { | ||
| newData = [...newData, ...publicPacksData.map((item) => ({ ...item, type: 'pack' }))]; | ||
| } | ||
|
|
||
| // Fetch and append trips | ||
| if (selectedTypes.trip && publicTripsData) { | ||
| newData = [...newData, ...publicTripsData.map((item) => ({ ...item, type: 'trip' }))]; | ||
| const { data, isLoading, refetch } = queryTrpc.getPublicFeed.useQuery( | ||
| { queryBy: queryBy ?? 'Favorites', pagination, searchTerm: searchQuery }, | ||
| { | ||
| enabled, | ||
| refetchOnWindowFocus: false, | ||
| onSuccess: (newData) => { | ||
| if (newData?.data) { | ||
| setAllData((prevData) => { | ||
| if (pagination.offset === 0) { | ||
| return newData.data; | ||
| } | ||
|
|
||
| return [...prevData, ...newData.data]; | ||
| }); | ||
| } | ||
| }, | ||
| onError: (error) => console.error('Error fetching public packs:', error), | ||
| }, | ||
| ); | ||
| const { fetchNextPage } = useInfinitePagination( | ||
| refetch, | ||
| pagination, | ||
| setPagination, | ||
| { nextPage: data?.nextOffset, enabled }, | ||
| ); | ||
|
|
||
| // Update data in state | ||
| setData((prevData) => { | ||
| return page === initialPage ? newData : [...prevData, ...newData]; // Append for subsequent pages | ||
| }); | ||
|
|
||
| // Set `hasMore` based on the data fetched | ||
| setHasMore(newData.length === initialLimit); | ||
|
|
||
| // Reset loading states | ||
| setIsLoading(false); | ||
| setIsFetchingNextPage(false); | ||
| } | ||
| }; | ||
|
|
||
| processFetchedData(); | ||
| }, [publicPacksData, publicTripsData, page, selectedTypes]); | ||
|
|
||
| // Fetch the next page of data | ||
| const fetchNextPage = async () => { | ||
| if (hasMore && !isLoading && !isFetchingNextPage) { | ||
| setIsFetchingNextPage(true); | ||
| setPage((prevPage) => prevPage + 1); // Increment the page before fetching new data | ||
|
|
||
| // Fetch packs and trips for the next page | ||
| await refetchPacks(); | ||
| if (selectedTypes.trip) { | ||
| await refetchTrips(); | ||
| } | ||
|
|
||
| setIsFetchingNextPage(false); // Reset fetching state after data fetch | ||
| } | ||
| return { | ||
| data: allData, | ||
| isLoading, | ||
| refetch, | ||
| fetchNextPage, | ||
| nextPage: data?.nextOffset || false, | ||
| error: null, | ||
| }; | ||
|
|
||
| return { data, isLoading, hasMore, fetchNextPage, refetch: refetchPacks }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.