jhynsoo/edufocus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: QnA 페이지네이션 추가

Browse Source
This commit is contained in:
jhynsoo 2024-08-12 09:53:28 +09:00
parent cf0ac725d9
commit 020c754479
7 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/constants.js
View File

@ -2,4 +2,4 @@ export const API_URL = import.meta.env.VITE_API_URL;
export const ROOM_URL = import.meta.env.VITE_ROOM_URL; export const ROOM_URL = import.meta.env.VITE_ROOM_URL;
export const CHAT_URL = import.meta.env.VITE_CHAT_URL; export const CHAT_URL = import.meta.env.VITE_CHAT_URL;
export const STATIC_URL = import.meta.env.VITE_STATIC_URL; export const STATIC_URL = import.meta.env.VITE_STATIC_URL;
export const PAGE_SIZE = 20; export const PAGE_SIZE = import.meta.env.VITE_PAGE_SIZE || 10;

2
frontend/src/hooks/api/useFreeboards.js
View File

@ -11,7 +11,7 @@ export function useFreeboards(lectureId, page = 0) {
if (lastPage.data.length < PAGE_SIZE) { if (lastPage.data.length < PAGE_SIZE) {
return undefined; return undefined;
} }
return allPages.length + 1; return allPages.length;
}, },
}); });
} }

2
frontend/src/hooks/api/useNotices.js
View File

@ -11,7 +11,7 @@ export function useNotices(lectureId) {
if (lastPage.data.length < PAGE_SIZE) { if (lastPage.data.length < PAGE_SIZE) {
return undefined; return undefined;
} }
return allPages.length + 1; return allPages.length;
}, },
}); });
} }

14
frontend/src/hooks/api/useQnas.js
View File

@ -1,10 +1,16 @@
import { useSuspenseQuery } from '@tanstack/react-query'; import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
import instance from '../../utils/axios/instance'; import instance from '../../utils/axios/instance';
import { API_URL } from '../../constants'; import { API_URL, PAGE_SIZE } from '../../constants';
export function useQnas(id) { export function useQnas(id) {
return useSuspenseQuery({ return useSuspenseInfiniteQuery({
queryKey: ['qnalist', id], queryKey: ['qnalist', id],
queryFn: () => instance.get(`${API_URL}/qna/all/${id}`), queryFn: ({ pageParam = 0 }) => instance.get(`${API_URL}/qna/all/${id}?pageNo=${pageParam}`),
getNextPageParam: (lastPage, allPages) => {
if (lastPage.data.length < PAGE_SIZE) {
return undefined;
}
return allPages.length;
},
}); });
} }

2
frontend/src/pages/LearningLectureDetailPage/LearningLectureDetailPage.jsx
View File

@ -9,7 +9,7 @@ export default function LearningLectureDetailPage() {
const { data: noticesData } = useNotices(lectureId); const { data: noticesData } = useNotices(lectureId);
const notices = noticesData.pages[0]?.data.slice(0, 3); const notices = noticesData.pages[0]?.data.slice(0, 3);
const { data: qnasData } = useQnas(lectureId); const { data: qnasData } = useQnas(lectureId);
const questions = qnasData?.data.slice(0, 3); const questions = qnasData.pages[0]?.data.slice(0, 3);
return ( return (
<section className={styles.previews}> <section className={styles.previews}>

1
frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx
View File

@ -1,6 +1,5 @@
import styles from './LectureInfoPage.module.css'; import styles from './LectureInfoPage.module.css';
import ClassInfo from '../../components/ClassInfo/ClassInfo'; import ClassInfo from '../../components/ClassInfo/ClassInfo';
import { MaxWidthLayout } from '../../components/Layout';
import LectureHeader from '../../components/LectureHeader/LectureHeader'; import LectureHeader from '../../components/LectureHeader/LectureHeader';
import { useLectureInfo } from '../../hooks/api/useLectureInfo'; import { useLectureInfo } from '../../hooks/api/useLectureInfo';
import { useParams, useNavigate } from 'react-router-dom'; import { useParams, useNavigate } from 'react-router-dom';

6
frontend/src/pages/QuestionListPage/QuestionListPage.jsx
View File

@ -3,11 +3,12 @@ import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { useQnas } from '../../hooks/api/useQnas'; import { useQnas } from '../../hooks/api/useQnas';
import useBoundStore from '../../store'; import useBoundStore from '../../store';
import IntersectionArea from '../../components/IntersectionArea/IntersectionObserver';
export default function QuestionListPage() { export default function QuestionListPage() {
const { lectureId } = useParams(); const { lectureId } = useParams();
const { data } = useQnas(lectureId); const { data, fetchNextPage, hasNextPage } = useQnas(lectureId);
const questions = data?.data; const questions = data.pages.flatMap((page) => page.data);
const userType = useBoundStore((state) => state.userType); const userType = useBoundStore((state) => state.userType);
return ( return (
@ -24,6 +25,7 @@ export default function QuestionListPage() {
to={`${question.id}`} to={`${question.id}`}
/> />
))} ))}
{hasNextPage && <IntersectionArea onObserve={() => fetchNextPage()} />}
</ArticleBoard> </ArticleBoard>
); );
} }