From fdafd7bdffb11d5a3743ce390ee7fd50f77b51da Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Mon, 11 Dec 2023 17:26:17 +0300
Subject: [PATCH] feat: uncheck

---
 .../ViewPublicationPage/questions/Emoji.tsx   | 104 ++++++++++--------
 .../ViewPublicationPage/questions/Images.tsx  | 100 ++++++++---------
 .../ViewPublicationPage/questions/Variant.tsx |  26 +++--
 .../ViewPublicationPage/questions/Varimg.tsx  |  26 +++--
 src/stores/quizView.ts                        |   9 ++
 5 files changed, 150 insertions(+), 115 deletions(-)

diff --git a/src/pages/ViewPublicationPage/questions/Emoji.tsx b/src/pages/ViewPublicationPage/questions/Emoji.tsx
index 53e8cb7f..42b69f6e 100644
--- a/src/pages/ViewPublicationPage/questions/Emoji.tsx
+++ b/src/pages/ViewPublicationPage/questions/Emoji.tsx
@@ -8,7 +8,7 @@ import {
   FormControl,
 } from "@mui/material";
 
-import { useQuizViewStore, updateAnswer } from "@root/quizView";
+import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
 
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
@@ -50,61 +50,73 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
         }}
       >
         <Box sx={{ display: "flex", width: "100%", gap: "42px" }}>
-          {currentQuestion.content.variants.map(
-            ({ id, answer, extendedText }, index) => (
-              <FormControl
-                key={id}
+          {currentQuestion.content.variants.map((variant, index) => (
+            <FormControl
+              key={variant.id}
+              sx={{
+                borderRadius: "12px",
+                border: `1px solid ${theme.palette.grey2.main}`,
+                overflow: "hidden",
+                maxWidth: "317px",
+                width: "100%",
+                height: "255px",
+              }}
+            >
+              <Box
                 sx={{
-                  borderRadius: "12px",
-                  border: `1px solid ${theme.palette.grey2.main}`,
-                  overflow: "hidden",
-                  maxWidth: "317px",
-                  width: "100%",
-                  height: "255px",
+                  display: "flex",
+                  alignItems: "center",
+                  height: "193px",
+                  background: "#ffffff",
                 }}
               >
                 <Box
                   sx={{
+                    width: "100%",
                     display: "flex",
-                    alignItems: "center",
-                    height: "193px",
-                    background: "#ffffff",
+                    justifyContent: "center",
                   }}
                 >
-                  <Box
-                    sx={{
-                      width: "100%",
-                      display: "flex",
-                      justifyContent: "center",
-                    }}
-                  >
-                    {extendedText && (
-                      <Typography fontSize={"100px"}>{extendedText}</Typography>
-                    )}
-                  </Box>
+                  {variant.extendedText && (
+                    <Typography fontSize={"100px"}>
+                      {variant.extendedText}
+                    </Typography>
+                  )}
                 </Box>
-                <FormControlLabel
-                  key={id}
-                  sx={{
-                    margin: 0,
-                    padding: "15px",
-                    color: "#4D4D4D",
-                    display: "flex",
-                    gap: "10px",
-                  }}
-                  value={index}
-                  control={
-                    <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
+              </Box>
+              <FormControlLabel
+                key={variant.id}
+                sx={{
+                  margin: 0,
+                  padding: "15px",
+                  color: "#4D4D4D",
+                  display: "flex",
+                  gap: "10px",
+                }}
+                value={index}
+                onClick={(event) => {
+                  event.preventDefault();
+
+                  updateAnswer(
+                    currentQuestion.content.id,
+                    currentQuestion.content.variants[index].id
+                  );
+
+                  if (answer === currentQuestion.content.variants[index].id) {
+                    deleteAnswer(currentQuestion.content.id);
                   }
-                  label={
-                    <Box sx={{ display: "flex", gap: "10px" }}>
-                      <Typography>{answer}</Typography>
-                    </Box>
-                  }
-                />
-              </FormControl>
-            )
-          )}
+                }}
+                control={
+                  <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
+                }
+                label={
+                  <Box sx={{ display: "flex", gap: "10px" }}>
+                    <Typography>{variant.answer}</Typography>
+                  </Box>
+                }
+              />
+            </FormControl>
+          ))}
         </Box>
       </RadioGroup>
     </Box>
diff --git a/src/pages/ViewPublicationPage/questions/Images.tsx b/src/pages/ViewPublicationPage/questions/Images.tsx
index f7dfbf80..3d131232 100644
--- a/src/pages/ViewPublicationPage/questions/Images.tsx
+++ b/src/pages/ViewPublicationPage/questions/Images.tsx
@@ -8,7 +8,7 @@ import {
   useMediaQuery,
 } from "@mui/material";
 
-import { useQuizViewStore, updateAnswer } from "@root/quizView";
+import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
 
@@ -36,12 +36,6 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
         value={currentQuestion.content.variants.findIndex(
           ({ id }) => answer === id
         )}
-        onChange={({ target }) =>
-          updateAnswer(
-            currentQuestion.content.id,
-            currentQuestion.content.variants[Number(target.value)].id
-          )
-        }
         sx={{
           display: "flex",
           flexWrap: "wrap",
@@ -62,50 +56,58 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
             width: "100%",
           }}
         >
-          {currentQuestion.content.variants.map(
-            ({ id, answer, extendedText }, index) => (
-              <Box
-                key={index}
-                sx={{
-                  borderRadius: "5px",
-                  border: `1px solid ${theme.palette.grey2.main}`,
-                }}
-              >
-                <Box
-                  sx={{ display: "flex", alignItems: "center", gap: "10px" }}
-                >
-                  <Box sx={{ width: "100%", height: "300px" }}>
-                    {extendedText && (
-                      <img
-                        src={extendedText}
-                        alt=""
-                        style={{
-                          display: "block",
-                          width: "100%",
-                          height: "100%",
-                          objectFit: "cover",
-                        }}
-                      />
-                    )}
-                  </Box>
+          {currentQuestion.content.variants.map((variant, index) => (
+            <Box
+              key={index}
+              sx={{
+                borderRadius: "5px",
+                border: `1px solid ${theme.palette.grey2.main}`,
+              }}
+            >
+              <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
+                <Box sx={{ width: "100%", height: "300px" }}>
+                  {variant.extendedText && (
+                    <img
+                      src={variant.extendedText}
+                      alt=""
+                      style={{
+                        display: "block",
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                      }}
+                    />
+                  )}
                 </Box>
-                <FormControlLabel
-                  key={id}
-                  sx={{
-                    display: "block",
-                    textAlign: "center",
-                    color: theme.palette.grey2.main,
-                    marginTop: "10px",
-                  }}
-                  value={index}
-                  control={
-                    <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
-                  }
-                  label={answer}
-                />
               </Box>
-            )
-          )}
+              <FormControlLabel
+                key={variant.id}
+                sx={{
+                  display: "block",
+                  textAlign: "center",
+                  color: theme.palette.grey2.main,
+                  marginTop: "10px",
+                }}
+                onClick={(event) => {
+                  event.preventDefault();
+
+                  updateAnswer(
+                    currentQuestion.content.id,
+                    currentQuestion.content.variants[index].id
+                  );
+
+                  if (answer === currentQuestion.content.variants[index].id) {
+                    deleteAnswer(currentQuestion.content.id);
+                  }
+                }}
+                value={index}
+                control={
+                  <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
+                }
+                label={variant.answer}
+              />
+            </Box>
+          ))}
         </Box>
       </RadioGroup>
     </Box>
diff --git a/src/pages/ViewPublicationPage/questions/Variant.tsx b/src/pages/ViewPublicationPage/questions/Variant.tsx
index 8e2e2644..d3857aac 100644
--- a/src/pages/ViewPublicationPage/questions/Variant.tsx
+++ b/src/pages/ViewPublicationPage/questions/Variant.tsx
@@ -7,7 +7,7 @@ import {
   useTheme,
 } from "@mui/material";
 
-import { useQuizViewStore, updateAnswer } from "@root/quizView";
+import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
 
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
@@ -36,12 +36,6 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
           value={currentQuestion.content.variants.findIndex(
             ({ id }) => answer === id
           )}
-          onChange={({ target }) =>
-            updateAnswer(
-              currentQuestion.content.id,
-              currentQuestion.content.variants[Number(target.value)].id
-            )
-          }
           sx={{
             display: "flex",
             flexWrap: "wrap",
@@ -60,9 +54,9 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
               gap: "20px",
             }}
           >
-            {currentQuestion.content.variants.map(({ id, answer }, index) => (
+            {currentQuestion.content.variants.map((variant, index) => (
               <FormControlLabel
-                key={id}
+                key={variant.id}
                 sx={{
                   margin: "0",
                   borderRadius: "12px",
@@ -78,7 +72,19 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
                 control={
                   <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
                 }
-                label={answer}
+                label={variant.answer}
+                onClick={(event) => {
+                  event.preventDefault();
+
+                  updateAnswer(
+                    currentQuestion.content.id,
+                    currentQuestion.content.variants[index].id
+                  );
+
+                  if (answer === currentQuestion.content.variants[index].id) {
+                    deleteAnswer(currentQuestion.content.id);
+                  }
+                }}
               />
             ))}
           </Box>
diff --git a/src/pages/ViewPublicationPage/questions/Varimg.tsx b/src/pages/ViewPublicationPage/questions/Varimg.tsx
index 94ab2b5c..87c0a1fb 100644
--- a/src/pages/ViewPublicationPage/questions/Varimg.tsx
+++ b/src/pages/ViewPublicationPage/questions/Varimg.tsx
@@ -7,7 +7,7 @@ import {
   useTheme,
 } from "@mui/material";
 
-import { useQuizViewStore, updateAnswer } from "@root/quizView";
+import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
 
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
@@ -38,12 +38,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
           value={currentQuestion.content.variants.findIndex(
             ({ id }) => answer === id
           )}
-          onChange={({ target }) =>
-            updateAnswer(
-              currentQuestion.content.id,
-              currentQuestion.content.variants[Number(target.value)].id
-            )
-          }
           sx={{
             display: "flex",
             flexWrap: "wrap",
@@ -53,9 +47,9 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
           }}
         >
           <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
-            {currentQuestion.content.variants.map(({ id, answer }, index) => (
+            {currentQuestion.content.variants.map((variant, index) => (
               <FormControlLabel
-                key={id}
+                key={variant.id}
                 sx={{
                   marginBottom: "15px",
                   borderRadius: "5px",
@@ -65,10 +59,22 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                   display: "flex",
                 }}
                 value={index}
+                onClick={(event) => {
+                  event.preventDefault();
+
+                  updateAnswer(
+                    currentQuestion.content.id,
+                    currentQuestion.content.variants[index].id
+                  );
+
+                  if (answer === currentQuestion.content.variants[index].id) {
+                    deleteAnswer(currentQuestion.content.id);
+                  }
+                }}
                 control={
                   <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
                 }
-                label={answer}
+                label={variant.answer}
               />
             ))}
           </Box>
diff --git a/src/stores/quizView.ts b/src/stores/quizView.ts
index e8a1b8ba..a8321f44 100644
--- a/src/stores/quizView.ts
+++ b/src/stores/quizView.ts
@@ -41,3 +41,12 @@ export const updateAnswer = (
 
   useQuizViewStore.setState({ answers });
 };
+
+export const deleteAnswer = (questionId: string) => {
+  const answers = [...useQuizViewStore.getState().answers];
+  const filteredItems = answers.filter(
+    (answer) => questionId !== answer.questionId
+  );
+
+  useQuizViewStore.setState({ answers: filteredItems });
+};