diff --git a/apps/app/src/app/questions/[technology]/[page]/page.tsx b/apps/app/src/app/questions/[technology]/[page]/page.tsx new file mode 100644 index 00000000..0ed431a6 --- /dev/null +++ b/apps/app/src/app/questions/[technology]/[page]/page.tsx @@ -0,0 +1,40 @@ +import { redirect } from "next/navigation"; +import { QuestionItem } from "../../../../components/QuestionItem/QuestionItem"; +import { QuestionsPagination } from "../../../../components/QuestionsPagination"; +import { PAGE_SIZE } from "../../../../lib/constants"; +import { technologies } from "../../../../lib/technologies"; +import { getAllQuestions } from "../../../../services/questions.service"; + +export default async function QuestionsPage({ + params, +}: { + params: { technology: string; page: string }; +}) { + const page = parseInt(params.page); + + if (!technologies.includes(params.technology) || isNaN(page)) { + return redirect("/"); + } + + const { data } = await getAllQuestions({ + category: params.technology, + limit: PAGE_SIZE, + offset: (page - 1) * PAGE_SIZE, + }); + + return ( +
+ {data.data.map(({ id, question, _levelId, acceptedAt, votesCount }) => ( + + ))} + +
+ ); +} diff --git a/apps/app/src/app/questions/[technology]/page.tsx b/apps/app/src/app/questions/[technology]/page.tsx index 67efac0a..1589989a 100644 --- a/apps/app/src/app/questions/[technology]/page.tsx +++ b/apps/app/src/app/questions/[technology]/page.tsx @@ -1,27 +1,5 @@ import { redirect } from "next/navigation"; -import { QuestionItem } from "../../../components/QuestionItem/QuestionItem"; -import { technologies } from "../../../lib/technologies"; -import { getAllQuestions } from "../../../services/questions.service"; -export default async function QuestionsPage({ params }: { params: { technology: string } }) { - if (!technologies.includes(params.technology)) { - return redirect("/"); - } - - const { data } = await getAllQuestions({ category: params.technology, limit: 20 }); - - return ( -
- {data.data.map(({ id, question, _levelId, acceptedAt, votesCount }) => ( - - ))} -
- ); -}; +export default function TechnologyPage({ params }: { params: { technology: string } }) { + return redirect(`/questions/${params.technology}/1`); +} diff --git a/apps/app/src/app/questions/layout.tsx b/apps/app/src/app/questions/layout.tsx index 1abe46ac..6d1f9f47 100644 --- a/apps/app/src/app/questions/layout.tsx +++ b/apps/app/src/app/questions/layout.tsx @@ -7,7 +7,7 @@ const QuestionsPageLayout = ({ children }: { readonly children: ReactNode }) => <> -
{children}
+
{children}
diff --git a/apps/app/src/app/questions/page.tsx b/apps/app/src/app/questions/page.tsx index 7f1cad0a..4fdc893e 100644 --- a/apps/app/src/app/questions/page.tsx +++ b/apps/app/src/app/questions/page.tsx @@ -1,5 +1,5 @@ import { redirect } from "next/navigation"; export default function QuestionsPage() { - return redirect("/questions/js"); + return redirect("/questions/js/1"); } diff --git a/apps/app/src/components/ActiveLink.tsx b/apps/app/src/components/ActiveLink.tsx index a356a7c6..2bface36 100644 --- a/apps/app/src/components/ActiveLink.tsx +++ b/apps/app/src/components/ActiveLink.tsx @@ -18,7 +18,7 @@ export const ActiveLink = ({ ...rest }: ActiveLinkProps) => { const pathname = usePathname(); - const isActive = href === pathname; + const isActive = pathname?.startsWith(href.toString()); return ( diff --git a/apps/app/src/components/QuestionsPagination.tsx b/apps/app/src/components/QuestionsPagination.tsx new file mode 100644 index 00000000..c3b2804f --- /dev/null +++ b/apps/app/src/components/QuestionsPagination.tsx @@ -0,0 +1,26 @@ +import { PAGE_SIZE } from "../lib/constants"; +import { ActiveLink } from "./ActiveLink"; + +type QuestionsPaginationProps = Readonly<{ + technology: string; + total: number; +}>; + +export const QuestionsPagination = ({ technology, total }: QuestionsPaginationProps) => { + const pages = Math.ceil(total / PAGE_SIZE); + + return ( +
+ {Array.from({ length: pages }).map((_, i) => ( + + {i + 1} + + ))} +
+ ); +}; diff --git a/apps/app/src/lib/constants.ts b/apps/app/src/lib/constants.ts new file mode 100644 index 00000000..bfab9067 --- /dev/null +++ b/apps/app/src/lib/constants.ts @@ -0,0 +1 @@ +export const PAGE_SIZE = 20;