feat(app): add questions voting (#412)

* feat(app): add questions voting

* feat(app): add questions voting filtration

* refactor(app): refactor question voting

* refactor(app): move QuestionVoting logic to hook

Co-authored-by: Michał Miszczyszyn <[email protected]>

Author: xStrixU

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

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

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

@@ -7,7 +7,7 @@ import { DEFAULT_SORT_BY_QUERY, parseQuerySortBy } from "../../../../../lib/orde
 import { parseQueryLevels } from "../../../../../lib/level";
 import { technologies } from "../../../../../lib/technologies";
 import { getAllQuestions } from "../../../../../services/questions.service";
-import { Params, SearchParams } from "../../../../../types";
+import { Params, QuestionFilter, SearchParams } from "../../../../../types";
 
 export default async function QuestionsPage({
 	params,
@@ -24,26 +24,28 @@ export default async function QuestionsPage({
 		return redirect("/");
 	}
 
-	const { data } = await getAllQuestions({
+	const questionFilter: QuestionFilter = {
 		category: params.technology,
 		limit: PAGE_SIZE,
 		offset: (page - 1) * PAGE_SIZE,
 		orderBy: sortBy?.orderBy,
 		order: sortBy?.order,
 		level: levels?.join(","),
-	});
+	};
+
+	const { data } = await getAllQuestions(questionFilter);
 
 	return (
 		<div className="flex flex-col gap-y-10">
 			<QuestionsHeader technology={params.technology} total={data.meta.total} />
-			{data.data.map(({ id, question, _levelId, acceptedAt, votesCount }) => (
+			{data.data.map(({ id, question, _levelId, acceptedAt }) => (
 				<QuestionItem
 					key={id}
+					id={id}
 					title={question}
 					level={_levelId}
 					creationDate={new Date(acceptedAt || "")}
-					votes={votesCount}
-					voted={id % 2 === 0}
+					questionFilter={questionFilter}
 				/>
 			))}
 			<QuestionsPagination technology={params.technology} total={data.meta.total} />

apps/app/src/components/QuestionItem/QuestionItem.stories.ts

@@ -7,8 +7,6 @@ const meta: Meta<typeof QuestionItem> = {
 	args: {
 		title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
 		creationDate: new Date(),
-		votes: 1,
-		voted: true,
 	},
 };
 

apps/app/src/components/QuestionItem/QuestionItem.tsx

@@ -1,20 +1,27 @@
 import Link from "next/link";
 import { format } from "../../utils/intl";
+import { QuestionFilter } from "../../types";
 import { QuestionLevel } from "./QuestionLevel";
 import { QuestionVoting } from "./QuestionVoting";
 import type { Level } from "./QuestionLevel";
 
 type QuestionItemProps = Readonly<{
+	id: number;
 	title: string;
-	votes: number;
-	voted: boolean;
 	level: Level;
 	creationDate: Date;
+	questionFilter: QuestionFilter;
 }>;
 
-export const QuestionItem = ({ title, votes, voted, level, creationDate }: QuestionItemProps) => (
+export const QuestionItem = ({
+	id,
+	title,
+	level,
+	creationDate,
+	questionFilter,
+}: QuestionItemProps) => (
 	<article className="flex bg-white p-5 text-sm text-neutral-500 shadow-md dark:bg-white-dark dark:text-neutral-200">
-		<QuestionVoting votes={votes} voted={voted} />
+		<QuestionVoting questionId={id} questionFilter={questionFilter} />
 		<h3 className="grow">{title}</h3>
 		<div className="ml-4 flex min-w-max flex-col items-end">
 			<QuestionLevel level={level} />

apps/app/src/components/QuestionItem/QuestionVoting.tsx

@@ -1,14 +1,39 @@
+"use client";
+
 import { twMerge } from "tailwind-merge";
+import { useDevFAQRouter } from "../../hooks/useDevFAQRouter";
 import { pluralize } from "../../utils/intl";
+import { QuestionFilter } from "../../types";
+import { useQuestionVoting } from "../../hooks/useQuestionVoting";
+import { useGetQuestionVotes } from "../../hooks/useGetQuestionVotes";
 
 type QuestionVotingProps = Readonly<{
-	votes: number;
-	voted: boolean;
+	questionId: number;
+	questionFilter: QuestionFilter;
 }>;
 
 const votesPluralize = pluralize("głos", "głosy", "głosów");
 
-export const QuestionVoting = ({ votes, voted }: QuestionVotingProps) => {
+export const QuestionVoting = ({ questionId, questionFilter }: QuestionVotingProps) => {
+	const { votes, voted, refetch } = useGetQuestionVotes({ questionId, questionFilter });
+	const { upvote, downvote } = useQuestionVoting();
+	const { requireLoggedIn } = useDevFAQRouter();
+
+	const handleClick = () => {
+		const mutation = !voted ? upvote : downvote;
+
+		mutation.mutate(
+			{
+				id: questionId,
+			},
+			{
+				onSuccess: () => {
+					void refetch();
+				},
+			},
+		);
+	};
+
 	return (
 		<button
 			className={twMerge(
@@ -19,6 +44,7 @@ export const QuestionVoting = ({ votes, voted }: QuestionVotingProps) => {
 			aria-label={`To pytanie ma ${votes} ${votesPluralize(votes)}. Kliknij, aby ${
 				voted ? "usunąć" : "dodać"
 			} swój głos.`}
+			onClick={requireLoggedIn(handleClick)}
 		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"

apps/app/src/hooks/useDevFAQRouter.ts

@@ -1,9 +1,11 @@
 import { usePathname, useSearchParams, useRouter } from "next/navigation";
+import { useUser } from "./useUser";
 
 export const useDevFAQRouter = () => {
 	const router = useRouter();
 	const searchParams = useSearchParams();
 	const pathname = usePathname();
+	const { userData } = useUser();
 
 	const mergeQueryParams = (data: Record<string, string>) => {
 		const params = { ...Object.fromEntries(searchParams.entries()), ...data };
@@ -14,5 +16,13 @@ export const useDevFAQRouter = () => {
 		}
 	};
 
-	return { mergeQueryParams };
+	const requireLoggedIn = <T>(callback: (...args: T[]) => unknown) => {
+		if (!userData) {
+			return () => router.push(`/login?previousPath=${pathname || "/"}`);
+		}
+
+		return callback;
+	};
+
+	return { mergeQueryParams, requireLoggedIn };
 };

apps/app/src/hooks/useGetQuestionVotes.ts

@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import { getQuestionsVotes } from "../services/questions.service";
+import { QuestionFilter } from "../types";
+import { useUser } from "./useUser";
+
+export const useGetQuestionVotes = ({
+	questionId,
+	questionFilter,
+}: {
+	questionId: number;
+	questionFilter: QuestionFilter;
+}) => {
+	const { data, refetch } = useQuery({
+		queryKey: ["votes", questionFilter],
+		queryFn: () => getQuestionsVotes(questionFilter),
+	});
+	const { userData } = useUser();
+
+	const question = data?.data.data.find(({ id }) => id === questionId);
+	const votes = question ? question.votesCount : 0;
+	const voted = userData && question ? question.currentUserVotedOn : false;
+
+	return { votes, voted, refetch };
+};

apps/app/src/hooks/useQuestionVoting.ts

@@ -0,0 +1,9 @@
+import { useMutation } from "@tanstack/react-query";
+import { downvoteQuestion, upvoteQuestion } from "../services/questions.service";
+
+export const useQuestionVoting = () => {
+	const upvote = useMutation(upvoteQuestion);
+	const downvote = useMutation(downvoteQuestion);
+
+	return { upvote, downvote };
+};

apps/app/src/services/questions.service.ts

@@ -1,3 +1,9 @@
 import { fetcher } from "../lib/fetcher";
 
 export const getAllQuestions = fetcher.path("/questions").method("get").create();
+
+export const getQuestionsVotes = fetcher.path("/questions/votes").method("get").create();
+
+export const upvoteQuestion = fetcher.path("/questions/{id}/votes").method("post").create();
+
+export const downvoteQuestion = fetcher.path("/questions/{id}/votes").method("delete").create();

apps/app/src/types.ts

@@ -1,8 +1,14 @@
 import { paths } from "openapi-types";
 
+type ExcludeUndefined<T> = Exclude<T, undefined>;
+
 export type UserData =
 	paths["/auth/me"]["get"]["responses"][200]["content"]["application/json"]["data"];
 
+export type QuestionFilter = ExcludeUndefined<
+	ExcludeUndefined<paths["/questions"]["get"]["parameters"]>["query"]
+>;
+
 export type Params<T extends string> = {
 	readonly [K in T]: string;
 };