feat: CustomVariant (WIP)

src/pages/ViewPublicationPage/questions/Rating.tsx

@@ -41,18 +41,10 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
           sx={{ height: "50px", gap: "15px" }}
           max={currentQuestion.content.steps}
           icon={
-            <StarIconMini
+            <StarIconMini color={theme.palette.brightPurple.main} width={50} />
-              color={theme.palette.brightPurple.main}
-              width={50}
-              sx={{ transform: "scale(1.4)" }}
-            />
           }
           emptyIcon={
-            <StarIconMini
+            <StarIconMini color={theme.palette.grey2.main} width={50} />
-              color={theme.palette.grey2.main}
-              width={50}
-              sx={{ transform: "scale(1.4)" }}
-            />
           }
         />
         <Box

src/pages/ViewPublicationPage/questions/Variant.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import {
   Box,
   Typography,
@@ -6,32 +7,56 @@ import {
   FormControlLabel,
   Radio,
   Checkbox,
+  TextField,
   useTheme,
 } from "@mui/material";
 
-import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
+import {
+  useQuizViewStore,
+  updateAnswer,
+  deleteAnswer,
+  updateOwnVariant,
+  deleteOwnVariant,
+} from "@root/quizView";
 
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
 import { CheckboxIcon } from "@icons/Checkbox";
 
 import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
+import type { QuestionVariant } from "../../../model/questionTypes/shared";
 
 type VariantProps = {
   stepNumber: number;
   currentQuestion: QuizQuestionVariant;
 };
 
+type VariantItemProps = {
+  currentQuestion: QuizQuestionVariant;
+  variant: QuestionVariant;
+  answer: string | string[] | undefined;
+  index: number;
+  own?: boolean;
+};
+
 export const Variant = ({ currentQuestion }: VariantProps) => {
-  const { answers } = useQuizViewStore();
+  const { answers, ownVariants } = useQuizViewStore();
-  const theme = useTheme();
   const { answer } =
     answers.find(
       ({ questionId }) => questionId === currentQuestion.content.id
     ) ?? {};
+  const ownVariant = ownVariants.find(
+    (variant) => variant.contentId === currentQuestion.content.id
+  );
 
   const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;
 
+  useEffect(() => {
+    if (!ownVariant) {
+      updateOwnVariant(currentQuestion.content.id, "");
+    }
+  }, []);
+
   return (
     <Box>
       <Typography variant="h5">{currentQuestion.title}</Typography>
@@ -60,6 +85,49 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
             }}
           >
             {currentQuestion.content.variants.map((variant, index) => (
+              <VariantItem
+                key={variant.id}
+                currentQuestion={currentQuestion}
+                variant={variant}
+                answer={answer}
+                index={index}
+              />
+            ))}
+            {currentQuestion.content.own && ownVariant && (
+              <VariantItem
+                own
+                currentQuestion={currentQuestion}
+                variant={ownVariant.variant}
+                answer={answer}
+                index={currentQuestion.content.variants.length + 2}
+              />
+            )}
+          </Box>
+        </Group>
+        {currentQuestion.content.back && (
+          <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
+            <img
+              src={currentQuestion.content.back}
+              style={{ width: "100%", height: "100%", objectFit: "cover" }}
+              alt=""
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+const VariantItem = ({
+  currentQuestion,
+  variant,
+  answer,
+  index,
+  own = false,
+}: VariantItemProps) => {
+  const theme = useTheme();
+
+  return (
     <FormControlLabel
       key={variant.id}
       sx={{
@@ -85,18 +153,17 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
           <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
         )
       }
-                label={variant.answer}
+      label={own ? <TextField label="Другое..." /> : variant.answer}
       onClick={(event) => {
         event.preventDefault();
         const variantId = currentQuestion.content.variants[index].id;
 
         if (currentQuestion.content.multi) {
-                    const currentAnswer =
+          const currentAnswer = typeof answer !== "string" ? answer || [] : [];
-                      typeof answer !== "string" ? answer || [] : [];
 
           updateAnswer(
             currentQuestion.content.id,
-                      currentAnswer?.includes(variantId)
+            currentAnswer.includes(variantId)
               ? currentAnswer?.filter((item) => item !== variantId)
               : [...currentAnswer, variantId]
           );
@@ -111,19 +178,5 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
         }
       }}
     />
-            ))}
-          </Box>
-        </Group>
-        {currentQuestion.content.back && (
-          <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
-            <img
-              src={currentQuestion.content.back}
-              style={{ width: "100%", height: "100%", objectFit: "cover" }}
-              alt=""
-            />
-          </Box>
-        )}
-      </Box>
-    </Box>
   );
 };

src/stores/quizView.ts

@@ -1,6 +1,8 @@
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 
+import type { QuestionVariant } from "../model/questionTypes/shared";
+
 type Answer = {
   questionId: string;
   answer: string | string[];
@@ -8,14 +10,21 @@ type Answer = {
   changed: boolean;
 };
 
+type OwnVariant = {
+  contentId: string;
+  variant: QuestionVariant;
+};
+
 interface QuizViewStore {
   answers: Answer[];
+  ownVariants: OwnVariant[];
 }
 
 export const useQuizViewStore = create<QuizViewStore>()(
   devtools(
     (set, get) => ({
       answers: [],
+      ownVariants: [],
     }),
     {
       name: "quizView",
@@ -50,3 +59,44 @@ export const deleteAnswer = (questionId: string) => {
 
   useQuizViewStore.setState({ answers: filteredItems });
 };
+
+export const updateOwnVariant = (contentId: string, answer: string) => {
+  const ownVariants = [...useQuizViewStore.getState().ownVariants];
+  const ownVariantIndex = ownVariants.findIndex(
+    (variant) => variant.contentId === contentId
+  );
+
+  if (ownVariantIndex < 0) {
+    ownVariants.push({
+      contentId,
+      variant: {
+        id: getRandom(),
+        answer,
+        extendedText: "",
+        hints: "",
+        originalImageUrl: "",
+      },
+    });
+  } else {
+    ownVariants[ownVariantIndex].variant.answer = answer;
+  }
+
+  useQuizViewStore.setState({ ownVariants });
+};
+
+export const deleteOwnVariant = (contentId: string) => {
+  const ownVariants = [...useQuizViewStore.getState().ownVariants];
+
+  const filteredOwnVariants = ownVariants.filter(
+    (variant) => variant.contentId !== contentId
+  );
+
+  useQuizViewStore.setState({ ownVariants: filteredOwnVariants });
+};
+
+function getRandom() {
+  const min = Math.ceil(1000000);
+  const max = Math.floor(10000000);
+
+  return String(Math.floor(Math.random() * (max - min)) + min);
+}