feat(app): add ability to edit question on questions page and single question page for admin

apps/app/src/components/CtaHeader/CtaHeader.tsx

@@ -13,7 +13,7 @@ type CtaHeaderActiveLinkProps = Readonly<{
 const CtaHeaderActiveLink = (props: CtaHeaderActiveLinkProps) => (
 	<ActiveLink
 		activeClassName="font-bold border-white"
-		className="flex h-12 grow items-center justify-center border-b-2 border-transparent px-7 transition-opacity hover:opacity-80"
+		className="flex h-12 grow items-center justify-center border-b-2 border-transparent px-7 text-center transition-opacity hover:opacity-80"
 		{...props}
 	/>
 );

apps/app/src/components/QuestionsList/QuestionsList.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { useGetQuestionsVotes } from "../../hooks/useQuestionVoting";
-import { Question, QuestionFilter } from "../../types";
+import { AdminQuestion, QuestionFilter } from "../../types";
 import { QuestionItem } from "../QuestionItem/QuestionItem";
 import { QuestionLevel } from "../QuestionItem/QuestionLevel";
 import { QuestionVoting } from "./QuestionVoting";
+import { QuestionsManagement } from "./QuestionsManagment";
 
 type QuestionsListProps = Readonly<{
-	questions: Question[];
+	questions: AdminQuestion[];
 	questionFilter: QuestionFilter;
 }>;
 
@@ -20,8 +21,11 @@ export const QuestionsList = ({ questions, questionFilter }: QuestionsListProps)
 
 	return (
 		<ul className="space-y-10">
-			{questions.map(({ id, mdxContent, _levelId, _categoryId, acceptedAt }) => {
-				const questionVote = questionsVotes?.find((questionVote) => questionVote.id === id);
+			{questions.map((question) => {
+				const { id, mdxContent, _levelId, _categoryId, acceptedAt } = question;
+				const questionVote = questionsVotes?.find(
+					(questionVote) => questionVote.id === question.id,
+				);
 				const [votes, voted] = questionVote
 					? [questionVote.votesCount, questionVote.currentUserVotedOn]
 					: [0, false];
@@ -35,12 +39,15 @@ export const QuestionsList = ({ questions, questionFilter }: QuestionsListProps)
 							technology={_categoryId}
 							acceptedAt={acceptedAt}
 							leftSection={
-								<QuestionVoting
-									questionId={id}
-									votes={votes}
-									voted={voted}
-									onQuestionVote={onQuestionVote}
-								/>
+								<div className="flex flex-col gap-1.5">
+									<QuestionVoting
+										questionId={id}
+										votes={votes}
+										voted={voted}
+										onQuestionVote={onQuestionVote}
+									/>
+									<QuestionsManagement question={question} />
+								</div>
 							}
 							rightSection={<QuestionLevel level={_levelId} />}
 						/>

apps/app/src/components/QuestionsList/QuestionsManagment.tsx

@@ -0,0 +1,24 @@
+import { Button } from "../Button/Button";
+import { PrivateElement } from "../PrivateElement";
+import PencilIcon from "../../../public/icons/pencil.svg";
+import { AdminQuestion } from "../../types";
+import { useUIContext } from "../../providers/UIProvider";
+
+export const QuestionsManagement = ({ question }: { question: AdminQuestion }) => {
+	const { openModal } = useUIContext();
+
+	return (
+		<PrivateElement role="admin">
+			<div className="mr-3 flex flex-col justify-start gap-1.5">
+				<Button
+					variant="branding"
+					className="m-px flex w-24 min-w-0 items-center justify-center gap-2 p-0"
+					onClick={() => openModal("AddQuestionModal", question)}
+				>
+					<PencilIcon className="fill-violet-700 dark:fill-neutral-200" />
+					Edytuj
+				</Button>
+			</div>
+		</PrivateElement>
+	);
+};

apps/app/src/components/SingleQuestion.tsx

@@ -1,19 +1,19 @@
 "use client";
 
-import { Question } from "../types";
+import { AdminQuestion, Question } from "../types";
 import { useGetQuestionVotesById } from "../hooks/useQuestionVoting";
 import { QuestionItem } from "./QuestionItem/QuestionItem";
 import { QuestionVoting } from "./QuestionsList/QuestionVoting";
 import { QuestionTechnology } from "./QuestionItem/QuestionTechnology";
 import { QuestionLevel } from "./QuestionItem/QuestionLevel";
+import { QuestionsManagement } from "./QuestionsList/QuestionsManagment";
 
 type SingleQuestionProps = Readonly<{
-	question: Question;
+	question: AdminQuestion;
 }>;
 
-export const SingleQuestion = ({
-	question: { id, mdxContent, _levelId, _categoryId, acceptedAt },
-}: SingleQuestionProps) => {
+export const SingleQuestion = ({ question }: SingleQuestionProps) => {
+	const { id, mdxContent, _levelId, _categoryId, acceptedAt } = question;
 	const { votes, voted, refetch } = useGetQuestionVotesById(id);
 
 	return (
@@ -24,14 +24,17 @@ export const SingleQuestion = ({
 			technology={_categoryId}
 			acceptedAt={acceptedAt}
 			leftSection={
-				<QuestionVoting
-					questionId={id}
-					votes={votes}
-					voted={voted}
-					onQuestionVote={() => {
-						void refetch();
-					}}
-				/>
+				<div className="flex flex-col gap-1.5">
+					<QuestionVoting
+						questionId={id}
+						votes={votes}
+						voted={voted}
+						onQuestionVote={() => {
+							void refetch();
+						}}
+					/>
+					<QuestionsManagement question={question} />
+				</div>
 			}
 			rightSection={
 				<div className="flex flex-col items-center">

apps/app/src/components/UserQuestions/UserQuestionLeftSection.tsx

@@ -1,14 +1,25 @@
+import { useEffect } from "react";
 import { useUIContext } from "../../providers/UIProvider";
 import { AdminQuestion } from "../../types";
 import PencilIcon from "../../../public/icons/pencil.svg";
 import { Button } from "../Button/Button";
 
 type UserQuestionLeftSectionProps = Readonly<{
 	question: AdminQuestion;
+	refetchQuestions: () => void;
 }>;
 
-export const UserQuestionLeftSection = ({ question }: UserQuestionLeftSectionProps) => {
-	const { openModal } = useUIContext();
+export const UserQuestionLeftSection = ({
+	question,
+	refetchQuestions,
+}: UserQuestionLeftSectionProps) => {
+	const { openModal, openedModal } = useUIContext();
+
+	useEffect(() => {
+		if (!openedModal) {
+			refetchQuestions();
+		}
+	}, [openedModal, refetchQuestions]);
 
 	return (
 		<Button

apps/app/src/components/UserQuestions/UserQuestions.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense } from "react";
+import { Suspense, useCallback } from "react";
 import { useGetAllQuestions } from "../../hooks/useGetAllQuestions";
 import { useUser } from "../../hooks/useUser";
 import { Technology } from "../../lib/technologies";
@@ -16,13 +16,17 @@ type UserQuestionsProps = Readonly<{
 
 export const UserQuestions = ({ page, technology, levels }: UserQuestionsProps) => {
 	const { userData } = useUser();
-	const { isSuccess, data } = useGetAllQuestions({
+	const { isSuccess, data, refetch } = useGetAllQuestions({
 		page,
 		technology,
 		levels,
 		userId: userData?._user.id,
 	});
 
+	const refetchQuestions = useCallback(() => {
+		void refetch();
+	}, [refetch]);
+
 	return (
 		<FilterableQuestionsList
 			page={page}
@@ -32,7 +36,7 @@ export const UserQuestions = ({ page, technology, levels }: UserQuestionsProps)
 		>
 			{isSuccess && data.data.data.length > 0 ? (
 				<Suspense>
-					<UserQuestionsList questions={data.data.data} />
+					<UserQuestionsList questions={data.data.data} refetchQuestions={refetchQuestions} />
 				</Suspense>
 			) : (
 				<p className="mt-10 text-2xl font-bold uppercase text-primary dark:text-neutral-200">

apps/app/src/components/UserQuestions/UserQuestionsList.tsx

@@ -10,9 +10,10 @@ import { UserQuestionLeftSection } from "./UserQuestionLeftSection";
 
 type UserQuestionsListProps = Readonly<{
 	questions: APIQuestion[];
+	refetchQuestions: () => void;
 }>;
 
-export const UserQuestionsList = memo(({ questions }: UserQuestionsListProps) => {
+export const UserQuestionsList = memo(({ questions, refetchQuestions }: UserQuestionsListProps) => {
 	const serializedQuestions = questions.map((question) =>
 		use(
 			(async () => {
@@ -29,7 +30,9 @@ export const UserQuestionsList = memo(({ questions }: UserQuestionsListProps) =>
 					<QuestionItem
 						level={question._levelId}
 						technology={question._categoryId}
-						leftSection={<UserQuestionLeftSection question={question} />}
+						leftSection={
+							<UserQuestionLeftSection question={question} refetchQuestions={refetchQuestions} />
+						}
 						rightSection={
 							<div className="flex flex-col items-center">
 								<QuestionTechnology technology={question._categoryId} />

apps/app/src/lib/question.ts

@@ -7,7 +7,7 @@ export type QuestionStatus = typeof statuses[number];
 
 export const serializeQuestionToMarkdown = async ({ question, ...rest }: APIQuestion) => {
 	const mdxContent = await serializeSource(question);
-	return { mdxContent, ...rest };
+	return { mdxContent, question, ...rest };
 };
 
 export const parseStatusQuery = (query: QueryParam | null): QuestionStatus | null => {