fix: rating icons

src/pages/ViewPublicationPage/Footer.tsx

@@ -58,12 +58,16 @@ export const Footer = ({
       ({ questionId }) => questionId === question.content.id
     );
 
-    if (question.required && answer?.changed) {
+    debugger;
-      setDisableNextButton(false);
+
+    if (question.required && answer) {
+      setDisableNextButton(true);
+
+      return;
     }
 
-    if (question.required && !answer?.changed) {
+    if (question.required && !answer) {
-      setDisableNextButton(true);
+      setDisableNextButton(false);
 
       return;
     }

src/pages/ViewPublicationPage/questions/Rating.tsx

@@ -7,6 +7,12 @@ import {
 
 import { useQuizViewStore, updateAnswer } from "@root/quizView";
 
+import TropfyIcon from "@icons/questionsPage/tropfyIcon";
+import FlagIcon from "@icons/questionsPage/FlagIcon";
+import HeartIcon from "@icons/questionsPage/heartIcon";
+import LikeIcon from "@icons/questionsPage/likeIcon";
+import LightbulbIcon from "@icons/questionsPage/lightbulbIcon";
+import HashtagIcon from "@icons/questionsPage/hashtagIcon";
 import StarIconMini from "@icons/questionsPage/StarIconMini";
 
 import type { QuizQuestionRating } from "../../../model/questionTypes/rating";
@@ -15,6 +21,37 @@ type RatingProps = {
   currentQuestion: QuizQuestionRating;
 };
 
+const buttonRatingForm = [
+  {
+    name: "star",
+    icon: (color: string) => <StarIconMini width={35} color={color} />,
+  },
+  {
+    name: "trophie",
+    icon: (color: string) => <TropfyIcon color={color} />,
+  },
+  {
+    name: "flag",
+    icon: (color: string) => <FlagIcon color={color} />,
+  },
+  {
+    name: "heart",
+    icon: (color: string) => <HeartIcon color={color} />,
+  },
+  {
+    name: "like",
+    icon: (color: string) => <LikeIcon color={color} />,
+  },
+  {
+    name: "bubble",
+    icon: (color: string) => <LightbulbIcon color={color} />,
+  },
+  {
+    name: "hashtag",
+    icon: (color: string) => <HashtagIcon color={color} />,
+  },
+];
+
 export const Rating = ({ currentQuestion }: RatingProps) => {
   const { answers } = useQuizViewStore();
   const theme = useTheme();
@@ -22,46 +59,44 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
     answers.find(
       ({ questionId }) => questionId === currentQuestion.content.id
     ) ?? {};
+  const form = buttonRatingForm.find(
+    ({ name }) => name === currentQuestion.content.form
+  );
 
   return (
     <Box>
       <Typography variant="h5">{currentQuestion.title}</Typography>
       <Box
         sx={{
-          display: "inline-block",
+          display: "inline-flex",
-          width: "100%",
+          alignItems: "center",
+          gap: "20px",
           marginTop: "20px",
         }}
       >
-        <RatingComponent
+        <Typography sx={{ color: theme.palette.grey2.main }}>
-          value={Number(answer || 0)}
+          {currentQuestion.content.ratingNegativeDescription}
-          onChange={(_, value) =>
+        </Typography>
-            updateAnswer(currentQuestion.content.id, String(value))
-          }
-          sx={{ height: "50px", gap: "15px" }}
-          max={currentQuestion.content.steps}
-          icon={
-            <StarIconMini color={theme.palette.brightPurple.main} width={50} />
-          }
-          emptyIcon={
-            <StarIconMini color={theme.palette.grey2.main} width={50} />
-          }
-        />
         <Box
           sx={{
-            display: "flex",
+            display: "inline-block",
-            justifyContent: "space-between",
+            width: "100%",
-            maxWidth: `${currentQuestion.content.steps * 50}px`,
-            color: theme.palette.grey2.main,
           }}
         >
-          <Typography>
+          <RatingComponent
-            {currentQuestion.content.ratingNegativeDescription}
+            value={Number(answer || 0)}
-          </Typography>
+            onChange={(_, value) =>
-          <Typography>
+              updateAnswer(currentQuestion.content.id, String(value))
-            {currentQuestion.content.ratingPositiveDescription}
+            }
-          </Typography>
+            sx={{ height: "50px", gap: "15px" }}
+            max={currentQuestion.content.steps}
+            icon={form?.icon(theme.palette.brightPurple.main)}
+            emptyIcon={form?.icon(theme.palette.grey2.main)}
+          />
         </Box>
+        <Typography sx={{ color: theme.palette.grey2.main }}>
+          {currentQuestion.content.ratingPositiveDescription}
+        </Typography>
       </Box>
     </Box>
   );

src/stores/quizView.ts

@@ -6,8 +6,6 @@ import type { QuestionVariant } from "../model/questionTypes/shared";
 type Answer = {
   questionId: string;
   answer: string | string[];
-  // Поле отвечающее за первое изменение ответа, нужно для галочки "Необязательный вопрос"
-  changed: boolean;
 };
 
 type OwnVariant = {
@@ -32,20 +30,16 @@ export const useQuizViewStore = create<QuizViewStore>()(
   )
 );
 
-export const updateAnswer = (
+export const updateAnswer = (questionId: string, answer: string | string[]) => {
-  questionId: string,
-  answer: string | string[],
-  changed = true
-) => {
   const answers = [...useQuizViewStore.getState().answers];
   const answerIndex = answers.findIndex(
     (answer) => questionId === answer.questionId
   );
 
   if (answerIndex < 0) {
-    answers.push({ questionId, answer, changed });
+    answers.push({ questionId, answer });
   } else {
-    answers[answerIndex] = { questionId, answer, changed };
+    answers[answerIndex] = { questionId, answer };
   }
 
   useQuizViewStore.setState({ answers });