feat: add admin dashboard for managing answers

apps/api/modules/answers/answers.params.ts

@@ -0,0 +1,22 @@
+import { Prisma } from "@prisma/client";
+import { kv } from "../../utils.js";
+import { GetAnswersQuery } from "./answers.schemas";
+
+export const getAnswersPrismaParams = ({ limit, offset, order, orderBy }: GetAnswersQuery) => {
+	return {
+		take: limit,
+		skip: offset,
+		...(order &&
+			orderBy && {
+				orderBy: {
+					...(orderBy === "votesCount"
+						? {
+								QuestionAnswerVote: {
+									_count: order,
+								},
+						  }
+						: kv(orderBy, order)),
+				},
+			}),
+	} satisfies Prisma.QuestionAnswerFindManyArgs;
+};

apps/api/modules/answers/answers.routes.ts

@@ -4,12 +4,14 @@ import { FastifyPluginAsync, preHandlerAsyncHookHandler, preHandlerHookHandler }
 import { PrismaErrorCode } from "../db/prismaErrors.js";
 import { isPrismaError } from "../db/prismaErrors.util.js";
 import { dbAnswerToDto } from "./answers.mapper.js";
+import { getAnswersPrismaParams } from "./answers.params.js";
 import {
-	getAnswersSchema,
+	getAnswersRelatedToPostSchema,
 	createAnswerSchema,
 	deleteAnswerSchema,
 	updateAnswerSchema,
 	upvoteAnswerSchema,
+	getAnswersSchema,
 } from "./answers.schemas.js";
 
 export const answerSelect = (userId: number) => {
@@ -60,9 +62,59 @@ const answersPlugin: FastifyPluginAsync = async (fastify) => {
 	};
 
 	fastify.withTypeProvider<TypeBoxTypeProvider>().route({
-		url: "/questions/:id/answers",
+		url: "/answers",
 		method: "GET",
 		schema: getAnswersSchema,
+		async handler(request) {
+			const params = getAnswersPrismaParams(request.query);
+			const [total, answers] = await Promise.all([
+				fastify.db.questionAnswer.count(),
+				fastify.db.questionAnswer.findMany({
+					...params,
+					select: {
+						id: true,
+						content: true,
+						sources: true,
+						createdAt: true,
+						updatedAt: true,
+						CreatedBy: {
+							select: { id: true, firstName: true, lastName: true, socialLogin: true },
+						},
+						_count: {
+							select: {
+								QuestionAnswerVote: true,
+							},
+						},
+					},
+				}),
+			]);
+
+			return {
+				data: answers.map((a) => {
+					return {
+						id: a.id,
+						content: a.content,
+						sources: a.sources,
+						createdAt: a.createdAt.toISOString(),
+						updatedAt: a.createdAt.toISOString(),
+						createdBy: {
+							id: a.CreatedBy.id,
+							firstName: a.CreatedBy.firstName,
+							lastName: a.CreatedBy.lastName,
+							socialLogin: a.CreatedBy.socialLogin as Record<string, string | number>,
+						},
+						votesCount: a._count.QuestionAnswerVote,
+					};
+				}),
+				meta: { total },
+			};
+		},
+	});
+
+	fastify.withTypeProvider<TypeBoxTypeProvider>().route({
+		url: "/questions/:id/answers",
+		method: "GET",
+		schema: getAnswersRelatedToPostSchema,
 		async handler(request) {
 			const {
 				params: { id },

apps/api/modules/answers/answers.schemas.ts

@@ -1,4 +1,4 @@
-import { Type } from "@sinclair/typebox";
+import { Static, Type } from "@sinclair/typebox";
 
 const answerSchema = Type.Object({
 	id: Type.Number(),
@@ -15,7 +15,7 @@ const answerSchema = Type.Object({
 	}),
 });
 
-export const getAnswersSchema = {
+export const getAnswersRelatedToPostSchema = {
 	params: Type.Object({
 		id: Type.Integer(),
 	}),
@@ -89,3 +89,45 @@ export const downvoteAnswerSchema = {
 		204: Type.Never(),
 	},
 };
+
+const generateGetAnswersQuerySchema = Type.Partial(
+	Type.Object({
+		limit: Type.Integer(),
+		offset: Type.Integer(),
+		orderBy: Type.Union([
+			Type.Literal("createdAt"),
+			Type.Literal("updatedAt"),
+			Type.Literal("votesCount"),
+		]),
+		order: Type.Union([Type.Literal("asc"), Type.Literal("desc")]),
+	}),
+);
+
+export const getAnswersSchema = {
+	querystring: generateGetAnswersQuerySchema,
+	response: {
+		200: Type.Object({
+			data: Type.Array(
+				Type.Object({
+					id: Type.Number(),
+					content: Type.String(),
+					sources: Type.Array(Type.String()),
+					createdAt: Type.String({ format: "date-time" }),
+					updatedAt: Type.String({ format: "date-time" }),
+					createdBy: Type.Object({
+						id: Type.Integer(),
+						firstName: Type.Union([Type.String(), Type.Null()]),
+						lastName: Type.Union([Type.String(), Type.Null()]),
+						socialLogin: Type.Record(Type.String(), Type.Union([Type.String(), Type.Number()])),
+					}),
+					votesCount: Type.Integer(),
+				}),
+			),
+			meta: Type.Object({
+				total: Type.Integer(),
+			}),
+		}),
+	},
+};
+
+export type GetAnswersQuery = Static<typeof generateGetAnswersQuerySchema>;

apps/api/modules/questions/questions.params.ts

@@ -1,6 +1,6 @@
 import { Prisma } from "@prisma/client";
 import { kv } from "../../utils.js";
-import { GetQuestionsQuery } from "./questions.schemas.js";
+import { GetQuestionsQuery } from "./questions.schemas";
 
 export const getQuestionsPrismaParams = (
 	{

apps/api/modules/questions/questions.routes.ts

@@ -49,6 +49,7 @@ const questionsPlugin: FastifyPluginAsync = async (fastify) => {
 						levelId: true,
 						statusId: true,
 						acceptedAt: true,
+						updatedAt: true,
 						_count: {
 							select: {
 								QuestionVote: true,
@@ -66,6 +67,7 @@ const questionsPlugin: FastifyPluginAsync = async (fastify) => {
 					_levelId: q.levelId,
 					_statusId: q.statusId,
 					acceptedAt: q.acceptedAt?.toISOString(),
+					updatedAt: q.updatedAt?.toISOString(),
 					votesCount: q._count.QuestionVote,
 				};
 			});

apps/api/modules/questions/questions.schemas.ts

@@ -26,6 +26,7 @@ const generateGetQuestionsQuerySchema = <
 				Type.Literal("acceptedAt"),
 				Type.Literal("level"),
 				Type.Literal("votesCount"),
+				Type.Literal("updatedAt"),
 			]),
 			order: Type.Union([Type.Literal("asc"), Type.Literal("desc")]),
 			userId: Type.Integer(),
@@ -51,6 +52,7 @@ const generateQuestionShape = <
 		_levelId: Type.Union(args.levels.map((val) => Type.Literal(val))),
 		_statusId: Type.Union(args.statuses.map((val) => Type.Literal(val))),
 		acceptedAt: Type.Optional(Type.String({ format: "date-time" })),
+		updatedAt: Type.Optional(Type.String({ format: "date-time" })),
 	} as const;
 };
 

apps/app/next.config.js

@@ -81,6 +81,11 @@ const nextConfig = {
 				destination: "/user/questions/1",
 				permanent: false,
 			},
+			{
+				source: "/answers",
+				destination: "/answers/1",
+				permanent: false,
+			},
 		];
 	},
 };

apps/app/src/app/(main-layout)/admin/[status]/[page]/page.tsx

@@ -5,6 +5,7 @@ import { parseQueryLevels } from "../../../../../lib/level";
 import { statuses } from "../../../../../lib/question";
 import { parseTechnologyQuery } from "../../../../../lib/technologies";
 import { Params, SearchParams } from "../../../../../types";
+import { DEFAULT_SORT_BY_QUERY, parseQuerySortBy } from "../../../../../lib/order";
 
 const AdminPanel = dynamic(
 	() =>
@@ -19,19 +20,27 @@ export default function AdminPage({
 	searchParams,
 }: {
 	params: Params<"status" | "page">;
-	searchParams?: SearchParams<"technology" | "level">;
+	searchParams?: SearchParams<"technology" | "level" | "sortBy">;
 }) {
 	const page = Number.parseInt(params.page);
 	const technology = parseTechnologyQuery(searchParams?.technology);
 	const levels = parseQueryLevels(searchParams?.level);
+	const sortBy = parseQuerySortBy(searchParams?.sortBy || DEFAULT_SORT_BY_QUERY);
 
 	if (Number.isNaN(page) || !statuses.includes(params.status)) {
 		return redirect("/admin");
 	}
 
 	return (
 		<PrivateRoute role="admin" loginPreviousPath="/">
-			<AdminPanel page={page} technology={technology} status={params.status} levels={levels} />
+			<AdminPanel
+				page={page}
+				technology={technology}
+				status={params.status}
+				levels={levels}
+				order={sortBy?.order}
+				orderBy={sortBy?.orderBy}
+			/>
 		</PrivateRoute>
 	);
 }

apps/app/src/app/(main-layout)/answers/[page]/page.tsx

@@ -0,0 +1,26 @@
+import { redirect } from "next/navigation";
+import { AnswersDashboard } from "../../../../components/AnswersDashboard/AnswersDashboard";
+import { PrivateRoute } from "../../../../components/PrivateRoute";
+import { DEFAULT_ANSWERS_SORT_BY_QUERY, parseSortByQuery } from "../../../../lib/order";
+import { Params, SearchParams } from "../../../../types";
+
+export default function ManageQuestionsAnswers({
+	params,
+	searchParams,
+}: {
+	params: Params<"page">;
+	searchParams?: SearchParams<"sortBy">;
+}) {
+	const page = Number.parseInt(params.page);
+	const sortBy = parseSortByQuery(searchParams?.sortBy || DEFAULT_ANSWERS_SORT_BY_QUERY);
+
+	if (Number.isNaN(page)) {
+		return redirect("/answers/1");
+	}
+
+	return (
+		<PrivateRoute loginPreviousPath="/">
+			<AnswersDashboard page={page} order={sortBy?.order} orderBy={sortBy?.orderBy} />
+		</PrivateRoute>
+	);
+}

apps/app/src/app/(main-layout)/answers/head.tsx

@@ -0,0 +1,5 @@
+import { HeadTags } from "../../../components/HeadTags";
+
+export default function Head() {
+	return <HeadTags title="Odpowiedzi do pytań" />;
+}

apps/app/src/app/(main-layout)/answers/layout.tsx

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { Container } from "../../../components/Container";
+
+export default function UserPageLayout({ children }: { readonly children: ReactNode }) {
+	return <Container as="main">{children}</Container>;
+}

apps/app/src/app/(main-layout)/user/questions/[page]/page.tsx

@@ -2,6 +2,7 @@ import { redirect } from "next/navigation";
 import { PrivateRoute } from "../../../../../components/PrivateRoute";
 import { UserQuestions } from "../../../../../components/UserQuestions/UserQuestions";
 import { parseQueryLevels } from "../../../../../lib/level";
+import { DEFAULT_SORT_BY_QUERY, parseQuerySortBy } from "../../../../../lib/order";
 import { parseTechnologyQuery } from "../../../../../lib/technologies";
 import { Params, SearchParams } from "../../../../../types";
 
@@ -10,19 +11,26 @@ export default function UserQuestionsPage({
 	searchParams,
 }: {
 	params: Params<"page">;
-	searchParams?: SearchParams<"technology" | "level">;
+	searchParams?: SearchParams<"technology" | "level" | "sortBy">;
 }) {
 	const page = Number.parseInt(params.page);
 	const technology = parseTechnologyQuery(searchParams?.technology);
 	const levels = parseQueryLevels(searchParams?.level);
+	const sortBy = parseQuerySortBy(searchParams?.sortBy || DEFAULT_SORT_BY_QUERY);
 
 	if (Number.isNaN(page)) {
 		return redirect("/user/questions");
 	}
 
 	return (
 		<PrivateRoute loginPreviousPath="/">
-			<UserQuestions page={page} technology={technology} levels={levels} />
+			<UserQuestions
+				page={page}
+				technology={technology}
+				levels={levels}
+				order={sortBy?.order}
+				orderBy={sortBy?.orderBy}
+			/>
 		</PrivateRoute>
 	);
 }

apps/app/src/components/AdminPanel/AdminPanel.tsx

@@ -3,6 +3,7 @@
 import { Suspense, useCallback } from "react";
 import { useGetAllQuestions } from "../../hooks/useGetAllQuestions";
 import { Level } from "../../lib/level";
+import { Order, OrderBy } from "../../lib/order";
 import { QuestionStatus } from "../../lib/question";
 import { Technology } from "../../lib/technologies";
 import { FilterableQuestionsList } from "../FilterableQuestionsList/FilterableQuestionsList";
@@ -14,14 +15,25 @@ type AdminPanelProps = Readonly<{
 	technology: Technology | null;
 	levels: Level[] | null;
 	status: QuestionStatus;
+	order?: Order;
+	orderBy?: OrderBy;
 }>;
 
-export const AdminPanel = ({ page, technology, levels, status }: AdminPanelProps) => {
+export const AdminPanel = ({
+	page,
+	technology,
+	levels,
+	status,
+	order,
+	orderBy,
+}: AdminPanelProps) => {
 	const { isSuccess, data, refetch } = useGetAllQuestions({
 		page,
 		status,
 		technology,
 		levels,
+		order,
+		orderBy,
 	});
 
 	const refetchQuestions = useCallback(() => {
@@ -33,14 +45,14 @@ export const AdminPanel = ({ page, technology, levels, status }: AdminPanelProps
 			page={page}
 			total={data?.data.meta.total || 0}
 			getHref={(page) => `/admin/${status}/${page}`}
-			data={{ status, technology, levels }}
+			data={{ status, technology, levels, order, orderBy }}
 		>
 			{isSuccess && data.data.data.length > 0 ? (
 				<Suspense fallback={<Loading label="ładowanie pytań" type="article" admin />}>
 					<AdminPanelQuestionsList questions={data.data.data} refetchQuestions={refetchQuestions} />
 				</Suspense>
 			) : (
-				<p className="mt-10 text-2xl font-bold uppercase text-primary dark:text-neutral-200">
+				<p className="mt-10 text-center text-2xl font-bold uppercase text-primary dark:text-neutral-200">
 					{status === "accepted"
 						? "Nie znaleziono żadnego pytania"
 						: "Brak pytań do zaakceptowania"}