From 0f914d1973a29c0351ed6a28815bc94e85e449fe Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Wed, 13 Dec 2023 15:15:44 +0300
Subject: [PATCH] fix: rating icons

---
 src/pages/ViewPublicationPage/Footer.tsx      | 12 ++-
 .../ViewPublicationPage/questions/Rating.tsx  | 87 +++++++++++++------
 src/stores/quizView.ts                        | 12 +--
 3 files changed, 72 insertions(+), 39 deletions(-)

diff --git a/src/pages/ViewPublicationPage/Footer.tsx b/src/pages/ViewPublicationPage/Footer.tsx
index ef121c43..f54e530e 100644
--- a/src/pages/ViewPublicationPage/Footer.tsx
+++ b/src/pages/ViewPublicationPage/Footer.tsx
@@ -58,12 +58,16 @@ export const Footer = ({
       ({ questionId }) => questionId === question.content.id
     );
 
-    if (question.required && answer?.changed) {
-      setDisableNextButton(false);
+    debugger;
+
+    if (question.required && answer) {
+      setDisableNextButton(true);
+
+      return;
     }
 
-    if (question.required && !answer?.changed) {
-      setDisableNextButton(true);
+    if (question.required && !answer) {
+      setDisableNextButton(false);
 
       return;
     }
diff --git a/src/pages/ViewPublicationPage/questions/Rating.tsx b/src/pages/ViewPublicationPage/questions/Rating.tsx
index e7813d9e..b8565db8 100644
--- a/src/pages/ViewPublicationPage/questions/Rating.tsx
+++ b/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",
-          width: "100%",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "20px",
           marginTop: "20px",
         }}
       >
-        <RatingComponent
-          value={Number(answer || 0)}
-          onChange={(_, value) =>
-            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} />
-          }
-        />
+        <Typography sx={{ color: theme.palette.grey2.main }}>
+          {currentQuestion.content.ratingNegativeDescription}
+        </Typography>
         <Box
           sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            maxWidth: `${currentQuestion.content.steps * 50}px`,
-            color: theme.palette.grey2.main,
+            display: "inline-block",
+            width: "100%",
           }}
         >
-          <Typography>
-            {currentQuestion.content.ratingNegativeDescription}
-          </Typography>
-          <Typography>
-            {currentQuestion.content.ratingPositiveDescription}
-          </Typography>
+          <RatingComponent
+            value={Number(answer || 0)}
+            onChange={(_, value) =>
+              updateAnswer(currentQuestion.content.id, String(value))
+            }
+            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>
   );
diff --git a/src/stores/quizView.ts b/src/stores/quizView.ts
index d39a8e6e..523579a0 100644
--- a/src/stores/quizView.ts
+++ b/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 = (
-  questionId: string,
-  answer: string | string[],
-  changed = true
-) => {
+export const updateAnswer = (questionId: string, answer: string | string[]) => {
   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 });