Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[fix] - 내 워케이션 목록 필터링 및 정렬 수정 #233

Merged
merged 7 commits into from
Aug 17, 2024
Merged

[fix] - 내 워케이션 목록 필터링 및 정렬 수정 #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8aa0526
fix: 내 워케이션 목록 필터링 및 정렬 수정
maylh Aug 16, 2024
febdca9
feat: 필터링 refreshHandler 적용
maylh Aug 16, 2024
104db57
design: empty 문구 css 수정
maylh Aug 16, 2024
c8f2561
refactor: 주석 삭제
maylh Aug 16, 2024
14ffdb5
fix: 워케이션 신청 내역에 무한스크롤 적용
maylh Aug 16, 2024
ad6e1e5
fix: 무한스크롤 sort 적용 안되는 이슈 해결
maylh Aug 16, 2024
1ecde51
design: WorkationCard 컴포넌트 margin 수정
maylh Aug 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 101 additions & 46 deletions src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
'use client';

import React, { useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import dayjs from 'dayjs';
import InfiniteScroll from 'react-infinite-scroller';
import { usePatchWktStatusMutation } from '@/_hooks/user/usePatchWktStatusMutation';
import UserFilteringSectionContainer from '@/_components/user/common/containers/UserFilteringSectionContainer';
import UserStateFilteringContainer from '@/_components/user/common/containers/UserStateFilteringContainer';
import UserPlaceFilteringContainer from '@/_components/user/common/containers/UserPlaceFilteringContainer';
import WorkationCard from '@/_components/user/mypage/UserWktCard';
import { useGetMyWktHistoryQuery } from '@/_hooks/user/useGetMyWktHistoryQuery';
import UserWktCancelModal from '@/_components/user/mypage/UserWktCancelModal';
Expand All @@ -15,12 +15,13 @@ import { useDeleteWktApplyMutation } from '@/_hooks/user/useDeleteWktApplyMutati
import { useSession } from 'next-auth/react';
import UserLoading from '@/_components/user/userLoading';
import NetworkError from '@/_components/common/networkError';
import UserDatePickerContainer from '@/_components/user/common/containers/UserDatePickerContainer';
import { DatePickerTagType } from '@/_types/commonType';

const UserWkHistoryPage = () => {
const router = useRouter();
const session = useSession();
const accountId = String(session.data?.accountId || '');
const [currentPage, setCurrentPage] = useState(1);
const [startDate, setStartDate] = useState<Date | null>(null);
const [endDate, setEndDate] = useState<Date | null>(null);
const [param, setParam] = useState<{
Expand All @@ -43,9 +44,9 @@ const UserWkHistoryPage = () => {
const [isFilteringSectionOpen, setIsFilteringSectionOpen] = useState<
'FILTER' | 'ORDER' | null
>(null);
const [selectedState, setSelectedState] = useState<string>('ALL');
const [selectedState, setSelectedState] = useState<string>('');
const [selectedOrder, setSelectedOrder] = useState<string>('createdAt,DESC');
const [selectedSpace, setSelectedSpace] = useState<string[]>(['양양 쏠비치']);
const [selectedTag, setSelectedTag] = useState<DatePickerTagType>('ALL');
const [selectedWorkationId, setSelectedWorkationId] = useState<number | null>(
null,
);
Expand All @@ -59,18 +60,21 @@ const UserWkHistoryPage = () => {
| null
>(null);

const { data, isLoading, isError } = useGetMyWktHistoryQuery({
// statuses: param.type.join(','),
startDate: startDate
? dayjs(startDate).format('YYYY-MM-DDTHH:mm:ss')
: undefined,
endDate: endDate ? dayjs(endDate).format('YYYY-MM-DDTHH:mm:ss') : undefined,
pageParam: {
page: currentPage,
size: 10,
sort: `createdAt,${param.order}`,
},
});
const { data, isLoading, isError, fetchNextPage, hasNextPage } =
useGetMyWktHistoryQuery({
statuses: param.type.join(','),
startDate: startDate
? dayjs(startDate).format('YYYY-MM-DDTHH:mm:ss')
: undefined,
endDate: endDate
? dayjs(endDate).format('YYYY-MM-DDTHH:mm:ss')
: undefined,
pageable: {
page: 1,
size: 10,
sort: selectedOrder,
},
});

const { mutate: patchWktStatus } = usePatchWktStatusMutation({
wktId: selectedWorkationId || 0,
Expand Down Expand Up @@ -140,6 +144,40 @@ const UserWkHistoryPage = () => {
setConfirmModalType(null);
};

const updateParam = useCallback(() => {
setParam((prev) => ({
...prev,
type: selectedState ? [selectedState] : prev.type,
order: selectedOrder,
startDate: startDate
? dayjs(startDate).format('YYYY-MM-DDTHH:mm:ss')
: null,
endDate: endDate ? dayjs(endDate).format('YYYY-MM-DDTHH:mm:ss') : null,
}));
}, [selectedState, selectedOrder, startDate, endDate]);

const refreshHandler = () => {
setParam({
order: 'DESC',
type: [
'APPLIED',
'RAFFLE_WAIT',
'NO_WINNING',
'CONFIRM_WAIT',
'CANCEL',
'CONFIRM',
'WAIT',
'VISITED',
],
});
setStartDate(null);
setEndDate(null);
};

useEffect(() => {
updateParam();
}, [selectedState, selectedOrder, startDate, endDate, updateParam]);

return (
<section className="px-40 pt-18">
<div className="flex flex-col gap-y-14">
Expand All @@ -155,19 +193,22 @@ const UserWkHistoryPage = () => {
isFilterOpen: isFilteringSectionOpen === 'FILTER',
filterChildren: (
<>
<UserDatePickerContainer
selectedTag={selectedTag}
onClickTag={(tag) => setSelectedTag(tag)}
startDate={startDate}
setStartDate={setStartDate}
endDate={endDate}
setEndDate={setEndDate}
/>
<UserStateFilteringContainer
type="MYPAGE"
selectedOption={selectedState}
onClickOption={setSelectedState}
/>
<UserPlaceFilteringContainer
places={['양양 쏠비치', '양양 쏠비치2', '양양 쏠비치3']}
clickedPlace={selectedSpace}
onClickPlace={setSelectedSpace}
/>
</>
),
onRefresh: () => {},
onRefresh: refreshHandler,
}}
orderOption={{
onClickOrder: () => {
Expand All @@ -193,30 +234,44 @@ const UserWkHistoryPage = () => {
) : (
<NetworkError />
)
) : data.pageInfo.totalElements <= 0 ? (
<NetworkError />
) : data.pages.length === 0 ||
data.pages[0].applyInfoList.length <= 0 ? (
<p className="py-20 text-center text-sub-300">
내역이 존재하지 않습니다
</p>
) : (
data?.applyInfoList.map((wkt) => (
<WorkationCard
applyId={wkt.applyId}
accountId={accountId}
reviewId={wkt.reviewId}
key={wkt.wktId}
wktId={wkt.wktId}
thumbnailUrl={wkt.thumbnailUrl}
wktName={wkt.wktName}
place={wkt.place}
totalRecruit={wkt.totalRecruit}
applyStartDate={wkt.applyStartDate}
applyEndDate={wkt.applyEndDate}
startDate={wkt.startDate}
endDate={wkt.endDate}
bettingPoint={wkt.bettingPoint}
applyStatusType={wkt.applyStatusType}
waitingNumber={wkt.waitNumber} // 수정 필요
onClick={() => handleCardClick(wkt.applyStatusType, wkt.wktId)}
/>
))
<InfiniteScroll
loadMore={() => fetchNextPage()}
hasMore={hasNextPage}
loader={<UserLoading key={0} />}
useWindow
>
{data.pages.map((page) =>
page.applyInfoList.map((wkt) => (
<WorkationCard
applyId={wkt.applyId}
accountId={accountId}
reviewId={wkt.reviewId}
key={wkt.wktId}
wktId={wkt.wktId}
thumbnailUrl={wkt.thumbnailUrl}
wktName={wkt.wktName}
place={wkt.place}
totalRecruit={wkt.totalRecruit}
applyStartDate={wkt.applyStartDate}
applyEndDate={wkt.applyEndDate}
startDate={wkt.startDate}
endDate={wkt.endDate}
bettingPoint={wkt.bettingPoint}
applyStatusType={wkt.applyStatusType}
waitingNumber={wkt.waitNumber}
onClick={() =>
handleCardClick(wkt.applyStatusType, wkt.wktId)
}
/>
)),
)}
</InfiniteScroll>
)}
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/app/_components/user/mypage/UserWktCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ const WorkationCard = ({
applyStatusType === 'VISITED' && reviewId !== null;

return (
<div className="flex w-full flex-col gap-4 p-4 xl:flex-row xl:justify-between">
<div className="mb-10 flex w-full flex-col gap-4 p-4 xl:flex-row xl:justify-between">
<div className="flex items-end gap-x-8">
<Image
width={402}
Expand Down
30 changes: 22 additions & 8 deletions src/app/_hooks/user/useGetMyWktHistoryQuery.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useQuery } from '@tanstack/react-query';
import { useInfiniteQuery } from '@tanstack/react-query';
import { userApplyListSchema } from '@/_types/adminType';
import api from '../Axios';

Expand All @@ -8,35 +8,49 @@ export const useGetMyWktHistoryQuery = ({
startDate,
endDate,
statuses,
pageParam,
pageable,
}: {
startDate?: string;
endDate?: string;
statuses?: string;
pageParam: {
pageable: {
page: number;
size: number;
sort?: string;
sort: string;
};
}) => {
return useQuery({
return useInfiniteQuery({
queryKey: [
useGetMyWktHistoryQueryKey,
statuses,
startDate,
endDate,
pageParam,
pageable,
],
queryFn: async () => {
queryFn: async ({ pageParam = pageable }) => {
const { page, size, sort } = pageable;
const res = await api.get(`/api/apply/my`, {
params: {
startDate,
endDate,
statuses,
...pageParam,
page,
size,
sort,
},
});
return userApplyListSchema.parse(res.data.data);
},
initialPageParam: { page: 1, size: 10, sort: 'createdAt,DESC' },
getNextPageParam: (lastPage) => {
return lastPage.pageInfo.totalElements === 0 ||
lastPage.pageInfo.totalPages - 1 === lastPage.pageInfo.pageNum
? undefined
: {
page: lastPage.pageInfo.pageNum + 2,
size: pageable.size,
sort: pageable.sort,
};
},
});
};
Loading