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

apps/app/src/components/AddQuestionModal.tsx

@@ -54,7 +54,7 @@ export const AddQuestionModal = (props: ComponentProps<typeof BaseModal>) => {
 			onSuccess: () => {
 				setSelectData({});
 				setContent("");
-				modalData ? closeModal() : openModal("AddQuestionConfirmationModal");
+				modalData ? handleCloseModal() : openModal("AddQuestionConfirmationModal");
 			},
 			onError: () => setIsError(true),
 		};
@@ -78,8 +78,15 @@ export const AddQuestionModal = (props: ComponentProps<typeof BaseModal>) => {
 			}
 		};
 
+	const handleCloseModal = () => {
+		closeModal();
+		if (modalData?.customOnClose) {
+			modalData.customOnClose();
+		}
+	};
+
 	return (
-		<BaseModal {...props}>
+		<BaseModal {...props} onClose={handleCloseModal}>
 			<BaseModal.Title modalId={props.modalId}>
 				{modalData ? "Edytuj" : "Nowe"} pytanie
 			</BaseModal.Title>
@@ -135,7 +142,7 @@ export const AddQuestionModal = (props: ComponentProps<typeof BaseModal>) => {
 					<Button
 						type="button"
 						variant="branding"
-						onClick={closeModal}
+						onClick={handleCloseModal}
 						className="dark:focus:shadow-white"
 					>
 						Anuluj

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/QuestionAnswers/AnswerForm/AnswerForm.tsx

@@ -36,7 +36,9 @@ export const AnswerForm = ({
 	const [isError, setIsError] = useState(false);
 
 	const disabled =
-		content.trim().length === 0 || !sources.every((source) => URL_REGEX.test(source));
+		content.trim().length === 0 ||
+		!sources.every((source) => URL_REGEX.test(source)) ||
+		initContent === content;
 
 	const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
 		event.preventDefault();

apps/app/src/components/QuestionAnswers/EditAnswer.tsx

@@ -43,7 +43,7 @@ export const EditAnswer = ({
 		return (
 			<div className="mt-4">
 				<AnswerForm
-					title="Edytuj odpowiedź"
+					title="Zapisz zmiany"
 					initContent={content}
 					initSources={sources}
 					error={isError}

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

@@ -5,7 +5,7 @@ import { Technology } from "../../lib/technologies";
 import { formatDate } from "../../utils/intl";
 import { Box } from "../Box";
 import { MarkdownContent } from "../MarkdownContent";
-import { Level, QuestionLevel } from "./QuestionLevel";
+import { Level } from "./QuestionLevel";
 
 type QuestionItemProps = Readonly<{
 	id: number;

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

@@ -1,16 +1,27 @@
 "use client";
 
+import dynamic from "next/dynamic";
 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";
 
 type QuestionsListProps = Readonly<{
-	questions: Question[];
+	questions: AdminQuestion[];
 	questionFilter: QuestionFilter;
 }>;
 
+const QuestionsManagement = dynamic(
+	() =>
+		import(/* webpackChunkName: "QuestionsManagement" */ "./QuestionsManagment").then(
+			(mod) => mod.QuestionsManagement,
+		),
+	{
+		ssr: false,
+	},
+);
+
 export const QuestionsList = ({ questions, questionFilter }: QuestionsListProps) => {
 	const { questionsVotes, refetch } = useGetQuestionsVotes(questionFilter);
 
@@ -20,8 +31,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 +49,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,33 @@
+import { useRouter } from "next/navigation";
+import { useCallback } from "react";
+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();
+
+	const router = useRouter();
+	const onQuestionUpdate = useCallback(() => {
+		router.refresh();
+	}, [router]);
+
+	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, customOnClose: onQuestionUpdate })
+					}
+				>
+					<PencilIcon className="fill-violet-700 dark:fill-neutral-200" />
+					Edytuj
+				</Button>
+			</div>
+		</PrivateElement>
+	);
+};

apps/app/src/components/SingleQuestion.tsx

@@ -1,19 +1,29 @@
 "use client";
 
-import { Question } from "../types";
+import dynamic from "next/dynamic";
+import { AdminQuestion } 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";
 
+const QuestionsManagement = dynamic(
+	() =>
+		import(
+			/* webpackChunkName: "QuestionsManagement" */ "../components/QuestionsList/QuestionsManagment"
+		).then((mod) => mod.QuestionsManagement),
+	{
+		ssr: false,
+	},
+);
+
 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 +34,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 (
 		<div className="mr-3 flex flex-col justify-start gap-1.5">

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 => {

apps/app/src/providers/UIProvider.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 import type { AdminQuestion } from "../types";
 
 interface ModalData {
-	AddQuestionModal: AdminQuestion;
+	AddQuestionModal: AdminQuestion & { customOnClose?: () => void };
 	AddQuestionConfirmationModal: never;
 }