фикс первого безтипового вопроса в списке из юзэффект и возможность удаления картинки из результата

src/pages/Questions/DraggableList/index.tsx

@@ -28,7 +28,9 @@ export const DraggableList = ({
 
   useEffect(() => {
     if (!isLoading && quiz && !filteredQuestions.length) {
-      createUntypedQuestion(Number(quiz.id));
+      console.log("useEffect", quiz)
+      console.log(Number(quiz.backendId))
+      createUntypedQuestion(Number(quiz.backendId));
     }
   }, [quiz, filteredQuestions]);
 

src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

@@ -125,6 +125,7 @@ export default function OptionsAndPicture({
           setCropModalImageBlob={setCropModalImageBlob}
           onClose={closeCropModal}
           onSaveImageClick={handleCropModalSaveClick}
+          questionId={question.id}
         />
         <Box
           sx={{

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -120,6 +120,7 @@ export default function OptionsPicture({
           setCropModalImageBlob={setCropModalImageBlob}
           onClose={closeCropModal}
           onSaveImageClick={handleCropModalSaveClick}
+          questionId={question.id}
         />
         <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
           <Link

src/pages/Questions/QuestionsPage.tsx

@@ -36,6 +36,7 @@ export default function QuestionsPage({
     updateEditSomeQuestion();
   }, []);
 
+  console.log("quiz", quiz)
   if (!quiz) return null;
 
   return (

src/stores/questions/actions.ts

@@ -44,6 +44,7 @@ export const createUntypedQuestion = (
 ) =>
   setProducedState(
     (state) => {
+      console.log("createUntypedQuestion", quizId)
       const newUntypedQuestion = {
         id: nanoid(),
         quizId,
@@ -259,7 +260,6 @@ export const updateQuestion = async <T = AnyTypedQuizQuestion>(
         throw new Error(
           "Cannot update untyped question, use 'updateUntypedQuestion' instead",
         );
-
       updateFn(question as T);
     },
     {
@@ -278,7 +278,7 @@ export const updateQuestion = async <T = AnyTypedQuizQuestion>(
     if (!q) return;
     if (q.type === null)
       throw new Error("Cannot send update request for untyped question");
-
+console.log("отправляемый квешен", q)
     try {
       const response = await questionApi.edit(
         questionToEditQuestionRequest(replaceEmptyLinesToSpace(q)),
@@ -449,6 +449,8 @@ export const createTypedQuestion = async (
   requestQueue.enqueue(`createTypedQuestion-${questionId}`, async () => {
     const questions = useQuestionsStore.getState().questions;
     const question = questions.find((q) => q.id === questionId);
+    console.log("createTypedQuestion", question)
+    console.log("createTypedQuestion", question?.quizId)
     if (!question) return;
     if (question.type !== null)
       throw new Error("Cannot upgrade already typed question");

src/ui_kit/MediaSelectionAndDisplay.tsx

@@ -132,6 +132,7 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
           setCropModalImageBlob={setCropModalImageBlob}
           onClose={closeCropModal}
           onSaveImageClick={handleCropModalSaveClick}
+          questionId={resultData.id}
         />
       </Box>
 

src/ui_kit/Modal/CropModal.tsx

@@ -23,6 +23,8 @@ import {
   getDarkenedAndResizedImageBlob,
   getRotatedImageBlob,
 } from "./utils/imageManipulation";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { deleteQuestion, updateQuestion } from "@root/questions/actions";
 
 const styleSlider: SxProps<Theme> = {
   color: "#7E2AEA",
@@ -55,6 +57,7 @@ interface Props {
   setCropModalImageBlob: (imageBlob: Blob) => void;
   onClose: () => void;
   onSaveImageClick: (imageBlob: Blob) => void;
+  questionId?: string;
 }
 
 export const CropModal: FC<Props> = ({
@@ -64,6 +67,7 @@ export const CropModal: FC<Props> = ({
   setCropModalImageBlob,
   onSaveImageClick,
   onClose,
+  questionId
 }) => {
   const theme = useTheme();
   const [percentCrop, setPercentCrop] = useState<PercentCrop>();
@@ -263,7 +267,7 @@ export const CropModal: FC<Props> = ({
               sx={[
                 styleSlider,
                 {
-                  width: isMobile ? undefined : "250px",
+                  width: isMobile ? undefined : "200px",
                 },
               ]}
               value={scale * 100}
@@ -283,7 +287,7 @@ export const CropModal: FC<Props> = ({
               sx={[
                 styleSlider,
                 {
-                  width: isMobile ? undefined : "250px",
+                  width: isMobile ? undefined : "200px",
                 },
               ]}
               value={darken}
@@ -293,6 +297,26 @@ export const CropModal: FC<Props> = ({
               onChange={(_, newValue) => setDarken(newValue as number)}
             />
           </Box>
+          {questionId !== undefined &&
+            <IconButton
+              onClick={() => {
+                updateQuestion(questionId, (question) => {
+                  question.content.back = null;
+                  question.content.originalBack = null;
+                })
+                onClose();
+              }}
+              sx={{
+                height: "48px",
+                width: "48px",
+                p: 0,
+                color: theme.palette.orange.main,
+                borderRadius: "50%",
+              }}
+            >
+              <DeleteIcon />
+            </IconButton>
+          }
         </Box>
         <Box
           sx={{
@@ -327,9 +351,8 @@ export const CropModal: FC<Props> = ({
               background: theme.palette.brightPurple.main,
               fontSize: "18px",
               color: "#7E2AEA",
-              border: `1px solid ${
+              border: `1px solid ${!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"
-                !completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"
+                }`,
-              }`,
               backgroundColor: "transparent",
             }}
           >