feat: View linear logic

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -68,7 +68,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
     return (
         <>
             <Paper
-            id={question.content.id}
+                id={question.id}
                 data-cy="quiz-question-card"
                 sx={{
                     maxWidth: "796px",

src/pages/ViewPublicationPage/Footer.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Box, Typography, Button, useTheme } from "@mui/material";
+import { Box, Button, useTheme } from "@mui/material";
 
 import { useQuizViewStore } from "@root/quizView";
 
@@ -11,11 +11,16 @@ import { getQuestionByContentId } from "@root/questions/actions";
 import { enqueueSnackbar } from "notistack";
 
 type FooterProps = {
+  questions: AnyTypedQuizQuestion[];
   setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
   question: QuizQuestionBase;
 };
 
-export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
+export const Footer = ({
+  setCurrentQuestion,
+  questions,
+  question,
+}: FooterProps) => {
   const [disabledQuestionsId, setDisabledQuestionsId] = useState<Set<string>>(
     new Set()
   );
@@ -24,28 +29,55 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
   const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
   const { answers } = useQuizViewStore();
   const theme = useTheme();
+  const linear = !questions.find(
+    ({ content }) => content.rule.parentId === "root"
+  );
 
   useEffect(() => {
     // Логика для аргумента disabled у кнопки "Назад"
-    if (question?.content.rule.parentId === "root") {
-      setDisablePreviousButton(true);
+    if (linear) {
+      const questionIndex = questions.findIndex(({ id }) => id === question.id);
+
+      const previousQuestion = questions[questionIndex - 1];
+
+      if (previousQuestion) {
+        setDisablePreviousButton(false);
+      } else {
+        setDisablePreviousButton(true);
+      }
     } else {
-      setDisablePreviousButton(false);
+      if (question?.content.rule.parentId === "root") {
+        setDisablePreviousButton(true);
+      } else {
+        setDisablePreviousButton(false);
+      }
     }
 
     // Логика для аргумента disabled у кнопки "Далее"
-    const nextQuestionId = getNextQuestionId();
-    if (nextQuestionId) {
-      setDisableNextButton(false);
-    } else {
-      const nextQuestion = getQuestionByContentId(
-        question.content.rule.default
-      );
-      if (nextQuestion?.type) {
+    if (linear) {
+      const questionIndex = questions.findIndex(({ id }) => id === question.id);
+
+      const nextQuestion = questions[questionIndex + 1];
+
+      if (nextQuestion) {
         setDisableNextButton(false);
       } else {
         setDisableNextButton(true);
       }
+    } else {
+      const nextQuestionId = getNextQuestionId();
+      if (nextQuestionId) {
+        setDisableNextButton(false);
+      } else {
+        const nextQuestion = getQuestionByContentId(
+          question.content.rule.default
+        );
+        if (nextQuestion?.type) {
+          setDisableNextButton(false);
+        } else {
+          setDisableNextButton(true);
+        }
+      }
     }
   }, [question]);
 
@@ -79,6 +111,18 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
   };
 
   const followPreviousStep = () => {
+    if (linear) {
+      const questionIndex = questions.findIndex(({ id }) => id === question.id);
+
+      const previousQuestion = questions[questionIndex - 1];
+
+      if (previousQuestion) {
+        setCurrentQuestion(previousQuestion);
+      }
+
+      return;
+    }
+
     if (question?.content.rule.parentId !== "root") {
       const parent = getQuestionByContentId(question?.content.rule.parentId);
       if (parent?.type) {
@@ -92,6 +136,18 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
   };
 
   const followNextStep = () => {
+    if (linear) {
+      const questionIndex = questions.findIndex(({ id }) => id === question.id);
+
+      const nextQuestion = questions[questionIndex + 1];
+
+      if (nextQuestion) {
+        setCurrentQuestion(nextQuestion);
+      }
+
+      return;
+    }
+
     const nextQuestionId = getNextQuestionId();
 
     if (nextQuestionId) {

src/pages/ViewPublicationPage/Question.tsx

@@ -13,11 +13,11 @@ import { Page } from "./questions/Page";
 import { Rating } from "./questions/Rating";
 import { Footer } from "./Footer";
 
-import { useState, type FC } from "react";
+import { useState, type FC, useEffect } from "react";
 import type { QuestionType } from "../../model/question/question";
 import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
 import { useCurrentQuiz } from "@root/quizes/hooks";
- import { getQuestionByContentId } from "@root/questions/actions";
+import { getQuestionByContentId } from "@root/questions/actions";
 
 type QuestionProps = {
   stepNumber: number;
@@ -39,12 +39,24 @@ const QUESTIONS_MAP: any = {
   rating: Rating,
 };
 
-export const Question = ({
-  questions,
-}: QuestionProps) => {
+export const Question = ({ questions }: QuestionProps) => {
   const quiz = useCurrentQuiz();
-  const [currentQuestion, setCurrentQuestion] = useState(getQuestionByContentId(quiz?.config.haveRoot || ""))
-  if (!currentQuestion) return <>не смог отобразить вопрос</>
+  const [currentQuestion, setCurrentQuestion] =
+    useState<AnyTypedQuizQuestion>();
+
+  useEffect(() => {
+    const nextQuestion = getQuestionByContentId(quiz?.config.haveRoot || "");
+
+    if (nextQuestion?.type) {
+      setCurrentQuestion(nextQuestion);
+
+      return;
+    }
+
+    setCurrentQuestion(questions[0]);
+  }, []);
+
+  if (!currentQuestion) return <>не смог отобразить вопрос</>;
 
   const QuestionComponent =
     QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
@@ -60,9 +72,10 @@ export const Question = ({
           margin: "0 auto",
         }}
       >
-        <QuestionComponent currentQuestion={currentQuestion}/>
+        <QuestionComponent currentQuestion={currentQuestion} />
       </Box>
       <Footer
+        questions={questions}
         question={currentQuestion}
         setCurrentQuestion={setCurrentQuestion}
       />