refactor crop modal & add original image restore

src/constants/images.ts

@@ -20,6 +20,7 @@ export const QUIZ_QUESTION_IMAGES: Omit<QuizQuestionImages, "id"> = {
         answer: "",
         hints: "",
         extendedText: "",
+        originalImageUrl: "",
       },
     ],
     largeCheck: false,

src/constants/varimg.ts

@@ -11,7 +11,7 @@ export const QUIZ_QUESTION_VARIMG: Omit<QuizQuestionVarImg, "id"> = {
     innerNameCheck: false,
     innerName: "",
     required: false,
-    variants: [{ answer: "", hints: "", extendedText: "" }],
+    variants: [{ answer: "", hints: "", extendedText: "", originalImageUrl: "" }],
     largeCheck: false,
     replText: "",
   },

src/model/questionTypes/images.ts

@@ -1,8 +1,8 @@
 import type {
-  QuizQuestionBase,
+    ImageQuestionVariant,
-  QuestionVariant,
-  QuestionHint,
     QuestionBranchingRule,
+    QuestionHint,
+    QuizQuestionBase
 } from "./shared";
 
 export interface QuizQuestionImages extends QuizQuestionBase {
@@ -25,7 +25,7 @@ export interface QuizQuestionImages extends QuizQuestionBase {
         /** Чекбокс "Необязательный вопрос" */
         required: boolean;
         /** Варианты (картинки) */
-    variants: QuestionVariant[];
+        variants: ImageQuestionVariant[];
         hint: QuestionHint;
         rule: QuestionBranchingRule;
         back: string;

src/model/questionTypes/shared.ts

@@ -38,6 +38,11 @@ export type QuestionVariant = {
     extendedText: string;
 };
 
+export interface ImageQuestionVariant extends QuestionVariant {
+    /** Оригинал изображения (до кропа) */
+    originalImageUrl: string;
+}
+
 export interface QuizQuestionBase {
     id: number;
     title: string;

src/model/questionTypes/varimg.ts

@@ -1,8 +1,8 @@
 import type {
-  QuizQuestionBase,
+    ImageQuestionVariant,
-  QuestionVariant,
-  QuestionHint,
     QuestionBranchingRule,
+    QuestionHint,
+    QuizQuestionBase
 } from "./shared";
 
 export interface QuizQuestionVarImg extends QuizQuestionBase {
@@ -16,7 +16,7 @@ export interface QuizQuestionVarImg extends QuizQuestionBase {
         innerName: string;
         /** Чекбокс "Необязательный вопрос" */
         required: boolean;
-    variants: QuestionVariant[];
+        variants: ImageQuestionVariant[];
         hint: QuestionHint;
         rule: QuestionBranchingRule;
         back: string;

src/pages/Questions/AnswerDraggableList/index.tsx

@@ -10,13 +10,13 @@ import { reorder } from "./helper";
 
 import type { ReactNode } from "react";
 import type { DropResult } from "react-beautiful-dnd";
-import type { QuestionVariant } from "../../../model/questionTypes/shared";
+import type { ImageQuestionVariant, QuestionVariant } from "../../../model/questionTypes/shared";
 
 type AnswerDraggableListProps = {
   variants: QuestionVariant[];
   totalIndex: number;
-  additionalContent?: (variant: QuestionVariant, index: number) => ReactNode;
+  additionalContent?: (variant: QuestionVariant | ImageQuestionVariant, index: number) => ReactNode;
-  additionalMobile?: (variant: QuestionVariant, index: number) => ReactNode;
+  additionalMobile?: (variant: QuestionVariant | ImageQuestionVariant, index: number) => ReactNode;
 };
 
 export const AnswerDraggableList = ({

src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

@@ -29,6 +29,7 @@ import SwitchOptionsAndPict from "./switchOptionsAndPict";
 import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton";
 import { produce } from "immer";
 import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
+import { openCropModal } from "@root/cropModal";
 
 interface Props {
     totalIndex: number;
@@ -36,7 +37,6 @@ interface Props {
 
 export default function OptionsAndPicture({ totalIndex }: Props) {
     const [isUploadImageModalOpen, setIsUploadImageModalOpen] = useState(false);
-    const [isCropModalOpen, setIsCropModalOpen] = useState<boolean>(false);
     const [switchState, setSwitchState] = useState("setting");
     const [currentIndex, setCurrentIndex] = useState<number>(0);
     const quizId = Number(useParams().quizId);
@@ -62,7 +62,10 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
             });
 
             setIsUploadImageModalOpen(false);
-            setIsCropModalOpen(true);
+            openCropModal(
+                question.content.variants[currentIndex]?.extendedText,
+                question.content.variants[currentIndex]?.originalImageUrl
+            );
         }
     };
 
@@ -78,8 +81,13 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
                                 <AddOrEditImageButton
                                     imageSrc={variant.extendedText}
                                     onImageClick={() => {
+                                        if (!("originalImageUrl" in variant)) return;
+
                                         setCurrentIndex(index);
-                                        if (variant.extendedText) return setIsCropModalOpen(true);
+                                        if (variant.extendedText) return openCropModal(
+                                            variant.extendedText,
+                                            variant.originalImageUrl
+                                        );
 
                                         setIsUploadImageModalOpen(true);
                                     }}
@@ -98,8 +106,13 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
                                 <AddOrEditImageButton
                                     imageSrc={variant.extendedText}
                                     onImageClick={() => {
+                                        if (!("originalImageUrl" in variant)) return;
+
                                         setCurrentIndex(index);
-                                        if (variant.extendedText) return setIsCropModalOpen(true);
+                                        if (variant.extendedText) return openCropModal(
+                                            variant.extendedText,
+                                            variant.originalImageUrl
+                                        );
 
                                         setIsUploadImageModalOpen(true);
                                     }}
@@ -119,10 +132,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
                     imgHC={uploadImage}
                 />
                 <CropModal
-                    opened={isCropModalOpen}
+                    onSaveImageClick={url => {
-                    onClose={() => setIsCropModalOpen(false)}
-                    picture={question.content.variants[currentIndex]?.extendedText}
-                    onCropPress={url => {
                         const content = produce(question.content, draft => {
                             draft.variants[currentIndex].extendedText = url;
                         });
@@ -329,6 +339,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
                                 answer: "",
                                 hints: "",
                                 extendedText: "",
+                                originalImageUrl: "",
                             });
                             updateQuestionsList<QuizQuestionVarImg>(quizId, totalIndex, {
                                 content: clonedContent,

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -20,6 +20,7 @@ import SwitchAnswerOptionsPict from "./switchOptionsPict";
 import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton";
 import { produce } from "immer";
 import type { QuizQuestionImages } from "../../../model/questionTypes/images";
+import { openCropModal } from "@root/cropModal";
 
 interface Props {
     totalIndex: number;
@@ -27,7 +28,6 @@ interface Props {
 
 export default function OptionsPicture({ totalIndex }: Props) {
     const [isUploadImageModalOpen, setIsUploadImageModalOpen] = useState(false);
-    const [isCropModalOpen, setIsCropModalOpen] = useState<boolean>(false);
     const [currentIndex, setCurrentIndex] = useState<number>(0);
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(790));
@@ -45,20 +45,26 @@ export default function OptionsPicture({ totalIndex }: Props) {
             const [file] = Array.from(files);
 
             const clonedContent = { ...question.content };
-            clonedContent.variants[currentIndex].extendedText =
+
-                URL.createObjectURL(file);
+            const url = URL.createObjectURL(file);
+            clonedContent.variants[currentIndex].extendedText = url;
+            clonedContent.variants[currentIndex].originalImageUrl = url;
+
             updateQuestionsList<QuizQuestionImages>(quizId, totalIndex, {
                 content: clonedContent,
             });
 
             setIsUploadImageModalOpen(false);
-            setIsCropModalOpen(true);
+            openCropModal(
+                question.content.variants[currentIndex]?.extendedText,
+                question.content.variants[currentIndex]?.originalImageUrl,
+            );
         }
     };
 
     const addNewAnswer = () => {
         const answerNew = question.content.variants.slice();
-        answerNew.push({ answer: "", hints: "", extendedText: "" });
+        answerNew.push({ answer: "", hints: "", extendedText: "", originalImageUrl: "" });
 
         updateQuestionsList<QuizQuestionImages>(quizId, totalIndex, {
             content: { ...question.content, variants: answerNew },
@@ -77,8 +83,15 @@ export default function OptionsPicture({ totalIndex }: Props) {
                                 <AddOrEditImageButton
                                     imageSrc={variant.extendedText}
                                     onImageClick={() => {
+                                        if (!("originalImageUrl" in variant)) return;
+
                                         setCurrentIndex(index);
-                                        if (variant.extendedText) return setIsCropModalOpen(true);
+                                        if (variant.extendedText) {
+                                            return openCropModal(
+                                                variant.extendedText,
+                                                variant.originalImageUrl
+                                            );
+                                        }
 
                                         setIsUploadImageModalOpen(true);
                                     }}
@@ -97,8 +110,15 @@ export default function OptionsPicture({ totalIndex }: Props) {
                                 <AddOrEditImageButton
                                     imageSrc={variant.extendedText}
                                     onImageClick={() => {
+                                        if (!("originalImageUrl" in variant)) return;
+
                                         setCurrentIndex(index);
-                                        if (variant.extendedText) return setIsCropModalOpen(true);
+                                        if (variant.extendedText) {
+                                            return openCropModal(
+                                                variant.extendedText,
+                                                variant.originalImageUrl
+                                            );
+                                        }
 
                                         setIsUploadImageModalOpen(true);
                                     }}
@@ -118,10 +138,7 @@ export default function OptionsPicture({ totalIndex }: Props) {
                     imgHC={uploadImage}
                 />
                 <CropModal
-                    opened={isCropModalOpen}
+                    onSaveImageClick={url => {
-                    onClose={() => setIsCropModalOpen(false)}
-                    picture={question.content.variants[currentIndex]?.extendedText}
-                    onCropPress={url => {
                         const content = produce(question.content, draft => {
                             draft.variants[currentIndex].extendedText = url;
                         });

src/pages/Questions/UploadImage/index.tsx

@@ -1,5 +1,4 @@
 import { useParams } from "react-router-dom";
-import { useState } from "react";
 import { Typography, Box, useTheme, ButtonBase } from "@mui/material";
 import UploadBox from "@ui_kit/UploadBox";
 import { CropModal } from "@ui_kit/Modal/CropModal";
@@ -10,6 +9,7 @@ import { UploadImageModal } from "./UploadImageModal";
 
 import type { DragEvent } from "react";
 import type { QuizQuestionImages } from "../../../model/questionTypes/images";
+import { openCropModal } from "@root/cropModal";
 
 type UploadImageProps = {
   totalIndex: number;
@@ -36,10 +36,9 @@ export default function UploadImage({ totalIndex }: UploadImageProps) {
       });
 
       handleClose();
-      setOpened(true);
+      openCropModal(question.content.back, question.content.back);
     }
   };
-  const [opened, setOpened] = useState<boolean>(false);
 
   const handleDrop = (event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -72,11 +71,7 @@ export default function UploadImage({ totalIndex }: UploadImageProps) {
         />
       </ButtonBase>
       <UploadImageModal open={open} onClose={handleClose} imgHC={imgHC} />
-      <CropModal
+      <CropModal />
-        opened={opened}
-        onClose={() => setOpened(false)}
-        picture={question.content.back}
-      />
     </Box>
   );
 }

src/pages/Result/DescriptionForm/ImageAndVideoButtons.tsx

@@ -2,18 +2,16 @@ import { Box, Typography, useTheme } from "@mui/material";
 
 import AddImage from "@icons/questionsPage/addImage";
 import AddVideofile from "@icons/questionsPage/addVideofile";
-import { useState } from "react";
 import { CropModal } from "@ui_kit/Modal/CropModal";
+import { openCropModal } from "@root/cropModal";
 
 export default function ImageAndVideoButtons() {
   const theme = useTheme();
 
-  const [opened, setOpened] = useState<boolean>(false);
-
   return (
     <Box sx={{ display: "flex", alignItems: "center", gap: "12px", mt: "20px", mb: "20px" }}>
-      <AddImage onClick={() => setOpened(true)} />
+      <AddImage onClick={() => openCropModal("", "")} />
-      <CropModal opened={opened} onClose={() => setOpened(false)} />
+      <CropModal />
       <Typography
         sx={{
           fontWeight: 400,

src/stores/cropModal.ts

@@ -0,0 +1,60 @@
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+
+
+type CropModalStore = {
+    isCropModalOpen: boolean;
+    imageUrl: string | null;
+    originalImageUrl: string | null;
+};
+
+const initialState: CropModalStore = {
+    isCropModalOpen: false,
+    imageUrl: null,
+    originalImageUrl: null,
+};
+
+export const useCropModalStore = create<CropModalStore>()(
+    devtools(
+        () => initialState,
+        {
+            name: "CropModalStore",
+            enabled: process.env.NODE_ENV === "development",
+        }
+    ),
+);
+
+export const openCropModal = (imageUrl: string, originalImageUrl: string) => useCropModalStore.setState(
+    {
+        isCropModalOpen: true,
+        imageUrl,
+        originalImageUrl,
+    },
+    false,
+    {
+        type: "openCropModal",
+        imageUrl,
+        originalImageUrl,
+    }
+);
+
+export const closeCropModal = () => useCropModalStore.setState(
+    initialState,
+    false,
+    "closeCropModal"
+);
+
+export const setCropModalImageUrl = (imageUrl: string | null) => useCropModalStore.setState(
+    { imageUrl },
+    false,
+    {
+        type: "setCropModalImageUrl",
+        imageUrl,
+    }
+);
+
+export const resetToOriginalImage = () => useCropModalStore.setState(
+    state => ({ imageUrl: state.originalImageUrl }),
+    false,
+    "resetToOriginalImage"
+);

src/stores/questions.ts

@@ -1,17 +1,14 @@
 import { create } from "zustand";
-import { persist } from "zustand/middleware";
+import { devtools, persist } from "zustand/middleware";
-
-import { QuizQuestionEmoji } from "../model/questionTypes/emoji";
-import { QuizQuestionImages } from "../model/questionTypes/images";
-import { QuizQuestionVariant } from "../model/questionTypes/variant";
-import { QuizQuestionVarImg } from "../model/questionTypes/varimg";
 
 import type {
     AnyQuizQuestion,
-  QuizQuestionType,
+    ImageQuestionVariant,
     QuestionVariant,
+    QuizQuestionType
 } from "../model/questionTypes/shared";
 
+import { produce, setAutoFreeze } from "immer";
 import { QUIZ_QUESTION_BASE } from "../constants/base";
 import { QUIZ_QUESTION_DATE } from "../constants/date";
 import { QUIZ_QUESTION_EMOJI } from "../constants/emoji";
@@ -24,7 +21,6 @@ import { QUIZ_QUESTION_SELECT } from "../constants/select";
 import { QUIZ_QUESTION_TEXT } from "../constants/text";
 import { QUIZ_QUESTION_VARIANT } from "../constants/variant";
 import { QUIZ_QUESTION_VARIMG } from "../constants/varimg";
-import { setAutoFreeze } from "immer";
 
 
 setAutoFreeze(false);
@@ -37,11 +33,18 @@ interface QuestionStore {
 let isFirstPartialize = true;
 
 export const questionStore = create<QuestionStore>()(
-  persist<QuestionStore>(
+    persist(
+        devtools(
             () => ({
                 listQuestions: {},
                 openedModalSettings: "",
             }),
+            {
+                name: "Question",
+                enabled: process.env.NODE_ENV === "development",
+                trace: process.env.NODE_ENV === "development",
+            }
+        ),
         {
             name: "question",
             partialize: (state: QuestionStore) => {
@@ -69,14 +72,19 @@ export const questionStore = create<QuestionStore>()(
                 // replace blob urls with ""
                 Object.values(state.listQuestions).forEach(questions => {
                     questions.forEach(question => {
-                    if (question.type === "page" && question.content.picture.startsWith("blob:")) {
+                        if (question.type === "page") {
+                            if (question.content.picture.startsWith("blob:")) {
                                 question.content.picture = "";
                             }
+                        }
                         if (question.type === "images") {
                             question.content.variants.forEach(variant => {
                                 if (variant.extendedText.startsWith("blob:")) {
                                     variant.extendedText = "";
                                 }
+                                if (variant.originalImageUrl.startsWith("blob:")) {
+                                    variant.originalImageUrl = "";
+                                }
                             });
                         }
                         if (question.type === "varimg") {
@@ -84,6 +92,9 @@ export const questionStore = create<QuestionStore>()(
                                 if (variant.extendedText.startsWith("blob:")) {
                                     variant.extendedText = "";
                                 }
+                                if (variant.originalImageUrl.startsWith("blob:")) {
+                                    variant.originalImageUrl = "";
+                                }
                             });
                         }
                     });
@@ -123,32 +134,12 @@ export const updateQuestionsListDragAndDrop = (
 export const updateVariants = (
     quizId: number,
     index: number,
-  variants: QuestionVariant[]
+    variants: ImageQuestionVariant[] | QuestionVariant[],
-) => {
+) => setProducedState(state => {
-  const listQuestions = { ...questionStore.getState()["listQuestions"] };
+    const question = state.listQuestions[quizId][index];
 
-  switch (listQuestions[quizId][index].type) {
+    if ("variants" in question.content) question.content.variants = variants;
-    case "emoji":
+});
-      const emojiState = listQuestions[quizId][index] as QuizQuestionEmoji;
-      emojiState.content.variants = variants;
-      return questionStore.setState({ listQuestions });
-
-    case "images":
-      const imagesState = listQuestions[quizId][index] as QuizQuestionImages;
-      imagesState.content.variants = variants;
-      return questionStore.setState({ listQuestions });
-
-    case "variant":
-      const variantState = listQuestions[quizId][index] as QuizQuestionVariant;
-      variantState.content.variants = variants;
-      return questionStore.setState({ listQuestions });
-
-    case "varimg":
-      const varImgState = listQuestions[quizId][index] as QuizQuestionVarImg;
-      varImgState.content.variants = variants;
-      return questionStore.setState({ listQuestions });
-  }
-};
 
 export const createQuestion = (
     quizId: number,
@@ -191,8 +182,8 @@ export const createQuestion = (
 export const copyQuestion = (quizId: number, copiedQuestionIndex: number) => {
     const listQuestions = { ...questionStore.getState()["listQuestions"] };
 
-  const copiedQuiz = listQuestions[quizId][copiedQuestionIndex]
+    const copiedQuiz = listQuestions[quizId][copiedQuestionIndex];
-  copiedQuiz.id = getRandom()
+    copiedQuiz.id = getRandom();
     listQuestions[quizId].splice(
         copiedQuestionIndex,
         0,
@@ -230,6 +221,7 @@ export const findQuestionById = (quizId: number) => {
             found = { quiz, index };
             return true;
         }
+        return false;
     });
     return found;
 };
@@ -239,3 +231,10 @@ function getRandom() {
     const max = Math.floor(10000000);
     return Math.floor(Math.random() * (max - min)) + min;
 }
+
+function setProducedState<A extends string | { type: unknown; }>(
+    recipe: (state: QuestionStore) => void,
+    action?: A,
+) {
+    questionStore.setState(state => produce(state, recipe), false, action);
+}

src/ui_kit/Modal/CropModal.tsx

@@ -1,3 +1,5 @@
+import { CropIcon } from "@icons/CropIcon";
+import { ResetIcon } from "@icons/ResetIcon";
 import {
     Box,
     Button,
@@ -10,15 +12,11 @@ import {
     useMediaQuery,
     useTheme,
 } from "@mui/material";
-import React, { FC, useEffect, useRef, useState } from "react";
+import { closeCropModal, resetToOriginalImage, setCropModalImageUrl, useCropModalStore } from "@root/cropModal";
+import { FC, useRef, useState } from "react";
 import ReactCrop, { Crop, PixelCrop } from "react-image-crop";
-
-import { canvasPreview } from "./utils/canvasPreview";
-
-import { ResetIcon } from "@icons/ResetIcon";
-
-import { CropIcon } from "@icons/CropIcon";
 import "react-image-crop/dist/ReactCrop.css";
+import { canvasPreview } from "./utils/canvasPreview";
 
 
 const styleSlider: SxProps<Theme> = {
@@ -45,45 +43,25 @@ const styleSlider: SxProps<Theme> = {
     },
 };
 
-interface Iprops {
+interface Props {
-    opened: boolean;
+    onSaveImageClick?: (imageUrl: string) => void;
-    onClose: () => void;
-    picture?: string;
-    onCropPress?: (imageUrl: string) => void;
 }
 
-export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress }) => {
+export const CropModal: FC<Props> = ({ onSaveImageClick }) => {
     const theme = useTheme();
+    const isCropModalOpen = useCropModalStore(state => state.isCropModalOpen);
+    const imageUrl = useCropModalStore(state => state.imageUrl);
     const [crop, setCrop] = useState<Crop>();
     const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
     const [darken, setDarken] = useState(0);
     const [rotate, setRotate] = useState(0);
-    const [imgSrc, setImgSrc] = useState("");
     const [width, setWidth] = useState<number>(0);
-    const blobUrlRef = useRef("");
+    const cropImageElementRef = useRef<HTMLImageElement>(null);
-    const fileInputRef = useRef<HTMLInputElement>(null);
-    const imgRef = useRef<HTMLImageElement>(null);
     const isMobile = useMediaQuery(theme.breakpoints.down(786));
 
-    useEffect(() => {
+    const handleCropClick = async () => {
-        if (picture) setImgSrc(picture);
-    }, [picture]);
-
-    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (!event.target.files?.length) return;
-
-        setCrop(undefined);
-        try {
-            const url = URL.createObjectURL(event.target.files[0]);
-            setImgSrc(url);
-        } catch (error) {
-            console.error("Failed to create object url for image", error);
-        }
-    };
-
-    const handleCropClick = () => {
         if (!completedCrop) throw new Error("No completed crop");
-        if (!imgRef.current) throw new Error("No image");
+        if (!cropImageElementRef.current) throw new Error("No image");
 
         const canvasCopy = document.createElement("canvas");
         const ctx = canvasCopy.getContext("2d");
@@ -93,31 +71,34 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
         canvasCopy.height = completedCrop.height;
         ctx.filter = `brightness(${100 - darken}%)`;
 
-        canvasPreview(imgRef.current, canvasCopy, completedCrop, rotate);
+        await canvasPreview(cropImageElementRef.current, canvasCopy, completedCrop, rotate);
 
         canvasCopy.toBlob((blob) => {
             if (!blob) {
                 throw new Error("Failed to create blob");
             }
-            if (blobUrlRef.current) {
+            const newImageUrl = URL.createObjectURL(blob);
-                URL.revokeObjectURL(blobUrlRef.current);
-            }
-            blobUrlRef.current = URL.createObjectURL(blob);
 
-            setImgSrc(blobUrlRef.current);
+            setCropModalImageUrl(newImageUrl);
-            onCropPress?.(blobUrlRef.current);
             setCrop(undefined);
+            setCompletedCrop(undefined);
         });
     };
 
+    function handleSaveClick() {
+        if (imageUrl) onSaveImageClick?.(imageUrl);
+        setCrop(undefined);
+        setCompletedCrop(undefined);
+        closeCropModal();
+    }
+
     const getImageSize = () => {
-        if (imgRef.current) {
+        if (cropImageElementRef.current) {
-            const imageWidth = imgRef.current.naturalWidth;
+            const imageWidth = cropImageElementRef.current.naturalWidth;
-            const imageHeight = imgRef.current.naturalHeight;
+            const imageHeight = cropImageElementRef.current.naturalHeight;
 
             const aspect = imageWidth / imageHeight;
 
-
             if (aspect <= 1.333) {
                 setWidth(240);
             }
@@ -130,14 +111,10 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
         }
     };
 
-    function handleSaveClick() {
-        onClose();
-    }
-
     return (
         <Modal
-            open={opened}
+            open={isCropModalOpen}
-            onClose={onClose}
+            onClose={closeCropModal}
             aria-labelledby="modal-modal-title"
             aria-describedby="modal-modal-description"
         >
@@ -163,7 +140,7 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
                         justifyContent: "center",
                     }}
                 >
-                    {imgSrc && (
+                    {imageUrl && (
                         <ReactCrop
                             crop={crop}
                             onChange={(_, percentCrop) => setCrop(percentCrop)}
@@ -175,9 +152,9 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
                         >
                             <img
                                 onLoad={getImageSize}
-                                ref={imgRef}
+                                ref={cropImageElementRef}
                                 alt="Crop me"
-                                src={imgSrc}
+                                src={imageUrl}
                                 style={{
                                     filter: `brightness(${100 - darken}%)`,
                                     transform: ` rotate(${rotate}deg)`,
@@ -271,7 +248,7 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
                         }}
                     >Сохранить</Button>
                     <Button
-                        onClick={() => fileInputRef.current?.click()}
+                        onClick={resetToOriginalImage}
                         disableRipple
                         sx={{
                             width: "215px",
@@ -284,18 +261,12 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
                         }}
                     >
                         Загрузить оригинал
-                        <input
-                            style={{ display: "none", zIndex: "-999" }}
-                            ref={fileInputRef}
-                            type="file"
-                            accept="image/*"
-                            onChange={handleFileChange}
-                        />
                     </Button>
                     <Button
                         onClick={handleCropClick}
                         disableRipple
                         variant="contained"
+                        disabled={!completedCrop}
                         sx={{
                             padding: "10px 20px",
                             borderRadius: "8px",

src/ui_kit/Modal/ImageCrop.tsx

@@ -1,13 +1,14 @@
 import { Box, Button } from "@mui/material";
-import { FC, useState } from "react";
+import { FC } from "react";
 import { CropModal } from "./CropModal";
+import { openCropModal } from "@root/cropModal";
 
 const ImageCrop: FC = () => {
-  const [opened, setOpened] = useState<boolean>(false);
+    
   return (
     <Box>
-      <Button onClick={() => setOpened(true)}>Открыть модалку</Button>
+      <Button onClick={() => openCropModal("", "")}>Открыть модалку</Button>
-      <CropModal opened={opened} onClose={() => setOpened(false)} />
+      <CropModal />
     </Box>
   );
 };